[MDS-5583] View Report (#2885)

* create a new page on MS to navigate to, and fetch a single mine report record on that page. Already had the endpoint there, but no 'get' of a single record. Made a couple files typescript. Make the link to the new page from the 'view' on the table

* bringing over Document components to common and using them. Create initialValues for the form, pass them in. Update Callout to tsx

* null check on documents

* don't add documents to IMineReport, handle where it's used

* move document components into appropriate directory

* get a temporary edit toggle on the page, and then fix date bug on the edit with initialValues

* clean up: TODO on delete document, fix bug in RenderDate where it was picking the previous year, pass the right form values to ReportFilesTable, do submission handling on the ReportPage

* some adjustments to what's displayed on view mode

* tests: update snaps, bring over data mocks (add new fields to an entry of mine reports, too) and give some initial values to view report form to test that all out

* move submitter_name & email out of submission and into report

* simplify useEffect logic

services/common/src/components/common/Callout.tsx

@@ -0,0 +1,22 @@
+import React, { FC, ReactNode } from "react";
+
+import { CALLOUT_SEVERITY } from "@mds/common/constants/strings";
+
+interface CallOutProps {
+  message: string | ReactNode;
+  title?: string;
+  severity: string;
+}
+
+const Callout: FC<CallOutProps> = ({ message, title, severity = CALLOUT_SEVERITY.info }) => {
+  const formattedMessage = typeof message === "string" ? <p>{message}</p> : message;
+
+  return (
+    <div className={`bcgov-callout--${severity} bcgov-callout`}>
+      {title && <p className="bcgov-callout-title">{title}</p>}
+      {formattedMessage}
+    </div>
+  );
+};
+
+export default Callout;

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

@@ -0,0 +1,54 @@
+import React, { FC } from "react";
+
+import { Alert, Button, Form, Typography } from "antd";
+import { IMineDocument } from "@mds/common";
+import { MineDocument } from "@mds/common/models/documents/document";
+import DocumentTable from "./DocumentTable";
+
+interface ArchiveDocumentModalProps {
+  documents: IMineDocument[];
+  handleSubmit(documents: IMineDocument[]): Promise<void>;
+  closeModal(): void;
+}
+
+const transformDocs = (documents: IMineDocument[]): MineDocument[] =>
+  documents.map((doc) => new MineDocument(doc));
+
+const ArchiveDocumentModal: FC<ArchiveDocumentModalProps> = (props: ArchiveDocumentModalProps) => {
+  return (
+    <Form
+      layout="vertical"
+      onFinish={() => props.handleSubmit(props.documents).then(props.closeModal)}
+    >
+      <Typography.Paragraph>
+        <Alert
+          message="Archived files are not reviewed as part of the submission"
+          showIcon
+          type="warning"
+          description="By archiving this file, you are archiving all of its previous versions. This action cannot be undone, you can find the file in Archived Documents."
+        />
+      </Typography.Paragraph>
+
+      <Typography.Paragraph strong>
+        You&apos;re about to archive the following file{props.documents?.length > 1 ? "s" : ""}:
+      </Typography.Paragraph>
+
+      <DocumentTable
+        documents={transformDocs(props.documents)}
+        view="minimal"
+        excludedColumnKeys={["actions", "category"]}
+      />
+
+      <div className="ant-modal-footer">
+        <Button className="full-mobile" onClick={props.closeModal}>
+          Cancel
+        </Button>
+        <Button className="full-mobile" type="primary" htmlType="submit">
+          Archive
+        </Button>
+      </div>
+    </Form>
+  );
+};
+
+export default ArchiveDocumentModal;

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

@@ -1,10 +1,11 @@
-import React, { FC, FunctionComponent, ReactElement } from "react";
+import React, { FC, FunctionComponent } from "react";
 
 import { Alert, Button, Form, Typography } from "antd";
 import { MineDocument } from "@mds/common/models/documents/document";
 import DocumentTableProps from "@mds/common/interfaces/document/documentTableProps.interface";
 
 interface DeleteDocumentModalProps {
+  // TODO: DocumentTable is in common now. Use import instead of prop.
   DocumentTable: FunctionComponent<DocumentTableProps>;
   documents: MineDocument[];
   handleSubmit(documents: MineDocument[]): Promise<void>;

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

@@ -0,0 +1,180 @@
+import React, { ReactNode } from "react";
+import * as Strings from "@mds/common/constants/strings";
+import { Button, Popconfirm, Tag, Tooltip } from "antd";
+import { ColumnType } from "antd/lib/table";
+import {
+  renderDateColumn,
+  renderTextColumn,
+} from "@mds/common/components/common/CoreTableCommonColumns";
+import { MineDocument } from "@mds/common/models/documents/document";
+import { nullableStringSorter } from "@mds/common/redux/utils/helpers";
+import ClockCircleOutlined from "@ant-design/icons/ClockCircleOutlined";
+import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
+import { downloadFileFromDocumentManager } from "@mds/common/redux/utils/actionlessNetworkCalls";
+import DocumentLink from "./DocumentLink";
+
+const documentWithTag = (
+  record: MineDocument,
+  elem: ReactNode,
+  title: string,
+  showVersions = false
+) => {
+  return (
+    <div
+      className="inline-flex flex-between file-name-container"
+      style={showVersions && record.number_prev_versions === 0 ? { marginLeft: "38px" } : {}}
+      title={title}
+    >
+      {elem}
+
+      <span className="file-history-container">
+        {showVersions && record.number_prev_versions > 0 ? (
+          <span>
+            <Tooltip
+              title={`This file has ${record.number_prev_versions} previous versions`}
+              placement="top"
+              mouseEnterDelay={1}
+            >
+              {/* DIFFERENCE FROM CORE: Core gives a color attribute of #5E46A1 to <Tag /> */}
+              <Tag
+                icon={<ClockCircleOutlined />}
+                style={{ border: "none" }}
+                className="file-version-amount"
+              >
+                {record.number_prev_versions}
+              </Tag>
+            </Tooltip>
+          </span>
+        ) : null}
+        {record.is_archived ? <Tag>{"Archived"}</Tag> : null}
+      </span>
+    </div>
+  );
+};
+
+export const renderTaggedColumn = (
+  dataIndex: string,
+  title: string,
+  sortable = false,
+  placeHolder = ""
+) => {
+  return {
+    title,
+    dataIndex,
+    key: dataIndex,
+    render: (text: any, record: MineDocument) => {
+      const content = (
+        <div className={record.number_prev_versions !== 0 ? "file-name-text" : ""}>
+          {text ?? placeHolder}
+        </div>
+      );
+      return documentWithTag(record, content, title);
+    },
+    ...(sortable ? { sorter: nullableStringSorter(dataIndex) } : null),
+  };
+};
+
+export const renderDocumentLinkColumn = (
+  dataIndex: string,
+  title = "File Name",
+  sortable = true,
+  docManGuidIndex = "document_manager_guid"
+): ColumnType<MineDocument> => {
+  return {
+    title,
+    dataIndex,
+    key: dataIndex,
+    render: (text = "", record: MineDocument) => {
+      const link = (
+        <div
+          key={record.key ?? record[docManGuidIndex]}
+          className={record.number_prev_versions !== 0 ? "file-name-text" : ""}
+        >
+          <DocumentLink
+            documentManagerGuid={record[docManGuidIndex]}
+            documentName={text}
+            truncateDocumentName={false}
+          />
+        </div>
+      );
+      return documentWithTag(record, link, title);
+    },
+    ...(sortable ? { sorter: nullableStringSorter(dataIndex) } : null),
+  };
+};
+
+export const documentNameColumn = (
+  documentNameColumnIndex = "document_name",
+  title = "File Name",
+  minimalView = false
+) => {
+  return minimalView
+    ? renderTaggedColumn(documentNameColumnIndex, title)
+    : renderDocumentLinkColumn(documentNameColumnIndex, title, true);
+};
+
+export const documentNameColumnNew = (
+  dataIndex = "document_name",
+  title = "File Name",
+  sortable = true,
+  showVersions = true
+) => {
+  return {
+    title: showVersions ? <span style={{ marginLeft: "38px" }}>{title}</span> : title,
+    dataIndex,
+    key: dataIndex,
+    render: (text: string, record: MineDocument) => {
+      const docLink = (
+        <a
+          style={record?.number_prev_versions > 0 ? { marginLeft: "14px" } : {}}
+          onClick={() => downloadFileFromDocumentManager(record)}
+        >
+          {text}
+        </a>
+      );
+      return documentWithTag(record, docLink, "File Name", showVersions);
+    },
+    ...(sortable ? { sorter: nullableStringSorter(dataIndex) } : null),
+  };
+};
+
+export const uploadDateColumn = (
+  uploadDateIndex = "upload_date",
+  title = "Uploaded",
+  sortable = true
+) => {
+  return renderDateColumn(uploadDateIndex, title, sortable, null, Strings.EMPTY_FIELD);
+};
+
+export const uploadedByColumn = (
+  uploadedByIndex = "update_user",
+  title = "Uploaded By",
+  sortable = true
+) => {
+  return renderTextColumn(uploadedByIndex, title, sortable);
+};
+
+export const removeFunctionColumn = (
+  removeFunction,
+  documentParent = "",
+  documentNameColumnIndex = "document_name"
+) => {
+  return {
+    key: "remove",
+    render: (record) => (
+      <div>
+        <Popconfirm
+          placement="topLeft"
+          title={`Are you sure you want to delete ${record[documentNameColumnIndex]}?`}
+          onConfirm={(event) => removeFunction(event, record.key, documentParent)}
+          okText="Delete"
+          cancelText="Cancel"
+        >
+          <Button ghost type="primary" size="small">
+            <DeleteOutlined className="violet" />
+          </Button>
+        </Popconfirm>
+      </div>
+    ),
+  };
+};