) : null}
@@ -233,11 +256,16 @@ const SidePanel = ({
ref={contentRef}
className={`${baseClass}__content`}
onScroll={() => setIsScrolling((prev) => !prev)}
+ aria-hidden={!isOpen}
>
{children}
{onSecondaryButtonClick || onPrimaryButtonClick ? (
-
+
{onSecondaryButtonClick ? (
@@ -258,6 +287,7 @@ const SidePanel = ({
onClick={onPrimaryButtonClick}
loading={isBusy}
disabled={isPrimaryButtonDisabled}
+ tabIndex={isOpen ? 0 : -1}
>
{mergedI18n.primaryButtonLabel}
diff --git a/packages/react/src/components/SidePanel/SidePanel.story.jsx b/packages/react/src/components/SidePanel/SidePanel.story.jsx
index 655ef95205..1813327205 100644
--- a/packages/react/src/components/SidePanel/SidePanel.story.jsx
+++ b/packages/react/src/components/SidePanel/SidePanel.story.jsx
@@ -3,6 +3,8 @@ import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import { Edit16, Information16, SendAlt16 } from '@carbon/icons-react';
+import Button from '../Button';
+
import SidePanel from './SidePanel';
import SidePanelReadMe from './SidePanel.mdx';
@@ -45,6 +47,7 @@ const Content = ({ style }) => (
nulla tempor vulputate et vel ligula. Curabitur egestas lorem ut mi vestibulum porttitor.
Fusce eleifend vehicula semper. Donec luctus neque quam, et blandit eros accumsan at.
+
);
diff --git a/packages/react/src/components/SidePanel/SidePanel.test.e2e.jsx b/packages/react/src/components/SidePanel/SidePanel.test.e2e.jsx
index 1b736f6848..9e139d10e8 100644
--- a/packages/react/src/components/SidePanel/SidePanel.test.e2e.jsx
+++ b/packages/react/src/components/SidePanel/SidePanel.test.e2e.jsx
@@ -1,5 +1,8 @@
import React from 'react';
import { mount } from '@cypress/react';
+import { Edit16, Information16, SendAlt16 } from '@carbon/icons-react';
+
+import Button from '../Button';
import SidePanel from './SidePanel';
@@ -11,6 +14,44 @@ describe('SidePanel', () => {
const content =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae bibendum urna. Maecenas interdum suscipit purus, et vehicula justo finibus sit amet. Fusce mi dolor, suscipit vel pharetra et, rhoncus et nisi. Nunc a bibendum turpis, aliquam tristique nibh. Vestibulum elit orci, posuere nec ante id, porttitor aliquam est. Proin est purus, rutrum ut sollicitudin in, vulputate a neque. Aliquam vulputate, diam vitae congue rutrum, velit arcu pulvinar neque, vel tristique quam mauris sit amet ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quam tortor, sagittis vitae nibh id, imperdiet efficitur urna. Duis fermentum nulla elementum, eleifend massa a, congue erat. Morbi a magna pulvinar, vulputate dui id, dignissim neque. Sed ultricies ligula sapien, posuere hendrerit turpis dapibus vitae. Nullam a nisi semper, efficitur ex ac, mattis nulla. Aliquam nec maximus lacus. Suspendisse venenatis erat suscipit mauris vulputate tincidunt';
+ const Content = () => (
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a dapibus nulla. Fusce et enim
+ et elit rutrum interdum quis eu nulla. Nulla neque neque, condimentum eget pellentesque sit
+ amet, volutpat ac enim. Etiam id magna vel dolor condimentum imperdiet. Vivamus eu
+ pellentesque turpis, eget ultricies lectus. Vestibulum sodales massa non lobortis interdum.
+ Sed cursus sem in dolor tempus tempus. Pellentesque et nisi vel erat egestas ultricies.
+ Etiam id risus nec mi laoreet suscipit. Phasellus porttitor accumsan placerat. Donec auctor
+ nunc id erat congue, tincidunt viverra diam feugiat. Donec sit amet quam vel augue auctor
+ posuere. Nunc maximus volutpat nulla vel vehicula. Praesent bibendum nulla at erat facilisis
+ sodales. Aenean aliquet dui vel iaculis tincidunt. Praesent suscipit ultrices mi eget
+ finibus. Mauris vehicula ultricies auctor. Nam vestibulum iaculis lectus, nec sodales metus
+ lobortis non. Suspendisse nulla est, consectetur non convallis et, tristique eu risus. Sed
+ ut tortor et nulla tempor vulputate et vel ligula. Curabitur egestas lorem ut mi vestibulum
+ porttitor. Fusce eleifend vehicula semper. Donec luctus neque quam, et blandit eros accumsan
+ at.
+
+
+
+ );
+
+ const actionItemButtons = [
+ {
+ buttonLabel: 'Edit',
+ buttonIcon: Edit16,
+ },
+ {
+ buttonLabel: 'Info',
+ buttonIcon: Information16,
+ },
+ {
+ buttonLabel: 'Send',
+ buttonIcon: SendAlt16,
+ },
+ ];
it('should go into condensed mode when content is scrolled', () => {
cy.viewport(1680, 900);
mount(
@@ -51,4 +92,53 @@ describe('SidePanel', () => {
cy.findByRole('button', { name: aShortTitle }).should('not.exist');
});
+
+ it('should have non focusable element when renders slide-over panel', () => {
+ cy.viewport(1680, 900);
+ mount(
+
+
+
+ );
+ cy.document().then((doc) => {
+ const tabindex = doc.querySelector('.myclass').getAttribute('tabindex');
+ expect(tabindex).equal('-1');
+ });
+ });
+
+ it('should have only one focusable element when render inline panel', () => {
+ cy.viewport(1680, 900);
+ mount(
+
+
+
+ );
+
+ cy.document().then((doc) => {
+ const tabindex = doc.querySelector('.myclass').getAttribute('tabindex');
+ expect(tabindex).equal('-1');
+ });
+ });
+
+ it('should have tabindex 0 when render content with button ', () => {
+ cy.viewport(1680, 900);
+ mount(
+
+
+
+ );
+
+ cy.document().then((doc) => {
+ const tabindex = doc.querySelector('.myclass').getAttribute('tabindex');
+ expect(tabindex).equal('0');
+ });
+
+ cy.findByRole('button', { name: 'Inline Button' }).should('have.attr', 'tabindex', '0');
+ });
});
diff --git a/packages/react/src/components/SidePanel/SidePanel.test.jsx b/packages/react/src/components/SidePanel/SidePanel.test.jsx
index ddc249a9d6..9079e9d578 100644
--- a/packages/react/src/components/SidePanel/SidePanel.test.jsx
+++ b/packages/react/src/components/SidePanel/SidePanel.test.jsx
@@ -44,6 +44,30 @@ describe('SidePanel Component Test', () => {
);
+ const Content = () => (
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a dapibus nulla. Fusce et enim
+ et elit rutrum interdum quis eu nulla. Nulla neque neque, condimentum eget pellentesque sit
+ amet, volutpat ac enim. Etiam id magna vel dolor condimentum imperdiet. Vivamus eu
+ pellentesque turpis, eget ultricies lectus. Vestibulum sodales massa non lobortis interdum.
+ Sed cursus sem in dolor tempus tempus. Pellentesque et nisi vel erat egestas ultricies.
+ Etiam id risus nec mi laoreet suscipit. Phasellus porttitor accumsan placerat. Donec auctor
+ nunc id erat congue, tincidunt viverra diam feugiat. Donec sit amet quam vel augue auctor
+ posuere. Nunc maximus volutpat nulla vel vehicula. Praesent bibendum nulla at erat facilisis
+ sodales. Aenean aliquet dui vel iaculis tincidunt. Praesent suscipit ultrices mi eget
+ finibus. Mauris vehicula ultricies auctor. Nam vestibulum iaculis lectus, nec sodales metus
+ lobortis non. Suspendisse nulla est, consectetur non convallis et, tristique eu risus. Sed
+ ut tortor et nulla tempor vulputate et vel ligula. Curabitur egestas lorem ut mi vestibulum
+ porttitor. Fusce eleifend vehicula semper. Donec luctus neque quam, et blandit eros accumsan
+ at.
+
+
+
+ );
+
it('should be selectable by testId', () => {
render(
{
expect(screen.getByTestId('side-panel-action-bar')).toBeDefined();
expect(screen.getByTestId('Button')).toBeDefined();
});
+
+ it('should render content slide-over panel', () => {
+ render(
+
+
+
+ );
+ expect(screen.getByTestId('side-panel')).toHaveClass(`${iotPrefix}--sidepanel--slide-over`);
+ });
+
+ it('should render content inline panel', () => {
+ render(
+
+
+
+ );
+ expect(screen.getByTestId('side-panel')).toHaveClass(`${iotPrefix}--sidepanel--inline`);
+ expect(screen.getByTestId('side-panel-toggle-button')).toBeTruthy();
+ });
});
diff --git a/packages/react/src/components/SidePanel/__snapshots__/SidePanel.story.storyshot b/packages/react/src/components/SidePanel/__snapshots__/SidePanel.story.storyshot
index 3386aa9df6..a1c7eac6ab 100644
--- a/packages/react/src/components/SidePanel/__snapshots__/SidePanel.story.storyshot
+++ b/packages/react/src/components/SidePanel/__snapshots__/SidePanel.story.storyshot
@@ -46,6 +46,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/S
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a dapibus nulla. Fusce et enim et elit rutrum interdum quis eu nulla. Nulla neque neque, condimentum eget pellentesque sit amet, volutpat ac enim. Etiam id magna vel dolor condimentum imperdiet. Vivamus eu pellentesque turpis, eget ultricies lectus. Vestibulum sodales massa non lobortis interdum. Sed cursus sem in dolor tempus tempus. Pellentesque et nisi vel erat egestas ultricies. Etiam id risus nec mi laoreet suscipit. Phasellus porttitor accumsan placerat. Donec auctor nunc id erat congue, tincidunt viverra diam feugiat. Donec sit amet quam vel augue auctor posuere. Nunc maximus volutpat nulla vel vehicula. Praesent bibendum nulla at erat facilisis sodales. Aenean aliquet dui vel iaculis tincidunt. Praesent suscipit ultrices mi eget finibus. Mauris vehicula ultricies auctor. Nam vestibulum iaculis lectus, nec sodales metus lobortis non. Suspendisse nulla est, consectetur non convallis et, tristique eu risus. Sed ut tortor et nulla tempor vulputate et vel ligula. Curabitur egestas lorem ut mi vestibulum porttitor. Fusce eleifend vehicula semper. Donec luctus neque quam, et blandit eros accumsan at.
+
diff --git a/packages/react/src/components/SuiteHeader/IdleLogoutConfirmationModal/IdleLogoutConfirmationModal.jsx b/packages/react/src/components/SuiteHeader/IdleLogoutConfirmationModal/IdleLogoutConfirmationModal.jsx
index c1da46a491..d367db4a0d 100644
--- a/packages/react/src/components/SuiteHeader/IdleLogoutConfirmationModal/IdleLogoutConfirmationModal.jsx
+++ b/packages/react/src/components/SuiteHeader/IdleLogoutConfirmationModal/IdleLogoutConfirmationModal.jsx
@@ -99,7 +99,10 @@ const IdleLogoutConfirmationModal = ({
try {
const url = new URL(routes.logout);
if (window.location.href) {
- url.searchParams.append('originHref', window.location.href);
+ url.searchParams.append(
+ 'originHref',
+ [window.location.protocol, '//', window.location.host, window.location.pathname].join('')
+ );
}
if (appId) {
url.searchParams.append('originAppId', appId);
@@ -119,7 +122,10 @@ const IdleLogoutConfirmationModal = ({
try {
const url = new URL(routes.logoutInactivity);
if (window.location.href) {
- url.searchParams.append('originHref', window.location.href);
+ url.searchParams.append(
+ 'originHref',
+ [window.location.protocol, '//', window.location.host, window.location.pathname].join('')
+ );
}
if (appId) {
url.searchParams.append('originAppId', appId);
@@ -179,6 +185,7 @@ const IdleLogoutConfirmationModal = ({
});
return () => {
+ setLogoutConfirmationCountdown(0);
timer.cleanUp();
};
}
diff --git a/packages/react/src/components/SuiteHeader/IdleLogoutConfirmationModal/IdleLogoutConfirmationModal.test.jsx b/packages/react/src/components/SuiteHeader/IdleLogoutConfirmationModal/IdleLogoutConfirmationModal.test.jsx
index 8ecd32d35a..9983b796a5 100644
--- a/packages/react/src/components/SuiteHeader/IdleLogoutConfirmationModal/IdleLogoutConfirmationModal.test.jsx
+++ b/packages/react/src/components/SuiteHeader/IdleLogoutConfirmationModal/IdleLogoutConfirmationModal.test.jsx
@@ -25,7 +25,7 @@ const commonProps = {
const TIME_INTERVAL = 1000;
describe('IdleLogoutConfirmationModal', () => {
- const originHref = 'https://ibm.com';
+ const originHref = 'https://ibm.com/';
const expectedWorkspaceBasedPageLogoutRoute = `${
commonProps.routes.logout
}?originHref=${encodeURIComponent(
@@ -50,7 +50,12 @@ describe('IdleLogoutConfirmationModal', () => {
originalWindowLocation = { ...window.location };
originalWindowDocumentCookie = window.document.cookie;
delete window.location;
- window.location = { href: 'https://ibm.com' };
+ window.location = {
+ href: 'https://ibm.com/',
+ protocol: 'https:',
+ host: 'ibm.com',
+ pathname: '/',
+ };
window.open = jest.fn();
});
diff --git a/packages/react/src/components/SuiteHeader/MultiWorkspaceSuiteHeader.story.jsx b/packages/react/src/components/SuiteHeader/MultiWorkspaceSuiteHeader.story.jsx
index 0e32bbf883..c54a8db6c9 100644
--- a/packages/react/src/components/SuiteHeader/MultiWorkspaceSuiteHeader.story.jsx
+++ b/packages/react/src/components/SuiteHeader/MultiWorkspaceSuiteHeader.story.jsx
@@ -499,6 +499,7 @@ HeaderWithExtraContent.storyName = 'Header with extra content';
export const HeaderWithSideNav = () => {
const demoMostRecentLinks = boolean('Demo most recent links', true);
+ const hideMenuButton = boolean('Hide menu button', false);
const [linksState, setLinksState] = useState([]);
const [recentLinksState, setRecentLinksState] = useState([]);
@@ -728,6 +729,7 @@ export const HeaderWithSideNav = () => {
links: linksState,
recentLinks: demoMostRecentLinks ? recentLinksState : [],
}}
+ hideMenuButton={hideMenuButton}
/>
);
@@ -837,3 +839,24 @@ export const HeaderWithIdleLogoutConfirmation = () => (
);
HeaderWithIdleLogoutConfirmation.storyName = 'Header with idle user detection';
+
+export const HeaderWithApplicationLinkInterceptor = () => {
+ const actionWithPreventDefault = (name) => (evt, route) => {
+ evt.preventDefault();
+ action(name)(evt, route);
+ };
+
+ return (
+
+ );
+};
+
+HeaderWithApplicationLinkInterceptor.storyName = 'Header with application link interceptor';
diff --git a/packages/react/src/components/SuiteHeader/MultiWorkspaceSuiteHeader.test.jsx b/packages/react/src/components/SuiteHeader/MultiWorkspaceSuiteHeader.test.jsx
index 7f12ba2507..4b876b3991 100644
--- a/packages/react/src/components/SuiteHeader/MultiWorkspaceSuiteHeader.test.jsx
+++ b/packages/react/src/components/SuiteHeader/MultiWorkspaceSuiteHeader.test.jsx
@@ -2,10 +2,13 @@ import { act, render, screen, waitFor, within, fireEvent } from '@testing-librar
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom/extend-expect';
import React from 'react';
+import NotificationOn from '@carbon/icons-react/es/notification/24';
+import { ScreenOff16 } from '@carbon/icons-react';
import Chip from '@carbon/icons-react/es/chip/24';
import MockDate from 'mockdate';
import { settings } from '../../constants/Settings';
+import { APP_SWITCHER } from '../Header/headerConstants';
import SuiteHeader from './SuiteHeader';
import SuiteHeaderI18N from './i18n';
@@ -160,7 +163,7 @@ const idleTimeoutDataProp = {
};
describe('SuiteHeader', () => {
- const originHref = 'https://ibm.com';
+ const originHref = 'https://ibm.com/';
const expectedAdminPageLogoutRoute = `${
adminPageCommonProps.routes.logout
}?originHref=${encodeURIComponent(originHref)}&originIsAdmin=true`;
@@ -184,7 +187,12 @@ describe('SuiteHeader', () => {
originalWindowLocation = { ...window.location };
originalWindowDocumentCookie = window.document.cookie;
delete window.location;
- window.location = { href: 'https://ibm.com' };
+ window.location = {
+ href: 'https://ibm.com/',
+ protocol: 'https:',
+ host: 'ibm.com',
+ pathname: '/',
+ };
window.open = jest.fn();
});
@@ -701,13 +709,13 @@ describe('SuiteHeader', () => {
const originalHref = window.location.href;
const onRouteChange = jest.fn().mockImplementation(() => false);
render(
);
- userEvent.click(screen.getByRole('menuitem', { name: 'user' }));
+ userEvent.click(screen.getByRole('button', { name: 'user', label: 'user' }));
await userEvent.click(screen.getByTestId('suite-header-profile--profile'));
expect(onRouteChange).toHaveBeenCalledWith('PROFILE', adminPageCommonProps.routes.profile);
expect(window.location.href).toEqual(originalHref);
onRouteChange.mockImplementation(() => true);
- userEvent.click(screen.getByRole('menuitem', { name: 'user' }));
+ userEvent.click(screen.getByRole('button', { name: 'user', label: 'user' }));
await userEvent.click(screen.getByTestId('suite-header-profile--profile'));
expect(onRouteChange).toHaveBeenCalledWith('PROFILE', adminPageCommonProps.routes.profile);
expect(window.location.href).toBe(adminPageCommonProps.routes.profile);
@@ -749,7 +757,7 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByTitle('chip'), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip' }), '{enter}', { skipClick: true });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLAnchorElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is a title'), { key: 'Enter' });
@@ -796,7 +804,7 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByTitle('chip'), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip' }), '{enter}', { skipClick: true });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLButtonElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is a title'), { key: 'Enter' });
@@ -842,7 +850,7 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByTitle('chip'), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip' }), '{enter}', { skipClick: true });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLButtonElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is a title'), { key: 'Enter' });
@@ -889,7 +897,7 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByTitle('chip'), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip' }), '{enter}', { skipClick: true });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLAnchorElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is a title'), { key: 'Enter' });
@@ -928,7 +936,9 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+ skipClick: true,
+ });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLAnchorElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -967,7 +977,9 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+ skipClick: true,
+ });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLButtonElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -1005,7 +1017,9 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+ skipClick: true,
+ });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLButtonElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -1044,7 +1058,9 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+ skipClick: true,
+ });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLAnchorElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -1086,7 +1102,9 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+ skipClick: true,
+ });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLAnchorElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -1136,7 +1154,7 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByTitle('chip'), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip' }), '{enter}', { skipClick: true });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLAnchorElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is a title'), { key: 'Enter' });
@@ -1167,7 +1185,7 @@ describe('SuiteHeader', () => {
const onRouteChange = jest.fn().mockImplementation(() => true);
fakeUserAgent = 'Mac';
render(
);
- await userEvent.click(screen.getByRole('button', { name: 'AppSwitcher' }));
+ await userEvent.click(screen.getByRole('button', { name: APP_SWITCHER }));
await userEvent.click(screen.getByText('All applications'), { metaKey: true });
const currentWorkspace = workspaceBasedPageCommonProps.workspaces.find((wo) => wo.isCurrent);
expect(onRouteChange).toHaveBeenCalledWith('NAVIGATOR', currentWorkspace.href, {
@@ -1184,7 +1202,7 @@ describe('SuiteHeader', () => {
const onRouteChange = jest.fn().mockImplementation(() => true);
fakeUserAgent = 'Win';
render(
);
- await userEvent.click(screen.getByRole('button', { name: 'AppSwitcher' }));
+ await userEvent.click(screen.getByRole('button', { name: APP_SWITCHER }));
await userEvent.click(screen.getByText('All applications'), { ctrlKey: true });
const currentWorkspace = workspaceBasedPageCommonProps.workspaces.find((wo) => wo.isCurrent);
expect(onRouteChange).toHaveBeenCalledWith('NAVIGATOR', currentWorkspace.href, {
@@ -1196,7 +1214,7 @@ describe('SuiteHeader', () => {
'noopener noreferrer'
);
expect(window.open).toHaveBeenCalledTimes(1);
- userEvent.click(screen.getByRole('menuitem', { name: 'user' }));
+ userEvent.click(screen.getByRole('button', { name: 'user', label: 'user' }));
await userEvent.click(screen.getByTestId('suite-header-profile--profile'), {
ctrlKey: true,
});
@@ -1207,7 +1225,7 @@ describe('SuiteHeader', () => {
);
expect(window.open).toHaveBeenCalledTimes(2);
- userEvent.click(screen.getByRole('menuitem', { name: 'Help' }));
+ userEvent.click(screen.getByRole('button', { name: 'Help', label: 'Help' }));
await userEvent.click(screen.getByTitle('About'), { ctrlKey: true });
expect(window.open).toHaveBeenLastCalledWith(
workspaceBasedPageCommonProps.routes.about,
@@ -1216,7 +1234,7 @@ describe('SuiteHeader', () => {
);
expect(window.open).toHaveBeenCalledTimes(3);
- userEvent.click(screen.getByRole('button', { name: 'AppSwitcher' }));
+ userEvent.click(screen.getByRole('button', { name: APP_SWITCHER }));
await userEvent.click(screen.getByText('All applications'), { ctrlKey: true });
expect(window.open).toHaveBeenLastCalledWith(
currentWorkspace.href,
@@ -1225,7 +1243,7 @@ describe('SuiteHeader', () => {
);
expect(window.open).toHaveBeenCalledTimes(4);
- userEvent.click(screen.getByRole('button', { name: 'AppSwitcher' }));
+ userEvent.click(screen.getByRole('button', { name: APP_SWITCHER }));
await userEvent.click(screen.getByText('Health'), { ctrlKey: true });
expect(window.open).toHaveBeenLastCalledWith(
currentWorkspace.applications[0].href,
@@ -1234,7 +1252,7 @@ describe('SuiteHeader', () => {
);
expect(window.open).toHaveBeenCalledTimes(5);
- userEvent.click(screen.getByRole('button', { name: 'AppSwitcher' }));
+ userEvent.click(screen.getByRole('button', { name: APP_SWITCHER }));
await userEvent.click(screen.getByText('Manage'), { ctrlKey: true });
expect(window.open).toHaveBeenLastCalledWith(
currentWorkspace.applications[1].href,
@@ -1243,7 +1261,7 @@ describe('SuiteHeader', () => {
);
expect(window.open).toHaveBeenCalledTimes(6);
- userEvent.click(screen.getByRole('button', { name: 'AppSwitcher' }));
+ userEvent.click(screen.getByRole('button', { name: APP_SWITCHER }));
await userEvent.click(screen.getByText('Workspace administration'), { ctrlKey: true });
expect(window.open).toHaveBeenLastCalledWith(
currentWorkspace.adminHref,
@@ -1274,7 +1292,7 @@ describe('SuiteHeader', () => {
'-1'
);
- userEvent.click(screen.getByRole('button', { name: 'AppSwitcher' }));
+ userEvent.click(screen.getByRole('button', { name: APP_SWITCHER }));
expect(screen.getByTestId('action-btn__panel')).toHaveClass(
`${prefix}--header-panel--expanded`
);
@@ -1323,4 +1341,39 @@ describe('SuiteHeader', () => {
render(
);
expect(screen.queryByTestId('suite-header--current-workspace')).not.toBeInTheDocument();
});
+
+ it('should assign unique id to action items', () => {
+ const firstActionLabel = 'Label one';
+ const secondActionLabel = 'Label two';
+ const { container } = render(
+
+ ),
+ },
+ {
+ label: secondActionLabel,
+ btnContent: (
+
+
+
+ ),
+ },
+ ]}
+ />
+ );
+
+ expect(container.querySelectorAll('#menu-item-global-action-0')).toHaveLength(1);
+ expect(container.querySelectorAll('#menu-item-global-action-1')).toHaveLength(1);
+ expect(container.querySelector('#menu-item-global-action-0')).toHaveTextContent(
+ firstActionLabel
+ );
+ expect(container.querySelector('#menu-item-global-action-1')).toHaveTextContent(
+ secondActionLabel
+ );
+ });
});
diff --git a/packages/react/src/components/SuiteHeader/SuiteHeader.jsx b/packages/react/src/components/SuiteHeader/SuiteHeader.jsx
index 7a6a2017f3..227df50ea4 100644
--- a/packages/react/src/components/SuiteHeader/SuiteHeader.jsx
+++ b/packages/react/src/components/SuiteHeader/SuiteHeader.jsx
@@ -1,12 +1,13 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable no-script-url */
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
import PropTypes from 'prop-types';
import { UserAvatar20, Settings20, Help20 } from '@carbon/icons-react';
import { ButtonSkeleton } from 'carbon-components-react';
import classnames from 'classnames';
import { HeaderContainer } from 'carbon-components-react/es/components/UIShell';
+import { get, set, cloneDeep } from 'lodash-es';
import SideNav, { SideNavPropTypes } from '../SideNav/SideNav';
import { ToastNotification } from '../Notification';
@@ -63,6 +64,9 @@ const defaultProps = {
walkmeLang: 'en',
testId: 'suite-header',
isActionItemVisible: () => true,
+ handleHeaderNameClick: null,
+ hideMenuButton: false,
+ closeSideNavOnNavigation: false,
};
const propTypes = {
@@ -117,10 +121,15 @@ const propTypes = {
/** Walkme language code */
walkmeLang: PropTypes.string,
testId: PropTypes.string,
-
+ /** Optional callback when user clicks on header name */
+ handleHeaderNameClick: PropTypes.oneOfType([PropTypes.func, PropTypes.any]),
/** a function that will be passed the actionItem object and returns a boolean to determine if that item should be shown */
// eslint-disable-next-line react/forbid-foreign-prop-types
isActionItemVisible: Header.propTypes.isActionItemVisible,
+ /** Force menu button to hide regardless of side nav props */
+ hideMenuButton: PropTypes.bool,
+ /** Force side nav to close upon item click */
+ closeSideNavOnNavigation: PropTypes.bool,
};
const SuiteHeader = ({
@@ -150,6 +159,9 @@ const SuiteHeader = ({
walkmePath,
walkmeLang,
testId,
+ handleHeaderNameClick: handleHeaderNameClickProps,
+ hideMenuButton,
+ closeSideNavOnNavigation,
...otherHeaderProps
}) => {
const mergedI18N = { ...defaultProps.i18n, ...i18n };
@@ -160,7 +172,7 @@ const SuiteHeader = ({
substitutions.reduce((acc, [key, val]) => acc.replace(key, val), string),
[]
);
-
+ const sideNavExpandedRef = useRef();
// Make sure that the survey toast notification is displayed if surveyData is passed in future rerenders
// not only at mount time
useEffect(() => {
@@ -169,6 +181,51 @@ const SuiteHeader = ({
}
}, [surveyData]);
+ // Function to include close side nav functionality to items when they are clicked
+ const setOnClickDecorators = useCallback((sNavProps, onClickSideNavExpand) => {
+ const clickableItems = [];
+ const recursivelyGetClickableItems = (propValue, parentProp) => {
+ if (!parentProp) {
+ // Get links and recentLinks
+ Object.entries(propValue).forEach(([k, v]) => {
+ if (k === 'links' || k === 'recentLinks') {
+ recursivelyGetClickableItems(v, k);
+ }
+ });
+ } else if (Array.isArray(propValue)) {
+ // If the propValue is an array, check its items
+ propValue.forEach((i, idx) => recursivelyGetClickableItems(i, `${parentProp}[${idx}]`));
+ } else if ((propValue?.childContent ?? []).length > 0) {
+ // If the propValue contains childContent, check each one of them
+ recursivelyGetClickableItems(propValue.childContent, `${parentProp}.childContent`);
+ } else if (propValue?.metaData) {
+ // If propValue doesn't contain children and it has metaData, add it to the clickableItems array
+ clickableItems.push(`${parentProp}.metaData`);
+ }
+ };
+ recursivelyGetClickableItems(sNavProps);
+
+ // Clone side nav props object
+ const cloned = cloneDeep(sNavProps);
+ clickableItems.forEach((i) => {
+ const item = get(cloned, i);
+ // Change onClick function to add onClickSideNavExpand call
+ set(cloned, i, {
+ ...item,
+ onClick: (...args) => {
+ if (item.onClick) {
+ item.onClick(...args);
+ }
+ if (sideNavExpandedRef.current) {
+ // Only allow toggling off the side nav expanded state
+ onClickSideNavExpand(...args);
+ }
+ },
+ });
+ });
+ return cloned;
+ }, []);
+
const isMultiWorkspace = workspaces?.length > 0;
const currentWorkspace = workspaces?.find((wo) => wo.isCurrent);
const appId =
@@ -200,7 +257,10 @@ const SuiteHeader = ({
try {
const url = new URL(routes.logout);
if (window.location.href) {
- url.searchParams.append('originHref', window.location.href);
+ url.searchParams.append(
+ 'originHref',
+ [window.location.protocol, '//', window.location.host, window.location.pathname].join('')
+ );
}
if (appId) {
url.searchParams.append('originAppId', appId);
@@ -244,10 +304,19 @@ const SuiteHeader = ({
}
};
+ const handleHeaderNameClick = useCallback(
+ (evt) => {
+ if (handleHeaderNameClickProps) {
+ handleHeaderNameClickProps(evt, navigatorRoute);
+ }
+ },
+ [handleHeaderNameClickProps, navigatorRoute]
+ );
+
return (
<>
{walkmePath ?
: null}
- {showToast ? (
+ {showToast && surveyData ? (
)}
(
- <>
- {
- onSideNavToggled(evt);
- onClickSideNavExpand(evt);
- }}
- headerPanel={{
- className: `${settings.iotPrefix}--suite-header-app-switcher${
- workspaces ? '-multiworkspace' : ''
- }`,
- // eslint-disable-next-line react/prop-types
- content: React.forwardRef(({ isExpanded }, ref) =>
- workspaces ? (
-
- ) : applications ? (
-
- ) : (
-
- )
- ),
- }}
- appName={suiteName}
- subtitle={
- appNameComponent || currentWorkspaceComponent || extraContentComponent ? (
-
- {currentWorkspaceComponent}
- {appNameComponent}
- {extraContentComponent}
-
- ) : null
- }
- actionItems={[
- ...customActionItems,
- {
- id: 'admin',
- label: mergedI18N.administrationIcon,
- className: [
- 'admin-icon',
- !routes?.admin ? 'admin-icon__hidden' : null,
- isAdminView ? 'admin-icon__selected' : null,
- ]
- .filter((i) => i)
- .join(' '),
- btnContent: (
-
+ ) : applications ? (
+
+ ) : (
+
+ )
),
- onClick: async (e) => {
- e.preventDefault();
- let href = adminRoute;
- let routeType = SUITE_HEADER_ROUTE_TYPES.ADMIN;
- if (isAdminView) {
- href = navigatorRoute;
- routeType = SUITE_HEADER_ROUTE_TYPES.NAVIGATOR;
- }
- handleOnClick(routeType, href)(e);
+ }}
+ appName={suiteName}
+ subtitle={
+ appNameComponent || currentWorkspaceComponent || extraContentComponent ? (
+
+ {currentWorkspaceComponent}
+ {appNameComponent}
+ {extraContentComponent}
+
+ ) : null
+ }
+ actionItems={[
+ ...customActionItems,
+ {
+ id: 'admin',
+ label: mergedI18N.administrationIcon,
+ className: [
+ 'admin-icon',
+ !routes?.admin ? 'admin-icon__hidden' : null,
+ isAdminView ? 'admin-icon__selected' : null,
+ ]
+ .filter((i) => i)
+ .join(' '),
+ btnContent: (
+
+ ),
+ onClick: async (e) => {
+ e.preventDefault();
+ let href = adminRoute;
+ let routeType = SUITE_HEADER_ROUTE_TYPES.ADMIN;
+ if (isAdminView) {
+ href = navigatorRoute;
+ routeType = SUITE_HEADER_ROUTE_TYPES.NAVIGATOR;
+ }
+ handleOnClick(routeType, href)(e);
+ },
+ href: isAdminView ? navigatorRoute : adminRoute,
},
- href: isAdminView ? navigatorRoute : adminRoute,
- },
- {
- id: 'help',
- label: mergedI18N.help,
- onClick: () => {},
- btnContent: (
-
- ),
- childContent: routes
- ? [
- ...mergedCustomHelpLinks,
- ...[
- 'whatsNew',
- 'gettingStarted',
- 'documentation',
- 'requestEnhancement',
- 'support',
- ].map((item) => ({
- metaData: {
- element: 'a',
- 'data-testid': `suite-header-help--${item}`,
- href: routes[item],
- rel: 'noopener noreferrer',
- title: mergedI18N[item],
- onClick: handleOnClick(
- SUITE_HEADER_ROUTE_TYPES.DOCUMENTATION,
- routes[item],
- true
+ {
+ id: 'help',
+ label: mergedI18N.help,
+ onClick: () => {},
+ btnContent: (
+
+ ),
+ childContent: routes
+ ? [
+ ...mergedCustomHelpLinks,
+ ...[
+ 'whatsNew',
+ 'gettingStarted',
+ 'documentation',
+ 'requestEnhancement',
+ 'support',
+ ].map((item) => ({
+ metaData: {
+ element: 'a',
+ 'data-testid': `suite-header-help--${item}`,
+ href: routes[item],
+ rel: 'noopener noreferrer',
+ title: mergedI18N[item],
+ onClick: handleOnClick(
+ SUITE_HEADER_ROUTE_TYPES.DOCUMENTATION,
+ routes[item],
+ true
+ ),
+ },
+ content: (
+
+ ),
+ })),
+ {
+ metaData: {
+ element: 'a',
+ 'data-testid': 'suite-header-help--about',
+ href: routes.about,
+ rel: 'noopener noreferrer',
+ title: mergedI18N.about,
+ onClick: handleOnClick(SUITE_HEADER_ROUTE_TYPES.ABOUT, routes.about),
+ },
+ content: (
+
),
},
- content: (
-
- ),
- })),
- {
- metaData: {
- element: 'a',
- 'data-testid': 'suite-header-help--about',
- href: routes.about,
- rel: 'noopener noreferrer',
- title: mergedI18N.about,
- onClick: handleOnClick(SUITE_HEADER_ROUTE_TYPES.ABOUT, routes.about),
- },
- content: (
-
- ),
- },
- ]
- : [
- {
- metaData: {
- element: 'div',
+ ]
+ : [
+ {
+ metaData: {
+ element: 'div',
+ },
+ content: (
+
+
+
+ ),
},
- content: (
-
-
-
- ),
+ ],
+ },
+ {
+ id: 'user',
+ label: 'user',
+ btnContent: (
+
+ ),
+ childContent: [
+ {
+ metaData: {
+ element: 'div',
},
- ],
- },
- {
- id: 'user',
- label: 'user',
- btnContent: (
-
- ),
- childContent: [
- {
- metaData: {
- element: 'div',
+ content: (
+
+ ),
},
- content: (
-
- ),
- },
- ...customProfileLinks,
- username
- ? {
- metaData: {
- className: `${settings.iotPrefix}--suite-header--logout`,
- element: 'a',
- 'data-testid': 'suite-header-profile--logout',
- href: 'javascript:void(0)',
- title: mergedI18N.logout,
- onClick: () => setShowLogoutModal(true),
- },
- content: (
-
- ),
- }
- : {
- metaData: {
- element: 'div',
+ ...customProfileLinks,
+ username
+ ? {
+ metaData: {
+ className: `${settings.iotPrefix}--suite-header--logout`,
+ element: 'a',
+ 'data-testid': 'suite-header-profile--logout',
+ href: 'javascript:void(0)',
+ title: mergedI18N.logout,
+ onClick: () => setShowLogoutModal(true),
+ },
+ content: (
+
+ ),
+ }
+ : {
+ metaData: {
+ element: 'div',
+ },
+ content: (
+
+
+
+ ),
},
- content: (
-
-
-
- ),
- },
- ],
- },
- ].filter((i) => i)}
- showCloseIconWhenPanelExpanded
- {...otherHeaderProps}
- />
- {sideNavProps ? (
- i)}
+ showCloseIconWhenPanelExpanded
isSideNavExpanded={isSideNavExpanded}
- testId={`${testId}-side-nav`}
+ {...otherHeaderProps}
/>
- ) : null}
-
- )}
+ {sideNavProps ? (
+
+ ) : null}
+
+ );
+ }}
/>
);
diff --git a/packages/react/src/components/SuiteHeader/SuiteHeader.mdx b/packages/react/src/components/SuiteHeader/SuiteHeader.mdx
index c0b655f2d6..7c0cb75a9d 100644
--- a/packages/react/src/components/SuiteHeader/SuiteHeader.mdx
+++ b/packages/react/src/components/SuiteHeader/SuiteHeader.mdx
@@ -518,6 +518,8 @@ Below is a full example of various BUTTON and ANCHOR tags used in both open in n
| walkmePath | string | null | Path to Walkme entry point |
| walkmeLang | string | 'en' | Walkme language code |
| isActionItemVisible | function | () => true | Is passed the actionItem object being rendered and returns a boolean if it should be in the DOM. (actionItem) => {} |
+| handleHeaderNameClick | function | null | On click event callback for application name in SuiteHeader, allows to intercept link redirect |
+| hideMenuButton | bool | false | Force menu button to hide regardless of side nav props |
## Feedback
diff --git a/packages/react/src/components/SuiteHeader/SuiteHeader.story.jsx b/packages/react/src/components/SuiteHeader/SuiteHeader.story.jsx
index 90e059e233..2a7426e2f1 100644
--- a/packages/react/src/components/SuiteHeader/SuiteHeader.story.jsx
+++ b/packages/react/src/components/SuiteHeader/SuiteHeader.story.jsx
@@ -312,6 +312,7 @@ HeaderWithExtraContent.storyName = 'Header with extra content';
export const HeaderWithSideNav = () => {
const demoMostRecentLinks = boolean('Demo most recent links', true);
+ const hideMenuButton = boolean('Hide menu button', false);
const [linksState, setLinksState] = useState([]);
const [recentLinksState, setRecentLinksState] = useState([]);
@@ -534,12 +535,14 @@ export const HeaderWithSideNav = () => {
appName="Application Name"
userDisplayName="Admin User"
username="adminuser"
+ closeSideNavOnNavigation={boolean('Close side nav on navigation', false)}
routes={routes}
applications={applications}
sideNavProps={{
links: linksState,
recentLinks: demoMostRecentLinks ? recentLinksState : [],
}}
+ hideMenuButton={hideMenuButton}
/>
);
diff --git a/packages/react/src/components/SuiteHeader/SuiteHeader.test.jsx b/packages/react/src/components/SuiteHeader/SuiteHeader.test.jsx
index bc42612464..1f703daa93 100644
--- a/packages/react/src/components/SuiteHeader/SuiteHeader.test.jsx
+++ b/packages/react/src/components/SuiteHeader/SuiteHeader.test.jsx
@@ -6,6 +6,7 @@ import Chip from '@carbon/icons-react/es/chip/24';
import MockDate from 'mockdate';
import { settings } from '../../constants/Settings';
+import { APP_SWITCHER } from '../Header/headerConstants';
import SuiteHeader from './SuiteHeader';
import SuiteHeaderI18N from './i18n';
@@ -67,7 +68,7 @@ const idleTimeoutDataProp = {
};
describe('SuiteHeader', () => {
- const originHref = 'https://ibm.com';
+ const originHref = 'https://ibm.com/';
const expectedAppPageLogoutRoute = `${commonProps.routes.logout}?originHref=${encodeURIComponent(
originHref
)}&originAppId=${appId}`;
@@ -87,7 +88,12 @@ describe('SuiteHeader', () => {
originalWindowLocation = { ...window.location };
originalWindowDocumentCookie = window.document.cookie;
delete window.location;
- window.location = { href: originHref };
+ window.location = {
+ href: 'https://ibm.com/',
+ protocol: 'https:',
+ host: 'ibm.com',
+ pathname: '/',
+ };
window.open = jest.fn();
});
@@ -612,13 +618,13 @@ describe('SuiteHeader', () => {
const originalHref = window.location.href;
const onRouteChange = jest.fn().mockImplementation(() => false);
render();
- userEvent.click(screen.getByRole('menuitem', { name: 'user' }));
+ userEvent.click(screen.getByRole('button', { name: 'user', label: 'user' }));
await userEvent.click(screen.getByTestId('suite-header-profile--profile'));
expect(onRouteChange).toHaveBeenCalledWith('PROFILE', commonProps.routes.profile);
expect(window.location.href).toEqual(originalHref);
onRouteChange.mockImplementation(() => true);
- userEvent.click(screen.getByRole('menuitem', { name: 'user' }));
+ userEvent.click(screen.getByRole('button', { name: 'user', label: 'user' }));
await userEvent.click(screen.getByTestId('suite-header-profile--profile'));
expect(onRouteChange).toHaveBeenCalledWith('PROFILE', commonProps.routes.profile);
expect(window.location.href).toBe(commonProps.routes.profile);
@@ -660,7 +666,7 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByTitle('chip'), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip' }), '{enter}', { skipClick: true });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLAnchorElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is a title'), { key: 'Enter' });
@@ -707,7 +713,7 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByTitle('chip'), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip' }), '{enter}', { skipClick: true });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLButtonElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is a title'), { key: 'Enter' });
@@ -753,7 +759,7 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByTitle('chip'), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip' }), '{enter}', { skipClick: true });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLButtonElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is a title'), { key: 'Enter' });
@@ -800,7 +806,7 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByTitle('chip'), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip' }), '{enter}', { skipClick: true });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLAnchorElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is a title'), { key: 'Enter' });
@@ -839,7 +845,9 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+ skipClick: true,
+ });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLAnchorElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -878,7 +886,9 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+ skipClick: true,
+ });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLButtonElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -916,7 +926,9 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+ skipClick: true,
+ });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLButtonElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -955,7 +967,9 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+ skipClick: true,
+ });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLAnchorElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -997,7 +1011,9 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByRole('menuitem', { name: 'chip' }), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip', label: 'chip' }), '{enter}', {
+ skipClick: true,
+ });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLAnchorElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is my message to you'), { key: 'Enter' });
@@ -1047,7 +1063,7 @@ describe('SuiteHeader', () => {
/>
);
- userEvent.type(screen.getByTitle('chip'), '{enter}', { skipClick: true });
+ userEvent.type(screen.getByRole('button', { name: 'chip' }), '{enter}', { skipClick: true });
expect(screen.getByText('this is my message to you')).toBeVisible();
jest.spyOn(HTMLAnchorElement.prototype, 'click');
fireEvent.keyDown(screen.getByTitle('this is a title'), { key: 'Enter' });
@@ -1099,7 +1115,7 @@ describe('SuiteHeader', () => {
'noopener noreferrer'
);
expect(window.open).toHaveBeenCalledTimes(1);
- userEvent.click(screen.getByRole('menuitem', { name: 'user' }));
+ userEvent.click(screen.getByRole('button', { name: 'user', label: 'user' }));
await userEvent.click(screen.getByTestId('suite-header-profile--profile'), {
ctrlKey: true,
});
@@ -1110,7 +1126,7 @@ describe('SuiteHeader', () => {
);
expect(window.open).toHaveBeenCalledTimes(2);
- userEvent.click(screen.getByRole('menuitem', { name: 'Help' }));
+ userEvent.click(screen.getByRole('button', { name: 'Help', label: 'Help' }));
await userEvent.click(screen.getByTitle('About'), { ctrlKey: true });
expect(window.open).toHaveBeenLastCalledWith(
commonProps.routes.about,
@@ -1119,7 +1135,7 @@ describe('SuiteHeader', () => {
);
expect(window.open).toHaveBeenCalledTimes(3);
- userEvent.click(screen.getByRole('button', { name: 'AppSwitcher' }));
+ userEvent.click(screen.getByRole('button', { name: APP_SWITCHER }));
await userEvent.click(screen.getByText('All applications'), { ctrlKey: true });
expect(window.open).toHaveBeenLastCalledWith(
commonProps.routes.navigator,
@@ -1128,7 +1144,7 @@ describe('SuiteHeader', () => {
);
expect(window.open).toHaveBeenCalledTimes(4);
- userEvent.click(screen.getByRole('button', { name: 'AppSwitcher' }));
+ userEvent.click(screen.getByRole('button', { name: APP_SWITCHER }));
await userEvent.click(screen.getByText('Monitor'), { ctrlKey: true });
expect(window.open).toHaveBeenLastCalledWith(
commonProps.applications[0].href,
@@ -1137,7 +1153,7 @@ describe('SuiteHeader', () => {
);
expect(window.open).toHaveBeenCalledTimes(5);
- userEvent.click(screen.getByRole('button', { name: 'AppSwitcher' }));
+ userEvent.click(screen.getByRole('button', { name: APP_SWITCHER }));
await userEvent.click(screen.getByText('Health'), { ctrlKey: true });
expect(window.open).toHaveBeenLastCalledWith(
commonProps.applications[1].href,
@@ -1165,7 +1181,7 @@ describe('SuiteHeader', () => {
'-1'
);
- userEvent.click(screen.getByRole('button', { name: 'AppSwitcher' }));
+ userEvent.click(screen.getByRole('button', { name: APP_SWITCHER }));
expect(screen.getByTestId('action-btn__panel')).toHaveClass(
`${prefix}--header-panel--expanded`
);
@@ -1186,8 +1202,249 @@ describe('SuiteHeader', () => {
it('shows loading state', async () => {
render();
- userEvent.click(screen.getByRole('button', { name: 'AppSwitcher' }));
+ userEvent.click(screen.getByRole('button', { name: APP_SWITCHER }));
// Expect skeletons
expect(screen.getByTestId('suite-header-app-switcher--loading')).toBeVisible();
});
+
+ it('should invoke application name click callback', async () => {
+ const headerNameClickCallback = jest.fn();
+ render();
+ await userEvent.click(screen.getByTestId('suite-header-name'));
+ expect(headerNameClickCallback).toHaveBeenCalledTimes(1);
+ expect(headerNameClickCallback).toHaveBeenCalledWith(
+ expect.any(Object),
+ commonProps.routes.navigator
+ );
+ });
+
+ describe('header action and panel (safari)', () => {
+ beforeAll(() => {
+ const userAgentGetter = jest.spyOn(window, 'navigator', 'get');
+ userAgentGetter.mockReturnValue({
+ userAgent:
+ 'Mozilla/5.0 (Macintosh; Intel Mac OS X 00_00_0) AppleWebKit/000.0.00 (KHTML, like Gecko) Version/00.0 Safari/000.0.00',
+ });
+ });
+
+ afterAll(() => {
+ jest.clearAllMocks();
+ jest.restoreAllMocks();
+ });
+
+ it('should close action panel if other action clicked (safari)', () => {
+ render();
+ const headerPanel = screen.getByTestId('action-btn__panel');
+ const profileActionButton = screen.getByRole('button', { name: 'user', label: 'user' });
+
+ userEvent.click(screen.getByRole('button', { name: APP_SWITCHER }));
+ expect(headerPanel).toHaveClass(`${prefix}--header-panel--expanded`);
+ expect(profileActionButton).toHaveAttribute('aria-expanded', 'false');
+
+ userEvent.click(profileActionButton);
+ expect(headerPanel).not.toHaveClass(`${prefix}--header-panel--expanded`);
+ expect(profileActionButton).toHaveAttribute('aria-expanded', 'true');
+ });
+
+ it('should close action panel if clicked outside of panel (safari)', () => {
+ render();
+ const headerPanel = screen.getByTestId('action-btn__panel');
+
+ userEvent.click(screen.getByRole('button', { name: APP_SWITCHER }));
+ expect(headerPanel).toHaveClass(`${prefix}--header-panel--expanded`);
+
+ userEvent.click(document.body);
+ expect(headerPanel).not.toHaveClass(`${prefix}--header-panel--expanded`);
+ });
+
+ it('should close action dropdown if panel opened (safari)', () => {
+ render();
+ const headerPanel = screen.getByTestId('action-btn__panel');
+ const profileActionButton = screen.getByRole('button', { name: 'user', label: 'user' });
+
+ userEvent.click(profileActionButton);
+ expect(headerPanel).not.toHaveClass(`${prefix}--header-panel--expanded`);
+ expect(profileActionButton).toHaveAttribute('aria-expanded', 'true');
+
+ userEvent.click(screen.getByRole('button', { name: APP_SWITCHER }));
+ expect(headerPanel).toHaveClass(`${prefix}--header-panel--expanded`);
+ expect(profileActionButton).toHaveAttribute('aria-expanded', 'false');
+ });
+
+ it('should NOT close panel if clicked inside panel', () => {
+ render();
+ const headerPanel = screen.getByTestId('action-btn__panel');
+
+ userEvent.click(screen.getByRole('button', { name: APP_SWITCHER }));
+ expect(headerPanel).toHaveClass(`${prefix}--header-panel--expanded`);
+
+ userEvent.click(screen.getByText('My applications'));
+ expect(headerPanel).toHaveClass(`${prefix}--header-panel--expanded`);
+ });
+
+ it('should close action menu if clicked outside (safari)', () => {
+ render();
+ const headerPanel = screen.getByTestId('action-btn__panel');
+ const profileActionButton = screen.getByRole('button', { name: 'user', label: 'user' });
+
+ expect(headerPanel).not.toHaveClass(`${prefix}--header-panel--expanded`);
+ expect(profileActionButton).toHaveAttribute('aria-expanded', 'false');
+
+ userEvent.click(profileActionButton);
+ expect(profileActionButton).toHaveAttribute('aria-expanded', 'true');
+
+ userEvent.click(screen.getByRole('button', { name: APP_SWITCHER }));
+ expect(headerPanel).toHaveClass(`${prefix}--header-panel--expanded`);
+ expect(profileActionButton).toHaveAttribute('aria-expanded', 'false');
+ });
+
+ it('should close action menu if clicked on other action (safari)', () => {
+ render();
+ const profileActionButton = screen.getByRole('button', { name: 'user', label: 'user' });
+ // screen.getByTestId('menuitem', { 'aria-label': 'user' });
+ const helpActionButton = screen.getByRole('button', { name: 'Help', label: 'Help' });
+ // screen.getByTestId('menuitem', { 'aria-label': 'Help' });
+
+ expect(helpActionButton).toHaveAttribute('aria-expanded', 'false');
+ userEvent.click(helpActionButton);
+ expect(helpActionButton).toHaveAttribute('aria-expanded', 'true');
+
+ expect(profileActionButton).toHaveAttribute('aria-expanded', 'false');
+ userEvent.click(profileActionButton);
+ expect(profileActionButton).toHaveAttribute('aria-expanded', 'true');
+ expect(helpActionButton).toHaveAttribute('aria-expanded', 'false');
+ });
+ });
+
+ it('hides menu button', () => {
+ render(
+
+ );
+
+ expect(screen.queryByRole('button', { name: 'Open Menu' })).toBeNull();
+ });
+
+ it('checks if close icon appears when menu is open', async () => {
+ render(
+
+ );
+ const menuButton = screen.getByRole('button', { name: 'Open menu' });
+ // Check if menu button is rendered
+ expect(menuButton).toBeInTheDocument();
+ // Click menu button
+ await userEvent.click(menuButton);
+ // Check if menu button was removed and close button appeared
+ expect(screen.queryByRole('button', { name: 'Open menu' })).toBeNull();
+ expect(screen.getByRole('button', { name: 'Close menu' })).toBeInTheDocument();
+ });
+
+ it('checks if side nav closes when clicking an item', async () => {
+ render(
+
+ );
+ const menuButton = screen.getByRole('button', { name: 'Open menu' });
+ // Check if menu button is rendered
+ expect(menuButton).toBeInTheDocument();
+ // Click menu button
+ userEvent.click(menuButton);
+ // Check if menu button was removed and close button appeared
+ expect(screen.queryByRole('button', { name: 'Open menu' })).toBeNull();
+ expect(screen.getByRole('button', { name: 'Close menu' })).toBeInTheDocument();
+ // Check if nav bar is open
+ const sideNav = screen.getByTestId('suite-header-side-nav');
+ expect(sideNav).toHaveClass('bx--side-nav--expanded');
+
+ // Get first nav item and click it
+ const item = within(sideNav).getByTestId('suite-header-side-nav-link-0');
+ fireEvent.click(item);
+ // Take focus away from item
+ fireEvent.blur(item);
+ // Check if side nav closed
+ expect(sideNav).not.toHaveClass('bx--side-nav--expanded');
+ // Check if close menu button disappeared and open menu (hamburger) button is in the document
+ expect(screen.queryByRole('button', { name: 'Close menu' })).toBeNull();
+ expect(screen.getByRole('button', { name: 'Open menu' })).toBeInTheDocument();
+ });
});
diff --git a/packages/react/src/components/SuiteHeader/SuiteHeaderAppSwitcher/MultiWorkspaceSuiteHeaderAppSwitcher.jsx b/packages/react/src/components/SuiteHeader/SuiteHeaderAppSwitcher/MultiWorkspaceSuiteHeaderAppSwitcher.jsx
index edb77fafa2..537e88b2a4 100644
--- a/packages/react/src/components/SuiteHeader/SuiteHeaderAppSwitcher/MultiWorkspaceSuiteHeaderAppSwitcher.jsx
+++ b/packages/react/src/components/SuiteHeader/SuiteHeaderAppSwitcher/MultiWorkspaceSuiteHeaderAppSwitcher.jsx
@@ -192,7 +192,7 @@ const MultiWorkspaceSuiteHeaderAppSwitcher = ({
selectedWorkspace?.name ?? selectedWorkspace?.id ?? mergedI18n.selectWorkspace;
return (
-
+
{!isWorkspacesView ? (
<>
{workspaces?.length > 1 ? (
diff --git a/packages/react/src/components/SuiteHeader/SuiteHeaderAppSwitcher/SuiteHeaderAppSwitcher.jsx b/packages/react/src/components/SuiteHeader/SuiteHeaderAppSwitcher/SuiteHeaderAppSwitcher.jsx
index 8953603c80..a53e62323a 100644
--- a/packages/react/src/components/SuiteHeader/SuiteHeaderAppSwitcher/SuiteHeaderAppSwitcher.jsx
+++ b/packages/react/src/components/SuiteHeader/SuiteHeaderAppSwitcher/SuiteHeaderAppSwitcher.jsx
@@ -97,7 +97,7 @@ const SuiteHeaderAppSwitcher = ({
const tabIndex = isExpanded ? 0 : -1;
return (
-
+
-
{allApplicationsLink ? (
<>
@@ -142,7 +142,7 @@ const SuiteHeaderAppSwitcher = ({
);
})}
{mergedApplications?.length === 0 ? (
-
+
diff --git a/packages/react/src/components/SuiteHeader/SuiteHeaderAppSwitcher/__snapshots__/MultiWorkspaceSuiteHeaderAppSwitcher.story.storyshot b/packages/react/src/components/SuiteHeader/SuiteHeaderAppSwitcher/__snapshots__/MultiWorkspaceSuiteHeaderAppSwitcher.story.storyshot
index c9e28c08a6..7077a08fd0 100644
--- a/packages/react/src/components/SuiteHeader/SuiteHeaderAppSwitcher/__snapshots__/MultiWorkspaceSuiteHeaderAppSwitcher.story.storyshot
+++ b/packages/react/src/components/SuiteHeader/SuiteHeaderAppSwitcher/__snapshots__/MultiWorkspaceSuiteHeaderAppSwitcher.story.storyshot
@@ -15,6 +15,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/U
Select a workspace
@@ -189,6 +190,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/U
+
+
+`;
+
+exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/UI shell/SuiteHeader/Multi-workspace Header with application link interceptor 1`] = `
+
+
+
+ Focus sentinel
+
+
+
+
+ You are logged in to Application Name as Admin User. Logging out also logs you out of each application that is open in the same browser. To ensure a secure log out, close all open browser windows.
+
+
+
+
+
+
+
+ Focus sentinel
+
+
+
+ workspace1
+
+
+
+
+