feat: show added and removed communities in history

app/components/Analyst/CBC/History/CbcHistoryCommunitiesTable.tsx

@@ -0,0 +1,81 @@
+import styled from 'styled-components';
+
+interface Props {
+  action: string;
+  communities: any[];
+}
+
+const StyledCommunitiesContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const StyledLeftContainer = styled.div`
+  padding-right: 2%;
+  width: 250px;
+`;
+
+const StyledTable = styled.table`
+  th {
+    border: none;
+  }
+  tbody > tr {
+    border-bottom: thin dashed;
+    border-color: ${(props) => props.theme.color.borderGrey};
+    td {
+      width: 200px;
+      max-width: 200px;
+      border: none;
+    }
+  }
+`;
+
+const StyledIdCell = styled.td`
+  width: 100px !important;
+  max-width: 100px;
+`;
+
+const CbcHistoryCommunitiesTable: React.FC<Props> = ({
+  action,
+  communities,
+}) => {
+  return (
+    <StyledCommunitiesContainer
+      style={{ display: 'flex', alignItems: 'center' }}
+    >
+      <StyledLeftContainer>{`${action} community location data`}</StyledLeftContainer>
+      <div>
+        <StyledTable>
+          <thead>
+            <tr>
+              <th>Economic Region</th>
+              <th>Regional District</th>
+              <th>Geographic Name</th>
+              <th>Type</th>
+              <th>ID</th>
+            </tr>
+          </thead>
+          <tbody>
+            {communities?.map((community, index) => (
+              <tr
+                // eslint-disable-next-line react/no-array-index-key
+                key={`${action}-${community.communities_source_data_id}-${index}`}
+                data-key={`${action}-row-${index}`}
+              >
+                <td>{community.economic_region}</td>
+                <td>{community.regional_district}</td>
+                <td>{community.bc_geographic_name}</td>
+                <td>{community.geographic_type}</td>
+                <StyledIdCell>
+                  {community.communities_source_data_id}
+                </StyledIdCell>
+              </tr>
+            ))}
+          </tbody>
+        </StyledTable>
+      </div>
+    </StyledCommunitiesContainer>
+  );
+};
+
+export default CbcHistoryCommunitiesTable;

app/components/Analyst/CBC/History/CbcHistoryContent.tsx

@@ -2,6 +2,7 @@ import HistoryDetails from 'components/Analyst/History/HistoryDetails';
 import cbcData from 'formSchema/uiSchema/history/cbcData';
 import { DateTime } from 'luxon';
 import styled from 'styled-components';
+import CbcHistoryCommunitiesTable from './CbcHistoryCommunitiesTable';
 
 const StyledContent = styled.span`
   display: flex;
@@ -72,10 +73,23 @@ const HistoryContent = ({
             'updated_at',
             'change_reason',
             'cbc_data_id',
+            'locations',
           ]}
           diffSchema={cbcData}
           overrideParent="cbcData"
         />
+        {json?.locations?.added?.length > 0 && (
+          <CbcHistoryCommunitiesTable
+            action="Added"
+            communities={json?.locations?.added}
+          />
+        )}
+        {json?.locations?.removed?.length > 0 && (
+          <CbcHistoryCommunitiesTable
+            action="Deleted"
+            communities={json?.locations?.removed}
+          />
+        )}
         {op === 'UPDATE' && changeReason !== '' && (
           <ChangeReason reason={changeReason} />
         )}

app/components/Analyst/CBC/History/CbcHistoryTable.tsx

@@ -65,6 +65,10 @@ const CbcHistoryTable: React.FC<Props> = ({ query }) => {
             json={{
               ...historyItem.record?.json_data,
               project_number: historyItem.record?.project_number,
+              locations: {
+                added: historyItem.record?.added_communities,
+                removed: historyItem.record?.deleted_communities,
+              },
             }}
             prevJson={{
               ...historyItem.oldRecord?.json_data,

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

@@ -9,7 +9,7 @@ import CbcForm from 'components/Analyst/CBC/CbcForm';
 import { ChangeModal } from 'components/Analyst';
 import styled from 'styled-components';
 import ReviewTheme from 'components/Review/ReviewTheme';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useUpdateCbcDataAndInsertChangeRequest } from 'schema/mutations/cbc/updateCbcDataAndInsertChangeReason';
 import review from 'formSchema/analyst/cbc/review';
 import reviewUiSchema from 'formSchema/uiSchema/cbc/reviewUiSchema';
@@ -25,7 +25,6 @@ import {
 import customValidate, { CBC_WARN_COLOR } from 'utils/cbcCustomValidator';
 import CbcRecordLock from 'components/Analyst/CBC/CbcRecordLock';
 import useModal from 'lib/helpers/useModal';
-import { useUpdateCbcCommunityDataMutationMutation } from 'schema/mutations/cbc/updateCbcCommunityData';
 
 const getCbcQuery = graphql`
   query CbcIdQuery($rowId: Int!) {
@@ -248,42 +247,12 @@ const Cbc = ({
   }, [query, isCbcAdmin, editFeatureEnabled, cbcCommunitiesData]);
 
   const [updateFormData] = useUpdateCbcDataAndInsertChangeRequest();
-  const [updateCbcCommunitySourceData] =
-    useUpdateCbcCommunityDataMutationMutation();
 
   const handleChangeRequestModal = () => {
     setChangeReason(null);
     changeModal.open();
   };
 
-  const handleUpdateCommunitySource = useCallback(() => {
-    updateCbcCommunitySourceData({
-      variables: {
-        input: {
-          _projectId: rowId,
-          _communityIdsToAdd: addedCommunities,
-          _communityIdsToArchive: removedCommunities,
-        },
-      },
-      debounceKey: 'cbc_update_community_source_data',
-      onCompleted: (response) => {
-        setAddedCommunities([]);
-        setRemovedCommunities([]);
-        setResponseCommunityData(
-          response.editCbcProjectCommunities.cbcProjectCommunities.map(
-            (proj) => proj.communitiesSourceDataByCommunitiesSourceDataId
-          )
-        );
-      },
-    });
-  }, [
-    addedCommunities,
-    removedCommunities,
-    updateCbcCommunitySourceData,
-    rowId,
-    setResponseCommunityData,
-  ]);
-
   const handleSubmit = () => {
     const {
       geographicNames,
@@ -317,12 +286,23 @@ const Cbc = ({
               query?.cbcByRowId?.cbcDataByCbcId?.edges[0].node.rowId || null,
           },
         },
+        inputCbcProjectCommunities: {
+          _projectId: rowId,
+          _communityIdsToAdd: addedCommunities,
+          _communityIdsToArchive: removedCommunities,
+        },
       },
       debounceKey: 'cbc_update_form_data',
-      onCompleted: () => {
+      onCompleted: (response) => {
         setEditMode(false);
         changeModal.close();
-        handleUpdateCommunitySource();
+        setAddedCommunities([]);
+        setRemovedCommunities([]);
+        setResponseCommunityData(
+          response.editCbcProjectCommunities.cbcProjectCommunities.map(
+            (proj) => proj.communitiesSourceDataByCommunitiesSourceDataId
+          )
+        );
         setAllowEdit(isCbcAdmin && editFeatureEnabled);
       },
     });

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

@@ -23,7 +23,6 @@ import {
   getAllEconomicRegionNames,
 } from 'utils/schemaUtils';
 import ArrayLocationFieldTemplate from 'lib/theme/fields/ArrayLocationDataField';
-import { useUpdateCbcCommunityDataMutationMutation } from 'schema/mutations/cbc/updateCbcCommunityData';
 import customValidate, { CBC_WARN_COLOR } from 'utils/cbcCustomValidator';
 
 const getCbcSectionQuery = graphql`
@@ -152,9 +151,6 @@ const EditCbcSection = ({
     return formPayload;
   };
 
-  const [updateCbcCommunitySourceData] =
-    useUpdateCbcCommunityDataMutationMutation();
-
   const handleOnChange = (e) => {
     if (section === 'locations') {
       setFormData({
@@ -164,28 +160,6 @@ const EditCbcSection = ({
     } else setFormData({ ...formData, [section]: e.formData });
   };
 
-  const handleUpdateCommunitySource = useCallback(() => {
-    updateCbcCommunitySourceData({
-      variables: {
-        input: {
-          _projectId: rowId,
-          _communityIdsToAdd: addedCommunities,
-          _communityIdsToArchive: removedCommunities,
-        },
-      },
-      debounceKey: 'cbc_update_community_source_data',
-      onCompleted: () => {
-        setAddedCommunities([]);
-        setRemovedCommunities([]);
-      },
-    });
-  }, [
-    addedCommunities,
-    removedCommunities,
-    updateCbcCommunitySourceData,
-    rowId,
-  ]);
-
   const handleChangeRequestModal = (e) => {
     changeModal.open();
     setFormData({ ...formData, [section]: e.formData });
@@ -248,10 +222,16 @@ const EditCbcSection = ({
             cbcDataId: cbcDataRowId,
           },
         },
+        inputCbcProjectCommunities: {
+          _projectId: rowId,
+          _communityIdsToAdd: addedCommunities,
+          _communityIdsToArchive: removedCommunities,
+        },
       },
       debounceKey: 'cbc_update_section_data',
       onCompleted: () => {
-        handleUpdateCommunitySource();
+        setAddedCommunities([]);
+        setRemovedCommunities([]);
         router.push(`/analyst/cbc/${rowId}`);
       },
     });

app/schema/mutations/cbc/updateCbcDataAndInsertChangeReason.ts

@@ -6,6 +6,7 @@ const mutation = graphql`
   mutation updateCbcDataAndInsertChangeReasonMutation(
     $inputCbcData: UpdateCbcDataByRowIdInput!
     $inputCbcChangeReason: CreateCbcDataChangeReasonInput!
+    $inputCbcProjectCommunities: EditCbcProjectCommunitiesInput!
   ) {
     updateCbcDataByRowId(input: $inputCbcData) {
       cbcData {
@@ -24,6 +25,20 @@ const mutation = graphql`
         createdAt
       }
     }
+    editCbcProjectCommunities(input: $inputCbcProjectCommunities) {
+      cbcProjectCommunities {
+        communitiesSourceDataId
+        cbcId
+        communitiesSourceDataByCommunitiesSourceDataId {
+          geographicNameId
+          economicRegion
+          regionalDistrict
+          bcGeographicName
+          geographicType
+          rowId
+        }
+      }
+    }
   }
 `;
 

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

@@ -657,6 +657,11 @@ describe('Cbc', () => {
             cbcDataId: 1,
           },
         },
+        inputCbcProjectCommunities: {
+          _projectId: 1,
+          _communityIdsToAdd: [],
+          _communityIdsToArchive: [],
+        },
       }
     );
 
@@ -770,23 +775,7 @@ describe('Cbc', () => {
             cbcDataId: 1,
           },
         },
-      }
-    );
-
-    pageTestingHelper.environment.mock.resolveMostRecentOperation({
-      data: {
-        updateCbcDataAndInsertChangeReason: {
-          cbcData: {
-            rowId: 1,
-          },
-        },
-      },
-    });
-
-    pageTestingHelper.expectMutationToBeCalled(
-      'updateCbcCommunityDataMutation',
-      {
-        input: {
+        inputCbcProjectCommunities: {
           _projectId: 1,
           _communityIdsToAdd: [],
           _communityIdsToArchive: [1],

app/tests/pages/analyst/cbc/[cbcId]/[section].test.tsx

@@ -265,6 +265,11 @@ describe('EditCbcSection', () => {
             cbcDataId: 20,
           },
         },
+        inputCbcProjectCommunities: {
+          _projectId: 1,
+          _communityIdsToAdd: expect.anything(),
+          _communityIdsToArchive: expect.anything(),
+        },
       }
     );
   });
@@ -428,6 +433,11 @@ describe('EditCbcSection', () => {
             cbcDataId: 20,
           },
         },
+        inputCbcProjectCommunities: {
+          _projectId: 1,
+          _communityIdsToAdd: expect.anything(),
+          _communityIdsToArchive: [],
+        },
       }
     );
 
@@ -440,16 +450,5 @@ describe('EditCbcSection', () => {
         },
       },
     });
-
-    pageTestingHelper.expectMutationToBeCalled(
-      'updateCbcCommunityDataMutation',
-      {
-        input: {
-          _projectId: 1,
-          _communityIdsToAdd: expect.anything(),
-          _communityIdsToArchive: [],
-        },
-      }
-    );
   });
 });