feat: enable history on ccbc communities

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

@@ -2,7 +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';
+import CommunitiesHistoryTable from '../../History/CommunitiesHistoryTable';
 
 const StyledContent = styled.span`
   display: flex;
@@ -76,13 +76,13 @@ const HistoryContent = ({
           overrideParent="cbcData"
         />
         {json?.locations?.added?.length > 0 && (
-          <CbcHistoryCommunitiesTable
+          <CommunitiesHistoryTable
             action="Added"
             communities={json?.locations?.added}
           />
         )}
         {json?.locations?.removed?.length > 0 && (
-          <CbcHistoryCommunitiesTable
+          <CommunitiesHistoryTable
             action="Deleted"
             communities={json?.locations?.removed}
           />

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

@@ -3,28 +3,35 @@ import styled from 'styled-components';
 interface Props {
   action: string;
   communities: any[];
+  isCbc?: boolean;
+}
+
+interface TableProps {
+  isCbc: boolean;
+  isDeleted?: boolean;
 }
 
 const StyledCommunitiesContainer = styled.div`
   display: flex;
   align-items: center;
 `;
 
-const StyledLeftContainer = styled.div`
+const StyledLeftContainer = styled.div<TableProps>`
   padding-right: 2%;
-  width: 250px;
+  width: ${(props) => (props.isCbc ? '250px' : '300px')};
 `;
 
-const StyledTable = styled.table`
+const StyledTable = styled.table<TableProps>`
   th {
     border: none;
   }
   tbody > tr {
     border-bottom: thin dashed;
+    text-decoration: ${(props) => (props.isDeleted ? 'line-through' : 'none')};
     border-color: ${(props) => props.theme.color.borderGrey};
     td {
-      width: 200px;
-      max-width: 200px;
+      width: ${(props) => (props.isCbc ? '200px' : '350px')};
+      max-width: ${(props) => (props.isCbc ? '200px' : '350px')};
       border: none;
     }
   }
@@ -35,24 +42,28 @@ const StyledIdCell = styled.td`
   max-width: 100px;
 `;
 
-const CbcHistoryCommunitiesTable: React.FC<Props> = ({
+const CommunitiesHistoryTable: React.FC<Props> = ({
   action,
   communities,
+  isCbc = true,
 }) => {
   return (
     <StyledCommunitiesContainer
       style={{ display: 'flex', alignItems: 'center' }}
     >
-      <StyledLeftContainer>{`${action} community location data`}</StyledLeftContainer>
+      <StyledLeftContainer
+        isCbc={isCbc}
+        isDeleted={action === 'Deleted'}
+      >{`${action} community location data`}</StyledLeftContainer>
       <div>
-        <StyledTable>
+        <StyledTable isCbc={isCbc} isDeleted={action === 'Deleted'}>
           <thead>
             <tr>
               <th>Economic Region</th>
               <th>Regional District</th>
-              <th>Geographic Name</th>
-              <th>Type</th>
-              <th>ID</th>
+              {isCbc && <th>Geographic Name</th>}
+              {isCbc && <th>Type</th>}
+              {isCbc && <th>ID</th>}
             </tr>
           </thead>
           <tbody>
@@ -64,11 +75,13 @@ const CbcHistoryCommunitiesTable: React.FC<Props> = ({
               >
                 <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>
+                {isCbc && <td>{community.bc_geographic_name}</td>}
+                {isCbc && <td>{community.geographic_type}</td>}
+                {isCbc && (
+                  <StyledIdCell>
+                    {community.communities_source_data_id}
+                  </StyledIdCell>
+                )}
               </tr>
             ))}
           </tbody>
@@ -78,4 +91,4 @@ const CbcHistoryCommunitiesTable: React.FC<Props> = ({
   );
 };
 
-export default CbcHistoryCommunitiesTable;
+export default CommunitiesHistoryTable;

app/components/Analyst/History/HistoryContent.tsx

@@ -13,10 +13,13 @@ import gis from 'formSchema/uiSchema/history/gis';
 import gisAssessmentHhSchema from 'formSchema/uiSchema/history/gisAssessmentHh';
 import applicationSowDataSchema from 'formSchema/uiSchema/history/applicationSowData';
 import applicationAnnounced from 'formSchema/uiSchema/history/applicationAnnounced';
+import { processArrayDiff } from 'components/DiffTable';
+import communities from 'formSchema/uiSchema/history/communities';
 import StatusPill from '../../StatusPill';
 import HistoryDetails from './HistoryDetails';
 import HistoryAttachment from './HistoryAttachment';
 import HistoryFile from './HistoryFile';
+import CommunitiesHistoryTable from './CommunitiesHistoryTable';
 
 const StyledContent = styled.span`
   display: flex;
@@ -68,6 +71,13 @@ const filterArrays = (obj: Record<string, any>): Record<string, any> => {
   return Object.fromEntries(filteredEntries);
 };
 
+const processCommunity = (values) => {
+  return values?.map((community) => ({
+    economic_region: community.er,
+    regional_district: community.rd,
+  }));
+};
+
 const HistoryContent = ({
   historyItem,
   prevHistoryItem,
@@ -972,6 +982,41 @@ const HistoryContent = ({
     );
   }
 
+  if (tableName === 'application_communities') {
+    const user =
+      createdBy === 1 && op === 'INSERT' ? 'The system' : displayName;
+    const changes = diff(prevHistoryItem?.record || {}, record);
+    const [newArray, oldArray] = processArrayDiff(
+      changes,
+      communities.applicationCommunities
+    );
+
+    return (
+      <>
+        <StyledContent data-testid="history-content-communities">
+          <span>
+            {user} updated the coverage area for the project which resulted in a
+            change to <b>Community Location Data</b> on {createdAtFormatted}
+          </span>
+        </StyledContent>
+        {newArray.length > 0 && (
+          <CommunitiesHistoryTable
+            action="Added"
+            communities={processCommunity(newArray)}
+            isCbc={false}
+          />
+        )}
+        {oldArray.length > 0 && (
+          <CommunitiesHistoryTable
+            action="Deleted"
+            communities={processCommunity(oldArray)}
+            isCbc={false}
+          />
+        )}
+      </>
+    );
+  }
+
   return null;
 };
 

app/components/Analyst/History/HistoryIcon.tsx

@@ -53,6 +53,7 @@ const iconMap = {
   application_community_progress_report_data: faTreeCity,
   application_milestone_data: faSignsPost,
   application_project_type: faWifi,
+  application_communities: faClipboardList,
 };
 
 interface Props {

app/components/Analyst/History/HistoryTable.tsx

@@ -3,6 +3,7 @@ import { graphql, useFragment } from 'react-relay';
 import { getFiscalQuarter, getFiscalYear } from 'utils/fiscalFormat';
 import { HistoryTable_query$key } from '__generated__/HistoryTable_query.graphql';
 import { useMemo, useState } from 'react';
+import isEqual from 'lodash.isequal';
 import HistoryRow from './HistoryRow';
 import HistoryFilter, {
   filterByType,
@@ -240,6 +241,16 @@ const HistoryTable: React.FC<Props> = ({ query }) => {
             }
 
             const prevHistoryItem = prevItems.length > 0 ? prevItems[0] : {};
+            // Skipping duplicate history items for communities
+            if (
+              historyItem?.tableName === 'application_communities' &&
+              isEqual(
+                prevHistoryItem.record?.application_rd,
+                historyItem.record?.application_rd
+              )
+            ) {
+              return null;
+            }
             // using index + recordId for key as just recordId was causing strange duplicate record bug for delete history item until page refresh
             return (
               <HistoryRow

app/components/DiffTable.tsx

@@ -386,6 +386,50 @@ const generateDiffTable = (
   ) : null;
 };
 
+function createObjectFromSchema(schema, data) {
+  const keys = Object.keys(schema.properties);
+  return keys.reduce((acc, key) => {
+    acc[key] = data[key];
+    return acc;
+  }, {});
+}
+
+export const processArrayDiff = (changes, schema) => {
+  const newArray = [];
+  const oldArray = [];
+
+  const entries = Object.entries(changes);
+  entries.forEach(([key, value]) => {
+    if (key.endsWith('__added') && Array.isArray(value)) {
+      newArray.push(...value);
+    } else if (key.endsWith('__deleted') && Array.isArray(value)) {
+      oldArray.push(...value);
+    } else if (Array.isArray(value)) {
+      value.forEach(([prefix, diffValue]) => {
+        if (prefix === '-') {
+          oldArray.push(diffValue);
+        } else if (prefix === '~') {
+          ['__old', '__new'].forEach((childKey, idx) => {
+            const newObject = createObjectFromSchema(schema, {
+              er: diffValue.er[childKey],
+              rd: diffValue.rd[childKey],
+            });
+            if (idx === 0) {
+              oldArray.push(newObject);
+            } else {
+              newArray.push(newObject);
+            }
+          });
+        } else if (prefix === '+') {
+          newArray.push(diffValue);
+        }
+      });
+    }
+  });
+
+  return [newArray, oldArray];
+};
+
 interface Props {
   changes: any;
   diffSchema: any;

app/formSchema/uiSchema/history/communities.ts

@@ -0,0 +1,14 @@
+const communities = {
+  applicationCommunities: {
+    properties: {
+      er: {
+        title: 'Economic Regions',
+      },
+      rd: {
+        title: 'Regional Districts',
+      },
+    },
+  },
+};
+
+export default communities;

app/tests/pages/analyst/application/[applicationId]/history.test.tsx

@@ -3010,6 +3010,54 @@ const mockQueryPayload = {
               sessionSub: '7af64dcdkl39e8830b297e4b51df6@idir',
               tableName: 'application_dependencies',
             },
+            {
+              applicationId: 1,
+              createdAt: '2025-01-02T18:25:04.719664+00:00',
+              createdBy: 1,
+              externalAnalyst: null,
+              familyName: null,
+              item: null,
+              givenName: null,
+              op: 'INSERT',
+              record: {
+                application_rd: [
+                  {
+                    er: 'North Coast',
+                    rd: 'Regional District of Kitimat-Stikine',
+                  },
+                  {
+                    er: 'Cariboo',
+                    rd: 'Cariboo Regional District',
+                  },
+                ],
+              },
+              oldRecord: [null, null],
+              recordId: '670542c4-54e2-50a0-9c2c-3cc3dff4dbff',
+              sessionSub: '54f0aa1ad196497bb80d05b21c20a1ef@bceidbasic',
+              tableName: 'application_communities',
+            },
+            {
+              applicationId: 1,
+              createdAt: '2025-01-02T18:20:30.935361+00:00',
+              createdBy: 1,
+              externalAnalyst: null,
+              familyName: null,
+              item: null,
+              givenName: null,
+              op: 'INSERT',
+              record: {
+                application_rd: [
+                  {
+                    er: 'Vancouver Island and Coast',
+                    rd: 'Regional District of Mount Waddington',
+                  },
+                ],
+              },
+              oldRecord: [null],
+              recordId: 'd3146e1f-a687-589f-92a5-d996ce0b38e5',
+              sessionSub: '54f0aa1ad196497bb80d05b21c20a1ef@bceidbasic',
+              tableName: 'application_communities',
+            },
           ],
         },
         formData: {
@@ -3469,6 +3517,30 @@ describe('The index page', () => {
       'Bar Foo updated Announcement info on Jul 31, 2024, 8:25 a.m.'
     );
   });
+
+  it('should show the correct history for added and removed communities', async () => {
+    pageTestingHelper.loadQuery();
+    pageTestingHelper.renderPage();
+    const addedCommunities = screen.getAllByText(
+      /Added community location data/
+    );
+    expect(addedCommunities).toHaveLength(2);
+
+    const removedCommunities = screen.getByText(
+      /Deleted community location data/
+    );
+    expect(removedCommunities).toBeInTheDocument();
+
+    const addedCommunityRows = document.querySelectorAll(
+      'tr[data-key^="Added-row"]'
+    );
+    expect(addedCommunityRows).toHaveLength(3);
+
+    const removedCommunityRows = document.querySelectorAll(
+      'tr[data-key^="Deleted-row"]'
+    );
+    expect(removedCommunityRows).toHaveLength(1);
+  });
 });
 
 describe('The filter', () => {
@@ -3495,7 +3567,7 @@ describe('The filter', () => {
     const options = within(dropdown!).getAllByRole('option');
     const optionNames = options.map((option) => option.textContent?.trim());
 
-    expect(options.length).toEqual(18);
+    expect(options.length).toEqual(19);
 
     const expectedOptionNames = [
       'Application Dependencies',
@@ -3516,6 +3588,7 @@ describe('The filter', () => {
       'Application Gis Data',
       'Form Data',
       'Rfi Data',
+      'Application Communities',
     ];
 
     expect(optionNames).toEqual(expect.arrayContaining(expectedOptionNames));