[FIX] Styling issues on All Documents page for Proejcts (#3211)

* fix a bunch of issues: table tag style, table categories, last modified date, bonus: modal close button alignment on CORE

* remove stray comma

services/common/src/components/common/CoreTableCommonColumns.tsx

@@ -152,7 +152,7 @@ export const renderTaggedColumn = (
           <div className={`tag-text-${containerClass}`}>{text}</div>
           {tagText && (
             <div className="file-history-container">
-              <Tag className="table-tag-primary" icon={icon}>
+              <Tag className="table-tag table-tag--primary" icon={icon}>
                 {tagText}
               </Tag>
             </div>

services/common/src/components/documents/DocumentColumns.tsx

@@ -39,14 +39,14 @@ const documentWithTag = (
               <Tag
                 icon={<ClockCircleOutlined />}
                 style={{ border: "none" }}
-                className="file-version-amount table-tag-primary"
+                className="table-tag table-tag--primary"
               >
                 {record.number_prev_versions}
               </Tag>
             </Tooltip>
           </span>
         ) : null}
-        {record.is_archived ? <Tag>{"Archived"}</Tag> : null}
+        {record.is_archived ? <Tag className="table-tag table-tag--grey">{"Archived"}</Tag> : null}
       </span>
     </div>
   );

services/common/src/components/documents/spatial/SpatialDocumentTable.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useState } from "react";
 import { useDispatch } from "react-redux";
-import DocumentTableProps from "@mds/common/interfaces/document/documentTableProps.interface";
+import { GenericDocTableProps } from "@mds/common/interfaces/document/documentTableProps.interface";
 import CoreTable from "../../common/CoreTable";
 import { uploadDateColumn, uploadedByColumn } from "../DocumentColumns";
 import {
@@ -14,8 +14,15 @@ import DocumentCompression from "../DocumentCompression";
 import { MineDocument } from "@mds/common/models/documents/document";
 import { spatialBundlesFromFiles } from "@mds/common/redux/slices/spatialDataSlice";
 import { downloadFileFromDocumentManager } from "@mds/common/redux/utils/actionlessNetworkCalls";
+import { ISpatialBundle } from "@mds/common/interfaces/document/spatialBundle.interface";
+import { IMineDocument } from "@mds/common/interfaces";
 
-const SpatialDocumentTable: FC<DocumentTableProps> = ({ documents }) => {
+interface SpatialDocumentTableProps extends GenericDocTableProps<ISpatialBundle> {
+  documents: IMineDocument[];
+  categoryText?: string; // if set, will display a category column with this text
+}
+
+const SpatialDocumentTable: FC<SpatialDocumentTableProps> = ({ documents, categoryText }) => {
   const dispatch = useDispatch();
   const [isCompressionModalVisible, setIsCompressionModalVisible] = useState(false);
 
@@ -56,8 +63,19 @@ const SpatialDocumentTable: FC<DocumentTableProps> = ({ documents }) => {
     { key: "view-detail", label: "View Details", clickFunction: viewSpatialBundle },
   ];
 
+  const categoryColumn = categoryText
+    ? [
+        {
+          key: "category",
+          title: "Category",
+          render: () => <div title="Category">{categoryText}</div>,
+        },
+      ]
+    : [];
+
   const columns = [
     renderTaggedColumn("document_name", "bundleSize", "File Name"),
+    ...categoryColumn,
     uploadDateColumn("upload_date", "Last Modified"),
     uploadedByColumn("create_user", "Created By"),
     renderActionsColumn({ actions, recordActionsFilter }),

services/common/src/components/documents/spatial/__snapshots__/SpatialDocumentTable.spec.tsx.snap

@@ -272,7 +272,7 @@ exports[`SpatialDocumentTable renders properly 1`] = `
                           class="file-history-container"
                         >
                           <span
-                            class="ant-tag table-tag-primary"
+                            class="ant-tag table-tag table-tag--primary"
                           >
                             <svg
                               aria-hidden="true"

services/common/src/components/projects/ArchivedDocumentsSection.tsx

@@ -12,20 +12,24 @@ interface ArchivedDocumentsSectionProps {
   documents: MineDocument[];
   titleLevel?: 1 | 2 | 3 | 4 | 5;
   href?: string;
+  showCategory?: boolean;
 }
 
 const ArchivedDocumentsSection: FC<ArchivedDocumentsSectionProps> = ({
   titleLevel = 4,
   href = "archived-documents",
   documents,
+  showCategory = true,
 }) => {
   const { isFeatureEnabled } = useFeatureFlag();
 
   if (!isFeatureEnabled(Feature.MAJOR_PROJECT_ARCHIVE_FILE)) {
     return <></>;
   }
 
-  const additionalColumns = [renderCategoryColumn("category_code", "Category", CATEGORY_CODE)];
+  const additionalColumns = showCategory
+    ? [renderCategoryColumn("category_code", "Category", CATEGORY_CODE)]
+    : [];
 
   return (
     <div id={href}>

services/common/src/components/projects/ProjectDocumentsTab.tsx

@@ -3,7 +3,13 @@ import { useDispatch, useSelector } from "react-redux";
 import ScrollSidePageWrapper from "../common/ScrollSidePageWrapper";
 import { ScrollSideMenuProps } from "../common/ScrollSideMenu";
 import { fetchProjectById } from "@mds/common/redux/actionCreators/projectActionCreator";
-import { Feature, IProject, IProjectSummaryAuthorization, SystemFlagEnum } from "../..";
+import {
+  CATEGORY_CODE,
+  Feature,
+  IProject,
+  IProjectSummaryAuthorization,
+  SystemFlagEnum,
+} from "../..";
 import { Alert, Col, Row, Typography } from "antd";
 import ProjectDocumentsTabSection from "./ProjectDocumentsTabSection";
 import { useFeatureFlag } from "@mds/common/providers/featureFlags/useFeatureFlag";
@@ -15,13 +21,16 @@ import SpatialDocumentTable from "../documents/spatial/SpatialDocumentTable";
 import { fetchMineDocuments } from "@mds/common/redux/actionCreators/mineActionCreator";
 import { MineDocument } from "@mds/common/models/documents/document";
 import Loading from "../common/Loading";
+import { getProjectSummaryDocumentTypesHash } from "@mds/common/redux/selectors/staticContentSelectors";
 
 interface ProjectDocumentsTabProps {
   project: IProject;
 }
 const ProjectDocumentsTab: FC<ProjectDocumentsTabProps> = ({ project }) => {
   const dispatch = useDispatch();
   const mineDocuments = useSelector(getMineDocuments);
+  const projectSummaryDocumentTypesHash = useSelector(getProjectSummaryDocumentTypesHash);
+
   const { isFeatureEnabled } = useFeatureFlag();
   const systemFlag = useSelector(getSystemFlag);
   const isCore = systemFlag === SystemFlagEnum.core;
@@ -72,28 +81,54 @@ const ProjectDocumentsTab: FC<ProjectDocumentsTabProps> = ({ project }) => {
       .toLowerCase();
   };
 
-  const projectSummaryDocs = project?.project_summary?.documents ?? [];
+  const projectSummaryDocs =
+    project?.project_summary?.documents.map(
+      (d) =>
+        new MineDocument({
+          ...d,
+          category: projectSummaryDocumentTypesHash[d.project_summary_document_type_code],
+        })
+    ) ?? [];
 
   const pdSpatialDocuments = projectSummaryDocs.filter(
-    (doc) => doc.project_summary_document_type_code === "SPT"
+    (doc) => doc.category === projectSummaryDocumentTypesHash.SPT
   );
   const pdSupportingDocuments = projectSummaryDocs.filter(
-    (doc) => doc.project_summary_document_type_code === "SPR"
+    (doc) => doc.category === projectSummaryDocumentTypesHash.SPR
   );
 
-  const majorMineAppDocs = project?.major_mine_application?.documents ?? [];
+  const majorMineAppDocs =
+    project?.major_mine_application?.documents.map(
+      (d) =>
+        new MineDocument({
+          ...d,
+          category: CATEGORY_CODE[d.major_mine_application_document_type_code],
+        })
+    ) ?? [];
 
-  const primaryDocuments = majorMineAppDocs.filter(
-    (doc) => doc.major_mine_application_document_type_code === "PRM"
-  );
-  const mmaSpatialDocuments = majorMineAppDocs.filter(
-    (doc) => doc.major_mine_application_document_type_code === "SPT"
-  );
+  const primaryDocuments = majorMineAppDocs.filter((doc) => doc.category === CATEGORY_CODE.PRM);
+  const mmaSpatialDocuments = majorMineAppDocs.filter((doc) => doc.category === CATEGORY_CODE.SPT);
   const mmaSupportingDocuments = majorMineAppDocs.filter(
-    (doc) => doc.major_mine_application_document_type_code === "SPR"
+    (doc) => doc.category === CATEGORY_CODE.SPR
   );
-  const ministryDecisionDocuments = project?.project_decision_package?.documents ?? [];
+  const ministryDecisionDocuments =
+    project?.project_decision_package?.documents?.map(
+      (d) =>
+        new MineDocument({
+          ...d,
+          category: CATEGORY_CODE[d.project_decision_package_document_type_code],
+        })
+    ) ?? [];
+  const irtDocuments =
+    project?.information_requirements_table?.documents?.map(
+      (d) =>
+        new MineDocument({
+          ...d,
+          category: CATEGORY_CODE[d.information_requirements_table_document_type_code],
+        })
+    ) ?? [];
 
+  const spatialCategoryText = "Spatial Files";
   const sections: any[] = [
     {
       href: "project-description",
@@ -123,7 +158,13 @@ const ProjectDocumentsTab: FC<ProjectDocumentsTabProps> = ({ project }) => {
             key={auth.project_summary_authorization_guid}
             canArchive={false}
             onArchivedDocuments={refreshData}
-            documents={auth.amendment_documents}
+            documents={auth.amendment_documents.map(
+              (d) =>
+                new MineDocument({
+                  ...d,
+                  category: projectSummaryDocumentTypesHash[d.project_summary_document_type_code],
+                })
+            )}
           />
         ),
       };
@@ -134,7 +175,7 @@ const ProjectDocumentsTab: FC<ProjectDocumentsTabProps> = ({ project }) => {
       content: (
         <>
           <Typography.Title level={4}>Spatial Components</Typography.Title>
-          <SpatialDocumentTable documents={pdSpatialDocuments.map((d) => new MineDocument(d))} />
+          <SpatialDocumentTable documents={pdSpatialDocuments} categoryText={spatialCategoryText} />
         </>
       ),
     },
@@ -145,7 +186,7 @@ const ProjectDocumentsTab: FC<ProjectDocumentsTabProps> = ({ project }) => {
         <ProjectDocumentsTabSection
           id="pd-supporting-documents"
           title="Supporting Documents"
-          documents={pdSupportingDocuments.map((d) => new MineDocument(d))}
+          documents={pdSupportingDocuments}
           onArchivedDocuments={refreshData}
         />
       ),
@@ -157,7 +198,7 @@ const ProjectDocumentsTab: FC<ProjectDocumentsTabProps> = ({ project }) => {
           id="information-requirements-table"
           key="information-requirements-table"
           onArchivedDocuments={refreshData}
-          documents={project.information_requirements_table.documents}
+          documents={irtDocuments}
         />
       ),
     },
@@ -180,7 +221,10 @@ const ProjectDocumentsTab: FC<ProjectDocumentsTabProps> = ({ project }) => {
       content: (
         <>
           <Typography.Title level={4}>Spatial Components</Typography.Title>
-          <SpatialDocumentTable documents={mmaSpatialDocuments.map((d) => new MineDocument(d))} />
+          <SpatialDocumentTable
+            documents={mmaSpatialDocuments}
+            categoryText={spatialCategoryText}
+          />
         </>
       ),
     },
@@ -203,13 +247,13 @@ const ProjectDocumentsTab: FC<ProjectDocumentsTabProps> = ({ project }) => {
           id="ministry-decision-documentation"
           key="ministry-decision-documentation"
           onArchivedDocuments={refreshData}
-          documents={ministryDecisionDocuments.map((doc) => new MineDocument(doc))}
+          documents={ministryDecisionDocuments}
         />
       ),
     },
     isFeatureEnabled(Feature.MAJOR_PROJECT_ARCHIVE_FILE) && {
       href: "archived-documents",
-      content: <ArchivedDocumentsSection documents={mineDocuments} />,
+      content: <ArchivedDocumentsSection documents={mineDocuments} showCategory={false} />,
     },
   ].filter(Boolean);
 

services/common/src/components/projects/ProjectDocumentsTabSection.tsx

@@ -1,14 +1,14 @@
 import React, { FC } from "react";
 import { Row, Col, Typography } from "antd";
 import DocumentTable from "../documents/DocumentTable";
-import { IMineDocument } from "../..";
 import { MineDocument } from "@mds/common/models/documents/document";
 import { formatUrlToUpperCaseString } from "@mds/common/redux/utils/helpers";
+import { renderTextColumn } from "../common/CoreTableCommonColumns";
 
 interface ProjectDocumentsTabSectionProps {
   id: string;
   title?: string;
-  documents: IMineDocument[];
+  documents: MineDocument[];
   onArchivedDocuments: () => Promise<void>;
   canArchive?: boolean;
 }
@@ -28,8 +28,9 @@ const ProjectDocumentsTabSection: FC<ProjectDocumentsTabSectionProps> = ({
       </Col>
       <Col span={24}>
         <DocumentTable
-          documents={documents?.map((d) => new MineDocument(d)) ?? []}
+          documents={documents ?? []}
           documentParent={title}
+          additionalColumns={[renderTextColumn("category", "Category")]}
           canArchiveDocuments={canArchive}
           onArchivedDocuments={onArchivedDocuments}
           showVersionHistory={true}