Merge pull request #3671 from bcgov/NDT-592-Show-Community-names-in-A…

…ll-Dashboard-rows

NDT-592-Show-Community-names-in-All-Dashboard-rows

CHANGELOG.md

@@ -1,3 +1,13 @@
+# [1.210.0](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.209.0...v1.210.0) (2024-11-18)
+
+### Bug Fixes
+
+- failing e2e test ([fc87025](https://github.com/bcgov/CONN-CCBC-portal/commit/fc8702531f7757efc46b7b471d8fd99fc8e9930b))
+
+### Features
+
+- enable detail panel with communities in all dashboard ([f666011](https://github.com/bcgov/CONN-CCBC-portal/commit/f666011e0ba179a3f1ecc759c37bc7ca535a80fe))
+
 # [1.209.0](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.208.0...v1.209.0) (2024-11-18)
 
 ### Features

app/components/AnalystDashboard/AllDashboard.tsx

@@ -40,6 +40,7 @@ import {
 import AdditionalFilters, {
   additionalFilterColumns,
 } from './AdditionalFilters';
+import AllDashboardDetailPanel from './AllDashboardDetailPanel';
 
 type Application = {
   ccbcNumber: string;
@@ -51,6 +52,7 @@ type Application = {
   externalStatus: string;
   analystLead?: string;
   zones: readonly number[];
+  communities: any[];
 };
 
 export const filterNumber = (row, id, filterValue) => {
@@ -95,11 +97,12 @@ const StyledTableHeader = styled.div`
 `;
 
 const muiTableBodyCellProps = (props): TableCellProps => {
-  const centeredCols = ['Package', 'zones'];
+  const centeredCols = ['Package', 'zones', 'intakeNumber'];
+  const isExpandColumn = props.column.id === 'mrt-row-expand';
   return {
     align: centeredCols.includes(props.column.id) ? 'center' : 'left',
     sx: {
-      padding: '8px 0px',
+      padding: isExpandColumn ? '0 8px' : '8px 0px',
     },
   };
 };
@@ -201,6 +204,7 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
               intakeNumber
               program
               zones
+              status
               applicationSowDataByApplicationId(
                 condition: { isAmendment: false }
                 last: 1
@@ -210,6 +214,18 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
                   id
                   jsonData
                   rowId
+                  sowTab8SBySowId(condition: { archivedAt: null }) {
+                    nodes {
+                      rowId
+                      jsonData
+                      sowId
+                    }
+                  }
+                }
+              }
+              applicationFormTemplate9DataByApplicationId {
+                nodes {
+                  jsonData
                 }
               }
             }
@@ -224,6 +240,14 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
               jsonData
               projectNumber
               cbcId
+              cbcByCbcId {
+                communitiesSourceDataByCbcProjectCommunityCbcIdAndCommunitiesSourceDataId {
+                  nodes {
+                    bcGeographicName
+                    mapLink
+                  }
+                }
+              }
             }
           }
         }
@@ -280,12 +304,13 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
   const [sorting, setSorting] = useState<MRT_SortingState>([]);
 
   const [columnSizing, setColumnSizing] = useState<MRT_ColumnSizingState>({
+    'mrt-row-expand': 40,
     Lead: 114,
     Package: 104,
     analystStatus: 152,
-    ccbcNumber: 108,
+    projectId: 108,
     externalStatus: 150,
-    intakeNumber: 85,
+    intakeNumber: 90,
     organizationName: 141,
     projectTitle: 150,
     zones: 91,
@@ -427,6 +452,29 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
     columnSizing,
   };
 
+  const getCommunities = (application) => {
+    const communityDataSource =
+      application.status === 'applicant_approved' ||
+      application.status === 'approved'
+        ? application.applicationSowDataByApplicationId.nodes[0]
+            ?.sowTab8SBySowId
+        : application.applicationFormTemplate9DataByApplicationId;
+    return communityDataSource?.nodes[0]?.jsonData?.geoNames?.map((item) => ({
+      geoName: item.bcGeoName || item.geoName,
+      mapLink: item.mapLink,
+    }));
+  };
+
+  const getCbcCommunities = (project) => {
+    const communityDataSource =
+      project.node.cbcByCbcId
+        ?.communitiesSourceDataByCbcProjectCommunityCbcIdAndCommunitiesSourceDataId;
+    return communityDataSource?.nodes?.map((item) => ({
+      geoName: item.bcGeographicName,
+      mapLink: item.mapLink,
+    }));
+  };
+
   const tableData = useMemo(() => {
     const allCcbcApplications = allApplications.edges.map((application) => ({
       ...application.node,
@@ -440,6 +488,7 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
       showLink: true,
       externalStatusOrder: statusOrderMap[application.node.externalStatus],
       internalStatusOrder: statusOrderMap[application.node.analystStatus],
+      communities: getCommunities(application.node),
     }));
 
     const allCbcApplications = showCbcProjects
@@ -467,6 +516,7 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
             lead: null,
             isCbcProject: true,
             showLink: showCbcProjectsLink,
+            communities: getCbcCommunities(project),
           };
         }) ?? []
       : [];
@@ -617,6 +667,11 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
         maxHeight: freezeHeader ? `calc(100vh - ${tableHeightOffset})` : '100%',
       },
     },
+    muiTableBodyRowProps: {
+      sx: {
+        boxShadow: '0 3px 3px -2px #c4c4c4',
+      },
+    },
     layoutMode: isLargeUp ? 'grid' : 'semantic',
     muiTableBodyCellProps,
     muiTableHeadCellProps,
@@ -635,6 +690,7 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
       filterNumber,
       statusFilter,
     },
+    renderDetailPanel: ({ row }) => <AllDashboardDetailPanel row={row} />,
     renderToolbarInternalActions: ({ table }) => (
       <Box>
         <IconButton size="small">

app/components/AnalystDashboard/AllDashboardDetailPanel.tsx

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+
+interface Props {
+  row: any;
+}
+
+const StyledMapLink = styled.a`
+  color: ${(props) => props.theme.color.links};
+  text-decoration-line: underline;
+  :hover {
+    cursor: pointer;
+  }
+`;
+
+const StyledSpan = styled.span`
+  color: ${(props) => props.theme.color.darkGrey};
+  display: block;
+`;
+
+const AllDashboardDetailPanel: React.FC<Props> = ({ row }) => {
+  const communities = (row.original.communities as any[]) || [];
+  return (
+    <>
+      <StyledSpan>Communities</StyledSpan>
+      {communities.length > 0 ? (
+        communities.map((item, index) => (
+          <>
+            <StyledMapLink
+              href={item.mapLink}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {item.geoName}
+            </StyledMapLink>
+            {index < communities.length - 1 && ', '}
+          </>
+        ))
+      ) : (
+        <StyledSpan>N/A</StyledSpan>
+      )}
+    </>
+  );
+};
+
+export default AllDashboardDetailPanel;

app/cypress/e2e/analyst/dashboard.cy.js

@@ -29,7 +29,7 @@ describe('The analyst dashboard', () => {
   it('sort dashboard', () => {
     cy.visit('/analyst/dashboard');
     cy.wait(2000);
-    cy.get('tr > th').first().click();
+    cy.get('tr > th').eq(1).click();
     cy.getCookie('mrt_sorting_application').should(
       'have.property',
       'value',

app/tests/pages/analyst/dashboard.test.tsx

@@ -33,6 +33,21 @@ const mockQueryPayload = {
               zone: 1,
               zones: [1, 2],
               program: 'CCBC',
+              status: 'received',
+              applicationFormTemplate9DataByApplicationId: {
+                nodes: [
+                  {
+                    jsonData: {
+                      geoNames: [
+                        {
+                          mapLink: 'https://www.google.com/maps',
+                          geoName: 'Test Geo Name',
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
             },
           },
           {
@@ -48,6 +63,41 @@ const mockQueryPayload = {
               zone: null,
               zones: [],
               program: 'CCBC',
+              status: 'approved',
+              applicationFormTemplate9DataByApplicationId: {
+                nodes: [
+                  {
+                    jsonData: {
+                      geoNames: [
+                        {
+                          mapLink: 'https://www.google.com/maps',
+                          geoName: 'Old Fort',
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+              applicationSowDataByApplicationId: {
+                nodes: [
+                  {
+                    sowTab8SBySowId: {
+                      nodes: [
+                        {
+                          jsonData: {
+                            geoNames: [
+                              {
+                                bcGeoName: 'Bear Lake',
+                                mapLink: 'https://www.google.com/maps',
+                              },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
             },
           },
           {
@@ -261,6 +311,18 @@ const mockQueryPayload = {
                 agreementSigned: 'YES',
               },
               projectNumber: 3333,
+              cbcByCbcId: {
+                communitiesSourceDataByCbcProjectCommunityCbcIdAndCommunitiesSourceDataId:
+                  {
+                    nodes: [
+                      {
+                        bcGeographicName: 'Old Silver Valley',
+                        mapLink:
+                          'https://apps.gov.bc.ca/pub/bcgnws/names/24757.html',
+                      },
+                    ],
+                  },
+              },
             },
           },
         ],
@@ -403,6 +465,25 @@ describe('The index page', () => {
     expect(screen.getByText('Package')).toBeInTheDocument();
   });
 
+  it('renders expand all and expand buttons and opens detail panel with communities data', async () => {
+    jest
+      .spyOn(moduleApi, 'useFeature')
+      .mockReturnValue(mockShowCbcProjects(true));
+
+    pageTestingHelper.loadQuery();
+    pageTestingHelper.renderPage();
+
+    const expandAllButton = document.querySelector('[aria-label="Expand all"]');
+    expect(expandAllButton).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('KeyboardDoubleArrowDownIcon'));
+
+    expect(screen.getByText(/Test Geo Name/)).toBeInTheDocument();
+    expect(screen.getByText(/Bear Lake/)).toBeInTheDocument();
+    expect(screen.queryByText(/Old Fort/)).not.toBeInTheDocument();
+    expect(screen.getByText(/Old Silver Valley/)).toBeInTheDocument();
+  });
+
   it('analyst table lead only visible when feature enabled', async () => {
     jest
       .spyOn(moduleApi, 'useFeature')

db/sqitch.plan

@@ -734,3 +734,4 @@ tables/application_form_template_9_data_001_add_missing_roles 2024-10-21T17:22:3
 tables/cbc_project_communities_001_enable_tracking 2024-11-01T18:07:48Z ,,, <ryohani89@NH504670> # enable history tracking for cbc_project_communities table
 computed_columns/cbc_history [computed_columns/[email protected]] 2024-11-13T22:48:20Z ,,, <ryohani89@NH504670> # combine communities data changes to cbc history
 @1.209.0 2024-11-18T18:07:01Z CCBC Service Account <[email protected]> # release v1.209.0
+@1.210.0 2024-11-18T22:56:15Z CCBC Service Account <[email protected]> # release v1.210.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "CONN-CCBC-portal",
-  "version": "1.209.0",
+  "version": "1.210.0",
   "main": "index.js",
   "repository": "https://github.com/bcgov/CONN-CCBC-portal.git",
   "author": "Romer, Meherzad CITZ:EX <[email protected]>",