chore(toolbar): hide toolbar on errors

src/app/Recordings/ActiveRecordingsTable.tsx

@@ -715,7 +715,11 @@ const ActiveRecordingsToolbar: React.FunctionComponent<ActiveRecordingsToolbarPr
   }, [warningModalOpen, props.handleDeleteRecordings, handleWarningModalClose]);
 
   return (
-    <Toolbar id="active-recordings-toolbar" clearAllFilters={props.handleClearFilters}>
+    <Toolbar
+      id="active-recordings-toolbar"
+      aria-label="active-recording-toolbar"
+      clearAllFilters={props.handleClearFilters}
+    >
       <ToolbarContent>
         <RecordingFilters
           target={props.target}

src/app/Recordings/ArchivedRecordingsTable.tsx

@@ -35,6 +35,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import * as React from 'react';
 import { ArchivedRecording, RecordingDirectory, UPLOADS_SUBDIRECTORY } from '@app/Shared/Services/Api.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
@@ -52,7 +53,7 @@ import {
   ToolbarItem,
 } from '@patternfly/react-core';
 import { Tbody, Tr, Td, ExpandableRowContent, TableComposable } from '@patternfly/react-table';
-import { PlusIcon } from '@patternfly/react-icons';
+import { UploadIcon } from '@patternfly/react-icons';
 import { RecordingActions } from './RecordingActions';
 import { RecordingsTable } from './RecordingsTable';
 import { ReportFrame } from './ReportFrame';
@@ -655,7 +656,11 @@ const ArchivedRecordingsToolbar: React.FunctionComponent<ArchivedRecordingsToolb
   }, [warningModalOpen, props.handleDeleteRecordings, handleWarningModalClose]);
 
   return (
-    <Toolbar id="archived-recordings-toolbar" clearAllFilters={props.handleClearFilters}>
+    <Toolbar
+      id="archived-recordings-toolbar"
+      aria-label="archived-recording-toolbar"
+      clearAllFilters={props.handleClearFilters}
+    >
       <ToolbarContent>
         <RecordingFilters
           target={props.target}
@@ -685,8 +690,8 @@ const ArchivedRecordingsToolbar: React.FunctionComponent<ArchivedRecordingsToolb
         {props.isUploadsTable ? (
           <ToolbarGroup variant="icon-button-group">
             <ToolbarItem>
-              <Button variant="plain" aria-label="add" onClick={props.handleShowUploadModal}>
-                <PlusIcon />
+              <Button variant="secondary" aria-label="upload-recording" onClick={props.handleShowUploadModal}>
+                <UploadIcon />
               </Button>
             </ToolbarItem>
           </ToolbarGroup>

src/app/Recordings/RecordingsTable.tsx

@@ -74,7 +74,9 @@ export const RecordingsTable: React.FunctionComponent<RecordingsTableProps> = (p
     context.target.setAuthRetry();
   }, [context.target, context.target.setAuthRetry]);
 
-  if (props.errorMessage != '') {
+  const isError = React.useMemo(() => props.errorMessage != '', [props.errorMessage]);
+
+  if (isError) {
     view = (
       <>
         <ErrorView
@@ -151,7 +153,7 @@ export const RecordingsTable: React.FunctionComponent<RecordingsTableProps> = (p
   return (
     <>
       <OuterScrollContainer className="recording-table-container">
-        {props.toolbar}
+        {isError ? null : props.toolbar}
         <InnerScrollContainer>{view}</InnerScrollContainer>
         {props.tableFooter}
       </OuterScrollContainer>

src/test/Recordings/ActiveRecordingsTable.test.tsx

@@ -484,5 +484,8 @@ describe('<ActiveRecordingsTable />', () => {
     const retryButton = screen.getByText('Retry');
     expect(retryButton).toBeInTheDocument();
     expect(retryButton).toBeVisible();
+
+    const toolbar = screen.queryByLabelText('active-recording-toolbar');
+    expect(toolbar).not.toBeInTheDocument();
   });
 });

src/test/Recordings/ArchivedRecordingsTable.test.tsx

@@ -427,7 +427,7 @@ describe('<ArchivedRecordingsTable />', () => {
 
     expect(screen.getByText('someRecording')).toBeInTheDocument();
 
-    const uploadButton = screen.getByLabelText('add');
+    const uploadButton = screen.getByLabelText('upload-recording');
     expect(uploadButton).toHaveAttribute('type', 'button');
 
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
@@ -450,7 +450,7 @@ describe('<ArchivedRecordingsTable />', () => {
       }
     );
 
-    userEvent.click(screen.getByLabelText('add'));
+    userEvent.click(screen.getByLabelText('upload-recording'));
 
     const modal = await screen.findByRole('dialog');
 
@@ -506,7 +506,7 @@ describe('<ArchivedRecordingsTable />', () => {
       }
     );
 
-    userEvent.click(screen.getByLabelText('add'));
+    userEvent.click(screen.getByLabelText('upload-recording'));
 
     const modal = await screen.findByRole('dialog');
 
@@ -583,7 +583,7 @@ describe('<ArchivedRecordingsTable />', () => {
       }
     );
 
-    userEvent.click(screen.getByLabelText('add'));
+    userEvent.click(screen.getByLabelText('upload-recording'));
 
     const modal = await screen.findByRole('dialog');
 
@@ -668,5 +668,8 @@ describe('<ArchivedRecordingsTable />', () => {
     const authFailText = screen.getByText('Something wrong');
     expect(authFailText).toBeInTheDocument();
     expect(authFailText).toBeVisible();
+
+    const toolbar = screen.queryByLabelText('archived-recording-toolbar');
+    expect(toolbar).not.toBeInTheDocument();
   });
 });