psp-6988 File tabs fix

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

@@ -183,7 +183,8 @@ export const AcquisitionView: React.FunctionComponent<IAcquisitionViewProps> = (
                     <FilePropertyRouter
                       formikRef={formikRef}
                       selectedMenuIndex={Number(match.params.menuIndex)}
-                      acquisitionFile={acquisitionFile}
+                      file={acquisitionFile}
+                      fileType={FileTypes.Acquisition}
                       isEditing={isEditing}
                       setIsEditing={setIsEditing}
                       defaultFileTab={containerState.defaultFileTab}

source/frontend/src/features/mapSideBar/acquisition/router/FilePropertyRouter.tsx

@@ -6,17 +6,19 @@
 import { FileTypes } from '@/constants';
 import { InventoryTabNames, InventoryTabs } from '@/features/mapSideBar/property/InventoryTabs';
 import { FileTabType } from '@/features/mapSideBar/shared/detail/FileTabs';
-import { Api_AcquisitionFile } from '@/models/api/AcquisitionFile';
+import { Api_File } from '@/models/api/File';
 
 import { SideBarContext } from '../../context/sidebarContext';
 import { UpdatePropertyDetailsContainer } from '../../property/tabs/propertyDetails/update/UpdatePropertyDetailsContainer';
+import UpdatePropertyResearchContainer from '../../property/tabs/propertyResearch/update/UpdatePropertyResearchContainer';
 import { TakesUpdateContainer } from '../../property/tabs/takes/update/TakesUpdateContainer';
 import { TakesUpdateForm } from '../../property/tabs/takes/update/TakesUpdateForm';
 import { PropertyFileContainer } from '../../shared/detail/PropertyFileContainer';
 
 export interface IFilePropertyRouterProps {
   formikRef: React.Ref<FormikProps<any>>;
-  acquisitionFile?: Api_AcquisitionFile;
+  file?: Api_File;
+  fileType: FileTypes;
   isEditing: boolean;
   setIsEditing: (value: boolean) => void;
   selectedMenuIndex: number;
@@ -30,22 +32,21 @@
 
   const { setStaleLastUpdatedBy } = useContext(SideBarContext);
 
-  const onChildSucess = () => {
+  const onChildSuccess = () => {
     props.setIsEditing(false);
     setStaleLastUpdatedBy(true);
   };
 
-  if (props.acquisitionFile === undefined || props.acquisitionFile === null) {
+  if (props.file === undefined || props.file === null) {
     return null;
   }
 
-  const fileProperty = getAcquisitionFileProperty(props.acquisitionFile, props.selectedMenuIndex);
-
+  const fileProperty = getFileProperty(props.file, props.selectedMenuIndex);
   if (fileProperty == null) {
     toast.warn('Could not find property in the file, showing file details instead', {
       autoClose: 15000,
     });
-    return <Redirect to={`/mapview/sidebar/acquisition/${props.acquisitionFile.id}`} />;
+    return <Redirect to={`/mapview/sidebar/${props.fileType}/${props.file.id}`} />;
   }
 
   // render edit forms
@@ -71,9 +72,17 @@
             fileProperty={fileProperty}
             View={TakesUpdateForm}
             ref={props.formikRef}
-            onSuccess={onChildSucess}
+            onSuccess={onChildSuccess}
           />
         </Route>
+        <Route exact path={`${path}/${InventoryTabNames.research}`}>
+          <UpdatePropertyResearchContainer
+            researchFileProperty={fileProperty}
+            onSuccess={props.onSuccess}
+            ref={props.formikRef}
+          />
+        </Route>
+
         <Redirect from={`${path}`} to={`${url}/${InventoryTabNames.property}?edit=true`} />
       </Switch>
     );
@@ -83,37 +92,36 @@
       <Switch>
         <Route path={`${path}/:tab`}>
           <PropertyFileContainer
-            setEditFileProperty={() => props.setIsEditing(true)}
-            setEditTakes={() => props.setIsEditing(true)}
+            setEditing={() => props.setIsEditing(true)}
             fileProperty={fileProperty}
             defaultTab={props.defaultPropertyTab}
             customTabs={[]}
             View={InventoryTabs}
-            fileContext={FileTypes.Acquisition}
+            fileContext={props.fileType}
           />
         </Route>
-        <Redirect from={`${path}`} to={`${url}/${InventoryTabNames.property}`} />
+        <Redirect
+          from={`${path}`}
+          to={`${url}/${props.defaultPropertyTab ?? InventoryTabNames.property}`}
+        />
       </Switch>
     );
   }
 };
 
-const getAcquisitionFileProperty = (
-  acquisitionFile: Api_AcquisitionFile,
-  selectedMenuIndex: number,
-) => {
-  const properties = acquisitionFile?.fileProperties || [];
+const getFileProperty = (file: Api_File, selectedMenuIndex: number) => {
+  const properties = file?.fileProperties || [];
   const selectedPropertyIndex = selectedMenuIndex - 1;
 
   if (selectedPropertyIndex < 0 || selectedPropertyIndex >= properties.length) {
     return null;
   }
 
-  const acquisitionFileProperty = properties[selectedPropertyIndex];
-  if (!!acquisitionFileProperty.file) {
-    acquisitionFileProperty.file = acquisitionFile;
+  const fileProperty = properties[selectedPropertyIndex];
+  if (!!fileProperty) {
+    fileProperty.file = file;
   }
-  return acquisitionFileProperty;
+  return fileProperty;
 };
 
 export default FilePropertyRouter;

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

@@ -34,15 +34,39 @@
   React.PropsWithChildren<IInventoryTabsProps>
 > = ({ defaultTabKey, tabViews, activeTab }) => {
   const history = useHistory();
-  const match = useRouteMatch<{ propertyId: string }>();
+  const match = useRouteMatch<{
+    propertyId: string;
+    menuIndex: string;
+    id: string;
+    researchId: string;
+  }>();
   return (
     <TabView
       defaultActiveKey={defaultTabKey}
       activeKey={activeTab}
       onSelect={(eventKey: string | null) => {
         const tab = Object.values(InventoryTabNames).find(value => value === eventKey);
-        const path = generatePath(match.path, { propertyId: match.params.propertyId, tab });
-        history.push(path);
+        if (match.path.includes('acquisition')) {
+          const path = generatePath(match.path, {
+            menuIndex: match.params.menuIndex,
+            id: match.params.id,
+            tab,
+          });
+          history.push(path);
+        } else if (match.path.includes('research')) {
+          const path = generatePath(match.path, {
+            menuIndex: match.params.menuIndex,
+            researchId: match.params.researchId,
+            tab,
+          });
+          history.push(path);
+        } else {
+          const path = generatePath(match.path, {
+            propertyId: match.params.propertyId,
+            tab,
+          });
+          history.push(path);
+        }
       }}
     >
       {tabViews.map((view: TabInventoryView, index: number) => (

source/frontend/src/features/mapSideBar/research/ResearchContainer.tsx

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { MdTopic } from 'react-icons/md';
+import { matchPath, useHistory, useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components';
 
 import GenericModal from '@/components/common/GenericModal';
@@ -11,21 +12,22 @@
 import FileLayout from '@/features/mapSideBar/layout/FileLayout';
 import MapSideBarLayout from '@/features/mapSideBar/layout/MapSideBarLayout';
 import { useResearchRepository } from '@/hooks/repositories/useResearchRepository';
+import { useQuery } from '@/hooks/use-query';
 import useApiUserOverride from '@/hooks/useApiUserOverride';
 import { Api_File } from '@/models/api/File';
 import { Api_ResearchFile } from '@/models/api/ResearchFile';
 import { UserOverrideCode } from '@/models/api/UserOverrideCode';
+import { stripTrailingSlash } from '@/utils';
 import { getFilePropertyName } from '@/utils/mapPropertyUtils';
 
 import { SideBarContext } from '../context/sidebarContext';
 import SidebarFooter from '../shared/SidebarFooter';
 import { UpdateProperties } from '../shared/update/properties/UpdateProperties';
 import ResearchHeader from './common/ResearchHeader';
 import ResearchMenu from './common/ResearchMenu';
-import { FormKeys } from './FormKeys';
 import { useGetResearch } from './hooks/useGetResearch';
 import { useUpdateResearchProperties } from './hooks/useUpdateResearchProperties';
-import ViewSelector from './ViewSelector';
+import ResearchView from './ResearchView';
 
 export interface IResearchContainerProps {
   researchFileId: number;
@@ -61,9 +63,6 @@
     setStaleLastUpdatedBy,
   } = React.useContext(SideBarContext);
 
-  const [selectedMenuIndex, setSelectedMenuIndex] = useState<number>(0);
-  const [isEditing, setIsEditing] = useState<boolean>(false);
-  const [editKey, setEditKey] = useState(FormKeys.none);
   const [isValid, setIsValid] = useState<boolean>(true);
 
   const [isShowingPropertySelector, setIsShowingPropertySelector] = useState<boolean>(false);
@@ -72,6 +71,9 @@
 
   const [showConfirmModal, setShowConfirmModal] = useState<boolean>(false);
 
+  const history = useHistory();
+  const match = useRouteMatch();
+
   const menuItems = researchFile?.fileProperties?.map(x => getFilePropertyName(x).value) || [];
   menuItems.unshift('File Summary');
 
@@ -104,13 +106,27 @@
     }
   }, [props.researchFileId, getLastUpdatedBy, setLastUpdatedBy]);
 
+  const push = history.push;
+  const query = useQuery();
+  const setIsEditing = React.useCallback(
+    (editing: boolean) => {
+      if (editing) {
+        query.set('edit', 'true');
+      } else {
+        query.delete('edit');
+      }
+
+      push({ search: query.toString() });
+    },
+    [push, query],
+  );
+
   const onSuccess = React.useCallback(() => {
     setStaleFile(true);
     setStaleLastUpdatedBy(true);
     mapMachine.refreshMapProperties();
     setIsEditing(false);
-    setEditKey(FormKeys.none);
-  }, [mapMachine, setStaleFile, setStaleLastUpdatedBy]);
+  }, [mapMachine, setIsEditing, setStaleFile, setStaleLastUpdatedBy]);
 
   React.useEffect(() => {
     if (researchFile === undefined || researchFileId !== researchFile?.id || staleFile) {
@@ -128,13 +144,17 @@
     }
   }, [fetchLastUpdatedBy, lastUpdatedBy, researchFileId, staleLastUpdatedBy]);
 
-  if (researchFile === undefined && (loadingResearchFile || loadingResearchFileProperties)) {
-    return (
-      <>
-        <LoadingBackdrop show={true} parentScreen={true}></LoadingBackdrop>
-      </>
-    );
-  }
+  const isEditing = query.get('edit') === 'true';
+
+  const navigateToMenuRoute = (selectedIndex: number) => {
+    const route = selectedIndex === 0 ? '' : `/property/${selectedIndex}`;
+    history.push(`${stripTrailingSlash(match.url)}${route}`);
+  };
+  const propertiesMatch = matchPath<Record<string, string>>(
+    history.location.pathname,
+    `${stripTrailingSlash(match.path)}/property/:menuIndex/:tab?`,
+  );
+  const selectedMenuIndex = propertiesMatch !== null ? Number(propertiesMatch.params.menuIndex) : 0;
 
   const onMenuChange = (selectedIndex: number) => {
     if (isEditing) {
@@ -143,14 +163,14 @@
           window.confirm('You have made changes on this form. Do you wish to leave without saving?')
         ) {
           handleCancelClick();
-          setSelectedMenuIndex(selectedIndex);
+          navigateToMenuRoute(selectedIndex);
         }
       } else {
         handleCancelClick();
-        setSelectedMenuIndex(selectedIndex);
+        navigateToMenuRoute(selectedIndex);
       }
     } else {
-      setSelectedMenuIndex(selectedIndex);
+      navigateToMenuRoute(selectedIndex);
     }
   };
 
@@ -180,13 +200,20 @@
     }
     setShowConfirmModal(false);
     setIsEditing(false);
-    setEditKey(FormKeys.none);
   };
 
   const showPropertiesSelector = () => {
     setIsShowingPropertySelector(true);
   };
 
+  if (researchFile === undefined && (loadingResearchFile || loadingResearchFileProperties)) {
+    return (
+      <>
+        <LoadingBackdrop show={true} parentScreen={true}></LoadingBackdrop>
+      </>
+    );
+  }
+
   if (isShowingPropertySelector && researchFile) {
     return (
       <UpdateProperties
@@ -255,15 +282,12 @@
                   cancelButtonText="Resume editing"
                   show
                 />
-                <ViewSelector
+                <ResearchView
                   researchFile={researchFile}
-                  selectedIndex={selectedMenuIndex}
-                  isEditMode={isEditing}
-                  editKey={editKey}
                   onSuccess={onSuccess}
                   setEditMode={setIsEditing}
-                  setEditKey={setEditKey}
                   ref={formikRef}
+                  isEditing={isEditing}
                 />
               </>
             </StyledFormWrapper>