fix(recordings): correctly update recording tables on errors (#604)

* fix(filters): correctly update recording filters on errors * fix(archived): add error handle for archive queries
cryostatio · Nov 2, 2022 · b52ecf9 · b52ecf9
1 parent 1baddfb
commit b52ecf9
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 17 deletions.
diff --git a/src/app/Recordings/ActiveRecordingsTable.tsx b/src/app/Recordings/ActiveRecordingsTable.tsx
@@ -160,8 +160,9 @@ export const ActiveRecordingsTable: React.FunctionComponent<ActiveRecordingsTabl
     (error) => {
       setIsLoading(false);
       setErrorMessage(error.message);
+      setRecordings([]);
     },
-    [setIsLoading, setErrorMessage]
+    [setIsLoading, setErrorMessage, setRecordings]
   );
 
   const refreshRecordingList = React.useCallback(() => {
@@ -258,8 +259,13 @@ export const ActiveRecordingsTable: React.FunctionComponent<ActiveRecordingsTabl
   }, [addSubscription, context, context.notificationChannel, setRecordings]);
 
   React.useEffect(() => {
-    addSubscription(context.target.authFailure().subscribe(() => setErrorMessage(authFailMessage)));
-  }, [context, context.target, setErrorMessage, addSubscription]);
+    addSubscription(
+      context.target.authFailure().subscribe(() => {
+        setErrorMessage(authFailMessage);
+        setRecordings([]);
+      })
+    );
+  }, [context, context.target, setErrorMessage, addSubscription, setRecordings]);
 
   React.useEffect(() => {
     addSubscription(

diff --git a/src/app/Recordings/ArchivedRecordingsTable.tsx b/src/app/Recordings/ArchivedRecordingsTable.tsx
@@ -36,12 +36,7 @@
  * SOFTWARE.
  */
 import * as React from 'react';
-import {
-  ArchivedRecording,
-  Recording,
-  RecordingDirectory,
-  UPLOADS_SUBDIRECTORY,
-} from '@app/Shared/Services/Api.service';
+import { ArchivedRecording, RecordingDirectory, UPLOADS_SUBDIRECTORY } from '@app/Shared/Services/Api.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { NotificationCategory } from '@app/Shared/Services/NotificationChannel.service';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
@@ -106,6 +101,7 @@ export const ArchivedRecordingsTable: React.FunctionComponent<ArchivedRecordings
   const [showUploadModal, setShowUploadModal] = React.useState(false);
   const [showDetailsPanel, setShowDetailsPanel] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(false);
+  const [errorMessage, setErrorMessage] = React.useState('');
 
   const targetRecordingFilters = useSelector((state: RootState) => {
     const filters = state.recordingFilters.list.filter(
@@ -148,6 +144,15 @@ export const ArchivedRecordingsTable: React.FunctionComponent<ArchivedRecordings
     [setRecordings, setIsLoading]
   );
 
+  const handleError = React.useCallback(
+    (error) => {
+      setIsLoading(false);
+      setErrorMessage(error.message);
+      setRecordings([]);
+    },
+    [setIsLoading, setErrorMessage, setRecordings]
+  );
+
   const queryTargetRecordings = React.useCallback(
     (connectUrl: string) => {
       return context.api.graphql<any>(`
@@ -193,7 +198,10 @@ export const ArchivedRecordingsTable: React.FunctionComponent<ArchivedRecordings
       addSubscription(
         queryUploadedRecordings()
           .pipe(map((v) => v.data.archivedRecordings.data as ArchivedRecording[]))
-          .subscribe(handleRecordings)
+          .subscribe({
+            next: handleRecordings,
+            error: handleError,
+          })
       );
     } else {
       addSubscription(
@@ -204,14 +212,18 @@ export const ArchivedRecordingsTable: React.FunctionComponent<ArchivedRecordings
             concatMap((target) => queryTargetRecordings(target.connectUrl)),
             map((v) => v.data.archivedRecordings.data as ArchivedRecording[])
           )
-          .subscribe(handleRecordings)
+          .subscribe({
+            next: handleRecordings,
+            error: handleError,
+          })
       );
     }
   }, [
     addSubscription,
     context.api,
     setIsLoading,
     handleRecordings,
+    handleError,
     queryTargetRecordings,
     queryUploadedRecordings,
     props.directoryRecordings,
@@ -520,10 +532,9 @@ export const ArchivedRecordingsTable: React.FunctionComponent<ArchivedRecordings
     ));
   }, [filteredRecordings, expandedRows, checkedIndices]);
 
-  const handleModalClose = React.useCallback(() => {
-    setShowUploadModal(false);
-    refreshRecordingList();
-  }, [setShowUploadModal, refreshRecordingList]);
+  const handleUploadModalClose = React.useCallback(() => {
+    setShowUploadModal(false); // Do nothing else as notifications will handle update
+  }, [setShowUploadModal]);
 
   const LabelsPanel = React.useMemo(
     () => (
@@ -574,12 +585,14 @@ export const ArchivedRecordingsTable: React.FunctionComponent<ArchivedRecordings
             isEmptyFilterResult={!filteredRecordings.length}
             clearFilters={handleClearFilters}
             isNestedTable={props.isNestedTable}
-            errorMessage={''}
+            errorMessage={errorMessage}
           >
             {recordingRows}
           </RecordingsTable>
 
-          {props.isUploadsTable ? <ArchiveUploadModal visible={showUploadModal} onClose={handleModalClose} /> : null}
+          {props.isUploadsTable ? (
+            <ArchiveUploadModal visible={showUploadModal} onClose={handleUploadModalClose} />
+          ) : null}
         </DrawerContentBody>
       </DrawerContent>
     </Drawer>

diff --git a/src/test/Recordings/ArchivedRecordingsTable.test.tsx b/src/test/Recordings/ArchivedRecordingsTable.test.tsx
@@ -647,4 +647,26 @@ describe('<ArchivedRecordingsTable />', () => {
     expect(uploadSpy).toHaveBeenCalled();
     expect(uploadSpy).toHaveBeenCalledWith(mockFileUpload, mockUploadedRecordingLabels, expect.anything());
   });
+
+  it('should show error view if failing to retrieve recordings', async () => {
+    jest.spyOn(defaultServices.api, 'graphql').mockImplementationOnce((query) => {
+      throw new Error('Something wrong');
+    });
+
+    renderWithServiceContextAndReduxStoreWithRouter(
+      <ArchivedRecordingsTable target={of(mockTarget)} isUploadsTable={false} isNestedTable={false} />,
+      {
+        preloadState: preloadedState,
+        history: history,
+      }
+    );
+
+    const failTitle = screen.getByText('Error retrieving recordings');
+    expect(failTitle).toBeInTheDocument();
+    expect(failTitle).toBeVisible();
+
+    const authFailText = screen.getByText('Something wrong');
+    expect(authFailText).toBeInTheDocument();
+    expect(authFailText).toBeVisible();
+  });
 });