feat: add close pending request

app/components/Analyst/PendingChangeRequest/ClosePendingRequestModal.tsx

@@ -1,16 +1,30 @@
+import React, { useState } from 'react';
 import Modal from 'components/Modal';
+import { FormBase } from 'components/Form';
+import pendingChangeRequestCancel from 'formSchema/analyst/pendingChangeRequestCancel';
+import pendingChangeRequestCancelUiSchema from 'formSchema/uiSchema/analyst/pendingChangeRequestCancelUiSchema';
+import styled from 'styled-components';
 
 interface Props {
   isOpen: boolean;
   onCancel?: Function;
   onSave: Function;
 }
 
+const StyledFormBase = styled(FormBase)`
+  min-width: 350px;
+  & .radio-widget {
+    margin-left: ${(props) => props.theme.spacing.xlarge};
+  }
+`;
+
 const ClosePendingRequestModal: React.FC<Props> = ({
   isOpen,
   onCancel = () => {},
   onSave,
 }) => {
+  const [formData, setFormData] = useState(null);
+
   return (
     <Modal
       id="pending-change-request-modal"
@@ -22,7 +36,8 @@ const ClosePendingRequestModal: React.FC<Props> = ({
         {
           id: 'pending-request-change-save-btn',
           label: 'Save',
-          onClick: () => onSave(),
+          onClick: () => onSave(formData.comment),
+          disabled: !formData?.comment,
         },
         {
           id: 'pending-request-change-cancel-btn',
@@ -32,7 +47,15 @@ const ClosePendingRequestModal: React.FC<Props> = ({
         },
       ]}
     >
-      <p>Please select the appropriate option below</p>
+      <StyledFormBase
+        schema={pendingChangeRequestCancel}
+        uiSchema={pendingChangeRequestCancelUiSchema}
+        formData={formData}
+        onChange={(e) => setFormData(e.formData)}
+        // Pass children to hide submit button
+        // eslint-disable-next-line react/no-children-prop
+        children
+      />
     </Modal>
   );
 };

app/components/Analyst/PendingChangeRequest/PendingChangeRequest.tsx

@@ -5,12 +5,14 @@ import { useState } from 'react';
 import useModal from 'lib/helpers/useModal';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCommentDots } from '@fortawesome/free-solid-svg-icons';
+import * as Sentry from '@sentry/nextjs';
 import PendingChangeRequestModal from './PendingChangeRequestModal';
 import ClosePendingRequestModal from './ClosePendingRequestModal';
 
 const StyledCheckbox = styled.input`
   transform: scale(1.5);
   transform-origin: left;
+  cursor: pointer;
 `;
 
 const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
@@ -41,15 +43,19 @@ const PendingChangeRequest = ({ application }) => {
   const { applicationPendingChangeRequestsByApplicationId, rowId } =
     queryFragment;
 
-  const [comment, setComment] = useState(
-    applicationPendingChangeRequestsByApplicationId?.nodes?.[0]?.comment || ''
-  );
-
   const [isPending, setIsPending] = useState(
     applicationPendingChangeRequestsByApplicationId?.nodes?.[0]?.isPending ||
       false
   );
 
+  const [comment, setComment] = useState(
+    isPending
+      ? applicationPendingChangeRequestsByApplicationId?.nodes?.[0]?.comment
+      : null
+  );
+
+  const [isUpdateMode, setIsUpdateMode] = useState(false);
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (event.key === 'Enter' || event.key === ' ') {
       pendingChangeRequestModal.open();
@@ -58,20 +64,29 @@ const PendingChangeRequest = ({ application }) => {
 
   const [createPendingChangeRequest] = useCreatePendingChangeRequestMutation();
 
-  const handleChangePendingRequest = () => {
+  const handleChangePendingRequest = (
+    isPendingRequest: boolean,
+    reasonForChange: string
+  ) => {
     createPendingChangeRequest({
       variables: {
         input: {
           applicationPendingChangeRequest: {
             applicationId: rowId,
-            comment,
-            isPending: !isPending,
+            comment: reasonForChange,
+            isPending: isPendingRequest,
           },
         },
       },
       onCompleted: () => {
-        setIsPending(!isPending);
-        pendingChangeRequestModal.close();
+        setIsPending(isPendingRequest);
+        setComment(isPendingRequest ? reasonForChange : null);
+      },
+      onError: (err: any) => {
+        Sentry.captureException({
+          name: 'Create Pending Change Request Error',
+          message: err.message,
+        });
       },
     });
   };
@@ -81,6 +96,7 @@ const PendingChangeRequest = ({ application }) => {
       <StyledCheckbox
         type="checkbox"
         checked={isPending}
+        data-testid="pending-change-request-checkbox"
         onChange={(e) => {
           if (e.target.checked) {
             pendingChangeRequestModal.open();
@@ -89,43 +105,52 @@ const PendingChangeRequest = ({ application }) => {
           }
         }}
       />
-      <div
-        role="button"
-        tabIndex={0}
-        onClick={pendingChangeRequestModal.open}
-        onKeyDown={handleKeyDown}
-        aria-labelledby="Description of Statuses and Triggers"
-        style={{ cursor: 'pointer' }}
-        data-testid="status-information-icon"
-      >
-        <StyledFontAwesomeIcon
-          icon={faCommentDots}
-          fixedWidth
-          size="lg"
-          color="#345FA9"
-        />
-      </div>
+      {isPending && (
+        <div
+          role="button"
+          tabIndex={0}
+          onClick={() => {
+            setIsUpdateMode(true);
+            pendingChangeRequestModal.open();
+          }}
+          onKeyDown={handleKeyDown}
+          aria-labelledby="Comments on pending change request"
+          style={{ cursor: 'pointer' }}
+          data-testid="pending-change-request-comments"
+        >
+          <StyledFontAwesomeIcon
+            icon={faCommentDots}
+            fixedWidth
+            size="lg"
+            color="#345FA9"
+          />
+        </div>
+      )}
       <PendingChangeRequestModal
         {...pendingChangeRequestModal}
-        onSave={handleChangePendingRequest}
-        value={comment}
+        onSave={(reasonForChange: string) => {
+          handleChangePendingRequest(
+            !isUpdateMode ? true : isPending,
+            reasonForChange
+          );
+          pendingChangeRequestModal.close();
+        }}
+        value={isPending ? comment : null}
         onCancel={() => {
+          if (!isUpdateMode) handleChangePendingRequest(!isPending, comment);
+          setIsUpdateMode(false);
           pendingChangeRequestModal.close();
         }}
-        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-          setComment(e.target.value)
-        }
       />
       <ClosePendingRequestModal
         {...closePendingRequestModal}
-        onSave={handleChangePendingRequest}
-        value={comment}
+        onSave={(reasonForChange) => {
+          handleChangePendingRequest(false, reasonForChange);
+          closePendingRequestModal.close();
+        }}
         onCancel={() => {
           closePendingRequestModal.close();
         }}
-        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-          setComment(e.target.value)
-        }
       />
     </>
   );

app/components/Analyst/PendingChangeRequest/PendingChangeRequestModal.tsx

@@ -1,32 +1,33 @@
+import React, { useState, useEffect } from 'react';
 import Modal from 'components/Modal';
+import pendingChangeRequestComment from 'formSchema/analyst/pendingChangeRequestComment';
+import { FormBase } from 'components/Form';
+import pendingChangeRequestCommentUiSchema from 'formSchema/uiSchema/analyst/pendingChangeRequestCommentUiSchema';
 import styled from 'styled-components';
 
-const StyledTextArea = styled.textarea`
-  width: 100%;
-  min-width: 500px;
-  height: 126px;
-  resize: none;
-  margin-top: 16px;
-  margin-bottom: 16px;
-`;
-
 interface Props {
   isOpen: boolean;
-  maxLength?: number;
   onCancel?: Function;
   onSave: Function;
-  onChange: Function;
   value: string;
 }
 
+const StyledFormBase = styled(FormBase)`
+  min-width: 600px;
+`;
+
 const PendingChangeRequestModal: React.FC<Props> = ({
   isOpen,
-  maxLength = 100,
   onCancel = () => {},
   onSave,
-  onChange,
   value,
 }) => {
+  const [formData, setFormData] = useState({ comment: value });
+
+  useEffect(() => {
+    setFormData({ comment: value });
+  }, [value]);
+
   return (
     <Modal
       id="pending-change-request-modal"
@@ -38,7 +39,8 @@ const PendingChangeRequestModal: React.FC<Props> = ({
         {
           id: 'pending-request-change-save-btn',
           label: 'Save comment',
-          onClick: () => onSave(),
+          onClick: () => onSave(formData.comment),
+          disabled: value === formData.comment,
         },
         {
           id: 'pending-request-change-cancel-btn',
@@ -48,11 +50,14 @@ const PendingChangeRequestModal: React.FC<Props> = ({
         },
       ]}
     >
-      <StyledTextArea
-        maxLength={maxLength}
-        value={value}
-        data-testid="comments-for-change"
-        onChange={(e) => onChange(e)}
+      <StyledFormBase
+        schema={pendingChangeRequestComment}
+        uiSchema={pendingChangeRequestCommentUiSchema}
+        formData={formData}
+        onChange={(e) => setFormData(e.formData)}
+        // Pass children to hide submit button
+        // eslint-disable-next-line react/no-children-prop
+        children
       />
     </Modal>
   );

app/components/Modal.tsx

@@ -20,6 +20,7 @@ interface ActionProps {
   label: string;
   onClick: Function;
   variant?: 'primary' | 'secondary';
+  disabled?: boolean;
 }
 
 const Modal: React.FC<Props> = ({
@@ -66,6 +67,7 @@ const Modal: React.FC<Props> = ({
             key={action.label}
             onClick={action.onClick}
             variant={action.variant || 'primary'}
+            disabled={action.disabled}
           >
             {action.label}
           </Button>

app/formSchema/analyst/pendingChangeRequestCancel.ts

@@ -0,0 +1,17 @@
+import { RJSFSchema } from '@rjsf/utils';
+
+const pendingChangeRequestCancel: RJSFSchema = {
+  title: ' ',
+  description: '',
+  type: 'object',
+  required: ['comment'],
+  properties: {
+    comment: {
+      title: 'Please select the appropriate option below',
+      type: 'string',
+      enum: ['Yes, change request completed', 'Yes, change request cancelled'],
+    },
+  },
+};
+
+export default pendingChangeRequestCancel;

app/formSchema/analyst/pendingChangeRequestComment.ts

@@ -0,0 +1,16 @@
+import { RJSFSchema } from '@rjsf/utils';
+
+const pendingChangeRequestComment: RJSFSchema = {
+  title: ' ',
+  description: '',
+  type: 'object',
+  required: [],
+  properties: {
+    comment: {
+      title: '',
+      type: 'string',
+    },
+  },
+};
+
+export default pendingChangeRequestComment;

app/formSchema/uiSchema/analyst/pendingChangeRequestCancelUiSchema.ts

@@ -0,0 +1,9 @@
+const pendingChangeRequestCommentUiSchema = {
+  'ui:order': ['comment'],
+  'ui:title': '',
+  comment: {
+    'ui:widget': 'RadioWidget',
+  },
+};
+
+export default pendingChangeRequestCommentUiSchema;

app/formSchema/uiSchema/analyst/pendingChangeRequestCommentUiSchema.ts

@@ -0,0 +1,15 @@
+const pendingChangeRequestCommentUiSchema = {
+  'ui:order': ['comment'],
+  comment: {
+    'ui:widget': 'TextAreaWidget',
+    'ui:title': '',
+    'ui:options': {
+      boldTitle: true,
+      maxLength: 100,
+      showCharacterCount: true,
+      label: false,
+    },
+  },
+};
+
+export default pendingChangeRequestCommentUiSchema;