Skip to content

Commit e2ffe96

Browse files
openshift-merge-bot[bot]openshift-merge-bot[bot]
authored
Merge pull request #14762 from logonoff/odc-7700
ODC-7770: Remove perspective switcher if only one perspective is present
2 parents 496b1ce + 4f88e3b commit e2ffe96

File tree

4 files changed

+74
-55
lines changed

4 files changed

+74
-55
lines changed

‎frontend/packages/console-app/src/components/nav/NavHeader.scss

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎frontend/packages/console-app/src/components/nav/NavHeader.tsx

Lines changed: 39 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
SelectOption,
88
Title,
99
} from '@patternfly/react-core';
10-
import * as cx from 'classnames';
1110
import { useTranslation } from 'react-i18next';
1211
import { Perspective, useActivePerspective } from '@console/dynamic-plugin-sdk';
1312
import { useK8sWatchResource } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks/useK8sWatchResource';
@@ -16,7 +15,6 @@ import { ConsoleLinkModel } from '@console/internal/models';
1615
import { K8sResourceKind, referenceForModel } from '@console/internal/module/k8s';
1716
import { ACM_LINK_ID, usePerspectiveExtension, usePerspectives } from '@console/shared';
1817
import { ACM_PERSPECTIVE_ID } from '../../consts';
19-
import './NavHeader.scss';
2018

2119
export type NavHeaderProps = {
2220
onPerspectiveSelected: () => void;
@@ -135,48 +133,46 @@ const NavHeader: React.FC<NavHeaderProps> = ({ onPerspectiveSelected }) => {
135133
: []),
136134
];
137135

138-
return (
139-
<>
140-
{activePerspective !== ACM_PERSPECTIVE_ID && (
141-
<div
142-
className="oc-nav-header"
143-
data-tour-id="tour-perspective-dropdown"
144-
data-quickstart-id="qs-perspective-switcher"
145-
>
146-
<Select
147-
isOpen={isPerspectiveDropdownOpen}
148-
data-test-id="perspective-switcher-menu"
149-
onOpenChange={(open) => setPerspectiveDropdownOpen(open)}
150-
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
151-
<MenuToggle
152-
isFullWidth
153-
data-test-id="perspective-switcher-toggle"
154-
isExpanded={isPerspectiveDropdownOpen}
155-
ref={toggleRef}
156-
onClick={() => (perspectiveItems.length === 1 ? null : togglePerspectiveOpen())}
157-
className={cx({
158-
'oc-nav-header__menu-toggle--is-empty': perspectiveItems.length === 1,
159-
})}
160-
icon={<LazyIcon />}
161-
>
162-
{name && (
163-
<Title headingLevel="h2" size="md">
164-
{name}
165-
</Title>
166-
)}
167-
</MenuToggle>
168-
)}
169-
popperProps={{
170-
appendTo: () =>
171-
document.querySelector("[data-test-id='perspective-switcher-toggle']"),
172-
}}
136+
return activePerspective !== ACM_PERSPECTIVE_ID && perspectiveItems.length > 1 ? (
137+
<div
138+
className="oc-nav-header"
139+
data-tour-id="tour-perspective-dropdown"
140+
data-quickstart-id="qs-perspective-switcher"
141+
>
142+
<Select
143+
isOpen={isPerspectiveDropdownOpen}
144+
data-test-id="perspective-switcher-menu"
145+
onOpenChange={(open) => setPerspectiveDropdownOpen(open)}
146+
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
147+
<MenuToggle
148+
isFullWidth
149+
data-test-id="perspective-switcher-toggle"
150+
isExpanded={isPerspectiveDropdownOpen}
151+
ref={toggleRef}
152+
onClick={() => togglePerspectiveOpen()}
153+
icon={<LazyIcon />}
173154
>
174-
<SelectList>{perspectiveDropdownItems}</SelectList>
175-
</Select>
176-
</div>
177-
)}
178-
</>
179-
);
155+
{name && (
156+
<Title headingLevel="h2" size="md">
157+
{name}
158+
</Title>
159+
)}
160+
</MenuToggle>
161+
)}
162+
popperProps={{
163+
appendTo: () => document.querySelector("[data-test-id='perspective-switcher-toggle']"),
164+
}}
165+
>
166+
<SelectList>{perspectiveDropdownItems}</SelectList>
167+
</Select>
168+
</div>
169+
) : (
170+
<div
171+
className="pf-v6-u-display-none"
172+
data-test-id="perspective-switcher-toggle"
173+
aria-hidden="true"
174+
/>
175+
); // Empty div for e2e purposes
180176
};
181177

182178
export default NavHeader;

‎frontend/packages/dev-console/integration-tests/support/pages/functions/checkDeveloperPerspective.ts

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
import { guidedTour } from '@console/cypress-integration-tests/views/guided-tour';
22

33
export const checkDeveloperPerspective = () => {
4-
cy.byLegacyTestID('perspective-switcher-toggle').click();
54
cy.get('body').then(($body) => {
6-
if ($body.find('[data-test-id="perspective-switcher-menu-option"]').length !== 0) {
7-
cy.log('perspective switcher menu enabled');
8-
cy.byLegacyTestID('perspective-switcher-menu-option').contains('Developer');
9-
cy.byLegacyTestID('perspective-switcher-toggle').click();
10-
} else {
5+
cy.byLegacyTestID('perspective-switcher-toggle').then(($switcher) => {
6+
// switcher is present
7+
if ($switcher.attr('aria-hidden') !== 'true') {
8+
cy.byLegacyTestID('perspective-switcher-toggle').click();
9+
10+
if ($body.find('[data-test-id="perspective-switcher-menu-option"]').length !== 0) {
11+
cy.log('perspective switcher menu enabled');
12+
cy.byLegacyTestID('perspective-switcher-menu-option').contains('Developer');
13+
cy.byLegacyTestID('perspective-switcher-toggle').click();
14+
return;
15+
}
16+
}
17+
1118
cy.exec(
1219
`oc patch console.operator.openshift.io/cluster --type='merge' -p '{"spec":{"customization":{"perspectives":[{"id":"dev","visibility":{"state":"Enabled"}}]}}}'`,
1320
{ failOnNonZeroExit: true },
@@ -22,7 +29,8 @@ export const checkDeveloperPerspective = () => {
2229
cy.log(result.stderr);
2330
});
2431
cy.log('perspective switcher menu refreshed');
25-
}
32+
});
33+
2634
guidedTour.close();
2735
});
2836
};

‎frontend/packages/integration-tests-cypress/views/nav.ts

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
1+
import { switchPerspective } from '@console/dev-console/integration-tests/support/constants';
12
import { app } from '@console/dev-console/integration-tests/support/pages';
23
import { checkDeveloperPerspective } from '@console/dev-console/integration-tests/support/pages/functions/checkDeveloperPerspective';
34

45
export const nav = {
56
sidenav: {
67
switcher: {
7-
shouldHaveText: (text: string) =>
8-
cy.byLegacyTestID('perspective-switcher-toggle').scrollIntoView().contains(text),
8+
shouldHaveText: (text: string) => {
9+
cy.byLegacyTestID('perspective-switcher-toggle').then(($body) => {
10+
if (text === switchPerspective.Administrator) {
11+
// if the switcher is hidden it means we are in the admin perspective
12+
if ($body.attr('aria-hidden') === 'true') {
13+
cy.log('Admin is the only perspective available');
14+
cy.byLegacyTestID('perspective-switcher-toggle').should('not.be.visible');
15+
return;
16+
}
17+
}
18+
cy.byLegacyTestID('perspective-switcher-toggle').scrollIntoView().contains(text);
19+
});
20+
},
921
changePerspectiveTo: (newPerspective: string) => {
1022
app.waitForDocumentLoad();
1123
switch (newPerspective) {
@@ -14,6 +26,12 @@ export const nav = {
1426
case 'Admin':
1527
case 'admin':
1628
cy.byLegacyTestID('perspective-switcher-toggle').then(($body) => {
29+
if ($body.attr('aria-hidden') === 'true') {
30+
cy.log('Admin is the only perspective available');
31+
cy.byLegacyTestID('perspective-switcher-toggle').should('not.be.visible');
32+
return;
33+
}
34+
1735
if ($body.text().includes('Administrator')) {
1836
cy.log('Already on admin perspective');
1937
cy.byLegacyTestID('perspective-switcher-toggle')

0 commit comments

Comments
 (0)