chore(website): Replace ManagedErrorFeedback with react-toastify (#3120)

loculus-project · Oct 30, 2024 · 0e4a6f2 · 0e4a6f2
1 parent f1da207
commit 0e4a6f2
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 110 deletions.
diff --git a/website/src/components/Edit/EditPage.tsx b/website/src/components/Edit/EditPage.tsx
@@ -1,5 +1,6 @@
 import { sentenceCase, snakeCase } from 'change-case';
 import { type Dispatch, type FC, Fragment, type SetStateAction, useMemo, useRef, useState } from 'react';
+import { toast } from 'react-toastify';
 
 import { EditableDataRow, ProcessedDataRow } from './DataRow.tsx';
 import type { Row } from './InputField.tsx';
@@ -21,7 +22,6 @@ import { getAccessionVersionString } from '../../utils/extractAccessionVersion.t
 import { ConfirmationDialog } from '../DeprecatedConfirmationDialog.tsx';
 import { BoxWithTabsBox, BoxWithTabsTab, BoxWithTabsTabBar } from '../common/BoxWithTabs.tsx';
 import { FixedLengthTextViewer } from '../common/FixedLengthTextViewer.tsx';
-import { ManagedErrorFeedback, useErrorFeedbackState } from '../common/ManagedErrorFeedback.tsx';
 import { withQueryProvider } from '../common/withQueryProvider.tsx';
 
 type EditPageProps = {
@@ -82,7 +82,6 @@ const InnerEditPage: FC<EditPageProps> = ({
     const [editedSequences, setEditedSequences] = useState(mapSequencesToRow(dataToEdit));
     const [processedSequenceTab, setProcessedSequenceTab] = useState(0);
 
-    const { errorMessage, isErrorOpen, openErrorFeedback, closeErrorFeedback } = useErrorFeedbackState();
     const dialogRef = useRef<HTMLDialogElement>(null);
 
     const isCreatingRevision = dataToEdit.status === approvedForReleaseStatus;
@@ -92,15 +91,15 @@ const InnerEditPage: FC<EditPageProps> = ({
         clientConfig,
         accessToken,
         dataToEdit,
-        openErrorFeedback,
+        (message) => toast.error(message, { position: 'top-center', autoClose: false }),
     );
 
     const { mutate: submitEdit, isLoading: isEditLoading } = useSubmitEdit(
         organism,
         clientConfig,
         accessToken,
         dataToEdit,
-        openErrorFeedback,
+        (message) => toast.error(message, { position: 'top-center', autoClose: false }),
     );
 
     const handleOpenConfirmationDialog = () => {
@@ -136,7 +135,6 @@ const InnerEditPage: FC<EditPageProps> = ({
 
     return (
         <>
-            <ManagedErrorFeedback message={errorMessage} open={isErrorOpen} onClose={closeErrorFeedback} />
             <div className='flex items-center mb-4'>
                 <h1 className='title'>
                     {isCreatingRevision ? 'Create new revision from' : 'Edit'} {dataToEdit.accession}.

diff --git a/website/src/components/ReviewPage/ReviewPage.tsx b/website/src/components/ReviewPage/ReviewPage.tsx
@@ -1,6 +1,7 @@
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
 import Pagination from '@mui/material/Pagination';
 import { type ChangeEvent, type FC, useState } from 'react';
+import { toast } from 'react-toastify';
 
 import { ReviewCard } from './ReviewCard.tsx';
 import { useSubmissionOperations } from '../../hooks/useSubmissionOperations.ts';
@@ -21,7 +22,6 @@ import {
 import { type ClientConfig } from '../../types/runtimeConfig.ts';
 import { displayConfirmationDialog } from '../ConfirmationDialog.tsx';
 import { getLastApprovalTimeKey } from '../SearchPage/RecentSequencesBanner.tsx';
-import { ManagedErrorFeedback, useErrorFeedbackState } from '../common/ManagedErrorFeedback.tsx';
 import { withQueryProvider } from '../common/withQueryProvider.tsx';
 import BiTrash from '~icons/bi/trash';
 import IwwaArrowDown from '~icons/iwwa/arrow-down';
@@ -70,11 +70,9 @@ const NumberAndVisibility = ({
 };
 
 const InnerReviewPage: FC<ReviewPageProps> = ({ clientConfig, organism, group, accessToken }) => {
-    const { errorMessage, isErrorOpen, openErrorFeedback, closeErrorFeedback } = useErrorFeedbackState();
-
     const [pageQuery, setPageQuery] = useState<PageQuery>({ page: 1, size: pageSizeOptions[2] });
 
-    const hooks = useSubmissionOperations(organism, group, clientConfig, accessToken, openErrorFeedback, pageQuery);
+    const hooks = useSubmissionOperations(organism, group, clientConfig, accessToken, toast.error, pageQuery);
 
     const showErrors = hooks.includedStatuses.includes(hasErrorsStatus);
     const showUnprocessed =
@@ -333,25 +331,22 @@ const InnerReviewPage: FC<ReviewPageProps> = ({ clientConfig, organism, group, a
     );
 
     return (
-        <>
-            <ManagedErrorFeedback message={errorMessage} open={isErrorOpen} onClose={closeErrorFeedback} />
-            <div className={hooks.getSequences.isLoading ? 'opacity-50 pointer-events-none' : ''}>
-                <div className='sticky top-0 z-10'>
-                    <div className='flex sm:justify-between items-bottom flex-col md:flex-row gap-5 bg-white pb-1'>
-                        {controlPanel}
-                        {bulkActionButtons}
-                    </div>
-                    <div
-                        className='h-2 w-full'
-                        style={{
-                            background: 'linear-gradient(0deg, rgba(255, 255, 255, 0) 0%,rgba(100, 100, 100, .2) 80%)',
-                        }}
-                    ></div>
+        <div className={hooks.getSequences.isLoading ? 'opacity-50 pointer-events-none' : ''}>
+            <div className='sticky top-0 z-10'>
+                <div className='flex sm:justify-between items-bottom flex-col md:flex-row gap-5 bg-white pb-1'>
+                    {controlPanel}
+                    {bulkActionButtons}
                 </div>
-                {reviewCards}
-                {pagination}
+                <div
+                    className='h-2 w-full'
+                    style={{
+                        background: 'linear-gradient(0deg, rgba(255, 255, 255, 0) 0%,rgba(100, 100, 100, .2) 80%)',
+                    }}
+                ></div>
             </div>
-        </>
+            {reviewCards}
+            {pagination}
+        </div>
     );
 };
 

diff --git a/website/src/components/SeqSetCitations/SeqSetForm.tsx b/website/src/components/SeqSetCitations/SeqSetForm.tsx
@@ -1,6 +1,7 @@
 import { AxiosError } from 'axios';
 import { capitalCase } from 'change-case';
 import { type FC, type FormEvent, useState, useEffect } from 'react';
+import { toast } from 'react-toastify';
 
 import { getClientLogger } from '../../clientLogger';
 import { routes } from '../../routes/routes.ts';
@@ -9,7 +10,6 @@ import type { ClientConfig } from '../../types/runtimeConfig';
 import { type SeqSet, type SeqSetRecord } from '../../types/seqSetCitation';
 import { createAuthorizationHeader } from '../../utils/createAuthorizationHeader';
 import { deserializeAccessionInput, serializeSeqSetRecords } from '../../utils/parseAccessionInput';
-import { ManagedErrorFeedback, useErrorFeedbackState } from '../common/ManagedErrorFeedback';
 
 const logger = getClientLogger('SeqSetForm');
 
@@ -30,17 +30,10 @@ export const SeqSetForm: FC<SeqSetFormProps> = ({ clientConfig, accessToken, edi
     );
     const [seqSetRecordValidation, setSeqSetRecordValidation] = useState('');
 
-    const {
-        errorMessage: serverErrorMessage,
-        isErrorOpen,
-        openErrorFeedback,
-        closeErrorFeedback,
-    } = useErrorFeedbackState();
-
     const { createSeqSet, updateSeqSet, validateSeqSetRecords, isLoading } = useActionHooks(
         clientConfig,
         accessToken,
-        openErrorFeedback,
+        (message) => toast.error(message, { position: 'top-center', autoClose: false }),
         setSeqSetRecordValidation,
     );
 
@@ -143,7 +136,6 @@ export const SeqSetForm: FC<SeqSetFormProps> = ({ clientConfig, accessToken, edi
 
     return (
         <div className='flex flex-col items-center  overflow-auto-y w-full'>
-            <ManagedErrorFeedback message={serverErrorMessage} open={isErrorOpen} onClose={closeErrorFeedback} />
             <div className='flex justify-start items-center py-5'>
                 <h1 className='text-xl font-semibold py-4'>{`${editSeqSet ? 'Edit' : 'Create a'} SeqSet`}</h1>
             </div>

diff --git a/website/src/components/SeqSetCitations/SeqSetItem.tsx b/website/src/components/SeqSetCitations/SeqSetItem.tsx
@@ -1,6 +1,7 @@
 import MUIPagination from '@mui/material/Pagination';
 import { AxiosError } from 'axios';
 import { type FC, useState } from 'react';
+import { toast } from 'react-toastify';
 
 import { CitationPlot } from './CitationPlot';
 import { getClientLogger } from '../../clientLogger';
@@ -9,7 +10,6 @@ import type { ClientConfig } from '../../types/runtimeConfig';
 import { type SeqSetRecord, type SeqSet, type CitedByResult, SeqSetRecordType } from '../../types/seqSetCitation';
 import { createAuthorizationHeader } from '../../utils/createAuthorizationHeader';
 import { displayConfirmationDialog } from '../ConfirmationDialog.tsx';
-import { ManagedErrorFeedback, useErrorFeedbackState } from '../common/ManagedErrorFeedback';
 import { withQueryProvider } from '../common/withQueryProvider.tsx';
 
 const logger = getClientLogger('SeqSetItem');
@@ -77,7 +77,6 @@ const SeqSetItemInner: FC<SeqSetItemProps> = ({
     citedByData,
     isAdminView = false,
 }) => {
-    const { errorMessage, isErrorOpen, openErrorFeedback, closeErrorFeedback } = useErrorFeedbackState();
     const [page, setPage] = useState(1);
     const sequencesPerPage = 10;
 
@@ -86,7 +85,7 @@ const SeqSetItemInner: FC<SeqSetItemProps> = ({
         accessToken,
         seqSet.seqSetId,
         seqSet.seqSetVersion,
-        openErrorFeedback,
+        (message) => toast.error(message, { position: 'top-center', autoClose: false }),
     );
 
     const handleCreateDOI = async () => {
@@ -139,7 +138,6 @@ const SeqSetItemInner: FC<SeqSetItemProps> = ({
 
     return (
         <div className='flex flex-col items-left'>
-            <ManagedErrorFeedback message={errorMessage} open={isErrorOpen} onClose={closeErrorFeedback} />
             <div>
                 <h1 className='text-2xl font-semibold pb-4'>{seqSet.name}</h1>
             </div>

diff --git a/website/src/components/SeqSetCitations/SeqSetItemActions.tsx b/website/src/components/SeqSetCitations/SeqSetItemActions.tsx
@@ -1,4 +1,5 @@
 import { type FC, useState } from 'react';
+import { toast } from 'react-toastify';
 
 import { ExportSeqSet } from './ExportSeqSet';
 import { SeqSetForm } from './SeqSetForm';
@@ -9,7 +10,6 @@ import type { ClientConfig } from '../../types/runtimeConfig';
 import type { SeqSetRecord, SeqSet } from '../../types/seqSetCitation';
 import { createAuthorizationHeader } from '../../utils/createAuthorizationHeader';
 import { displayConfirmationDialog } from '../ConfirmationDialog.tsx';
-import { ManagedErrorFeedback, useErrorFeedbackState } from '../common/ManagedErrorFeedback';
 import Modal from '../common/Modal';
 import { withQueryProvider } from '../common/withQueryProvider.tsx';
 
@@ -32,15 +32,14 @@ const SeqSetItemActionsInner: FC<SeqSetItemActionsProps> = ({
 }) => {
     const [editModalVisible, setEditModalVisible] = useState(false);
     const [exportModalVisible, setExportModalVisible] = useState(false);
-    const { errorMessage, isErrorOpen, openErrorFeedback, closeErrorFeedback } = useErrorFeedbackState();
     const isClient = useClientFlag();
 
     const { mutate: deleteSeqSet } = useDeleteSeqSetAction(
         clientConfig,
         accessToken,
         seqSet.seqSetId,
         seqSet.seqSetVersion,
-        openErrorFeedback,
+        (message) => toast.error(message, { position: 'top-center', autoClose: false }),
     );
 
     const handleDeleteSeqSet = async () => {
@@ -49,7 +48,6 @@ const SeqSetItemActionsInner: FC<SeqSetItemActionsProps> = ({
 
     return (
         <div className='flex flex-col items-left'>
-            <ManagedErrorFeedback message={errorMessage} open={isErrorOpen} onClose={closeErrorFeedback} />
             <div className='flex-row items-center justify-between w-full'>
                 <div className='flex justify-start items-center pt-4 pb-8'>
                     <div className='pr-2'>

diff --git a/website/src/components/Submission/DataUploadForm.tsx b/website/src/components/Submission/DataUploadForm.tsx
@@ -307,7 +307,7 @@ const InnerDataUploadForm = ({
         event.preventDefault();
 
         if (!agreedToINSDCUploadTerms) {
-            onError('Please tick the box agree that you will not independently submit these sequences to INSDC');
+            onError('Please tick the box to agree that you will not independently submit these sequences to INSDC');
             return;
         }
 

diff --git a/website/src/components/Submission/RevisionForm.tsx b/website/src/components/Submission/RevisionForm.tsx
@@ -1,11 +1,11 @@
 import { type FC } from 'react';
+import { toast } from 'react-toastify';
 
 import { DataUploadForm } from './DataUploadForm.tsx';
 import { routes } from '../../routes/routes.ts';
 import { type Group } from '../../types/backend.ts';
 import type { ReferenceGenomesSequenceNames } from '../../types/referencesGenomes';
 import type { ClientConfig } from '../../types/runtimeConfig.ts';
-import { ManagedErrorFeedback, useErrorFeedbackState } from '../common/ManagedErrorFeedback';
 
 type RevisionFormProps = {
     accessToken: string;
@@ -22,18 +22,15 @@ export const RevisionForm: FC<RevisionFormProps> = ({
     group,
     referenceGenomeSequenceNames,
 }) => {
-    const { errorMessage, isErrorOpen, openErrorFeedback, closeErrorFeedback } = useErrorFeedbackState();
-
     return (
         <div className='flex flex-col items-center'>
-            <ManagedErrorFeedback message={errorMessage} open={isErrorOpen} onClose={closeErrorFeedback} />
             <DataUploadForm
                 accessToken={accessToken}
                 organism={organism}
                 referenceGenomeSequenceNames={referenceGenomeSequenceNames}
                 clientConfig={clientConfig}
                 action='revise'
-                onError={openErrorFeedback}
+                onError={(message) => toast.error(message, { position: 'top-center', autoClose: false })}
                 group={group}
                 onSuccess={() => {
                     window.location.href = routes.userSequenceReviewPage(organism, group.groupId);

diff --git a/website/src/components/Submission/SubmissionForm.spec.tsx b/website/src/components/Submission/SubmissionForm.spec.tsx
@@ -1,5 +1,6 @@
 import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { toast } from 'react-toastify';
 import { describe, expect, test, vi } from 'vitest';
 
 import { SubmissionForm } from './SubmissionForm';
@@ -15,6 +16,12 @@ vi.mock('../../api', () => ({
     }),
 }));
 
+vi.mock('react-toastify', () => ({
+    toast: {
+        error: vi.fn(),
+    },
+}));
+
 const group: Group = {
     groupId: 1,
     groupName: testGroups[0].groupName,
@@ -93,7 +100,10 @@ describe('SubmitForm', () => {
         await userEvent.click(submitButton);
 
         await waitFor(() => {
-            expect(getByText((text) => text.includes('Please select a sequences file'))).toBeInTheDocument();
+            expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('Please select a sequences file'), {
+                position: 'top-center',
+                autoClose: false,
+            });
         });
     });
 
@@ -135,13 +145,12 @@ describe('SubmitForm', () => {
         const submitButton = getByText('Submit sequences');
         await userEvent.click(submitButton);
         await waitFor(() => {
-            expect(
-                getByText((text) =>
-                    text.includes(
-                        'Please tick the box agree that you will not independently submit these sequences to INSDC',
-                    ),
+            expect(toast.error).toHaveBeenCalledWith(
+                expect.stringContaining(
+                    'Please tick the box to agree that you will not independently submit these sequences to INSDC',
                 ),
-            ).toBeInTheDocument();
+                { position: 'top-center', autoClose: false },
+            );
         });
 
         await userEvent.click(
@@ -165,7 +174,10 @@ describe('SubmitForm', () => {
         await userEvent.click(submitButton);
 
         await waitFor(() => {
-            expect(getByText((text) => text.includes(receivedUnexpectedMessageFromBackend))).toBeInTheDocument();
+            expect(toast.error).toHaveBeenCalledWith(expect.stringContaining(receivedUnexpectedMessageFromBackend), {
+                position: 'top-center',
+                autoClose: false,
+            });
         });
     }
 });
diff --git a/website/src/components/Submission/SubmissionForm.tsx b/website/src/components/Submission/SubmissionForm.tsx
@@ -1,11 +1,11 @@
 import { type FC } from 'react';
+import { toast } from 'react-toastify';
 
 import { DataUploadForm } from './DataUploadForm.tsx';
 import { routes } from '../../routes/routes.ts';
 import { type Group } from '../../types/backend.ts';
 import type { ReferenceGenomesSequenceNames } from '../../types/referencesGenomes';
 import type { ClientConfig } from '../../types/runtimeConfig.ts';
-import { ManagedErrorFeedback, useErrorFeedbackState } from '../common/ManagedErrorFeedback';
 
 type SubmissionFormProps = {
     accessToken: string;
@@ -22,18 +22,15 @@ export const SubmissionForm: FC<SubmissionFormProps> = ({
     group,
     referenceGenomeSequenceNames,
 }) => {
-    const { errorMessage, isErrorOpen, openErrorFeedback, closeErrorFeedback } = useErrorFeedbackState();
-
     return (
         <div className='flex flex-col items-center'>
-            <ManagedErrorFeedback message={errorMessage} open={isErrorOpen} onClose={closeErrorFeedback} />
             <DataUploadForm
                 accessToken={accessToken}
                 organism={organism}
                 referenceGenomeSequenceNames={referenceGenomeSequenceNames}
                 clientConfig={clientConfig}
                 action='submit'
-                onError={openErrorFeedback}
+                onError={(message) => toast.error(message, { position: 'top-center', autoClose: false })}
                 group={group}
                 onSuccess={() => {
                     window.location.href = routes.userSequenceReviewPage(organism, group.groupId);