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;