Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add missing tooltips back to sidebar when collapsed #3273

Merged
merged 2 commits into from
Dec 12, 2024
Merged

Add missing tooltips back to sidebar when collapsed #3273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7608d18
Add missing tooltips back to sidebar when collapsed
clari182 Dec 10, 2024
111f71e
Add tests to check for collapsed sidebar and tooltip
clari182 Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 31 additions & 5 deletions site/gatsby-site/playwright/e2e/landingPage.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('/');
Expand All @@ -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();

});
});
4 changes: 3 additions & 1 deletion site/gatsby-site/src/components/sidebar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
14 changes: 12 additions & 2 deletions site/gatsby-site/src/components/sidebar/treeNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -19,6 +19,7 @@ import {
faTable,
faUser,
} from '@fortawesome/free-solid-svg-icons';
import { Tooltip } from 'flowbite-react';

const TreeNode = ({
item,
Expand Down Expand Up @@ -50,6 +51,8 @@ const TreeNode = ({
}
};

const { t } = useTranslation();

return (
<li className="tree-node" data-testid={'sidebar-' + item.label}>
<div
Expand All @@ -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>
Expand Down
Loading