phac-nml · joshsadam · Feb 8, 2023 · Feb 7, 2023 · Feb 7, 2023 · Feb 7, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@
 * [Developer/UI]: Performance enhancements to the metadata uploader. See [PR 1445](https://github.com/phac-nml/irida/pull/1445).
 * [Developer/UI]: Fix for updating sample modified date when metadata is deleted. See [PR 1457](https://github.com/phac-nml/irida/pull/1457).
 * [Developer]: Added support for cloud based storage. Currently, Microsoft Azure Blob and Amazon AWS S3 are supported. [See PR 1194](https://github.com/phac-nml/irida/pull/1194)
+* [Developer]: Updated metadata uploader to use react-router-dom Outlet. [See PR 1464](https://github.com/phac-nml/irida/pull/1464)
 
 ## [22.09.7] - 2022/01/24
 * [UI]: Fixed bugs on NCBI Export page preventing the NCBI `submission.xml` file from being properly written. See [PR 1451](https://github.com/phac-nml/irida/pull/1451)

diff --git a/...ces/js/pages/projects/samples-metadata-import/components/SampleMetadataImportComplete.tsx b/...ces/js/pages/projects/samples-metadata-import/components/SampleMetadataImportComplete.tsx
@@ -1,10 +1,15 @@
 import React, { useMemo } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { Button, Result } from "antd";
-import { SampleMetadataImportWizard } from "./SampleMetadataImportWizard";
 import { MetadataItem } from "../../../../apis/projects/samples";
-import { ImportState, useImportSelector } from "../redux/store";
+import {
+  ImportDispatch,
+  ImportState,
+  useImportDispatch,
+  useImportSelector,
+} from "../redux/store";
 import { NavigateFunction } from "react-router/dist/lib/hooks";
+import { updateStatus, updateStep } from "../redux/importReducer";
 
 /**
  * React component that displays Step #4 of the Sample Metadata Uploader.
@@ -19,6 +24,7 @@ export function SampleMetadataImportComplete(): JSX.Element {
     metadataValidateDetails,
     metadataSaveDetails,
   } = useImportSelector((state: ImportState) => state.importReducer);
+  const dispatch: ImportDispatch = useImportDispatch();
 
   const filteredSamples = React.useCallback(
     (metadataItem: MetadataItem, isSampleFound: boolean) => {
@@ -76,22 +82,22 @@ export function SampleMetadataImportComplete(): JSX.Element {
   const navigate: NavigateFunction = useNavigate();
 
   return (
-    <SampleMetadataImportWizard current={3}>
-      <Result
-        status="success"
-        title={i18n("SampleMetadataImportComplete.result.title")}
-        subTitle={stats}
-        extra={
-          <Button
-            type="primary"
-            onClick={() =>
-              navigate(`/${projectId}/sample-metadata/upload/file`)
-            }
-          >
-            {i18n("SampleMetadataImportComplete.button.upload")}
-          </Button>
-        }
-      />
-    </SampleMetadataImportWizard>
+    <Result
+      status="success"
+      title={i18n("SampleMetadataImportComplete.result.title")}
+      subTitle={stats}
+      extra={
+        <Button
+          type="primary"
+          onClick={() => {
+            navigate(`/${projectId}/sample-metadata/upload/file`);
+            dispatch(updateStep(0));
+            dispatch(updateStatus("process"));
+          }}
+        >
+          {i18n("SampleMetadataImportComplete.button.upload")}
+        </Button>
+      }
+    />
   );
 }
diff --git a/...s/js/pages/projects/samples-metadata-import/components/SampleMetadataImportMapColumns.tsx b/...s/js/pages/projects/samples-metadata-import/components/SampleMetadataImportMapColumns.tsx
@@ -10,7 +10,6 @@ import {
   Tag,
   Typography,
 } from "antd";
-import { SampleMetadataImportWizard } from "./SampleMetadataImportWizard";
 import {
   IconArrowLeft,
   IconArrowRight,
@@ -19,6 +18,8 @@ import {
   MetadataHeaderItem,
   setSampleNameColumn,
   updateHeaders,
+  updateStatus,
+  updateStep,
 } from "../redux/importReducer";
 import { NavigateFunction } from "react-router/dist/lib/hooks";
 import {
@@ -71,6 +72,8 @@ export function SampleMetadataImportMapColumns(): JSX.Element {
       );
       await dispatch(updateHeaders(updatedHeaders));
       navigate(`/${projectId}/sample-metadata/upload/review`);
+      dispatch(updateStep(2));
+      dispatch(updateStatus("process"));
     }
   };
 
@@ -142,55 +145,55 @@ export function SampleMetadataImportMapColumns(): JSX.Element {
   ];
 
   return (
-    <SampleMetadataImportWizard current={1}>
-      <Space size="large" direction="vertical" style={{ width: "100%" }}>
-        <Space size="small" direction="vertical" style={{ width: "100%" }}>
-          <Typography.Text strong>
-            {i18n("SampleMetadataImportMapColumns.form.sampleNameColumn")}
-          </Typography.Text>
-          <Select
-            autoFocus
-            style={{ width: 300 }}
-            value={updatedSampleNameColumn}
-            onChange={onSampleNameColumnChange}
-            className="t-metadata-uploader-sample-name-column-select"
-          >
-            {headers.map((header) => (
-              <Select.Option key={header.name} value={header.name}>
-                {header.name}
-              </Select.Option>
-            ))}
-          </Select>
-        </Space>
-        <Space size="small" direction="vertical" style={{ width: "100%" }}>
-          <Typography.Text strong>
-            {i18n("SampleMetadataImportMapColumns.form.metadataColumns")}
-          </Typography.Text>
-          <Table
-            className="t-metadata-uploader-columns-table"
-            rowKey={(row) => row.rowKey}
-            columns={columns}
-            dataSource={dataSource}
-            pagination={false}
-            scroll={{ y: 600 }}
-            locale={{
-              emptyText: (
-                <Empty
-                  image={Empty.PRESENTED_IMAGE_SIMPLE}
-                  description={i18n(
-                    "SampleMetadataImportMapColumns.table.empty"
-                  )}
-                />
-              ),
-            }}
-          />
-        </Space>
+    <Space size="large" direction="vertical" style={{ width: "100%" }}>
+      <Space size="small" direction="vertical" style={{ width: "100%" }}>
+        <Typography.Text strong>
+          {i18n("SampleMetadataImportMapColumns.form.sampleNameColumn")}
+        </Typography.Text>
+        <Select
+          autoFocus
+          style={{ width: 300 }}
+          value={updatedSampleNameColumn}
+          onChange={onSampleNameColumnChange}
+          className="t-metadata-uploader-sample-name-column-select"
+        >
+          {headers.map((header) => (
+            <Select.Option key={header.name} value={header.name}>
+              {header.name}
+            </Select.Option>
+          ))}
+        </Select>
+      </Space>
+      <Space size="small" direction="vertical" style={{ width: "100%" }}>
+        <Typography.Text strong>
+          {i18n("SampleMetadataImportMapColumns.form.metadataColumns")}
+        </Typography.Text>
+        <Table
+          className="t-metadata-uploader-columns-table"
+          rowKey={(row) => row.rowKey}
+          columns={columns}
+          dataSource={dataSource}
+          pagination={false}
+          scroll={{ y: 600 }}
+          locale={{
+            emptyText: (
+              <Empty
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+                description={i18n("SampleMetadataImportMapColumns.table.empty")}
+              />
+            ),
+          }}
+        />
       </Space>
       <div style={{ display: "flex" }}>
         <Button
           className="t-metadata-uploader-file-button"
           icon={<IconArrowLeft />}
-          onClick={() => navigate(-1)}
+          onClick={() => {
+            navigate(-1);
+            dispatch(updateStep(0));
+            dispatch(updateStatus("process"));
+          }}
         >
           {i18n("SampleMetadataImportMapColumns.button.back")}
         </Button>
@@ -204,6 +207,6 @@ export function SampleMetadataImportMapColumns(): JSX.Element {
           <IconArrowRight />
         </Button>
       </div>
-    </SampleMetadataImportWizard>
+    </Space>
   );
 }
diff --git a/...urces/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx b/...urces/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx
@@ -7,20 +7,20 @@ import {
   notification,
   Popover,
   Progress,
+  Space,
   Table,
   TableProps,
   Tag,
   Tooltip,
   Typography,
 } from "antd";
-import { SampleMetadataImportWizard } from "./SampleMetadataImportWizard";
 import {
   IconArrowLeft,
   IconArrowRight,
   IconExclamationCircle,
 } from "../../../../components/icons/Icons";
 import styled from "styled-components";
-import { saveMetadata } from "../redux/importReducer";
+import { saveMetadata, updateStatus, updateStep } from "../redux/importReducer";
 import { getPaginationOptions } from "../../../../utilities/antdesign-table-utilities";
 import { NavigateFunction } from "react-router/dist/lib/hooks";
 import {
@@ -32,7 +32,7 @@ import {
 import { MetadataItem } from "../../../../apis/projects/samples";
 import { ColumnsType, ColumnType } from "antd/es/table";
 import { TableRowSelection } from "antd/lib/table/interface";
-import { ErrorAlert } from "../../../../../js/components/alerts/ErrorAlert";
+import { ErrorAlert } from "../../../../components/alerts/ErrorAlert";
 
 const { Paragraph, Text } = Typography;
 
@@ -214,8 +214,11 @@ export function SampleMetadataImportReview(): JSX.Element {
           ).length;
           if (errorCount === 0) {
             navigate(`/${projectId}/sample-metadata/upload/complete`);
+            dispatch(updateStep(3));
+            dispatch(updateStatus("process"));
           } else {
             setLoading(false);
+            dispatch(updateStatus("error"));
             notification.error({
               message: i18n(
                 "SampleMetadataImportReview.notification.partialError",
@@ -226,6 +229,7 @@ export function SampleMetadataImportReview(): JSX.Element {
         })
         .catch((payload) => {
           setLoading(false);
+          dispatch(updateStatus("error"));
           notification.error({
             message: payload,
             className: "t-metadata-uploader-review-error",
@@ -244,7 +248,7 @@ export function SampleMetadataImportReview(): JSX.Element {
   );
 
   return (
-    <SampleMetadataImportWizard current={2}>
+    <Space size="large" direction="vertical" style={{ width: "100%" }}>
       <Text>{i18n("SampleMetadataImportReview.description")}</Text>
       {!isValid && (
         <ErrorAlert
@@ -329,7 +333,11 @@ export function SampleMetadataImportReview(): JSX.Element {
         <Button
           className="t-metadata-uploader-column-button"
           icon={<IconArrowLeft />}
-          onClick={() => navigate(-1)}
+          onClick={() => {
+            navigate(-1);
+            dispatch(updateStep(1));
+            dispatch(updateStatus("process"));
+          }}
           disabled={loading}
         >
           {i18n("SampleMetadataImportReview.button.back")}
@@ -344,6 +352,6 @@ export function SampleMetadataImportReview(): JSX.Element {
           <IconArrowRight />
         </Button>
       </div>
-    </SampleMetadataImportWizard>
+    </Space>
   );
 }