Add missing tooltips back to sidebar when collapsed (#3273)

* Add missing tooltips back to sidebar when collapsed * Add tests to check for collapsed sidebar and tooltip
responsible-ai-collaborative · Dec 12, 2024 · bdecb4c · bdecb4c
1 parent 05b7f1c
commit bdecb4c
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 8 deletions.
diff --git a/site/gatsby-site/playwright/e2e/landingPage.spec.ts b/site/gatsby-site/playwright/e2e/landingPage.spec.ts
@@ -101,11 +101,11 @@ test.describe('The Landing page', () => {
   );
 
   test('Loads the random incidents carousel', async ({ page, skipOnEmptyEnvironment }) => {
-      await page.goto('/');
-      await page.locator('[data-cy="random-incidents-carousel"]').scrollIntoViewIfNeeded();
-      await expect(page.locator('[data-cy="random-incidents-carousel"]')).toBeVisible();
-      await expect(page.locator('[data-cy="random-incidents-carousel-item"]')).toHaveCount(5);
-    });
+    await page.goto('/');
+    await page.locator('[data-cy="random-incidents-carousel"]').scrollIntoViewIfNeeded();
+    await expect(page.locator('[data-cy="random-incidents-carousel"]')).toBeVisible();
+    await expect(page.locator('[data-cy="random-incidents-carousel-item"]')).toHaveCount(5);
+  });
 
   test('Renders commit sha in the footer', async ({ page }) => {
     await page.goto('/');
@@ -119,4 +119,30 @@ test.describe('The Landing page', () => {
     await expect(lis).toBeGreaterThan(0);
   });
 
+  test('Should collapse sidebar', async ({ page, skipOnEmptyEnvironment }) => {
+    await page.goto('/');
+    const sidebarTree = page.locator('[data-testid="sidebar-desktop"]');
+    await sidebarTree.locator('[data-cy="collapse-button"]').click();
+    const sidebar = await page.locator('[id="sidebar"]').first();
+    let hasClass = await sidebar.evaluate((el, className) => {
+      return el.classList.contains(className);
+    }, 'collapsed');
+    expect(hasClass).toBe(true);
+    await sidebarTree.locator('[data-cy="collapse-button"]').click();
+    hasClass = await sidebar.evaluate((el, className) => {
+      return el.classList.contains(className);
+    }, 'collapsed');
+    expect(hasClass).toBe(false);
+  });
+
+  test('Should display sidebar tooltip when collapsed', async ({ page, skipOnEmptyEnvironment }) => {
+    await page.goto('/');
+    const sidebarTree = page.locator('[data-testid="sidebar-desktop"]');
+    await sidebarTree.locator('[data-cy="collapse-button"]').click();
+    // Hovers over a sidebar item
+    await page.getByTestId('sidebar-desktop').getByTestId("sidebar-welcome").hover();
+    await expect(page.getByTestId('sidebar-desktop').locator('[data-testid="flowbite-tooltip"]', { hasText: 'Welcome to the AIID' }))
+      .toBeVisible();
+
+  });
 });
diff --git a/site/gatsby-site/src/components/sidebar/index.js b/site/gatsby-site/src/components/sidebar/index.js
@@ -227,7 +227,9 @@ const Sidebar = ({ defaultCollapsed = false, location = null, setNavCollapsed })
       <aside
         id="sidebar"
         aria-label="Sidebar"
-        className={`${sidebarWidth} sticky top-0 flex flex-col md:bg-text-light-gray z-2`}
+        className={`${sidebarWidth} sticky top-0 flex flex-col md:bg-text-light-gray z-2 ${
+          isCollapsed ? 'collapsed' : ''
+        }`}
         style={{
           height:
             (headerVisiblePixels && !isMobile) || window.innerWidth > 768

diff --git a/site/gatsby-site/src/components/sidebar/treeNode.js b/site/gatsby-site/src/components/sidebar/treeNode.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { ChevronDown, ChevronRight } from 'react-feather';
 import Link from '../ui/Link'; // Assuming you have this component for internal links
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -19,6 +19,7 @@ import {
   faTable,
   faUser,
 } from '@fortawesome/free-solid-svg-icons';
+import { Tooltip } from 'flowbite-react';
 
 const TreeNode = ({
   item,
@@ -50,6 +51,8 @@ const TreeNode = ({
     }
   };
 
+  const { t } = useTranslation();
+
   return (
     <li className="tree-node" data-testid={'sidebar-' + item.label}>
       <div
@@ -70,7 +73,14 @@ const TreeNode = ({
             } ${calculatedClassName}`}
             data-testid={`sidebar-link${item.current ? '-active' : ''}`}
           >
-            {icon && (isCollapsed ? <span className="tooltip">{icon}</span> : <>{icon}</>)}
+            {icon &&
+              (isCollapsed ? (
+                <Tooltip content={t(item.title)} placement="right">
+                  {icon}
+                </Tooltip>
+              ) : (
+                <>{icon}</>
+              ))}
             {!isCollapsed && (
               <span className={`ml-3 ${isCollapsed ? 'opacity-0' : 'opacity-100'}`}>
                 <Trans>{item.title}</Trans>