PSP-5951 refactor left hand file navigation - Acquisition ONLY

source/frontend/src/features/account/Login.tsx

@@ -19,7 +19,8 @@ import { LoginStyled } from './LoginStyled';
  * @returns Login component.
  */
 const Login = () => {
-  const { redirect } = useQuery();
+  const query = useQuery();
+  const redirect = query.get('redirect');
   const keyCloakWrapper = useKeycloakWrapper();
   const keycloak = keyCloakWrapper.obj;
   const isIE = usingIE();

source/frontend/src/features/mapSideBar/acquisition/AcquisitionContainer.test.tsx

@@ -1,6 +1,7 @@
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { Formik } from 'formik';
+import { createMemoryHistory } from 'history';
 import { noop } from 'lodash';
 
 import { FileTypes } from '@/constants/index';
@@ -24,8 +25,8 @@ import {
 import { SideBarContextProvider } from '../context/sidebarContext';
 import { AcquisitionContainer, IAcquisitionContainerProps } from './AcquisitionContainer';
 import { IAcquisitionViewProps } from './AcquisitionView';
-import { EditFormType } from './EditFormNames';
 
+const history = createMemoryHistory();
 const mockAxios = new MockAdapter(axios);
 const generateFn = jest.fn();
 
@@ -84,6 +85,7 @@ describe('AcquisitionContainer component', () => {
         },
         useMockAuthentication: true,
         claims: renderOptions?.claims ?? [],
+        history,
         ...renderOptions,
       },
     );
@@ -136,11 +138,9 @@ describe('AcquisitionContainer component', () => {
     await waitForElementToBeRemoved(spinner);
 
     mockAxios.onGet(new RegExp('acquisitionfiles/1/properties')).timeout();
-    await act(async () => {
-      viewProps.setContainerState({ activeEditForm: EditFormType.PROPERTY_SELECTOR });
-      viewProps.canRemove(1);
-      expect(spinner).not.toBeVisible();
-    });
+    await act(async () => viewProps.onShowPropertySelector());
+    await act(async () => viewProps.canRemove(1));
+    expect(spinner).not.toBeVisible();
   });
 
   it('canRemove returns true if file property has no associated entities', async () => {
@@ -158,10 +158,8 @@ describe('AcquisitionContainer component', () => {
         },
       },
     ]);
-    await act(async () => {
-      viewProps.setContainerState({ activeEditForm: EditFormType.PROPERTY_SELECTOR });
-    });
-    const canRemoveResponse = await viewProps.canRemove(1);
+    await act(async () => viewProps.onShowPropertySelector());
+    const canRemoveResponse = await act(() => viewProps.canRemove(1));
     expect(canRemoveResponse).toBe(true);
   });
 
@@ -181,10 +179,9 @@ describe('AcquisitionContainer component', () => {
         activityInstanceProperties: [{}],
       },
     ]);
-    await act(async () => {
-      viewProps.setContainerState({ activeEditForm: EditFormType.PROPERTY_SELECTOR });
-    });
-    expect(await viewProps.canRemove(1)).toBe(false);
+    await act(async () => viewProps.onShowPropertySelector());
+    const canRemoveResponse = await act(() => viewProps.canRemove(1));
+    expect(canRemoveResponse).toBe(false);
   });
 
   it('should change menu index when not editing', async () => {
@@ -194,7 +191,7 @@ describe('AcquisitionContainer component', () => {
     await waitForElementToBeRemoved(spinner);
 
     await act(async () => viewProps.onMenuChange(1));
-    await waitFor(async () => expect(viewProps.containerState.selectedMenuIndex).toBe(1));
+    expect(history.location.pathname).toBe('/property/1');
   });
 
   it('displays a warning if form is dirty and menu index changes', async () => {
@@ -204,13 +201,15 @@ describe('AcquisitionContainer component', () => {
     const spinner = getByTestId('filter-backdrop-loading');
     await waitForElementToBeRemoved(spinner);
 
-    await act(async () => viewProps.setContainerState({ isEditing: true }));
+    await act(async () => viewProps.setIsEditing(true));
     await act(async () => (viewProps.formikRef.current as any).setFieldValue('value', 1));
     await screen.findByText('1');
     await act(async () => viewProps.onMenuChange(1));
 
-    await waitFor(async () => expect(viewProps.containerState.showConfirmModal).toBe(true));
-    await waitFor(async () => expect(viewProps.containerState.isEditing).toBe(true));
+    expect(viewProps.containerState.showConfirmModal).toBe(true);
+    expect(history.location.pathname).toBe('/property/1');
+    const params = new URLSearchParams(history.location.search);
+    expect(params.has('edit')).toBe(false);
   });
 
   it('cancels edit if form is not dirty and menu index changes', async () => {
@@ -220,10 +219,11 @@ describe('AcquisitionContainer component', () => {
     const spinner = getByTestId('filter-backdrop-loading');
     await waitForElementToBeRemoved(spinner);
 
-    await act(async () => viewProps.setContainerState({ isEditing: true }));
+    await act(async () => viewProps.setIsEditing(true));
     await act(async () => viewProps.onMenuChange(1));
 
-    await waitFor(async () => expect(viewProps.containerState.isEditing).toBe(false));
+    const params = new URLSearchParams(history.location.search);
+    expect(params.has('edit')).toBe(false);
   });
 
   it('on success function refetches acq file', async () => {
@@ -245,10 +245,11 @@ describe('AcquisitionContainer component', () => {
     const spinner = getByTestId('filter-backdrop-loading');
     await waitForElementToBeRemoved(spinner);
 
-    await act(async () => viewProps.setContainerState({ isEditing: true }));
+    await act(async () => viewProps.setIsEditing(true));
     await act(async () => viewProps.onSuccess());
 
-    expect(viewProps.containerState.isEditing).toBe(false);
+    const params = new URLSearchParams(history.location.search);
+    expect(params.has('edit')).toBe(false);
   });
 
   it('on save function submits the form', async () => {

source/frontend/src/features/mapSideBar/acquisition/AcquisitionContainer.tsx

@@ -1,20 +1,22 @@
 import { FormikProps } from 'formik';
-import React, { useCallback, useContext, useEffect, useReducer, useRef } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useReducer, useRef } from 'react';
+import { matchPath, useHistory, useLocation, useRouteMatch } from 'react-router-dom';
 
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
 import { useMapSearch } from '@/components/maps/hooks/useMapSearch';
 import { FileTypes } from '@/constants/index';
 import { InventoryTabNames } from '@/features/mapSideBar/property/InventoryTabs';
 import { useAcquisitionProvider } from '@/hooks/repositories/useAcquisitionProvider';
+import { useQuery } from '@/hooks/use-query';
 import useApiUserOverride from '@/hooks/useApiUserOverride';
 import { Api_AcquisitionFile } from '@/models/api/AcquisitionFile';
 import { Api_File } from '@/models/api/File';
 import { UserOverrideCode } from '@/models/api/UserOverrideCode';
+import { stripTrailingSlash } from '@/utils';
 
 import { SideBarContext } from '../context/sidebarContext';
 import { FileTabType } from '../shared/detail/FileTabs';
 import { IAcquisitionViewProps } from './AcquisitionView';
-import { EditFormType } from './EditFormNames';
 
 export interface IAcquisitionContainerProps {
   acquisitionFileId: number;
@@ -25,7 +27,6 @@ export interface IAcquisitionContainerProps {
 // Interface for our internal state
 export interface AcquisitionContainerState {
   isEditing: boolean;
-  activeEditForm?: EditFormType;
   selectedMenuIndex: number;
   showConfirmModal: boolean;
   acquisitionFile: Api_AcquisitionFile | undefined;
@@ -35,7 +36,6 @@ export interface AcquisitionContainerState {
 
 const initialState: AcquisitionContainerState = {
   isEditing: false,
-  activeEditForm: undefined,
   selectedMenuIndex: 0,
   showConfirmModal: false,
   acquisitionFile: undefined,
@@ -63,6 +63,30 @@ export const AcquisitionContainer: React.FunctionComponent<IAcquisitionContainer
 
   const formikRef = useRef<FormikProps<any>>(null);
 
+  const location = useLocation();
+  const history = useHistory();
+  const match = useRouteMatch();
+  const query = useQuery();
+  const isEditing = query.get('edit') === 'true';
+
+  const setIsEditing = (value: boolean) => {
+    if (value) {
+      query.set('edit', value.toString());
+    } else {
+      query.delete('edit');
+    }
+    history.push({ search: query.toString() });
+  };
+
+  const isPropertySelector = useMemo(
+    () =>
+      matchPath<Record<string, string>>(
+        location.pathname,
+        `${stripTrailingSlash(match.path)}/property/selector`,
+      ),
+    [location.pathname, match.path],
+  );
+
   /**
    See here that we are using `newState: Partial<AcquisitionContainerState>` in our reducer
    so we can provide only the properties that are updated on our state
@@ -115,24 +139,33 @@ export const AcquisitionContainer: React.FunctionComponent<IAcquisitionContainer
 
   const close = useCallback(() => onClose && onClose(), [onClose]);
 
+  const navigateToMenuRoute = (selectedIndex: number) => {
+    const route = selectedIndex === 0 ? '' : `/property/${selectedIndex}`;
+    history.push(`${stripTrailingSlash(match.url)}${route}`);
+  };
+
   const onMenuChange = (selectedIndex: number) => {
-    if (containerState.isEditing) {
+    if (isEditing) {
       if (formikRef?.current?.dirty) {
         if (
           window.confirm('You have made changes on this form. Do you wish to leave without saving?')
         ) {
           handleCancelClick();
-          setContainerState({ selectedMenuIndex: selectedIndex });
+          navigateToMenuRoute(selectedIndex);
         }
       } else {
         handleCancelClick();
-        setContainerState({ selectedMenuIndex: selectedIndex });
+        navigateToMenuRoute(selectedIndex);
       }
     } else {
-      setContainerState({ selectedMenuIndex: selectedIndex });
+      navigateToMenuRoute(selectedIndex);
     }
   };
 
+  const onShowPropertySelector = () => {
+    history.push(`${stripTrailingSlash(match.url)}/property/selector`);
+  };
+
   const handleSaveClick = () => {
     if (formikRef !== undefined) {
       formikRef.current?.setSubmitting(true);
@@ -156,17 +189,14 @@ export const AcquisitionContainer: React.FunctionComponent<IAcquisitionContainer
     if (formikRef !== undefined) {
       formikRef.current?.resetForm();
     }
-    setContainerState({
-      showConfirmModal: false,
-      isEditing: false,
-      activeEditForm: undefined,
-    });
+    setContainerState({ showConfirmModal: false });
+    setIsEditing(false);
   };
 
   const onSuccess = () => {
     fetchAcquisitionFile();
     searchMany();
-    setContainerState({ activeEditForm: undefined, isEditing: false });
+    setIsEditing(false);
   };
 
   const canRemove = async (propertyId: number) => {
@@ -183,27 +213,29 @@ export const AcquisitionContainer: React.FunctionComponent<IAcquisitionContainer
     return withUserOverride((userOverrideCodes: UserOverrideCode[]) => {
       return updateAcquisitionProperties
         .execute({ ...file, productId: null, projectId: null }, userOverrideCodes)
-        .then(() => onSuccess());
+        .then(response => {
+          onSuccess();
+          return response;
+        });
     });
   };
 
   // UI components
-  if (
-    loadingAcquisitionFile ||
-    (loadingAcquisitionFileProperties &&
-      containerState.activeEditForm !== EditFormType.PROPERTY_SELECTOR)
-  ) {
+  if (loadingAcquisitionFile || (loadingAcquisitionFileProperties && !isPropertySelector)) {
     return <LoadingBackdrop show={true} parentScreen={true}></LoadingBackdrop>;
   }
 
   return (
     <View
+      isEditing={isEditing}
+      setIsEditing={setIsEditing}
       containerState={containerState}
       setContainerState={setContainerState}
       onClose={close}
       onCancel={handleCancelClick}
       onSave={handleSaveClick}
       onMenuChange={onMenuChange}
+      onShowPropertySelector={onShowPropertySelector}
       onCancelConfirm={handleCancelConfirm}
       onUpdateProperties={onUpdateProperties}
       onSuccess={onSuccess}