Include note on test plan versions import taking up to a few minutes

w3c · Jan 23, 2025 · a9dae3a · a9dae3a
1 parent c19a17a
commit a9dae3a
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 41 deletions.
diff --git a/client/components/UserSettings/AdminSettings.jsx b/client/components/UserSettings/AdminSettings.jsx
@@ -6,7 +6,7 @@ import { useThemedModal, THEMES } from '../../hooks/useThemedModal';
 import { dates } from 'shared';
 
 const AdminSettings = ({ latestTestPlanVersion, refetch }) => {
-  const { triggerLoad, loadingMessage } = useTriggerLoad();
+  const { triggerLoad, loadingMessage, loadingNote } = useTriggerLoad();
   const {
     themedModal,
     showThemedModal,
@@ -16,39 +16,43 @@ const AdminSettings = ({ latestTestPlanVersion, refetch }) => {
     setThemedModalType
   } = useThemedModal({
     type: THEMES.SUCCESS,
-    title: 'Success!'
+    title: 'Success'
   });
 
   const handleImportTests = async () => {
-    await triggerLoad(async () => {
-      try {
-        const response = await fetch('/api/test/import', { method: 'POST' });
-        if (!response.ok) {
-          throw new Error(
-            `Failed to import the latest Test Plan Versions: ${response.status}`
+    await triggerLoad(
+      async () => {
+        try {
+          const response = await fetch('/api/test/import', { method: 'POST' });
+          if (!response.ok) {
+            throw new Error(
+              `Failed to import the latest Test Plan Versions: ${response.status}`
+            );
+          }
+
+          // Success
+          setThemedModalType(THEMES.SUCCESS);
+          setThemedModalTitle('Success');
+          setThemedModalContent(
+            <>The latest Test Plan Versions have been imported.</>
           );
+          setShowThemedModal(true);
+          await refetch();
+        } catch (e) {
+          // Failed, show themed message
+          setThemedModalType(THEMES.DANGER);
+          setThemedModalTitle('Error');
+          setThemedModalContent(<>{e.message}</>);
+          setShowThemedModal(true);
         }
-
-        // Success
-        setThemedModalType(THEMES.SUCCESS);
-        setThemedModalTitle('Success!');
-        setThemedModalContent(
-          <>The latest Test Plan Versions have been imported.</>
-        );
-        setShowThemedModal(true);
-        await refetch();
-      } catch (e) {
-        // Failed, show themed message
-        setThemedModalType(THEMES.DANGER);
-        setThemedModalTitle('Error!');
-        setThemedModalContent(<>{e.message}</>);
-        setShowThemedModal(true);
-      }
-    }, 'Importing latest Test Plan Versions');
+      },
+      'Importing latest Test Plan Versions',
+      'This may take a few minutes ...'
+    );
   };
 
   return (
-    <LoadingStatus message={loadingMessage}>
+    <LoadingStatus message={loadingMessage} note={loadingNote}>
       <section>
         <h2>Admin Actions</h2>
         <Button variant="primary" onClick={handleImportTests}>

diff --git a/client/components/common/LoadingStatus/LoadingStatus.js b/client/components/common/LoadingStatus/LoadingStatus.js
@@ -4,12 +4,13 @@ import { Spinner } from 'react-bootstrap';
 import styled from '@emotion/styled';
 import BasicModal from '../../common/BasicModal';
 
-const Container = styled.div`
+const SpinningContainer = styled.div`
   display: flex;
   justify-content: center;
+  ${props => props.hasNote && `margin-bottom: 2rem;`}
 `;
 
-const LoadingStatus = ({ message, children }) => {
+const LoadingStatus = ({ message, note, children }) => {
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
@@ -29,17 +30,24 @@ const LoadingStatus = ({ message, children }) => {
           headerSep={false}
           showFooter={false}
           content={
-            <Container>
-              <Spinner
-                animation="border"
-                variant="primary"
-                role="status"
-                style={{
-                  width: '50px',
-                  height: '50px'
-                }}
-              />
-            </Container>
+            <>
+              <SpinningContainer hasNote={!!note}>
+                <Spinner
+                  animation="border"
+                  variant="primary"
+                  role="status"
+                  style={{
+                    width: '50px',
+                    height: '50px'
+                  }}
+                />
+              </SpinningContainer>
+              {note && (
+                <>
+                  <b>Note:</b> {note}
+                </>
+              )}
+            </>
           }
         />
       )}
@@ -50,6 +58,7 @@ const LoadingStatus = ({ message, children }) => {
 
 LoadingStatus.propTypes = {
   message: PropTypes.string,
+  note: PropTypes.string,
   children: PropTypes.node
 };
 

diff --git a/client/components/common/LoadingStatus/useTriggerLoad.js b/client/components/common/LoadingStatus/useTriggerLoad.js
@@ -2,21 +2,25 @@ import { useState } from 'react';
 
 export function useTriggerLoad() {
   const [loadingMessage, setLoadingMessage] = useState('');
+  const [loadingNote, setLoadingNote] = useState('');
 
-  const triggerLoad = (loadFn, message) => {
+  const triggerLoad = (loadFn, message, note) => {
     return new Promise((resolve, reject) => {
       setLoadingMessage(message);
+      setLoadingNote(note);
       loadFn()
         .then(() => {
           setLoadingMessage('');
+          setLoadingNote('');
           resolve();
         })
         .catch(e => {
           setLoadingMessage('');
+          setLoadingNote('');
           reject(e);
         });
     });
   };
 
-  return { triggerLoad, loadingMessage };
+  return { triggerLoad, loadingMessage, loadingNote };
 }