Merge branch 'main' into NDT-628-Unsaved-changes-modal-pops-up-unnece…

…ssarily-on-RFI-page
bcgov · Dec 4, 2024 · c0729a8 · c0729a8
2 parents 10dbe9d + b7547b0
commit c0729a8
Show file tree

Hide file tree

Showing 27 changed files with 1,204 additions and 560 deletions.
diff --git a/.github/actions/app/action.yaml b/.github/actions/app/action.yaml
@@ -118,6 +118,9 @@ inputs:
   coverages_file:
     description: 'Coverages file'
     required: true
+  session_secret:
+    description: 'Session secret'
+    required: true
 
 runs:
   using: composite
@@ -143,6 +146,7 @@ runs:
         cert_key: ${{ inputs.cert_key }}
         cert_ca: ${{ inputs.cert_ca }}
         pgbackrest_s3_bucket: ${{ inputs.pgbackrest_s3_bucket }}
+        session_secret: ${{ inputs.session_secret }}
         insecure_skip_tls_verify: true
     - run: |
         SHA_ONLY=$(echo ${{ inputs.tag }} | cut -c 5-)
@@ -191,6 +195,7 @@ runs:
           --set cronshp.erFile="${{ inputs.er_file }}" \
           --set cronshp.rdFile="${{ inputs.rd_file }}" \
           --set cronshp.coveragesFile="${{ inputs.coverages_file }}" \
+          --set app.sessionSecret="${{ inputs.session_secret }}" \
           --values values-${{ inputs.environment }}.yaml
 
       shell: bash
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -47,6 +47,7 @@ on:
       ER_FILE: { required: true }
       RD_FILE: { required: true }
       COVERAGES_FILE: { required: true }
+      SESSION_SECRET: { required: true }
 
 env:
   TAG: sha-${{ github.sha }}
@@ -120,6 +121,7 @@ jobs:
           er_file: ${{ secrets.ER_FILE }}
           rd_file: ${{ secrets.RD_FILE }}
           coverages_file: ${{ secrets.COVERAGES_FILE }}
+          session_secret: ${{ secrets.SESSION_SECRET }}
           environment: dev
 
   ensure-sqitch-plan-ends-with-tag:
@@ -188,6 +190,7 @@ jobs:
           er_file: ${{ secrets.ER_FILE }}
           rd_file: ${{ secrets.RD_FILE }}
           coverages_file: ${{ secrets.COVERAGES_FILE }}
+          session_secret: ${{ secrets.SESSION_SECRET }}
           environment: test
 
   deploy-to-openshift-production:
@@ -247,6 +250,7 @@ jobs:
           er_file: ${{ secrets.ER_FILE }}
           rd_file: ${{ secrets.RD_FILE }}
           coverages_file: ${{ secrets.COVERAGES_FILE }}
+          session_secret: ${{ secrets.SESSION_SECRET }}
           environment: prod
 
   backup-secrets-dev:

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
@@ -212,6 +212,7 @@ jobs:
       ER_FILE: ${{ secrets.ER_FILE }}
       RD_FILE: ${{ secrets.RD_FILE }}
       COVERAGES_FILE: ${{ secrets.COVERAGES_FILE }}
+      SESSION_SECRET: ${{ secrets.SESSION_SECRET }}
 
   deploy-feature:
     if: github.event_name == 'pull_request' && github.event.pull_request.draft == false

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,31 @@
+## [1.214.1](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.214.0...v1.214.1) (2024-12-04)
+
+### Bug Fixes
+
+- scroll preservation when sticky header on in all dashboard ([ee4e6b9](https://github.com/bcgov/CONN-CCBC-portal/commit/ee4e6b92ae0f8d045bea69a9b824eca5bec00849))
+
+# [1.214.0](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.213.4...v1.214.0) (2024-12-04)
+
+### Features
+
+- enable global filter to filter communities ([ef8f11d](https://github.com/bcgov/CONN-CCBC-portal/commit/ef8f11ddb95b1c74ca396bff181577d30732b93e))
+
+## [1.213.4](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.213.3...v1.213.4) (2024-12-03)
+
+## [1.213.3](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.213.2...v1.213.3) (2024-11-29)
+
+### Bug Fixes
+
+- deterministic session secret ([d7d29a0](https://github.com/bcgov/CONN-CCBC-portal/commit/d7d29a0c72331dc2ebcea90528a3ebb55af733a6))
+
+## [1.213.2](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.213.1...v1.213.2) (2024-11-29)
+
+## [1.213.1](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.213.0...v1.213.1) (2024-11-29)
+
+### Bug Fixes
+
+- browser compatibility on toSorted ([b1f6e37](https://github.com/bcgov/CONN-CCBC-portal/commit/b1f6e37a76672d9a07ecc39b0dbb7dfd6c9f01cc))
+
 # [1.213.0](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.212.2...v1.213.0) (2024-11-27)
 
 ### Features

diff --git a/app/components/AnalystDashboard/AllDashboard.tsx b/app/components/AnalystDashboard/AllDashboard.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 /* eslint-disable react/jsx-pascal-case */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { graphql, useFragment } from 'react-relay';
 import styled from 'styled-components';
 import cookie from 'js-cookie';
@@ -18,6 +18,7 @@ import {
   MRT_ToggleDensePaddingButton,
   MRT_ToggleFullScreenButton,
   MRT_ShowHideColumnsButton,
+  MRT_FilterFns,
 } from 'material-react-table';
 
 import RowCount from 'components/Table/RowCount';
@@ -302,6 +303,10 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
   const [showColumnFilters, setShowColumnFilters] = useState(false);
 
   const [sorting, setSorting] = useState<MRT_SortingState>([]);
+  const [expanded, setExpanded] = useState({});
+  const [globalFilter, setGlobalFilter] = useState(null);
+
+  const expandedRowsRef = useRef({});
 
   const [columnSizing, setColumnSizing] = useState<MRT_ColumnSizingState>({
     'mrt-row-expand': 40,
@@ -315,6 +320,7 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
     projectTitle: 150,
     zones: 91,
   });
+  const tableContainerRef = useRef(null);
 
   const statusOrderMap = useMemo(() => {
     return allApplicationStatusTypes?.nodes?.reduce((acc, status) => {
@@ -361,6 +367,11 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
     }
 
     setIsFirstRender(false);
+
+    const savedScrollTop = sessionStorage.getItem('dashboard_scroll_position');
+    if (savedScrollTop && tableContainerRef.current) {
+      tableContainerRef.current.scrollTop = parseInt(savedScrollTop, 10);
+    }
   }, []);
 
   useEffect(() => {
@@ -442,6 +453,11 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
     }
   }, [visibilityPreference]);
 
+  useEffect(() => {
+    setExpanded(globalFilter ? expandedRowsRef.current : {});
+    expandedRowsRef.current = {};
+  }, [globalFilter]);
+
   const state = {
     showGlobalFilter: true,
     columnFilters,
@@ -450,6 +466,20 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
     showColumnFilters,
     sorting,
     columnSizing,
+    expanded,
+    globalFilter,
+  };
+
+  const customGlobalFilter = (row, id, filterValue, filterMeta) => {
+    const defaultMatch = MRT_FilterFns.fuzzy(row, id, filterValue, filterMeta);
+    const communitiesString = row.original.communities
+      ?.map((item) => item.geoName)
+      .join(',')
+      ?.toLowerCase();
+    const detailsMatch = communitiesString?.includes(filterValue.toLowerCase());
+    expandedRowsRef.current[row.id] = detailsMatch;
+
+    return defaultMatch || detailsMatch;
   };
 
   const getCommunities = (application) => {
@@ -653,6 +683,14 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
       setSorting(sort);
     }
   };
+
+  const handleTableScroll = () => {
+    sessionStorage.setItem(
+      'dashboard_scroll_position',
+      tableContainerRef?.current?.scrollTop
+    );
+  };
+
   const tableHeightOffset = enableTimeMachine ? '460px' : '360px';
 
   const table = useMaterialReactTable({
@@ -662,6 +700,8 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
     columnResizeMode: 'onChange',
     state,
     muiTableContainerProps: {
+      ref: tableContainerRef,
+      onScroll: handleTableScroll,
       sx: {
         padding: '0 8px 8px 8px',
         maxHeight: freezeHeader ? `calc(100vh - ${tableHeightOffset})` : '100%',
@@ -689,8 +729,16 @@ const AllDashboardTable: React.FC<Props> = ({ query }) => {
     filterFns: {
       filterNumber,
       statusFilter,
+      customGlobalFilter,
+    },
+    renderDetailPanel: ({ row }) => (
+      <AllDashboardDetailPanel row={row} filterValue={globalFilter} />
+    ),
+    globalFilterFn: 'customGlobalFilter',
+    onGlobalFilterChange: setGlobalFilter,
+    onExpandedChange: (expanded) => {
+      setExpanded(expanded);
     },
-    renderDetailPanel: ({ row }) => <AllDashboardDetailPanel row={row} />,
     renderToolbarInternalActions: ({ table }) => (
       <Box>
         <IconButton size="small">

diff --git a/app/components/AnalystDashboard/AllDashboardDetailPanel.tsx b/app/components/AnalystDashboard/AllDashboardDetailPanel.tsx
@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 interface Props {
   row: any;
+  filterValue: string;
 }
 
 const StyledMapLink = styled.a`
@@ -17,7 +18,36 @@ const StyledSpan = styled.span`
   display: block;
 `;
 
-const AllDashboardDetailPanel: React.FC<Props> = ({ row }) => {
+const StyledHighlightSpan = styled.span`
+  background-color: ${(props) => props.theme.color.primaryYellow};
+`;
+
+const HighlightFilterMatch = ({ text, filterValue }) => {
+  if (!filterValue) return text;
+
+  const normalizedFilterValue = filterValue.replace(/\s+/g, '').toLowerCase();
+  const normalizedText = text.replace(/\s+/g, '').toLowerCase();
+
+  const matchIndex = normalizedText.indexOf(normalizedFilterValue);
+
+  if (matchIndex === -1) {
+    return text;
+  }
+
+  const beforeMatch = text.slice(0, matchIndex);
+  const match = text.slice(matchIndex, matchIndex + filterValue.length);
+  const afterMatch = text.slice(matchIndex + filterValue.length);
+
+  return (
+    <>
+      {beforeMatch}
+      <StyledHighlightSpan>{match}</StyledHighlightSpan>
+      {afterMatch}
+    </>
+  );
+};
+
+const AllDashboardDetailPanel: React.FC<Props> = ({ row, filterValue }) => {
   const communities = (row.original.communities as any[]) || [];
   return (
     <>
@@ -30,7 +60,10 @@ const AllDashboardDetailPanel: React.FC<Props> = ({ row }) => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              {item.geoName}
+              <HighlightFilterMatch
+                text={item.geoName}
+                filterValue={filterValue}
+              />
             </StyledMapLink>
             {index < communities.length - 1 && ', '}
           </>

diff --git a/app/components/Table/ClearFilters.tsx b/app/components/Table/ClearFilters.tsx
@@ -19,6 +19,7 @@ const ClearFilters: React.FC<Props> = ({
   const clearFilters = () => {
     table.resetColumnFilters();
     table.setColumnFilters(defaultFilters);
+    table.setGlobalFilter('');
   };
 
   const isTableFiltersPresent =
@@ -29,9 +30,15 @@ const ClearFilters: React.FC<Props> = ({
     filters.filter((f) => f.id === 'program' && (f.value as any[]).length < 3)
       .length > 0;
 
+  const isGlobalFilterPresent = table.getState().globalFilter !== '';
+
   return (
     <Button
-      disabled={!isTableFiltersPresent && !isExternalFiltersPresent}
+      disabled={
+        !isTableFiltersPresent &&
+        !isExternalFiltersPresent &&
+        !isGlobalFilterPresent
+      }
       variant="text"
       onClick={clearFilters}
       data-testid="clear-filter-button"

diff --git a/app/cypress/e2e/analyst/application/[applicationId].cy.js b/app/cypress/e2e/analyst/application/[applicationId].cy.js
@@ -1,19 +1,27 @@
+const setups = ['ccbc_analyst', 'ccbc_admin', 'super_admin', 'cbc_admin'];
+
 describe('The analyst application view', () => {
-  beforeEach(() => {
-    cy.mockLogin('ccbc_analyst');
-    const mockedDateString = '2022-10-10';
-    const mockedDate = new Date(mockedDateString);
-    cy.useMockedTime(mockedDate);
-    cy.sqlFixture('e2e/reset_db');
-    cy.sqlFixture('e2e/001_intake');
-    cy.sqlFixture('e2e/001_application');
-    cy.sqlFixture('e2e/001_application_received');
-    cy.sqlFixture('e2e/001_analyst');
-  });
+  setups.forEach((role) => {
+    describe(`As ${role}`, () => {
+      beforeEach(() => {
+        cy.mockLogin(role);
+        const mockedDateString = '2022-10-10';
+        const mockedDate = new Date(mockedDateString);
+        cy.useMockedTime(mockedDate);
+        cy.sqlFixture('e2e/reset_db');
+        cy.sqlFixture('e2e/001_intake');
+        cy.sqlFixture('e2e/001_application');
+        cy.sqlFixture('e2e/001_application_received');
+        cy.sqlFixture('e2e/001_analyst');
+      });
 
-  it('loads', () => {
-    cy.visit('/analyst/application/1');
-    cy.contains('h1', 'Test application');
-    cy.get('body').happoScreenshot({ component: 'Analyst application view' });
+      it('loads', () => {
+        cy.visit('/analyst/application/1');
+        cy.contains('h1', 'Test application');
+        cy.get('body').happoScreenshot({
+          component: `Analyst application view - ${role}`,
+        });
+      });
+    });
   });
 });