chore: move change request pending to cbc header

app/backend/lib/excel_import/cbc_project.ts

@@ -19,6 +19,18 @@ const createCbcProjectMutation = `
   }
 `;
 
+const createCbcPendingChangeRequestMutation = `
+  mutation createCbcPendingChangeRequestMutation(
+    $input: CreateCbcPendingChangeRequestInput!
+  ) {
+    createCbcPendingChangeRequest(input: $input) {
+      cbcApplicationPendingChangeRequest {
+        isPending
+        comment
+      }
+    }
+  }`;
+
 const findCbcQuery = `
   query findCbc($projectNumber: Int!) {
     cbcByProjectNumber (projectNumber: $projectNumber) {
@@ -32,6 +44,16 @@ const findCbcQuery = `
           sharepointTimestamp
         }
       }
+      cbcApplicationPendingChangeRequestsByCbcId(
+        orderBy: CREATED_AT_DESC
+        first: 1
+      ) {
+        nodes {
+          isPending
+          updatedAt
+          cbcId
+        }
+      }
     }
   }
 `;
@@ -308,6 +330,7 @@ const LoadCbcProjectData = async (wb, sheet, sharepointTimestamp, req) => {
       },
       req
     );
+    let createCbcResult = null;
     if (
       findCbcProject.data?.cbcByProjectNumber?.cbcDataByProjectNumber?.nodes
         .length > 0
@@ -329,7 +352,7 @@ const LoadCbcProjectData = async (wb, sheet, sharepointTimestamp, req) => {
       );
     } else {
       // create cbc
-      const createCbcResult = await performQuery(
+      createCbcResult = await performQuery(
         createCbcMutation,
         {
           input: {
@@ -357,6 +380,39 @@ const LoadCbcProjectData = async (wb, sheet, sharepointTimestamp, req) => {
         req
       );
     }
+    let changeRequestInput = null;
+    const existingChangeRequest =
+      findCbcProject.data?.cbcByProjectNumber
+        ?.cbcApplicationPendingChangeRequestsByCbcId?.nodes?.[0];
+
+    if (existingChangeRequest) {
+      // If existing change request is different from the spreadsheet import override
+      if (
+        existingChangeRequest.isPending !==
+        (project.changeRequestPending === 'Yes')
+      ) {
+        changeRequestInput = {
+          _cbcId: existingChangeRequest.cbcId,
+          _isPending: project.changeRequestPending === 'Yes',
+          _comment: null,
+        };
+      }
+    } else if (project.changeRequestPending === 'Yes') {
+      // Only persist change request if it is pending
+      changeRequestInput = {
+        _cbcId: createCbcResult.data.createCbc?.cbc?.rowId,
+        _isPending: true,
+        _comment: null,
+      };
+    }
+    if (changeRequestInput !== null)
+      await performQuery(
+        createCbcPendingChangeRequestMutation,
+        {
+          input: changeRequestInput,
+        },
+        req
+      );
   });
 
   return {

app/components/Analyst/ApplicationHeader.tsx

@@ -118,7 +118,7 @@ const ApplicationHeader: React.FC<Props> = ({ query }) => {
           ...AssignPackage_query
           ...EditProjectDescription_query
           ...AssignProjectType_query
-          ...PendingChangeRequest_query
+          ...PendingChangeRequest_query_application
         }
         ...AssignLead_query
         allApplicationStatusTypes(

app/components/Analyst/CBC/CbcHeader.tsx

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import { graphql, useFragment } from 'react-relay';
 import CbcChangeStatus from './CbcChangeStatus';
 import AssignField from './AssignField';
+import PendingChangeRequest from '../PendingChangeRequest/PendingChangeRequest';
 
 const StyledCallout = styled.div`
   margin-bottom: 0.5em;
@@ -33,7 +34,7 @@ const StyledDiv = styled.div`
 `;
 
 const StyledLabel = styled.label`
-  min-width: 130px;
+  min-width: 210px;
   color: ${(props) => props.theme.color.components};
   padding-right: 1rem;
   direction: rtl;
@@ -49,6 +50,10 @@ const StyledAssign = styled(StyledItem)`
   margin: 8px 0 0 0;
 `;
 
+const StyledPendingChangeRequests = styled(StyledItem)`
+  margin: 8px 0;
+`;
+
 interface Props {
   query: any;
 }
@@ -75,6 +80,7 @@ const CbcHeader: React.FC<Props> = ({ query }) => {
           }
           ...CbcChangeStatus_query
           ...AssignField_query
+          ...PendingChangeRequest_query_cbc
         }
       }
     `,
@@ -133,6 +139,12 @@ const CbcHeader: React.FC<Props> = ({ query }) => {
             cbc={cbcByRowId}
           />
         </StyledAssign>
+        <StyledPendingChangeRequests>
+          <StyledLabel htmlFor="assign-project-type">
+            Pending Change Request
+          </StyledLabel>
+          <PendingChangeRequest application={cbcByRowId} isCbc />
+        </StyledPendingChangeRequests>
       </StyledDiv>
     </StyledCallout>
   );

app/components/Analyst/PendingChangeRequest/PendingChangeRequest.tsx

@@ -1,11 +1,14 @@
+import React, { useState } from 'react';
 import { graphql, useFragment } from 'react-relay';
 import { useCreatePendingChangeRequestMutation } from 'schema/mutations/application/createPendingChangeRequest';
 import styled from 'styled-components';
-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 { useCreateCbcPendingChangeRequestMutation } from 'schema/mutations/application/createCbcPendingChangeRequest';
+import { CreatePendingChangeRequestInput } from '__generated__/createPendingChangeRequestMutation.graphql';
+import { CreateCbcPendingChangeRequestInput } from '__generated__/createCbcPendingChangeRequestMutation.graphql';
 import PendingChangeRequestModal from './PendingChangeRequestModal';
 import ClosePendingRequestModal from './ClosePendingRequestModal';
 
@@ -19,39 +22,51 @@ const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
   margin-left: 8px;
 `;
 
-const PendingChangeRequest = ({ application }) => {
-  const queryFragment = useFragment(
-    graphql`
-      fragment PendingChangeRequest_query on Application {
-        rowId
-        applicationPendingChangeRequestsByApplicationId(
-          orderBy: CREATED_AT_DESC
-          first: 1
-        ) {
-          nodes {
-            comment
-            isPending
+const PendingChangeRequest = ({ application, isCbc = false }) => {
+  const fragment = isCbc
+    ? graphql`
+        fragment PendingChangeRequest_query_cbc on Cbc {
+          rowId
+          cbcApplicationPendingChangeRequestsByCbcId(
+            orderBy: CREATED_AT_DESC
+            first: 1
+          ) {
+            nodes {
+              comment
+              isPending
+            }
           }
         }
-      }
-    `,
-    application
-  );
+      `
+    : graphql`
+        fragment PendingChangeRequest_query_application on Application {
+          rowId
+          applicationPendingChangeRequestsByApplicationId(
+            orderBy: CREATED_AT_DESC
+            first: 1
+          ) {
+            nodes {
+              comment
+              isPending
+            }
+          }
+        }
+      `;
+
+  const queryFragment = useFragment(fragment, application);
 
   const pendingChangeRequestModal = useModal();
   const closePendingRequestModal = useModal();
-  const { applicationPendingChangeRequestsByApplicationId, rowId } =
-    queryFragment;
+  const pendingRequests = isCbc
+    ? queryFragment?.cbcApplicationPendingChangeRequestsByCbcId
+    : queryFragment?.applicationPendingChangeRequestsByApplicationId;
 
   const [isPending, setIsPending] = useState(
-    applicationPendingChangeRequestsByApplicationId?.nodes?.[0]?.isPending ||
-      false
+    pendingRequests?.nodes?.[0]?.isPending || false
   );
 
   const [comment, setComment] = useState(
-    isPending
-      ? applicationPendingChangeRequestsByApplicationId?.nodes?.[0]?.comment
-      : null
+    isPending ? pendingRequests?.nodes?.[0]?.comment : null
   );
 
   const [isUpdateMode, setIsUpdateMode] = useState(false);
@@ -63,18 +78,28 @@ const PendingChangeRequest = ({ application }) => {
   };
 
   const [createPendingChangeRequest] = useCreatePendingChangeRequestMutation();
+  const [createCbcPendingChangeRequest] =
+    useCreateCbcPendingChangeRequestMutation();
+
+  const handleChangePendingRequest = (isPendingRequest, reasonForChange) => {
+    const createRequest = isCbc
+      ? createCbcPendingChangeRequest
+      : createPendingChangeRequest;
+
+    const rowParam = isCbc
+      ? { _cbcId: queryFragment.rowId }
+      : { _applicationId: queryFragment.rowId };
+
+    const input = {
+      ...rowParam,
+      _isPending: isPendingRequest,
+      _comment: reasonForChange,
+    };
 
-  const handleChangePendingRequest = (
-    isPendingRequest: boolean,
-    reasonForChange: string
-  ) => {
-    createPendingChangeRequest({
+    createRequest({
       variables: {
-        input: {
-          _applicationId: rowId,
-          _isPending: isPendingRequest,
-          _comment: reasonForChange,
-        },
+        input: input as CreateCbcPendingChangeRequestInput &
+          CreatePendingChangeRequestInput,
       },
       onCompleted: () => {
         setIsPending(isPendingRequest);

app/formSchema/analyst/cbc/tombstone.ts

@@ -27,10 +27,6 @@ const cbcTombstone: RJSFSchema = {
       type: 'string',
       title: 'Project Status',
     },
-    changeRequestPending: {
-      type: 'boolean',
-      title: 'Change Request Pending',
-    },
     projectTitle: {
       type: 'string',
       title: 'Project Title',

app/pages/analyst/cbc/[cbcId].tsx

@@ -80,7 +80,6 @@ const Cbc = ({
     phase: jsonData.phase,
     intake: jsonData.intake,
     projectStatus: jsonData.projectStatus,
-    changeRequestPending: jsonData.changeRequestPending,
     projectTitle: jsonData.projectTitle,
     projectDescription: jsonData.projectDescription,
     applicantContractualName: jsonData.applicantContractualName,

app/schema/mutations/application/createCbcPendingChangeRequest.ts

@@ -0,0 +1,25 @@
+import { graphql } from 'react-relay';
+import { createCbcPendingChangeRequestMutation } from '__generated__/createCbcPendingChangeRequestMutation.graphql';
+import useMutationWithErrorMessage from '../useMutationWithErrorMessage';
+
+const mutation = graphql`
+  mutation createCbcPendingChangeRequestMutation(
+    $input: CreateCbcPendingChangeRequestInput!
+  ) {
+    createCbcPendingChangeRequest(input: $input) {
+      cbcApplicationPendingChangeRequest {
+        isPending
+        comment
+      }
+    }
+  }
+`;
+
+const useCreateCbcPendingChangeRequestMutation = () =>
+  useMutationWithErrorMessage<createCbcPendingChangeRequestMutation>(
+    mutation,
+    () =>
+      'An error occurred while attempting to create Cbc pending change request.'
+  );
+
+export { mutation, useCreateCbcPendingChangeRequestMutation };