PSP-9268 Sub-files tab skeleton view and container (#4395)

* Remove dead code

* Skeleton view and container for Sub-Files tab

* Update snapshots

source/backend/api/Areas/Acquisition/Controllers/AcquisitionFileController.cs

@@ -7,7 +7,6 @@
 using Microsoft.Extensions.Logging;
 using Pims.Api.Models;
 using Pims.Api.Models.Concepts.AcquisitionFile;
-using Pims.Api.Models.Concepts.CompensationRequisition;
 using Pims.Api.Models.Concepts.ExpropriationPayment;
 using Pims.Api.Policies;
 using Pims.Api.Services;
@@ -33,7 +32,6 @@ public class AcquisitionFileController : ControllerBase
     {
         #region Variables
         private readonly IAcquisitionFileService _acquisitionService;
-        private readonly ICompReqFinancialService _compReqFinancialService;
         private readonly IMapper _mapper;
         private readonly ILogger _logger;
         #endregion
@@ -44,14 +42,12 @@ public class AcquisitionFileController : ControllerBase
         /// Creates a new instance of a AcquisitionFileController class, initializes it with the specified arguments.
         /// </summary>
         /// <param name="acquisitionService"></param>
-        /// <param name="compReqFinancialService"></param>
         /// <param name="mapper"></param>
         /// <param name="logger"></param>
         ///
-        public AcquisitionFileController(IAcquisitionFileService acquisitionService, ICompReqFinancialService compReqFinancialService, IMapper mapper, ILogger<AcquisitionFileController> logger)
+        public AcquisitionFileController(IAcquisitionFileService acquisitionService, IMapper mapper, ILogger<AcquisitionFileController> logger)
         {
             _acquisitionService = acquisitionService;
-            _compReqFinancialService = compReqFinancialService;
             _mapper = mapper;
             _logger = logger;
         }

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

@@ -1005,6 +1005,15 @@ exports[`AcquisitionView component > renders as expected 1`] = `
                   >
                     Stakeholders
                   </a>
+                  <a
+                    aria-selected="false"
+                    class="nav-item nav-link"
+                    data-rb-event-key="subFiles"
+                    href="#"
+                    role="tab"
+                  >
+                    Sub-Files
+                  </a>
                 </nav>
                 <div
                   class="tab-content"

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

@@ -12,6 +12,7 @@ import useKeycloakWrapper from '@/hooks/useKeycloakWrapper';
 import { ApiGen_CodeTypes_DocumentRelationType } from '@/models/api/generated/ApiGen_CodeTypes_DocumentRelationType';
 import { ApiGen_CodeTypes_FileTypes } from '@/models/api/generated/ApiGen_CodeTypes_FileTypes';
 import { ApiGen_Concepts_AcquisitionFile } from '@/models/api/generated/ApiGen_Concepts_AcquisitionFile';
+import { exists } from '@/utils';
 
 import CompensationListContainer from '../../compensation/list/CompensationListContainer';
 import CompensationListView from '../../compensation/list/CompensationListView';
@@ -25,6 +26,8 @@ import ExpropriationTabContainerView from './expropriation/ExpropriationTabConta
 import AcquisitionSummaryView from './fileDetails/detail/AcquisitionSummaryView';
 import StakeHolderContainer from './stakeholders/detail/StakeHolderContainer';
 import StakeHolderView from './stakeholders/detail/StakeHolderView';
+import SubFileListContainer from './subFiles/SubFileListContainer';
+import SubFileListView from './subFiles/SubFileListView';
 
 export interface IAcquisitionFileTabsProps {
   acquisitionFile?: ApiGen_Concepts_AcquisitionFile;
@@ -162,6 +165,14 @@ export const AcquisitionFileTabs: React.FC<IAcquisitionFileTabsProps> = ({
     });
   }
 
+  if (exists(acquisitionFile?.id)) {
+    tabViews.push({
+      content: <SubFileListContainer acquisitionFile={acquisitionFile} View={SubFileListView} />,
+      key: FileTabType.SUB_FILES,
+      name: 'Sub-Files',
+    });
+  }
+
   const onSetActiveTab = (tab: FileTabType) => {
     const previousTab = activeTab;
     if (previousTab === FileTabType.COMPENSATIONS) {

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

@@ -147,6 +147,15 @@ exports[`AcquisitionFileTabs component > matches snapshot 1`] = `
       >
         Stakeholders
       </a>
+      <a
+        aria-selected="false"
+        class="nav-item nav-link"
+        data-rb-event-key="subFiles"
+        href="#"
+        role="tab"
+      >
+        Sub-Files
+      </a>
     </nav>
     <div
       class="tab-content"

source/frontend/src/features/mapSideBar/acquisition/tabs/subFiles/SubFileListContainer.tsx

@@ -0,0 +1,27 @@
+import { ApiGen_Concepts_AcquisitionFile } from '@/models/api/generated/ApiGen_Concepts_AcquisitionFile';
+
+import { ISubFileListViewProps } from './SubFileListView';
+
+export interface ISubFileListContainerProps {
+  View: React.FC<ISubFileListViewProps>;
+  acquisitionFile: ApiGen_Concepts_AcquisitionFile;
+}
+
+export const SubFileListContainer: React.FunctionComponent<ISubFileListContainerProps> = ({
+  View,
+  acquisitionFile,
+}) => {
+  // TODO: Add an "useEffect" to fetch the list of linked files from the backend API
+  // Use this loading flag to render a spinner in the view while loading
+  const loading = false;
+
+  const onAddSubFile = (): void => {
+    // TODO: Here we will copy some data from main file into sub-file and redirect to "Create Acquisition File" for sub-file
+    // This will be done in another pull-request.
+    throw new Error('Function not implemented yet.');
+  };
+
+  return <View loading={loading} acquisitionFile={acquisitionFile} onAdd={onAddSubFile} />;
+};
+
+export default SubFileListContainer;

source/frontend/src/features/mapSideBar/acquisition/tabs/subFiles/SubFileListView.tsx

@@ -0,0 +1,45 @@
+import { FaPlus } from 'react-icons/fa';
+
+import LoadingBackdrop from '@/components/common/LoadingBackdrop';
+import { Section } from '@/components/common/Section/Section';
+import { StyledSummarySection } from '@/components/common/Section/SectionStyles';
+import { SimpleSectionHeader } from '@/components/common/SimpleSectionHeader';
+import { StyledSectionAddButton } from '@/components/common/styles';
+import { Claims } from '@/constants';
+import useKeycloakWrapper from '@/hooks/useKeycloakWrapper';
+import { ApiGen_Concepts_AcquisitionFile } from '@/models/api/generated/ApiGen_Concepts_AcquisitionFile';
+import { exists } from '@/utils';
+
+export interface ISubFileListViewProps {
+  loading: boolean;
+  acquisitionFile: ApiGen_Concepts_AcquisitionFile;
+  onAdd: () => void;
+}
+
+export const SubFileListView: React.FunctionComponent<ISubFileListViewProps> = ({
+  loading,
+  onAdd,
+}) => {
+  const { hasClaim } = useKeycloakWrapper();
+
+  return (
+    <StyledSummarySection>
+      <LoadingBackdrop show={loading} parentScreen={true} />
+
+      <Section
+        header={
+          <SimpleSectionHeader title="Linked Files">
+            {hasClaim(Claims.ACQUISITION_ADD) && exists(onAdd) && (
+              <StyledSectionAddButton onClick={onAdd}>
+                <FaPlus size="2rem" className="mr-2" />
+                Add Sub-interest File
+              </StyledSectionAddButton>
+            )}
+          </SimpleSectionHeader>
+        }
+      ></Section>
+    </StyledSummarySection>
+  );
+};
+
+export default SubFileListView;

source/frontend/src/features/mapSideBar/shared/detail/FileTabs.tsx

@@ -26,6 +26,7 @@ export enum FileTabType {
   COMPENSATIONS = 'compensations',
   STAKEHOLDERS = 'stakeholders',
   EXPROPRIATION = 'expropriation',
+  SUB_FILES = 'subFiles',
 }
 /**
  * Tab wrapper, provides styling and nests form components within their corresponding tabs.