psp-8499 | Updated historical number rendering for leases

source/frontend/src/features/leases/list/LeaseListView.test.tsx

@@ -223,7 +223,7 @@ describe('Lease and License List View', () => {
       }),
     );
 
-    expect(await findByText(/0309-001;/i)).toBeInTheDocument();
+    expect(await findByText(/0309-001/i)).toBeInTheDocument();
   });
 
   it('searches historical file number for PS', async () => {
@@ -253,7 +253,7 @@ describe('Lease and License List View', () => {
                   123,
                   '0309-000',
                   ApiGen_CodeTypes_HistoricalFileNumberTypes.PSNO.toString(),
-                  'PS #',
+                  'PS',
                 ),
               ],
             },
@@ -275,7 +275,7 @@ describe('Lease and License List View', () => {
       }),
     );
 
-    expect(await findByText(/0309-000;/i)).toBeInTheDocument();
+    expect(await findByText(/0309-000/i)).toBeInTheDocument();
   });
 
   it('searches historical file number for OTHER', async () => {

source/frontend/src/features/leases/list/LeaseSearchResults/LeaseSearchResults.tsx

@@ -1,4 +1,3 @@
-import { groupBy } from 'lodash';
 import moment from 'moment';
 import { useCallback } from 'react';
 import { Tooltip } from 'react-bootstrap';
@@ -10,8 +9,7 @@ import styled from 'styled-components';
 import TooltipIcon from '@/components/common/TooltipIcon';
 import { ColumnWithProps, renderTypeCode, Table } from '@/components/Table';
 import { TableSort } from '@/components/Table/TableSort';
-import { ApiGen_CodeTypes_HistoricalFileNumberTypes } from '@/models/api/generated/ApiGen_CodeTypes_HistoricalFileNumberTypes';
-import { ApiGen_Concepts_HistoricalFileNumber } from '@/models/api/generated/ApiGen_Concepts_HistoricalFileNumber';
+import { HistoricalNumberFieldView } from '@/features/mapSideBar/shared/header/HistoricalNumberFieldView';
 import { ApiGen_Concepts_Lease } from '@/models/api/generated/ApiGen_Concepts_Lease';
 import { exists, prettyFormatDate } from '@/utils';
 import { formatApiPersonNames } from '@/utils/personUtils';
@@ -117,79 +115,16 @@ const columns: ColumnWithProps<ApiGen_Concepts_Lease>[] = [
     align: 'left',
     clickable: false,
     sortable: false,
-    width: 10,
-    maxWidth: 20,
+    width: 30,
+    maxWidth: 30,
     Cell: (props: CellProps<ApiGen_Concepts_Lease>) => {
-      // File numbers types to display
-      const numberTypes: string[] = [
-        ApiGen_CodeTypes_HistoricalFileNumberTypes.LISNO.toString(),
-        ApiGen_CodeTypes_HistoricalFileNumberTypes.PSNO.toString(),
-        ApiGen_CodeTypes_HistoricalFileNumberTypes.OTHER.toString(),
-      ];
-
       // Get unique file numbers from lease properties
-      const fileNumbers: ApiGen_Concepts_HistoricalFileNumber[] = [];
-      props.row.original.fileProperties?.forEach(fl => {
-        fl.property.historicalFileNumbers?.forEach(number => {
-          if (numberTypes.includes(number.historicalFileNumberTypeCode.id)) {
-            if (
-              !fileNumbers.find(
-                x =>
-                  x.historicalFileNumber === number.historicalFileNumber &&
-                  x.historicalFileNumberTypeCode.id === number.historicalFileNumberTypeCode.id,
-              )
-            ) {
-              fileNumbers.push(number);
-            }
-          }
-        });
-      });
-
-      const groupByType = groupBy(fileNumbers, x => x.historicalFileNumberTypeCode.id);
-
-      let lisNumbers = '';
-      let psNumbers = '';
-      let otherNumbers = '';
-      if (groupByType[ApiGen_CodeTypes_HistoricalFileNumberTypes.LISNO.toString()]?.length) {
-        lisNumbers = groupByType[ApiGen_CodeTypes_HistoricalFileNumberTypes.LISNO.toString()]
-          .map(x => x.historicalFileNumber)
-          .join(', ');
-      }
-
-      if (groupByType[ApiGen_CodeTypes_HistoricalFileNumberTypes.PSNO.toString()]?.length) {
-        psNumbers = groupByType[ApiGen_CodeTypes_HistoricalFileNumberTypes.PSNO.toString()]
-          .map(x => x.historicalFileNumber)
-          .join(', ');
-      }
+      const fileNumbers =
+        props.row.original?.fileProperties
+          ?.flatMap(fl => fl?.property?.historicalFileNumbers)
+          .filter(exists) ?? [];
 
-      if (groupByType[ApiGen_CodeTypes_HistoricalFileNumberTypes.OTHER.toString()]?.length) {
-        otherNumbers = groupByType[ApiGen_CodeTypes_HistoricalFileNumberTypes.OTHER.toString()]
-          .map(x => x.historicalFileNumber)
-          .join(', ');
-      }
-
-      return (
-        <FileNumbersDiv>
-          {lisNumbers ? (
-            <label>
-              <span>LIS: </span>
-              {lisNumbers};
-            </label>
-          ) : null}
-          {psNumbers ? (
-            <label>
-              <span>PS: </span>
-              {psNumbers};
-            </label>
-          ) : null}
-          {otherNumbers ? (
-            <label>
-              <span>OTHER: </span>
-              {otherNumbers}.
-            </label>
-          ) : null}
-        </FileNumbersDiv>
-      );
+      return <HistoricalNumberFieldView historicalNumbers={fileNumbers} />;
     },
   },
   {
@@ -240,16 +175,6 @@ export function LeaseSearchResults(props: ILeaseSearchResultsProps) {
   );
 }
 
-const FileNumbersDiv = styled('div')`
-  label {
-    display: inline-block;
-
-    span {
-      font-weight: bold;
-    }
-  }
-`;
-
 const ExpiredIcon = styled('span')`
   color: ${props => props.theme.bcTokens.surfaceColorPrimaryDangerButtonDefault};
 `;

source/frontend/src/features/leases/list/LeaseSearchResults/__snapshots__/LeaseSearchResults.test.tsx.snap

@@ -39,14 +39,6 @@ exports[`Lease Search Results Table > matches snapshot 1`] = `
   border-radius: 0.4rem;
 }
 
-.c4 label {
-  display: inline-block;
-}
-
-.c4 label span {
-  font-weight: bold;
-}
-
 <div
     class="table"
     data-testid="leasesTable"
@@ -226,7 +218,7 @@ exports[`Lease Search Results Table > matches snapshot 1`] = `
           class="th"
           colspan="1"
           role="columnheader"
-          style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
+          style="box-sizing: border-box; flex: 30 0 auto; min-width: 30px; width: 30px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
         >
           <div
             class="sortable-column"
@@ -384,12 +376,10 @@ exports[`Lease Search Results Table > matches snapshot 1`] = `
           <div
             class="td"
             role="cell"
-            style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
+            style="box-sizing: border-box; flex: 30 0 auto; min-width: 30px; width: 30px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
-            <div
-              class="c4"
-            />
+            <div />
           </div>
           <div
             class="td"
@@ -497,12 +487,10 @@ exports[`Lease Search Results Table > matches snapshot 1`] = `
           <div
             class="td"
             role="cell"
-            style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
+            style="box-sizing: border-box; flex: 30 0 auto; min-width: 30px; width: 30px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
-            <div
-              class="c4"
-            />
+            <div />
           </div>
           <div
             class="td"

source/frontend/src/features/leases/list/__snapshots__/LeaseListView.test.tsx.snap

@@ -1016,7 +1016,7 @@ exports[`Lease and License List View > matches snapshot 1`] = `
               class="th"
               colspan="1"
               role="columnheader"
-              style="box-sizing: border-box; flex: 20 0 auto; min-width: 30px; width: 20px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
+              style="box-sizing: border-box; flex: 30 0 auto; min-width: 30px; width: 30px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
             >
               <div
                 class="sortable-column"

source/frontend/src/features/mapSideBar/acquisition/common/AcquisitionHeader.tsx

@@ -11,7 +11,7 @@ import { exists } from '@/utils';
 import { formatMinistryProject } from '@/utils/formUtils';
 
 import HistoricalNumbersContainer from '../../shared/header/HistoricalNumberContainer';
-import HistoricalNumberFieldView from '../../shared/header/HistoricalNumberSectionView';
+import { HistoricalNumberSectionView } from '../../shared/header/HistoricalNumberSectionView';
 
 export interface IAcquisitionHeaderProps {
   acquisitionFile?: ApiGen_Concepts_AcquisitionFile;
@@ -49,11 +49,7 @@ export const AcquisitionHeader: React.FunctionComponent<
             </>
           )}
         </HeaderField>
-        <HistoricalNumbersContainer
-          propertyIds={propertyIds}
-          displayValuesOnly={false}
-          View={HistoricalNumberFieldView}
-        />
+        <HistoricalNumbersContainer propertyIds={propertyIds} View={HistoricalNumberSectionView} />
       </Col>
       <Col>
         <StyledFiller>

source/frontend/src/features/mapSideBar/disposition/common/DispositionHeader.tsx

@@ -10,7 +10,7 @@ import { ApiGen_Concepts_DispositionFile } from '@/models/api/generated/ApiGen_C
 import { exists } from '@/utils';
 
 import HistoricalNumbersContainer from '../../shared/header/HistoricalNumberContainer';
-import HistoricalNumberFieldView from '../../shared/header/HistoricalNumberSectionView';
+import { HistoricalNumberSectionView } from '../../shared/header/HistoricalNumberSectionView';
 
 export interface IDispositionHeaderProps {
   dispositionFile?: ApiGen_Concepts_DispositionFile;
@@ -32,11 +32,7 @@ export const DispositionHeader: React.FunctionComponent<
         <HeaderField label="File:" labelWidth={leftColumnLabel} contentWidth="9">
           D-{dispositionFile?.fileNumber}
         </HeaderField>
-        <HistoricalNumbersContainer
-          propertyIds={propertyIds}
-          displayValuesOnly={false}
-          View={HistoricalNumberFieldView}
-        />
+        <HistoricalNumbersContainer propertyIds={propertyIds} View={HistoricalNumberSectionView} />
       </Col>
       <Col xs="5">
         <StyledFiller>

source/frontend/src/features/mapSideBar/lease/common/LeaseHeader.tsx

@@ -19,7 +19,7 @@ import { ApiGen_Concepts_Lease } from '@/models/api/generated/ApiGen_Concepts_Le
 import { exists, prettyFormatDate } from '@/utils';
 
 import HistoricalNumbersContainer from '../../shared/header/HistoricalNumberContainer';
-import HistoricalNumberFieldView from '../../shared/header/HistoricalNumberSectionView';
+import { HistoricalNumberSectionView } from '../../shared/header/HistoricalNumberSectionView';
 import { LeaseHeaderTenants } from './LeaseHeaderTenants';
 
 export interface ILeaseHeaderProps {
@@ -74,8 +74,7 @@ export const LeaseHeader: React.FC<ILeaseHeaderProps> = ({ lease, lastUpdatedBy
           </Row>
           <HistoricalNumbersContainer
             propertyIds={propertyIds}
-            displayValuesOnly={false}
-            View={HistoricalNumberFieldView}
+            View={HistoricalNumberSectionView}
           />
         </Col>
 

source/frontend/src/features/mapSideBar/property/MotiInventoryHeader.tsx

@@ -15,7 +15,7 @@ import { exists, formatApiAddress, pidFormatter } from '@/utils';
 import { mapFeatureToProperty } from '@/utils/mapPropertyUtils';
 
 import HistoricalNumbersContainer from '../shared/header/HistoricalNumberContainer';
-import HistoricalNumberFieldView from '../shared/header/HistoricalNumberSectionView';
+import { HistoricalNumberSectionView } from '../shared/header/HistoricalNumberSectionView';
 
 export interface IMotiInventoryHeaderProps {
   isLoading: boolean;
@@ -68,8 +68,7 @@ export const MotiInventoryHeader: React.FunctionComponent<IMotiInventoryHeaderPr
           </HeaderField>
           {exists(apiProperty) && (
             <HistoricalNumbersContainer
-              View={HistoricalNumberFieldView}
-              displayValuesOnly={false}
+              View={HistoricalNumberSectionView}
               propertyIds={[apiProperty?.id]}
             />
           )}

source/frontend/src/features/mapSideBar/research/common/ResearchHeader.tsx

@@ -10,7 +10,7 @@ import { ApiGen_Concepts_ResearchFile } from '@/models/api/generated/ApiGen_Conc
 import { exists } from '@/utils';
 
 import HistoricalNumbersContainer from '../../shared/header/HistoricalNumberContainer';
-import HistoricalNumberFieldView from '../../shared/header/HistoricalNumberSectionView';
+import { HistoricalNumberSectionView } from '../../shared/header/HistoricalNumberSectionView';
 
 export interface IResearchHeaderProps {
   researchFile?: ApiGen_Concepts_ResearchFile;
@@ -64,11 +64,7 @@ const ResearchHeader: React.FunctionComponent<
         <HeaderField label="Ministry district:" labelWidth={leftColumnLabel} contentWidth="9">
           {districts}
         </HeaderField>
-        <HistoricalNumbersContainer
-          propertyIds={propertyIds}
-          displayValuesOnly={false}
-          View={HistoricalNumberFieldView}
-        />
+        <HistoricalNumbersContainer propertyIds={propertyIds} View={HistoricalNumberSectionView} />
       </Col>
       <Col>
         <StyledFiller>

source/frontend/src/features/mapSideBar/shared/header/HistoricalNumberContainer.tsx

@@ -7,12 +7,10 @@ import { IHistoricalNumbersViewProps } from './HistoricalNumberSectionView';
 
 export interface IHistoricalNumbersContainerProps {
   propertyIds: number[];
-  displayValuesOnly: boolean;
   View: React.FunctionComponent<IHistoricalNumbersViewProps>;
 }
 const HistoricalNumbersContainer: React.FC<IHistoricalNumbersContainerProps> = ({
   propertyIds,
-  displayValuesOnly,
   View,
 }) => {
   const [historicalNumbers, setHistoricalNumbers] = useState<
@@ -36,6 +34,6 @@ const HistoricalNumbersContainer: React.FC<IHistoricalNumbersContainerProps> = (
     });
   }, [propertyIds, getHistoricalExecute]);
 
-  return <View historicalNumbers={historicalNumbers} valuesOnly={displayValuesOnly} />;
+  return <View historicalNumbers={historicalNumbers} />;
 };
 export default HistoricalNumbersContainer;