Add tooltips to all Icon buttons #633 (#875)

* Added tooltip to Home breadcrumbs. Unit tests failing due to snapshot differences, need to inspect further

* update snapshots for unit tests #633

* Add tooltip to Systems add icon. Update all corresponding tests #633

* add tooltips to catalogue card (select, and actions).

* Add tooltips to catalogue category (add category) #633

* adjust tooltip offsets #633

* add missing tooltip icons to catalogue related dialogs #633

* updated snaphots #633

* remove offsets from tooltips #633

* added span to address Test warnings

* update corresponding snapshots

* update test to address CI warning on wrapping state updates in act

* undo previous commit. Addresses lint errors (no-unnecessary-act)

* add console.log to debug CI test statements to see what is not wrapped with act

* add act() to modifyValues after console messages

* try moving act to waitFor

* copy format from succeeding test PR

* forgot to add these changes

* remove unused import

* Revert "remove unused import"

This reverts commit b6c9c29.

* Revert "forgot to add these changes"

This reverts commit 261fe74.

* Revert "copy format from succeeding test PR"

This reverts commit 8fd0e18.

* Revert "try moving act to waitFor"

This reverts commit e722b7c.

* Revert "add act() to modifyValues after console messages"

This reverts commit 3b99cdd.

* Revert "add console.log to debug CI test statements to see what is not wrapped with act"

This reverts commit 02407a0.

* remove Home breadcrumbs to see if it's the only tooltip causing warnings

* Revert "remove Home breadcrumbs to see if it's the only tooltip causing warnings"

This reverts commit 89e45f0.

* add specific Home Labels #633

* changed implementation from a map to a function

* refactor label implementation #633

* update unit snapshots and test files's aria label, and mislabeled hoem in itemDialog #633

* update e2e manufacturer test's aria label

* reformat homeLocation expression

cypress/e2e/with_api/systems/functions.ts

@@ -13,7 +13,7 @@ export const modifySystem = (
     cy.findAllByLabelText('Row Actions').eq(values.index).click();
     cy.findByText('Edit').click();
   } else {
-    cy.findByRole('button', { name: 'add system' }).click();
+    cy.findByRole('button', { name: 'Add System' }).click();
   }
   cy.findByLabelText('Name *').clear();
   cy.findByLabelText('Name *').type(values.name);

cypress/e2e/with_mock_data/manufacturers.cy.ts

@@ -348,7 +348,7 @@ describe('Manufacturer', () => {
     cy.findByText('Manufacturer A').click();
     cy.findByText('Telephone number:').should('exist');
 
-    cy.findByRole('button', { name: 'navigate to manufacturer home' }).click();
+    cy.findByRole('button', { name: 'navigate to manufacturers home' }).click();
 
     cy.findByText('Manufacturer A').should('exist');
     cy.findByText('Manufacturer B').should('exist');
@@ -382,7 +382,7 @@ describe('Manufacturer', () => {
       `This manufacturer doesn't exist. Please click the Home button to navigate to the manufacturer table`
     ).should('exist');
 
-    cy.findByRole('button', { name: 'navigate to manufacturer home' }).click();
+    cy.findByRole('button', { name: 'navigate to manufacturers home' }).click();
 
     cy.findByText('Manufacturer A').should('exist');
     cy.findByText('Manufacturer B').should('exist');

cypress/e2e/with_mock_data/systems.cy.ts

@@ -259,7 +259,7 @@ describe('Systems', () => {
 
   describe('Add', () => {
     it('adds a root system with only required parameters', () => {
-      cy.findByRole('button', { name: 'add system' }).click();
+      cy.findByRole('button', { name: 'Add System' }).click();
       cy.findByLabelText('Name *').type('System name');
 
       cy.startSnoopingBrowserMockedRequest();
@@ -282,7 +282,7 @@ describe('Systems', () => {
     });
 
     it('adds a root system with all parameters', () => {
-      cy.findByRole('button', { name: 'add system' }).click();
+      cy.findByRole('button', { name: 'Add System' }).click();
 
       cy.findByLabelText('Name *').type('System name');
       cy.findByLabelText('Description').type('System description');
@@ -316,7 +316,7 @@ describe('Systems', () => {
     it('adds a subsystem', () => {
       cy.visit('/systems/65328f34a40ff5301575a4e3');
 
-      cy.findByRole('button', { name: 'add subsystem' }).click();
+      cy.findByRole('button', { name: 'Add Subsystem' }).click();
       cy.findByLabelText('Name *').type('System name');
 
       cy.startSnoopingBrowserMockedRequest();
@@ -342,27 +342,27 @@ describe('Systems', () => {
     it('displays error message when name is not given that disappears once closed', () => {
       cy.visit('/systems');
 
-      cy.findByRole('button', { name: 'add system' }).click();
+      cy.findByRole('button', { name: 'Add System' }).click();
       cy.findByRole('button', { name: 'Save' }).click();
       cy.findByText('Please enter a name.').should('be.visible');
       cy.findByRole('button', { name: 'Save' }).should('be.disabled');
       cy.findByRole('button', { name: 'Cancel' }).click();
-      cy.findByRole('button', { name: 'add system' }).click();
+      cy.findByRole('button', { name: 'Add System' }).click();
       cy.findByText('Please enter a name.').should('not.exist');
     });
 
     it('displays error message if the system has a duplicate name that disappears once closed', () => {
       cy.visit('/systems');
 
-      cy.findByRole('button', { name: 'add system' }).click();
+      cy.findByRole('button', { name: 'Add System' }).click();
       cy.findByLabelText('Name *').type('Error 409');
       cy.findByRole('button', { name: 'Save' }).click();
       cy.findByText(
         'A System with the same name already exists within the same parent System. Please enter a different name.'
       ).should('be.visible');
       cy.findByRole('button', { name: 'Save' }).should('be.disabled');
       cy.findByRole('button', { name: 'Cancel' }).click();
-      cy.findByRole('button', { name: 'add system' }).click();
+      cy.findByRole('button', { name: 'Add System' }).click();
       cy.findByText(
         'A System with the same name already exists within the same parent System. Please enter a different name.'
       ).should('not.exist');

src/admin/admin.component.tsx

@@ -69,7 +69,7 @@ function AdminPage() {
               onChangeNode={navigateToAdminFunction}
               breadcrumbsInfo={adminBreadCrumbs}
               onChangeNavigateHome={() => navigateToAdminFunction(null)}
-              navigateHomeAriaLabel={'navigate to admin page'}
+              homeLocation="Admin"
             />
           </Box>
         </div>

src/catalogue/catalogue.component.tsx

@@ -10,6 +10,7 @@ import {
   IconButton,
   LinearProgress,
   Typography,
+  Tooltip,
 } from '@mui/material';
 import React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -75,14 +76,18 @@ const AddCategoryButton = (props: AddCatalogueButtonProps) => {
 
   return (
     <>
-      <IconButton
-        sx={{ mx: 1, my: 2 }}
-        onClick={() => setAddCategoryDialogOpen(true)}
-        disabled={props.disabled}
-        aria-label="add catalogue category"
-      >
-        <AddIcon />
-      </IconButton>
+      <Tooltip title = "Add Category">
+        <span>
+          <IconButton
+            sx={{ mx: 1, my: 2 }}
+            onClick={() => setAddCategoryDialogOpen(true)}
+            disabled={props.disabled}
+            aria-label="add catalogue category"
+          >
+            <AddIcon />
+          </IconButton>
+        </span>
+      </Tooltip>  
       <CatalogueCategoryDialog
         open={addCategoryDialogOpen}
         onClose={() => setAddCategoryDialogOpen(false)}
@@ -306,7 +311,7 @@ function Catalogue() {
               onChangeNode={navigateToCatalogue}
               breadcrumbsInfo={catalogueBreadcrumbs}
               onChangeNavigateHome={() => navigateToCatalogue(null)}
-              navigateHomeAriaLabel={'navigate to catalogue home'}
+              homeLocation="Catalogue"
             />
             <NavigateNext
               fontSize="medium"