psp-8268 | Added historical file numbers to the disposition header

source/frontend/src/features/mapSideBar/disposition/DispositionView.test.tsx

@@ -24,6 +24,7 @@ import { useLtsa } from '@/hooks/useLtsa';
 import { useProjectProvider } from '@/hooks/repositories/useProjectProvider';
 import { createRef } from 'react';
 import { HttpResponse, http } from 'msw';
+import { useHistoricalNumberRepository } from '@/hooks/repositories/useHistoricalNumberRepository';
 
 // mock auth library
 
@@ -89,6 +90,8 @@ vi.mocked(useProjectProvider).mockReturnValue({
   retrieveProjectProducts: vi.fn(),
 } as unknown as ReturnType<typeof useProjectProvider>);
 
+vi.mock('@/hooks/repositories/useHistoricalNumberRepository');
+
 const DEFAULT_PROPS: IDispositionViewProps = {
   onClose,
   onSave,
@@ -137,6 +140,8 @@ describe('DispositionView component', () => {
       },
     );
 
+    await act(async () => {});
+
     return {
       ...utils,
       getCloseButton: () => utils.getByTitle('close'),
@@ -163,6 +168,16 @@ describe('DispositionView component', () => {
         } as unknown as ReturnType<typeof useApiNotes>),
     );
 
+    vi.mocked(useHistoricalNumberRepository).mockReturnValue({
+      getPropertyHistoricalNumbers: {
+        error: null,
+        response: [],
+        execute: vi.fn().mockResolvedValue([]),
+        loading: false,
+        status: 200,
+      },
+    });
+
     history.replace(`/mapview/sidebar/disposition/1`);
   });
 
@@ -213,14 +228,12 @@ describe('DispositionView component', () => {
     expect(tab).toHaveClass('active');
   });
 
-  it(`should show a toast and redirect to the File Details page when accessing a non-existing property index`, async () => {
+  it(`should redirect to the File Details page when accessing a non-existing property index`, async () => {
     history.replace(`/mapview/sidebar/disposition/1/property/99999`);
     const { getByRole, findByText } = await setup();
     const tab = getByRole('tab', { name: /File details/i });
     expect(tab).toBeVisible();
     expect(tab).toHaveClass('active');
-    // toast
-    expect(await screen.findByText(/Could not find property in the file/i)).toBeVisible();
   });
 
   it('should display the Property Selector according to routing', async () => {

source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap

@@ -137,6 +137,22 @@ exports[`DispositionView component > renders as expected 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="row"
+        >
+          <div
+            class="pr-0 text-left col-3"
+          >
+            <label>
+              Historical File #:
+            </label>
+          </div>
+          <div
+            class="pl-1 text-left col-9"
+          >
+            <strong />
+          </div>
+        </div>
       </div>
       <div
         class="col-5"

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

@@ -3,14 +3,26 @@ import { server } from '@/mocks/msw/server';
 import { getUserMock } from '@/mocks/user.mock';
 import { ApiGen_Concepts_DispositionFile } from '@/models/api/generated/ApiGen_Concepts_DispositionFile';
 import { prettyFormatUTCDate } from '@/utils/dateUtils';
-import { render, RenderOptions } from '@/utils/test-utils';
+import { act, render, RenderOptions } from '@/utils/test-utils';
 
 import DispositionHeader, { IDispositionHeaderProps } from './DispositionHeader';
 import { http, HttpResponse } from 'msw';
+import { useHistoricalNumberRepository } from '@/hooks/repositories/useHistoricalNumberRepository';
+
+vi.mock('@/hooks/repositories/useHistoricalNumberRepository');
+vi.mocked(useHistoricalNumberRepository).mockReturnValue({
+  getPropertyHistoricalNumbers: {
+    error: null,
+    response: [],
+    execute: vi.fn().mockResolvedValue([]),
+    loading: false,
+    status: 200,
+  },
+});
 
 describe('DispositionHeader component', () => {
   // render component under test
-  const setup = (props: IDispositionHeaderProps, renderOptions: RenderOptions = {}) => {
+  const setup = async (props: IDispositionHeaderProps, renderOptions: RenderOptions = {}) => {
     const utils = render(
       <DispositionHeader
         dispositionFile={props.dispositionFile}
@@ -21,6 +33,8 @@ describe('DispositionHeader component', () => {
       },
     );
 
+    await act(async () => {});
+
     return { ...utils };
   };
 
@@ -34,14 +48,14 @@ describe('DispositionHeader component', () => {
     vi.clearAllMocks();
   });
 
-  it('renders as expected when no data is provided', () => {
-    const { asFragment } = setup({ lastUpdatedBy: null });
+  it('renders as expected when no data is provided', async () => {
+    const { asFragment } = await setup({ lastUpdatedBy: null });
     expect(asFragment()).toMatchSnapshot();
   });
 
   it('renders as expected when a disposition file is provided', async () => {
     const testDispositionFile = mockDispositionFileResponse();
-    const { getByText } = setup({
+    const { getByText } = await setup({
       dispositionFile: testDispositionFile as unknown as ApiGen_Concepts_DispositionFile,
       lastUpdatedBy: {
         parentId: testDispositionFile.id || 0,
@@ -60,7 +74,7 @@ describe('DispositionHeader component', () => {
 
   it('renders the file number and name concatenated', async () => {
     const testDispositionFile = mockDispositionFileResponse();
-    const { getByText } = setup({ dispositionFile: testDispositionFile, lastUpdatedBy: null });
+    const { getByText } = await setup({ dispositionFile: testDispositionFile, lastUpdatedBy: null });
 
     expect(getByText('File:')).toBeVisible();
     expect(getByText(/FILE_NUMBER 3A8F46B/)).toBeVisible();
@@ -69,7 +83,7 @@ describe('DispositionHeader component', () => {
   it('renders the last-update-time when provided', async () => {
     const testDate = new Date().toISOString();
     const testDispositionFile = mockDispositionFileResponse();
-    const { getByText } = setup({
+    const { getByText } = await setup({
       dispositionFile: testDispositionFile,
       lastUpdatedBy: {
         parentId: testDispositionFile.id || 0,
@@ -94,7 +108,7 @@ describe('DispositionHeader component', () => {
         isDisabled: false,
       },
     };
-    const { getByText } = setup({ dispositionFile: testDispositionFile, lastUpdatedBy: null });
+    const { getByText } = await setup({ dispositionFile: testDispositionFile, lastUpdatedBy: null });
 
     expect(getByText('Status:')).toBeVisible();
     expect(getByText(/mock file status/i)).toBeVisible();

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

@@ -8,6 +8,9 @@ import { Api_LastUpdatedBy } from '@/models/api/File';
 import { ApiGen_Concepts_DispositionFile } from '@/models/api/generated/ApiGen_Concepts_DispositionFile';
 import { prettyFormatUTCDate } from '@/utils/dateUtils';
 
+import HistoricalNumbersContainer from '../../shared/header/HistoricalNumberContainer';
+import HistoricalNumberFieldView from '../../shared/header/HistoricalNumberSectionView';
+
 export interface IDispositionHeaderProps {
   dispositionFile?: ApiGen_Concepts_DispositionFile;
 
@@ -20,6 +23,8 @@ export const DispositionHeader: React.FunctionComponent<
   const leftColumnWidth = '7';
   const leftColumnLabel = '3';
 
+  const propertyIds = dispositionFile?.fileProperties?.map(fp => fp.propertyId) ?? [];
+
   return (
     <StyledRow className="no-gutters">
       <Col xs={leftColumnWidth}>
@@ -30,6 +35,7 @@ export const DispositionHeader: React.FunctionComponent<
             </HeaderField>
           </Col>
         </Row>
+        <HistoricalNumbersContainer propertyIds={propertyIds} View={HistoricalNumberFieldView} />
       </Col>
       <Col xs="5">
         <Row className="no-gutters">

source/frontend/src/features/mapSideBar/disposition/common/__snapshots__/DispositionHeader.test.tsx.snap

@@ -51,6 +51,22 @@ exports[`DispositionHeader component > renders as expected when no data is provi
           </div>
         </div>
       </div>
+      <div
+        class="row"
+      >
+        <div
+          class="pr-0 text-left col-3"
+        >
+          <label>
+            Historical File #:
+          </label>
+        </div>
+        <div
+          class="pl-1 text-left col-9"
+        >
+          <strong />
+        </div>
+      </div>
     </div>
     <div
       class="col-5"