PSP-5715 : Sec3/Sec6 add forms to acquisition file

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

@@ -15,9 +15,6 @@ const TabView: React.FunctionComponent<
 };
 
 const StyledTabWrapper = styled.div`
-  .nav-tabs {
-    height: 2.4rem;
-  }
   .tab-content {
     .tab-pane {
       position: relative;

source/frontend/src/components/common/styles.ts

@@ -86,13 +86,14 @@ export const Tabs = styled(BsTabs)`
   font-size: 1.4rem;
   border-color: transparent;
   .nav-tabs {
-    height: 2.4rem;
+    height: auto;
   }
   .nav-item {
     min-width: 5rem;
     padding: 0.1rem 0.6rem;
 
     &:hover {
+      color: ${props => props.theme.css.secondaryVariantColor};
       border-color: transparent;
     }
     &.active {

source/frontend/src/components/propertySelector/__snapshots__/MapSelectorContainer.test.tsx.snap

@@ -169,7 +169,7 @@ exports[`MapSelectorContainer component renders as expected when provided no pro
 }
 
 .c2 .nav-tabs {
-  height: 2.4rem;
+  height: auto;
 }
 
 .c2 .nav-item {
@@ -243,10 +243,6 @@ exports[`MapSelectorContainer component renders as expected when provided no pro
   height: 100%;
 }
 
-.c0 .nav-tabs {
-  height: 2.4rem;
-}
-
 .c0 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   height: calc(100% - 2.4rem);

source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap

@@ -280,7 +280,7 @@ exports[`AddLeaseContainer component renders as expected 1`] = `
 }
 
 .c11 .nav-tabs {
-  height: 2.4rem;
+  height: auto;
 }
 
 .c11 .nav-item {
@@ -379,10 +379,6 @@ exports[`AddLeaseContainer component renders as expected 1`] = `
   height: 100%;
 }
 
-.c9 .nav-tabs {
-  height: 2.4rem;
-}
-
 .c9 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   height: calc(100% - 2.4rem);

source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/UpdateLeaseContainer.test.tsx.snap

@@ -251,7 +251,7 @@ exports[`Update lease container component renders as expected 1`] = `
 }
 
 .c9 .nav-tabs {
-  height: 2.4rem;
+  height: auto;
 }
 
 .c9 .nav-item {
@@ -347,10 +347,6 @@ exports[`Update lease container component renders as expected 1`] = `
   height: 100%;
 }
 
-.c7 .nav-tabs {
-  height: 2.4rem;
-}
-
 .c7 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   height: calc(100% - 2.4rem);

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

@@ -272,7 +272,7 @@ exports[`AcquisitionView component renders as expected 1`] = `
 }
 
 .c12 .nav-tabs {
-  height: 2.4rem;
+  height: auto;
 }
 
 .c12 .nav-item {
@@ -319,10 +319,6 @@ exports[`AcquisitionView component renders as expected 1`] = `
   height: 100%;
 }
 
-.c11 .nav-tabs {
-  height: 2.4rem;
-}
-
 .c11 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   height: calc(100% - 2.4rem);

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

@@ -174,7 +174,7 @@ exports[`AcquisitionProperties component renders as expected 1`] = `
 }
 
 .c2 .nav-tabs {
-  height: 2.4rem;
+  height: auto;
 }
 
 .c2 .nav-item {
@@ -248,10 +248,6 @@ exports[`AcquisitionProperties component renders as expected 1`] = `
   height: 100%;
 }
 
-.c0 .nav-tabs {
-  height: 2.4rem;
-}
-
 .c0 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   height: calc(100% - 2.4rem);

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

@@ -250,7 +250,7 @@ exports[`AddAcquisitionContainer component renders as expected 1`] = `
 }
 
 .c12 .nav-tabs {
-  height: 2.4rem;
+  height: auto;
 }
 
 .c12 .nav-item {
@@ -375,10 +375,6 @@ exports[`AddAcquisitionContainer component renders as expected 1`] = `
   height: 100%;
 }
 
-.c10 .nav-tabs {
-  height: 2.4rem;
-}
-
 .c10 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   height: calc(100% - 2.4rem);

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

@@ -181,7 +181,7 @@ exports[`AddAcquisitionForm component renders as expected 1`] = `
 }
 
 .c9 .nav-tabs {
-  height: 2.4rem;
+  height: auto;
 }
 
 .c9 .nav-item {
@@ -292,10 +292,6 @@ exports[`AddAcquisitionForm component renders as expected 1`] = `
   height: 100%;
 }
 
-.c7 .nav-tabs {
-  height: 2.4rem;
-}
-
 .c7 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   height: calc(100% - 2.4rem);

source/frontend/src/features/mapSideBar/acquisition/tabs/AcquisitionFileTabs.test.tsx

@@ -78,4 +78,51 @@ describe('AcquisitionFileTabs component', () => {
       expect(getByText('Documents')).toHaveClass('active');
     });
   });
+
+  it('hides the expropriation tab when the Acquisition file type is "Consensual Agreement"', () => {
+    const { queryByText } = setup({
+      acquisitionFile: mockAcquisitionFileResponse(),
+      defaultTab: FileTabType.FILE_DETAILS,
+      setContainerState,
+    });
+
+    const expropriationButton = queryByText('Expropriation');
+    expect(expropriationButton).not.toBeInTheDocument();
+  });
+
+  it('shows the expropriation tab when the Acquisition file type is "Section 3"', () => {
+    const mockAcquisitionFile = mockAcquisitionFileResponse();
+    mockAcquisitionFile.acquisitionTypeCode = {
+      id: 'SECTN3',
+      description: 'Section 3 Agreement',
+      isDisabled: false,
+    };
+
+    const { queryByText } = setup({
+      acquisitionFile: mockAcquisitionFile,
+      defaultTab: FileTabType.FILE_DETAILS,
+      setContainerState,
+    });
+
+    const editButton = queryByText('Expropriation');
+    expect(editButton).toBeInTheDocument();
+  });
+
+  it('shows the expropriation tab when the Acquisition file type is "Section 6"', () => {
+    const mockAcquisitionFile = mockAcquisitionFileResponse();
+    mockAcquisitionFile.acquisitionTypeCode = {
+      id: 'SECTN6',
+      description: 'Section 6 Expropriation',
+      isDisabled: false,
+    };
+
+    const { queryByText } = setup({
+      acquisitionFile: mockAcquisitionFile,
+      defaultTab: FileTabType.FILE_DETAILS,
+      setContainerState,
+    });
+
+    const editButton = queryByText('Expropriation');
+    expect(editButton).toBeInTheDocument();
+  });
 });

source/frontend/src/features/mapSideBar/acquisition/tabs/AcquisitionFileTabs.tsx

@@ -7,7 +7,7 @@ import { NoteTypes } from '@/constants/noteTypes';
 import NoteListView from '@/features/notes/list/NoteListView';
 import ActivityListView from '@/features/properties/map/activity/list/ActivityListView';
 import useKeycloakWrapper from '@/hooks/useKeycloakWrapper';
-import { Api_AcquisitionFile } from '@/models/api/AcquisitionFile';
+import { Api_AcquisitionFile, EnumAcquisitionFileType } from '@/models/api/AcquisitionFile';
 
 import { FileTabs, FileTabType, TabFileView } from '../../shared/detail/FileTabs';
 import { AcquisitionContainerState } from '../AcquisitionContainer';
@@ -18,6 +18,8 @@ import { AcquisitionChecklistView } from './checklist/detail/AcquisitionChecklis
 import CompensationListContainer from './compensation/list/CompensationListContainer';
 import CompensationListView from './compensation/list/CompensationListView';
 import AcquisitionDocumentsTab from './documents/AcquisitionDocumentsTab';
+import ExpropriationTabContainer from './expropriation/ExpropriationTabContainer';
+import ExpropriationTabcontainerView from './expropriation/ExpropriationTabContainerView';
 import AcquisitionSummaryView from './fileDetails/detail/AcquisitionSummaryView';
 import StakeHolderContainer from './stakeholders/detail/StakeHolderContainer';
 import StakeHolderView from './stakeholders/detail/StakeHolderView';
@@ -155,6 +157,24 @@ export const AcquisitionFileTabs: React.FC<IAcquisitionFileTabsProps> = ({
     });
   }
 
+  if (
+    acquisitionFile?.id &&
+    (acquisitionFile.acquisitionTypeCode?.id === EnumAcquisitionFileType.SECTN3 ||
+      acquisitionFile.acquisitionTypeCode?.id === EnumAcquisitionFileType.SECTN6)
+  ) {
+    tabViews.push({
+      content: (
+        <ExpropriationTabContainer
+          acquisitionFileId={acquisitionFile.id}
+          acquisitionFileTypeCode={acquisitionFile.acquisitionTypeCode?.id}
+          View={ExpropriationTabcontainerView}
+        ></ExpropriationTabContainer>
+      ),
+      key: FileTabType.EXPROPRIATION,
+      name: 'Expropriation',
+    });
+  }
+
   const onSetActiveTab = (tab: FileTabType) => {
     let previousTab = activeTab;
     setActiveTab(tab);

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

@@ -176,7 +176,7 @@ exports[`AcquisitionFileTabs component matches snapshot 1`] = `
 }
 
 .c1 .nav-tabs {
-  height: 2.4rem;
+  height: auto;
 }
 
 .c1 .nav-item {
@@ -223,10 +223,6 @@ exports[`AcquisitionFileTabs component matches snapshot 1`] = `
   height: 100%;
 }
 
-.c0 .nav-tabs {
-  height: 2.4rem;
-}
-
 .c0 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   height: calc(100% - 2.4rem);

source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/ExpropriationTabContainer.tsx

@@ -0,0 +1,28 @@
+import { useContext } from 'react';
+
+import { SideBarContext } from '@/features/mapSideBar/context/sidebarContext';
+
+import { IExpropriationTabcontainerViewProps } from './ExpropriationTabContainerView';
+
+export interface IExpropriationTabContainer {
+  acquisitionFileId: number;
+  acquisitionFileTypeCode: string;
+  View: React.FunctionComponent<React.PropsWithChildren<IExpropriationTabcontainerViewProps>>;
+}
+
+export const ExpropriationTabContainer: React.FunctionComponent<
+  React.PropsWithChildren<IExpropriationTabContainer>
+> = ({ View, acquisitionFileTypeCode }) => {
+  const { file, fileLoading } = useContext(SideBarContext);
+  if (!!file && file?.id === undefined && fileLoading === false) {
+    throw new Error('Unable to determine id of current file.');
+  }
+
+  return !!file?.id ? (
+    <>
+      <View loading={fileLoading} acquisitionFileTypeCode={acquisitionFileTypeCode}></View>
+    </>
+  ) : null;
+};
+
+export default ExpropriationTabContainer;

source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/ExpropriationTabContainerView.test.tsx

@@ -0,0 +1,58 @@
+import { EnumAcquisitionFileType } from '@/models/api/AcquisitionFile';
+import { render, RenderOptions } from '@/utils/test-utils';
+
+import ExpropiationTabcontainerView, {
+  IExpropriationTabcontainerViewProps,
+} from './ExpropriationTabContainerView';
+
+describe('Expropiatin Tab Container View', () => {
+  const setup = async (
+    renderOptions: RenderOptions & { props?: Partial<IExpropriationTabcontainerViewProps> },
+  ) => {
+    const utils = render(
+      <ExpropiationTabcontainerView
+        {...renderOptions.props}
+        loading={renderOptions.props?.loading ?? false}
+        acquisitionFileTypeCode={
+          renderOptions.props?.acquisitionFileTypeCode ?? EnumAcquisitionFileType.SECTN6
+        }
+      />,
+      {
+        ...renderOptions,
+      },
+    );
+
+    return {
+      ...utils,
+    };
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('displays a loading spinner when loading', async () => {
+    const { getByTestId } = await setup({ props: { loading: true } });
+    const spinner = getByTestId('filter-backdrop-loading');
+    expect(spinner).toBeVisible();
+  });
+
+  it('shows the sections for Acquisition file type "Section 6"', async () => {
+    const { queryByTestId } = await setup({});
+    expect(queryByTestId('form-1-section')).toBeInTheDocument();
+    expect(queryByTestId('form-5-section')).toBeInTheDocument();
+    expect(queryByTestId('form-8-section')).toBeInTheDocument();
+    expect(queryByTestId('form-9-section')).toBeInTheDocument();
+  });
+
+  it('shows the sections for Acquisition file type "Section 3"', async () => {
+    const { queryByTestId } = await setup({
+      props: { acquisitionFileTypeCode: EnumAcquisitionFileType.SECTN3 },
+    });
+
+    expect(queryByTestId('form-1-section')).not.toBeInTheDocument();
+    expect(queryByTestId('form-5-section')).not.toBeInTheDocument();
+    expect(queryByTestId('form-8-section')).toBeInTheDocument();
+    expect(queryByTestId('form-9-section')).not.toBeInTheDocument();
+  });
+});