Skip to content

Commit 9be3d49

Browse files
apinkertapinkert
committed
chore: address learn tab journey feedback
1 parent 8f6bdbd commit 9be3d49

12 files changed

Lines changed: 138 additions & 118 deletions

‎.storybook/hooks/useChrome.tsx‎

Lines changed: 4 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3,51 +3,17 @@
33
* Based on insights-rbac-ui pattern
44
*/
55

6+
import { defaultMockChrome } from '../mocks/chromeMock';
7+
68
export default function useChrome() {
79
// Return the mock chrome from window if available
810
if (typeof window !== 'undefined' && window.insights?.chrome) {
911
// @ts-ignore
1012
return window.insights.chrome;
1113
}
1214

13-
// Fallback mock
14-
return {
15-
auth: {
16-
getUser: async () => ({
17-
identity: {
18-
account_number: '12345',
19-
org_id: '67890',
20-
user: {
21-
username: 'testuser',
22-
email: 'test@example.com',
23-
first_name: 'Test',
24-
last_name: 'User',
25-
is_active: true,
26-
is_org_admin: false,
27-
},
28-
internal: {
29-
account_id: '12345',
30-
},
31-
},
32-
}),
33-
},
34-
getBundleData: () => ({ bundleId: 'insights' }),
35-
getAvailableBundles: () => [
36-
{ id: 'insights', title: 'Red Hat Insights' },
37-
{ id: 'ansible', title: 'Ansible Automation Platform' },
38-
{ id: 'openshift', title: 'OpenShift' },
39-
{ id: 'settings', title: 'Settings' },
40-
],
41-
updateDocumentTitle: (title: string) => {
42-
if (typeof document !== 'undefined') {
43-
document.title = title;
44-
}
45-
},
46-
hideGlobalFilter: () => {},
47-
isBeta: () => false,
48-
isProd: () => false,
49-
getEnvironment: () => 'stage',
50-
};
15+
// Fallback to shared mock
16+
return defaultMockChrome;
5117
}
5218

5319
// Named export for compatibility

‎.storybook/mocks/chromeMock.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* Shared Chrome mock for Storybook
3+
* Single source of truth for chrome API mocking
4+
*/
5+
6+
export const defaultMockChrome = {
7+
auth: {
8+
getUser: async () => ({
9+
identity: {
10+
account_number: '12345',
11+
org_id: '67890',
12+
user: {
13+
username: 'testuser',
14+
email: 'test@example.com',
15+
first_name: 'Test',
16+
last_name: 'User',
17+
is_active: true,
18+
is_org_admin: false,
19+
},
20+
internal: {
21+
account_id: '12345',
22+
},
23+
},
24+
}),
25+
},
26+
getBundleData: () => ({ bundleId: 'insights' }),
27+
getAvailableBundles: () => [
28+
{ id: 'insights', title: 'Red Hat Insights' },
29+
{ id: 'ansible', title: 'Ansible Automation Platform' },
30+
{ id: 'openshift', title: 'OpenShift' },
31+
{ id: 'settings', title: 'Settings' },
32+
],
33+
updateDocumentTitle: (title: string) => {
34+
if (typeof document !== 'undefined') {
35+
document.title = title;
36+
}
37+
},
38+
hideGlobalFilter: () => {},
39+
isBeta: () => false,
40+
isProd: () => false,
41+
getEnvironment: () => 'stage',
42+
};

‎.storybook/preview.tsx‎

Lines changed: 1 addition & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,45 +2,10 @@ import type { Preview } from '@storybook/react-webpack5';
22
import '@patternfly/react-core/dist/styles/base.css';
33
import React from 'react';
44
import { initialize, mswLoader } from 'msw-storybook-addon';
5+
import { defaultMockChrome } from './mocks/chromeMock';
56

67
// Set up global chrome mock immediately
78
if (typeof window !== 'undefined') {
8-
const defaultMockChrome = {
9-
auth: {
10-
getUser: async () => ({
11-
identity: {
12-
account_number: '12345',
13-
org_id: '67890',
14-
user: {
15-
username: 'testuser',
16-
email: 'test@example.com',
17-
first_name: 'Test',
18-
last_name: 'User',
19-
is_active: true,
20-
is_org_admin: false,
21-
},
22-
internal: {
23-
account_id: '12345',
24-
},
25-
},
26-
}),
27-
},
28-
getBundleData: () => ({ bundleId: 'insights' }),
29-
getAvailableBundles: () => [
30-
{ id: 'insights', title: 'Red Hat Insights' },
31-
{ id: 'ansible', title: 'Ansible Automation Platform' },
32-
{ id: 'openshift', title: 'OpenShift' },
33-
{ id: 'settings', title: 'Settings' },
34-
],
35-
updateDocumentTitle: (title: string) => {
36-
document.title = title;
37-
},
38-
hideGlobalFilter: () => {},
39-
isBeta: () => false,
40-
isProd: () => false,
41-
getEnvironment: () => 'stage',
42-
};
43-
449
// @ts-ignore
4510
window.insights = { chrome: defaultMockChrome };
4611
}

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
"jest": "29.7.0",
6868
"jest_workaround": "^0.79.19",
6969
"jest-environment-jsdom": "^29.7.0",
70-
"msw": "^2.12.10",
70+
"msw": "2.12.10",
7171
"msw-storybook-addon": "^2.0.6",
7272
"npm-run-all2": "5.0.2",
7373
"remark-gfm": "^4.0.0",

‎src/user-journeys/HelpPanelLearnPanel.stories.tsx‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import type { Meta, StoryObj } from '@storybook/react-webpack5';
22
import { expect, userEvent, waitFor, within } from 'storybook/test';
3-
import { delay } from 'msw';
43
import { AppEntryWithRouter } from './_shared/components/AppEntryWithRouter';
54
import {
65
helpPanelMswHandlers,
76
navigateToTab,
87
openHelpPanel,
98
waitForPageLoad,
109
} from './_shared/helpPanelJourneyHelpers';
11-
import { TEST_TIMEOUTS } from './_shared/testConstants';
10+
import { TEST_TIMEOUTS, delay } from './_shared/testConstants';
1211

1312
/**
1413
* User Journey: Help Panel - Learn Panel
@@ -95,19 +94,23 @@ export const Step04_ToggleBundleScope: Story = {
9594
await navigateToTab(canvasElement, 'Learn');
9695

9796
// Find the "All" toggle button using ID
98-
const allToggle = document.getElementById('all-toggle') as HTMLElement;
99-
await userEvent.click(allToggle);
97+
const allToggle = document.getElementById('all-toggle');
98+
if (!allToggle) {
99+
throw new Error('All toggle button not found');
100+
}
101+
await userEvent.click(allToggle as HTMLElement);
100102

101103
// Pause after toggle
102104
await delay(TEST_TIMEOUTS.AFTER_CLICK);
103105

104106
console.log('UJ: ✅ Toggled to All resources scope');
105107

106108
// Switch back to bundle using ID
107-
const bundleToggle = document.getElementById(
108-
'bundle-toggle'
109-
) as HTMLElement;
110-
await userEvent.click(bundleToggle);
109+
const bundleToggle = document.getElementById('bundle-toggle');
110+
if (!bundleToggle) {
111+
throw new Error('Bundle toggle button not found');
112+
}
113+
await userEvent.click(bundleToggle as HTMLElement);
111114

112115
// Pause after toggle
113116
await delay(TEST_TIMEOUTS.AFTER_CLICK);
@@ -127,7 +130,7 @@ export const Step05_FilterAndShowBookmarksOnly: Story = {
127130
await navigateToTab(canvasElement, 'Learn');
128131

129132
// Find and click the content type dropdown
130-
const contentTypeToggle = canvas.getByRole('button', {
133+
const contentTypeToggle = await canvas.findByRole('button', {
131134
name: /content type/i,
132135
});
133136
await userEvent.click(contentTypeToggle);
@@ -146,8 +149,11 @@ export const Step05_FilterAndShowBookmarksOnly: Story = {
146149
// Find the checkbox input within the option
147150
const quickstartOption = document.querySelector(
148151
'[data-ouia-component-id="help-panel-content-type-option-quickstart"] input[type="checkbox"]'
149-
) as HTMLElement;
150-
await userEvent.click(quickstartOption);
152+
);
153+
if (!quickstartOption) {
154+
throw new Error('Quick start checkbox option not found');
155+
}
156+
await userEvent.click(quickstartOption as HTMLElement);
151157

152158
// Pause after selecting filter
153159
await delay(TEST_TIMEOUTS.AFTER_CLICK);
@@ -189,7 +195,7 @@ export const Step06_ClearAllFilters: Story = {
189195
await navigateToTab(canvasElement, 'Learn');
190196

191197
// Click content type dropdown
192-
const contentTypeToggle = canvas.getByRole('button', {
198+
const contentTypeToggle = await canvas.findByRole('button', {
193199
name: /content type/i,
194200
});
195201
await userEvent.click(contentTypeToggle);
@@ -207,8 +213,11 @@ export const Step06_ClearAllFilters: Story = {
207213

208214
const docOption = document.querySelector(
209215
'[data-ouia-component-id="help-panel-content-type-option-documentation"] input[type="checkbox"]'
210-
) as HTMLElement;
211-
await userEvent.click(docOption);
216+
);
217+
if (!docOption) {
218+
throw new Error('Documentation checkbox option not found');
219+
}
220+
await userEvent.click(docOption as HTMLElement);
212221

213222
// Pause after selecting filter
214223
await delay(TEST_TIMEOUTS.AFTER_CLICK);

‎src/user-journeys/_shared/components/AppEntryWithRouter.tsx‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { MemoryRouter } from 'react-router-dom';
3-
import { QuickStartContextProvider } from '@patternfly/quickstarts';
3+
import {
4+
AllQuickStartStates,
5+
QuickStartContextProvider,
6+
useValuesForQuickStartContext,
7+
} from '@patternfly/quickstarts';
48
import { IntlProvider } from 'react-intl';
59
import { MockConsolePage } from './MockConsolePage';
610

@@ -21,9 +25,22 @@ export const AppEntryWithRouter: React.FC<AppEntryWithRouterProps> = ({
2125
initialRoute = '/',
2226
bundle = 'insights',
2327
}) => {
28+
const [quickStartStates, setQuickStartStates] = useState<AllQuickStartStates>(
29+
{}
30+
);
31+
32+
const quickStartContextValue = useValuesForQuickStartContext({
33+
allQuickStarts: [],
34+
activeQuickStartID: '',
35+
setActiveQuickStartID: () => {},
36+
allQuickStartStates: quickStartStates,
37+
setAllQuickStartStates: setQuickStartStates,
38+
useQueryParams: false,
39+
});
40+
2441
return (
2542
<IntlProvider locale={locale} defaultLocale="en">
26-
<QuickStartContextProvider>
43+
<QuickStartContextProvider value={quickStartContextValue}>
2744
<MemoryRouter initialEntries={[initialRoute]}>
2845
<MockConsolePage bundle={bundle} />
2946
</MemoryRouter>

‎src/user-journeys/_shared/components/MockConsolePage.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
// Mock Console Page styles for Help Panel user journey
22
// Minimal styles to ensure proper drawer panel layout
33

4-
[data-ouia-component-id="help-panel-drawer"] .pf-v6-c-drawer__panel-body {
5-
height: 100%;
6-
display: flex;
7-
flex-direction: column;
4+
.mock-console-page {
5+
[data-ouia-component-id='help-panel-drawer'] .pf-v6-c-drawer__panel-body {
6+
height: 100%;
7+
display: flex;
8+
flex-direction: column;
9+
}
810
}

‎src/user-journeys/_shared/components/MockConsolePage.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export const MockConsolePage: React.FC<MockConsolePageProps> = ({
3535

3636
const panelContent = (
3737
<DrawerPanelContent
38+
id="mock-help-panel-drawer"
3839
data-ouia-component-id="help-panel-drawer"
3940
widths={{ default: 'width_50' }}
4041
>
@@ -43,7 +44,12 @@ export const MockConsolePage: React.FC<MockConsolePageProps> = ({
4344
);
4445

4546
return (
46-
<Page masthead={<MockHeader onHelpClick={toggleDrawer} />}>
47+
<Page
48+
className="mock-console-page"
49+
masthead={
50+
<MockHeader onHelpClick={toggleDrawer} isDrawerOpen={isDrawerOpen} />
51+
}
52+
>
4753
<Drawer isExpanded={isDrawerOpen} position="right">
4854
<DrawerContent panelContent={panelContent}>
4955
<DrawerContentBody>

‎src/user-journeys/_shared/components/MockHeader.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,17 @@ import { QuestionCircleIcon } from '@patternfly/react-icons';
1414

1515
interface MockHeaderProps {
1616
onHelpClick: () => void;
17+
isDrawerOpen: boolean;
1718
}
1819

1920
/**
2021
* Mock console header for testing Help Panel.
2122
* Mimics the Red Hat Console header with a Help button.
2223
*/
23-
export const MockHeader: React.FC<MockHeaderProps> = ({ onHelpClick }) => {
24+
export const MockHeader: React.FC<MockHeaderProps> = ({
25+
onHelpClick,
26+
isDrawerOpen,
27+
}) => {
2428
return (
2529
<Masthead>
2630
<MastheadMain>
@@ -41,6 +45,8 @@ export const MockHeader: React.FC<MockHeaderProps> = ({ onHelpClick }) => {
4145
icon={<QuestionCircleIcon />}
4246
data-ouia-component-id="help-panel-toggle-button"
4347
aria-label="Toggle help panel"
48+
aria-expanded={isDrawerOpen}
49+
aria-controls="mock-help-panel-drawer"
4450
>
4551
Help
4652
</Button>

0 commit comments

Comments
 (0)