psp-9446 allow historical numbers to be collapsed in two dimensions.

source/frontend/src/components/common/ExpandableTextList.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useState } from 'react';
+import { Fragment, ReactElement, useState } from 'react';
 
 import { exists } from '@/utils/utils';
 
@@ -10,6 +10,9 @@ export interface IExpandableTextListProps<T> {
   keyFunction: (item: T, index: number) => string;
   delimiter?: ReactElement | string;
   maxCollapsedLength?: number;
+  className?: string;
+  moreText?: string;
+  hideText?: string;
 }
 
 /**
@@ -22,12 +25,14 @@ export function ExpandableTextList<T>({
   renderFunction,
   delimiter,
   maxCollapsedLength,
+  moreText,
+  hideText,
 }: IExpandableTextListProps<T>) {
   const [isExpanded, setIsExpanded] = useState(false);
   const displayedItemsLength = !isExpanded ? maxCollapsedLength ?? items.length : items.length;
   const displayedItems = items.slice(0, displayedItemsLength);
   return (
-    <div>
+    <Fragment>
       {displayedItems.map((item: T, index: number) => (
         <span key={keyFunction(item, index)}>
           {renderFunction(item, index)}
@@ -36,10 +41,12 @@ export function ExpandableTextList<T>({
       ))}
       {exists(maxCollapsedLength) && maxCollapsedLength < items.length && (
         <LinkButton data-testid="expand" onClick={() => setIsExpanded(collapse => !collapse)}>
-          {isExpanded ? 'hide' : `[+${items.length - displayedItemsLength} more...]`}
+          {isExpanded
+            ? hideText ?? 'hide'
+            : `[+${items.length - displayedItemsLength} ${moreText ?? 'more...'}]`}
         </LinkButton>
       )}
-    </div>
+    </Fragment>
   );
 }
 

source/frontend/src/features/disposition/list/DispositionSearchResults/__snapshots__/DispositionSearchResults.test.tsx.snap

@@ -424,14 +424,12 @@ exports[`Disposition search results table > matches snapshot 1`] = `
             style="box-sizing: border-box; flex: 40 0 auto; min-width: 30px; width: 40px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
             title=""
           >
-            <div>
-              <span>
-                Alejandro Sanchez (MoTI Solicitor), 
-              </span>
-              <span>
-                Aman Monga (Negotiation agent)
-              </span>
-            </div>
+            <span>
+              Alejandro Sanchez (MoTI Solicitor), 
+            </span>
+            <span>
+              Aman Monga (Negotiation agent)
+            </span>
           </div>
           <div
             class="td"

source/frontend/src/features/disposition/list/__snapshots__/DispositionListView.test.tsx.snap

@@ -1215,14 +1215,12 @@ exports[`Disposition List View > matches snapshot 1`] = `
                 style="box-sizing: border-box; flex: 40 0 auto; min-width: 30px; width: 40px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
                 title=""
               >
-                <div>
-                  <span>
-                    Alejandro Sanchez (MoTI Solicitor), 
-                  </span>
-                  <span>
-                    Aman Monga (Negotiation agent)
-                  </span>
-                </div>
+                <span>
+                  Alejandro Sanchez (MoTI Solicitor), 
+                </span>
+                <span>
+                  Aman Monga (Negotiation agent)
+                </span>
               </div>
               <div
                 class="td"

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

@@ -378,9 +378,7 @@ exports[`Lease Search Results Table > matches snapshot 1`] = `
             role="cell"
             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 />
-          </div>
+          />
           <div
             class="td"
             role="cell"
@@ -489,9 +487,7 @@ exports[`Lease Search Results Table > matches snapshot 1`] = `
             role="cell"
             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 />
-          </div>
+          />
           <div
             class="td"
             role="cell"

source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap

@@ -783,9 +783,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
               </div>
               <div
                 class="pl-1 text-left col-9"
-              >
-                <div />
-              </div>
+              />
             </div>
           </div>
           <div

source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionHeader.test.tsx.snap

@@ -106,9 +106,7 @@ exports[`AcquisitionHeader component > renders as expected when no data is provi
         </div>
         <div
           class="pl-1 text-left col-9"
-        >
-          <div />
-        </div>
+        />
       </div>
     </div>
     <div

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

@@ -719,9 +719,7 @@ exports[`DispositionView component > renders as expected 1`] = `
               </div>
               <div
                 class="pl-1 text-left col-9"
-              >
-                <div />
-              </div>
+              />
             </div>
           </div>
           <div

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

@@ -73,9 +73,7 @@ exports[`DispositionHeader component > renders as expected when no data is provi
         </div>
         <div
           class="pl-1 text-left col-9"
-        >
-          <div />
-        </div>
+        />
       </div>
     </div>
     <div

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

@@ -119,8 +119,6 @@ export const LeaseHeader: React.FC<ILeaseHeaderProps> = ({ lease, lastUpdatedBy
 export default LeaseHeader;
 
 const HistoricalRow = styled(Row)`
-  max-height: 10rem;
-  overflow-y: auto;
   margin-right: 1rem;
 `;
 

source/frontend/src/features/mapSideBar/lease/common/__snapshots__/LeaseHeader.test.tsx.snap

@@ -236,8 +236,6 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
 }
 
 .c4 {
-  max-height: 10rem;
-  overflow-y: auto;
   margin-right: 1rem;
 }
 
@@ -304,9 +302,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
           </div>
           <div
             class="pl-1 text-left col-8"
-          >
-            <div />
-          </div>
+          />
         </div>
         <div
           class="row"
@@ -323,23 +319,21 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
           <div
             class="pl-1 text-left col-8"
           >
-            <div>
-              <span>
-                French Mouse Property Management
-                <br />
-              </span>
-              <button
-                class="c3 Button btn btn-link"
-                data-testid="expand"
-                type="button"
+            <span>
+              French Mouse Property Management
+              <br />
+            </span>
+            <button
+              class="c3 Button btn btn-link"
+              data-testid="expand"
+              type="button"
+            >
+              <div
+                class="Button__value"
               >
-                <div
-                  class="Button__value"
-                >
-                  [+2 more...]
-                </div>
-              </button>
-            </div>
+                [+2 more...]
+              </div>
+            </button>
           </div>
         </div>
         <div
@@ -441,9 +435,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
               </div>
               <div
                 class="pl-1 text-left col-8"
-              >
-                <div />
-              </div>
+              />
             </div>
           </div>
         </div>

source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap

@@ -761,9 +761,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
                 </div>
                 <div
                   class="pl-1 text-left col-9"
-                >
-                  <div />
-                </div>
+                />
               </div>
             </div>
             <div

source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchHeader.test.tsx.snap

@@ -119,9 +119,7 @@ exports[`ResearchHeader component > renders as expected when provided no researc
         </div>
         <div
           class="pl-1 text-left col-9"
-        >
-          <div />
-        </div>
+        />
       </div>
     </div>
     <div

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

@@ -0,0 +1,86 @@
+import { FormikProps } from 'formik';
+import { createMemoryHistory } from 'history';
+import { forwardRef } from 'react';
+
+import { mockLookups } from '@/mocks/lookups.mock';
+import { lookupCodesSlice } from '@/store/slices/lookupCodes';
+import { render, RenderOptions, waitFor } from '@/utils/test-utils';
+
+import { vi } from 'vitest';
+import HistoricalNumbersContainer, {
+  IHistoricalNumbersContainerProps,
+} from './HistoricalNumberContainer';
+import { IHistoricalNumbersViewProps } from './HistoricalNumberFieldView';
+import { useHistoricalNumberRepository } from '@/hooks/repositories/useHistoricalNumberRepository';
+
+const history = createMemoryHistory();
+const storeState = {
+  [lookupCodesSlice.name]: { lookupCodes: mockLookups },
+};
+
+const mockGetApi = {
+  error: undefined,
+  response: undefined,
+  execute: vi.fn(),
+  loading: false,
+  status: 200,
+};
+
+vi.mock('@/hooks/repositories/useHistoricalNumberRepository');
+vi.mocked(useHistoricalNumberRepository).mockImplementation(() => ({
+  getPropertyHistoricalNumbers: mockGetApi,
+  updatePropertyHistoricalNumbers: {} as any,
+}));
+
+const onSuccess = vi.fn();
+
+describe('HistoricalNumberContainer component', () => {
+  // render component under test
+
+  let viewProps: IHistoricalNumbersViewProps;
+  const View = forwardRef<FormikProps<any>, IHistoricalNumbersViewProps>((props, ref) => {
+    viewProps = props;
+    return <></>;
+  });
+
+  const setup = (
+    renderOptions: RenderOptions & { props?: Partial<IHistoricalNumbersContainerProps> },
+  ) => {
+    const utils = render(
+      <HistoricalNumbersContainer
+        {...renderOptions.props}
+        View={View}
+        propertyIds={renderOptions?.props?.propertyIds}
+      />,
+      {
+        ...renderOptions,
+        store: storeState,
+        history,
+      },
+    );
+
+    return {
+      ...utils,
+    };
+  };
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('calls hist file number api for every propertyId', async () => {
+    setup({ props: { propertyIds: [1, 2, 3] } });
+
+    await waitFor(async () => {
+      expect(mockGetApi.execute).toHaveBeenCalledWith(1);
+      expect(mockGetApi.execute).toHaveBeenCalledWith(2);
+      expect(mockGetApi.execute).toHaveBeenCalledWith(3);
+    });
+  });
+
+  it('passes the list of historical file numbers to the view', async () => {
+    mockGetApi.execute.mockResolvedValue(['hist1', 'hist2']);
+    setup({ props: { propertyIds: [1] } });
+
+    await waitFor(() => expect(viewProps.historicalNumbers).toEqual(['hist1', 'hist2']));
+  });
+});