From b701021bba08cbade99242a9e749d7ef44906cbd Mon Sep 17 00:00:00 2001 From: Katherine Thiessen Date: Mon, 6 Feb 2023 20:16:40 -0600 Subject: [PATCH 1/7] updating to use react aouter outlet --- .../SampleMetadataImportComplete.tsx | 44 +++++---- .../SampleMetadataImportMapColumns.tsx | 89 +++++++++---------- .../components/SampleMetadataImportReview.tsx | 16 ++-- .../SampleMetadataImportSelectFile.tsx | 73 ++++++++------- .../components/SampleMetadataImportSteps.tsx | 17 ++-- .../components/SampleMetadataImportWizard.tsx | 30 ++----- .../samples-metadata-import/index.tsx | 36 ++++---- .../redux/importReducer.ts | 23 +++++ 8 files changed, 170 insertions(+), 158 deletions(-) diff --git a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportComplete.tsx b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportComplete.tsx index 5e8f3c7166d..dc7455ac3ad 100644 --- a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportComplete.tsx +++ b/src/main/webapp/resources/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 { updateStep } from "../redux/importReducer"; /** * React component that displays Step #4 of the Sample Metadata Uploader. @@ -19,6 +24,11 @@ export function SampleMetadataImportComplete(): JSX.Element { metadataValidateDetails, metadataSaveDetails, } = useImportSelector((state: ImportState) => state.importReducer); + const dispatch: ImportDispatch = useImportDispatch(); + + React.useEffect(() => { + dispatch(updateStep(3, "process")); + }, [dispatch]); const filteredSamples = React.useCallback( (metadataItem: MetadataItem, isSampleFound: boolean) => { @@ -76,22 +86,18 @@ export function SampleMetadataImportComplete(): JSX.Element { const navigate: NavigateFunction = useNavigate(); return ( - - - navigate(`/${projectId}/sample-metadata/upload/file`) - } - > - {i18n("SampleMetadataImportComplete.button.upload")} - - } - /> - + navigate(`/${projectId}/sample-metadata/upload/file`)} + > + {i18n("SampleMetadataImportComplete.button.upload")} + + } + /> ); } diff --git a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportMapColumns.tsx b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportMapColumns.tsx index 32d04dde8ec..548f464243a 100644 --- a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportMapColumns.tsx +++ b/src/main/webapp/resources/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,7 @@ import { MetadataHeaderItem, setSampleNameColumn, updateHeaders, + updateStep, } from "../redux/importReducer"; import { NavigateFunction } from "react-router/dist/lib/hooks"; import { @@ -58,10 +58,11 @@ export function SampleMetadataImportMapColumns(): JSX.Element { const updatedHeaders = useMemo(() => [...headers], [headers]); React.useEffect(() => { + dispatch(updateStep(1, "process")); getMetadataRestrictions().then((data) => { setRestrictions(data); }); - }, []); + }, [dispatch]); const onSubmit = async () => { if (projectId && updatedSampleNameColumn) { @@ -142,49 +143,45 @@ export function SampleMetadataImportMapColumns(): JSX.Element { ]; return ( - - - - - {i18n("SampleMetadataImportMapColumns.form.sampleNameColumn")} - - - - - - {i18n("SampleMetadataImportMapColumns.form.metadataColumns")} - - row.rowKey} - columns={columns} - dataSource={dataSource} - pagination={false} - scroll={{ y: 600 }} - locale={{ - emptyText: ( - - ), - }} - /> - + + + + {i18n("SampleMetadataImportMapColumns.form.sampleNameColumn")} + + + + + + {i18n("SampleMetadataImportMapColumns.form.metadataColumns")} + +
row.rowKey} + columns={columns} + dataSource={dataSource} + pagination={false} + scroll={{ y: 600 }} + locale={{ + emptyText: ( + + ), + }} + />
- + ); } diff --git a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx index 1d253d0cda4..5c0194d9172 100644 --- a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx +++ b/src/main/webapp/resources/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, 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; @@ -94,6 +94,10 @@ export function SampleMetadataImportReview(): JSX.Element { }), }; + React.useEffect(() => { + dispatch(updateStep(2, "process")); + }, [dispatch]); + React.useEffect(() => { setProgress(percentComplete); }, [percentComplete]); @@ -216,6 +220,7 @@ export function SampleMetadataImportReview(): JSX.Element { navigate(`/${projectId}/sample-metadata/upload/complete`); } else { setLoading(false); + dispatch(updateStep(2, "error")); notification.error({ message: i18n( "SampleMetadataImportReview.notification.partialError", @@ -226,6 +231,7 @@ export function SampleMetadataImportReview(): JSX.Element { }) .catch((payload) => { setLoading(false); + dispatch(updateStep(2, "error")); notification.error({ message: payload, className: "t-metadata-uploader-review-error", @@ -244,7 +250,7 @@ export function SampleMetadataImportReview(): JSX.Element { ); return ( - + {i18n("SampleMetadataImportReview.description")} {!isValid && ( - + ); } diff --git a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportSelectFile.tsx b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportSelectFile.tsx index 7bddb9b3a00..6d6d8133b31 100644 --- a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportSelectFile.tsx +++ b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportSelectFile.tsx @@ -2,7 +2,6 @@ import React from "react"; import { useNavigate, useParams } from "react-router-dom"; import { notification, Spin, StepsProps, Typography } from "antd"; import { DragUpload } from "../../../../components/files/DragUpload"; -import { SampleMetadataImportWizard } from "./SampleMetadataImportWizard"; import { ImportDispatch, useImportDispatch } from "../redux/store"; import { NavigateFunction } from "react-router/dist/lib/hooks"; import { RcFile } from "antd/lib/upload/interface"; @@ -138,44 +137,42 @@ export function SampleMetadataImportSelectFile(): JSX.Element { }; return ( - - - {validationErrors.length > 0 && ( - - - {i18n( - "SampleMetadataImportSelectFile.alert.valid.description.preface" - )} - -
    - {validationErrors.map((error, index) => ( -
  • - {error} -
    • - ))} -
- - {i18n( - "SampleMetadataImportSelectFile.alert.valid.description.postface" - )} - - - } - /> - )} - {i18n("SampleMetadataImportSelectFile.warning")} + + {validationErrors.length > 0 && ( + + + {i18n( + "SampleMetadataImportSelectFile.alert.valid.description.preface" + )} + +
    + {validationErrors.map((error, index) => ( +
  • + {error} +
    • + ))} +
+ + {i18n( + "SampleMetadataImportSelectFile.alert.valid.description.postface" + )} + + } - options={options} - props={{ className: "t-metadata-uploader-dropzone" }} /> - - + )} + {i18n("SampleMetadataImportSelectFile.warning")} + } + options={options} + props={{ className: "t-metadata-uploader-dropzone" }} + /> + ); } diff --git a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportSteps.tsx b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportSteps.tsx index 827de93fdf9..f18a0483501 100644 --- a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportSteps.tsx +++ b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportSteps.tsx @@ -1,23 +1,20 @@ import React from "react"; -import { Steps, StepsProps } from "antd"; +import { Steps } from "antd"; +import { ImportState, useImportSelector } from "../redux/store"; const { Step } = Steps; /** * React component that displays the steps for the Sample Metadata Uploader. - * @prop current - the current step, starting with zero - * @prop status - the status of the current step - * @prop percent - the progress percentage of the current step * @returns {*} * @constructor */ -export function SampleMetadataImportSteps({ - current, - status, - percent, -}: StepsProps): JSX.Element { +export function SampleMetadataImportSteps(): JSX.Element { + const { stepCurrent, stepStatus, percentComplete } = useImportSelector( + (state: ImportState) => state.importReducer + ); return ( - + diff --git a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportWizard.tsx b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportWizard.tsx index c266e3a4698..d063293e687 100644 --- a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportWizard.tsx +++ b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportWizard.tsx @@ -1,31 +1,15 @@ import React from "react"; -import { useParams } from "react-router-dom"; -import { PageHeader, Space, StepsProps } from "antd"; +import { Outlet, useParams } from "react-router-dom"; +import { PageHeader, Space } from "antd"; import { SampleMetadataImportSteps } from "./SampleMetadataImportSteps"; import { setBaseUrl } from "../../../../utilities/url-utilities"; -interface SampleMetadataImportWizardProps { - current: StepsProps["current"]; - status?: StepsProps["status"]; - percent?: StepsProps["percent"]; - children: React.ReactNode; -} - /** * React component that displays the Sample Metadata Uploader Wizard wrapper. - * @prop current - the current step, starting with zero - * @prop status - the status of the current step - * @prop percent - the progress percentage of the current step - * @prop children - the status of the current step * @returns {*} * @constructor */ -export function SampleMetadataImportWizard({ - current, - status, - percent, - children, -}: SampleMetadataImportWizardProps): JSX.Element { +export function SampleMetadataImportWizard(): JSX.Element { const { projectId } = useParams<{ projectId: string }>(); return ( @@ -37,12 +21,8 @@ export function SampleMetadataImportWizard({ } > - - {children} + + ); diff --git a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/index.tsx b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/index.tsx index ff98cdc21ba..c6df27492fc 100644 --- a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/index.tsx +++ b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/index.tsx @@ -8,6 +8,7 @@ import { SampleMetadataImportReview } from "./components/SampleMetadataImportRev import { SampleMetadataImportSelectFile } from "./components/SampleMetadataImportSelectFile"; import { setBaseUrl } from "../../../utilities/url-utilities"; import store from "./redux/store"; +import { SampleMetadataImportWizard } from "./components/SampleMetadataImportWizard"; /** * The Metadata Importer Page @@ -18,21 +19,26 @@ function SampleMetadataImport(): JSX.Element { } - /> - } - /> - } - /> - } - /> + path="/:projectId/sample-metadata/upload" + element={} + > + } + /> + } + /> + } + /> + } + /> + diff --git a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/redux/importReducer.ts b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/redux/importReducer.ts index b5f0f089151..9bb162e6674 100644 --- a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/redux/importReducer.ts +++ b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/redux/importReducer.ts @@ -25,6 +25,8 @@ import { Restriction } from "../../../../utilities/restriction-utilities"; import { createMetadataFields, generatePromiseList } from "./import-utilities"; import { MetadataField } from "../../../../types/irida"; +export type StepStatus = "wait" | "process" | "finish" | "error"; + export interface MetadataHeaderItem { name: string; existingRestriction: Restriction | undefined; @@ -60,6 +62,8 @@ export interface InitialState { metadataValidateDetails: Record; metadataSaveDetails: Record; percentComplete: number; + stepCurrent: number; + stepStatus: StepStatus; } const initialState: InitialState = { @@ -70,6 +74,8 @@ const initialState: InitialState = { metadataValidateDetails: {}, metadataSaveDetails: {}, percentComplete: 0, + stepCurrent: 0, + stepStatus: "process", }; /* @@ -314,6 +320,17 @@ export const updatePercentComplete = createAction( }) ); +/* +Redux action for updating the step. +For more information on redux actions see: https://redux-toolkit.js.org/api/createAction + */ +export const updateStep = createAction( + `importReducer/updateStep`, + (stepCurrent: number, stepStatus: StepStatus) => ({ + payload: { stepCurrent, stepStatus }, + }) +); + /* Redux reducer for project metadata. For more information on redux reducers see: https://redux-toolkit.js.org/api/createReducer @@ -330,6 +347,8 @@ export const importReducer = createReducer(initialState, (builder) => { state.metadataValidateDetails = {}; state.metadataSaveDetails = {}; state.percentComplete = 0; + state.stepCurrent = 0; + state.stepStatus = "process"; }); builder.addCase(setMetadata, (state, action) => { state.metadata = action.payload.metadata; @@ -350,4 +369,8 @@ export const importReducer = createReducer(initialState, (builder) => { builder.addCase(updatePercentComplete, (state, action) => { state.percentComplete = state.percentComplete + action.payload.amount; }); + builder.addCase(updateStep, (state, action) => { + state.stepCurrent = action.payload.stepCurrent; + state.stepStatus = action.payload.stepStatus; + }); }); From 9f66951789c9d7fea399d6a66a4bd3997366acff Mon Sep 17 00:00:00 2001 From: Katherine Thiessen Date: Tue, 7 Feb 2023 09:45:31 -0600 Subject: [PATCH 2/7] fixing linting error --- .../components/SampleMetadataImportSelectFile.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportSelectFile.tsx b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportSelectFile.tsx index 6d6d8133b31..067dd72b354 100644 --- a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportSelectFile.tsx +++ b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportSelectFile.tsx @@ -1,11 +1,16 @@ import React from "react"; import { useNavigate, useParams } from "react-router-dom"; -import { notification, Spin, StepsProps, Typography } from "antd"; +import { notification, Spin, Typography } from "antd"; import { DragUpload } from "../../../../components/files/DragUpload"; import { ImportDispatch, useImportDispatch } from "../redux/store"; import { NavigateFunction } from "react-router/dist/lib/hooks"; import { RcFile } from "antd/lib/upload/interface"; -import { setHeaders, setMetadata, setProjectId } from "../redux/importReducer"; +import { + setHeaders, + setMetadata, + setProjectId, + updateStep, +} from "../redux/importReducer"; import * as XLSX from "xlsx"; import { ErrorAlert } from "../../../../components/alerts/ErrorAlert"; import { SPACE_XS } from "../../../../styles/spacing"; @@ -23,7 +28,6 @@ export function SampleMetadataImportSelectFile(): JSX.Element { const { projectId } = useParams<{ projectId: string }>(); const navigate: NavigateFunction = useNavigate(); const dispatch: ImportDispatch = useImportDispatch(); - const [status, setStatus] = React.useState("process"); const [loading, setLoading] = React.useState(false); const [validationErrors, setValidationErrors] = React.useState([]); @@ -107,6 +111,7 @@ export function SampleMetadataImportSelectFile(): JSX.Element { } setValidationErrors(errors); setLoading(false); + dispatch(updateStep(0, "error")); return false; } else { const output: MetadataItem[] = cleanRows.map((row, rowIndex) => { @@ -127,7 +132,7 @@ export function SampleMetadataImportSelectFile(): JSX.Element { } } catch (error) { setLoading(false); - setStatus("error"); + dispatch(updateStep(0, "error")); notification.error({ message: i18n("SampleMetadataImportSelectFile.error", file.name), }); From 5e5c47cd1612e36c75a18d356fbfbff64ecb8232 Mon Sep 17 00:00:00 2001 From: Katherine Thiessen Date: Tue, 7 Feb 2023 10:38:03 -0600 Subject: [PATCH 3/7] splitting up step and status --- .../SampleMetadataImportComplete.tsx | 12 +++---- .../SampleMetadataImportMapColumns.tsx | 12 +++++-- .../components/SampleMetadataImportReview.tsx | 18 +++++----- .../SampleMetadataImportSelectFile.tsx | 7 ++-- .../components/SampleMetadataImportSteps.tsx | 8 +++-- .../redux/importReducer.ts | 35 +++++++++++++------ 6 files changed, 60 insertions(+), 32 deletions(-) diff --git a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportComplete.tsx b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportComplete.tsx index dc7455ac3ad..6b0fd2d4464 100644 --- a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportComplete.tsx +++ b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportComplete.tsx @@ -9,7 +9,7 @@ import { useImportSelector, } from "../redux/store"; import { NavigateFunction } from "react-router/dist/lib/hooks"; -import { updateStep } from "../redux/importReducer"; +import { updateStatus, updateStep } from "../redux/importReducer"; /** * React component that displays Step #4 of the Sample Metadata Uploader. @@ -26,10 +26,6 @@ export function SampleMetadataImportComplete(): JSX.Element { } = useImportSelector((state: ImportState) => state.importReducer); const dispatch: ImportDispatch = useImportDispatch(); - React.useEffect(() => { - dispatch(updateStep(3, "process")); - }, [dispatch]); - const filteredSamples = React.useCallback( (metadataItem: MetadataItem, isSampleFound: boolean) => { return ( @@ -93,7 +89,11 @@ export function SampleMetadataImportComplete(): JSX.Element { extra={ diff --git a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportMapColumns.tsx b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportMapColumns.tsx index 548f464243a..d72033ede47 100644 --- a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportMapColumns.tsx +++ b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportMapColumns.tsx @@ -18,6 +18,7 @@ import { MetadataHeaderItem, setSampleNameColumn, updateHeaders, + updateStatus, updateStep, } from "../redux/importReducer"; import { NavigateFunction } from "react-router/dist/lib/hooks"; @@ -58,11 +59,10 @@ export function SampleMetadataImportMapColumns(): JSX.Element { const updatedHeaders = useMemo(() => [...headers], [headers]); React.useEffect(() => { - dispatch(updateStep(1, "process")); getMetadataRestrictions().then((data) => { setRestrictions(data); }); - }, [dispatch]); + }, []); const onSubmit = async () => { if (projectId && updatedSampleNameColumn) { @@ -72,6 +72,8 @@ export function SampleMetadataImportMapColumns(): JSX.Element { ); await dispatch(updateHeaders(updatedHeaders)); navigate(`/${projectId}/sample-metadata/upload/review`); + dispatch(updateStep(2)); + dispatch(updateStatus("process")); } }; @@ -187,7 +189,11 @@ export function SampleMetadataImportMapColumns(): JSX.Element { diff --git a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx index 5c0194d9172..071017d61e1 100644 --- a/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx +++ b/src/main/webapp/resources/js/pages/projects/samples-metadata-import/components/SampleMetadataImportReview.tsx @@ -20,7 +20,7 @@ import { IconExclamationCircle, } from "../../../../components/icons/Icons"; import styled from "styled-components"; -import { saveMetadata, updateStep } 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 { @@ -94,10 +94,6 @@ export function SampleMetadataImportReview(): JSX.Element { }), }; - React.useEffect(() => { - dispatch(updateStep(2, "process")); - }, [dispatch]); - React.useEffect(() => { setProgress(percentComplete); }, [percentComplete]); @@ -218,9 +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(updateStep(2, "error")); + dispatch(updateStatus("error")); notification.error({ message: i18n( "SampleMetadataImportReview.notification.partialError", @@ -231,7 +229,7 @@ export function SampleMetadataImportReview(): JSX.Element { }) .catch((payload) => { setLoading(false); - dispatch(updateStep(2, "error")); + dispatch(updateStatus("error")); notification.error({ message: payload, className: "t-metadata-uploader-review-error", @@ -335,7 +333,11 @@ export function SampleMetadataImportReview(): JSX.Element {