Merge pull request #2568 from victoria-dos/tooltips

Add tooltips
RedHatInsights · Jul 14, 2023 · 423ae05 · 423ae05
2 parents 68dff9a + 32cf17c
commit 423ae05
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 47 deletions.
diff --git a/cypress/e2e/release-gate/landing-page.cy.ts b/cypress/e2e/release-gate/landing-page.cy.ts
@@ -14,4 +14,23 @@ describe('Landing page', () => {
     // check if a favorites link exists on the page
     cy.contains('My favorite services').should('exist');
   });
+
+  it('tooltip is shown when hovering over the gear/question icon', () => {
+    cy.login();
+
+    cy.visit('/');
+
+    cy.intercept({
+      method: 'GET',
+      url: '**/services/services.json',
+    }).as('services');
+
+    cy.wait('@services').its('response.statusCode').should('equal', 200);
+
+    cy.get('.tooltip-button-settings-cy').invoke('show').trigger('mouseenter').wait(1000);
+    cy.get('.tooltip-inner-settings-cy').should('be.visible').and('contain', 'Settings');
+
+    cy.get('.tooltip-button-help-cy').invoke('show').trigger('mouseenter').wait(1000);
+    cy.get('.tooltip-inner-help-cy').should('be.visible').and('contain', 'Help');
+  });
 });
diff --git a/src/components/Header/Tools.tsx b/src/components/Header/Tools.tsx
@@ -1,7 +1,17 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { memo, useContext, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { AlertActionLink, AlertVariant, Button, Divider, DropdownItem, NotificationBadge, Switch, ToolbarItem } from '@patternfly/react-core';
+import {
+  AlertActionLink,
+  AlertVariant,
+  Button,
+  Divider,
+  DropdownItem,
+  NotificationBadge,
+  Switch,
+  ToolbarItem,
+  Tooltip,
+} from '@patternfly/react-core';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/js/icons/question-circle-icon';
 import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
 import RedhatIcon from '@patternfly/react-icons/dist/js/icons/redhat-icon';
@@ -51,16 +61,19 @@ type SettingsButtonProps = {
 };
 
 const SettingsButton = ({ settingsMenuDropdownItems }: SettingsButtonProps) => (
-  <ToolbarToggle
-    key="Settings menu"
-    icon={() => <CogIcon />}
-    id="SettingsMenu"
-    ariaLabel="Settings menu"
-    ouiaId="chrome-settings"
-    hasToggleIndicator={null}
-    widget-type="SettingsMenu"
-    dropdownItems={settingsMenuDropdownItems}
-  />
+  <Tooltip aria="none" aria-live="polite" content={'Settings'} flipBehavior={['bottom']} className="tooltip-inner-settings-cy">
+    <ToolbarToggle
+      key="Settings menu"
+      icon={() => <CogIcon />}
+      id="SettingsMenu"
+      ariaLabel="Settings menu"
+      ouiaId="chrome-settings"
+      hasToggleIndicator={null}
+      widget-type="SettingsMenu"
+      dropdownItems={settingsMenuDropdownItems}
+      className="tooltip-button-settings-cy"
+    />
+  </Tooltip>
 );
 
 const Tools = () => {
@@ -170,15 +183,18 @@ const Tools = () => {
 
   /* QuestionMark icon that should be used for "help/support" things */
   const AboutButton = () => (
-    <ToolbarToggle
-      key="Help menu"
-      icon={QuestionCircleIcon}
-      id="HelpMenu"
-      ouiaId="chrome-help"
-      ariaLabel="Help menu"
-      hasToggleIndicator={null}
-      dropdownItems={aboutMenuDropdownItems}
-    />
+    <Tooltip aria="none" aria-live="polite" content={'Help'} flipBehavior={['bottom']} className="tooltip-inner-help-cy">
+      <ToolbarToggle
+        key="Help menu"
+        icon={QuestionCircleIcon}
+        id="HelpMenu"
+        ouiaId="chrome-help"
+        ariaLabel="Help menu"
+        hasToggleIndicator={null}
+        dropdownItems={aboutMenuDropdownItems}
+        className="tooltip-button-help-cy"
+      />
+    </Tooltip>
   );
 
   const BetaSwitcher = () => {
@@ -242,7 +258,13 @@ const Tools = () => {
           <ThemeToggle />
         </ToolbarItem>
       )}
-      {isInternal && <ToolbarItem>{<InternalButton />}</ToolbarItem>}
+      {isInternal && (
+        <ToolbarItem>
+          <Tooltip aria="none" aria-live="polite" content={'Internal'} flipBehavior={['bottom']}>
+            <InternalButton />
+          </Tooltip>
+        </ToolbarItem>
+      )}
       <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
         {<SettingsButton settingsMenuDropdownItems={settingsMenuDropdownItems} />}
       </ToolbarItem>
@@ -255,32 +277,34 @@ const Tools = () => {
       {/* Collapse tools and user dropdown to kebab on small screens  */}
 
       <ToolbarItem visibility={{ lg: 'hidden' }}>
-        <UserToggle
-          isSmall
-          extraItems={mobileDropdownItems.map((action, key) => (
-            <React.Fragment key={key}>
-              {action.title === 'separator' ? (
-                <Divider component="li" />
-              ) : (
-                <DropdownItem
-                  {...(action.onClick
-                    ? {
-                        component: 'button',
-                        onClick: action.onClick,
-                      }
-                    : {
-                        href: action.url,
-                        component: 'a',
-                        target: '_blank',
-                        rel: 'noopener noreferrer',
-                      })}
-                >
-                  {action.title}
-                </DropdownItem>
-              )}
-            </React.Fragment>
-          ))}
-        />
+        <Tooltip aria="none" aria-live="polite" content={'More options'} flipBehavior={['bottom']}>
+          <UserToggle
+            isSmall
+            extraItems={mobileDropdownItems.map((action, key) => (
+              <React.Fragment key={key}>
+                {action.title === 'separator' ? (
+                  <Divider component="li" />
+                ) : (
+                  <DropdownItem
+                    {...(action.onClick
+                      ? {
+                          component: 'button',
+                          onClick: action.onClick,
+                        }
+                      : {
+                          href: action.url,
+                          component: 'a',
+                          target: '_blank',
+                          rel: 'noopener noreferrer',
+                        })}
+                  >
+                    {action.title}
+                  </DropdownItem>
+                )}
+              </React.Fragment>
+            ))}
+          />
+        </Tooltip>
       </ToolbarItem>
       {cookie.get('cs_toggledRelease') === 'true' ? (
         <HeaderAlert