Skip to content

Commit 2f63ef1

Browse files
dlabajdlabaj
committed
fix(notAuthorized): Updated code to support PF 5 design system with only one primary action.
1 parent 8b77723 commit 2f63ef1

4 files changed

Lines changed: 52 additions & 30 deletions

File tree

‎packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorizedExample.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,22 @@ import { Button } from '@patternfly/react-core';
33
import NotAuthorized from "@patternfly/react-component-groups/dist/dynamic/NotAuthorized";
44

55
export const BasicExample: React.FunctionComponent = () => {
6-
const actions = [
6+
const primaryAction =
77
<Button key="1">
88
First action
9-
</Button>,
10-
<Button key="2" className='pf-v5-u-mx-md'>
9+
</Button>;
10+
const secondaryActions = [
11+
<Button key="2" variant="link">
1112
Second action
1213
</Button>,
14+
<Button key="3" variant="link">
15+
Third action
16+
</Button>
1317
];
1418
return (
1519
<NotAuthorized
16-
actions={actions}
20+
primaryAction={primaryAction}
21+
secondaryActions={secondaryActions}
1722
className="something"
1823
description="Description text"
1924
serviceName="Demo bundle"

‎packages/module/src/NotAuthorized/NotAuthorized.test.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,19 @@ describe('NotAuthorized component', () => {
3838
});
3939

4040
it('should show custom actions', () => {
41-
const actions = [
41+
const primaryAction =
4242
<button id="action-one" key="1">
4343
1
44-
</button>,
44+
</button>;
45+
const secondaryActions = [
4546
<button id="action-one" key="2">
4647
2
4748
</button>,
49+
<button id="action-one" key="3">
50+
3
51+
</button>
4852
];
49-
const { container } = render(<NotAuthorized {...initialProps} actions={actions} />);
53+
const { container } = render(<NotAuthorized {...initialProps} primaryAction={primaryAction} secondaryActions={secondaryActions} />);
5054
expect(container.firstChild).toMatchSnapshot();
5155
});
5256
});

‎packages/module/src/NotAuthorized/NotAuthorized.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,10 @@ export interface NotAuthorizedProps extends Omit<EmptyStateProps, 'children' | '
1717
className?: string;
1818
/** Custom title */
1919
title?: React.ReactNode;
20-
/** Custom state actions */
21-
actions?: React.ReactNode;
20+
/** Custom primary action there should only be one primary action*/
21+
primaryAction?: React.ReactNode;
22+
/** Custom secondary actions */
23+
secondaryActions?: React.ReactNode;
2224
/** Custom landing page button text */
2325
toLandingPageText?: React.ReactNode;
2426
/** Custom landing page button URL */
@@ -29,7 +31,8 @@ const NotAuthorized: React.FunctionComponent<NotAuthorizedProps> = ({
2931
prevPageButtonText = 'Return to previous page',
3032
toLandingPageText = 'Go to landing page',
3133
toLandingPageUrl = ".",
32-
actions = null,
34+
primaryAction = null,
35+
secondaryActions = null,
3336
serviceName,
3437
title = `You do not have access to ${serviceName}`,
3538
icon: Icon = LockIcon,
@@ -42,15 +45,16 @@ const NotAuthorized: React.FunctionComponent<NotAuthorizedProps> = ({
4245
<EmptyStateHeader titleText={<>{title}</>} icon={<EmptyStateIcon icon={Icon} />} headingLevel="h5" />
4346
<EmptyStateBody>{description}</EmptyStateBody>
4447
<EmptyStateFooter>
45-
{actions && <EmptyStateActions>{actions}</EmptyStateActions>}
48+
{primaryAction ? <EmptyStateActions>{primaryAction}</EmptyStateActions> : null}
4649
<EmptyStateActions>
50+
{secondaryActions ? <EmptyStateActions>{secondaryActions}</EmptyStateActions> : null}
4751
{showReturnButton &&
4852
(document.referrer ? (
49-
<Button variant="primary" onClick={() => history.back()}>
53+
<Button variant="link" onClick={() => history.back()}>
5054
{prevPageButtonText}
5155
</Button>
5256
) : (
53-
<Button variant="primary" component="a" href={toLandingPageUrl}>
57+
<Button variant="link" component="a" href={toLandingPageUrl}>
5458
{toLandingPageText}
5559
</Button>
5660
))}

‎packages/module/src/NotAuthorized/__snapshots__/NotAuthorized.test.tsx.snap‎

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@ exports[`NotAuthorized component should apply custom styles 1`] = `
5050
>
5151
<a
5252
aria-disabled="false"
53-
class="pf-v5-c-button pf-m-primary"
54-
data-ouia-component-id="OUIA-Generated-Button-primary-2"
53+
class="pf-v5-c-button pf-m-link"
54+
data-ouia-component-id="OUIA-Generated-Button-link-2"
5555
data-ouia-component-type="PF5/Button"
5656
data-ouia-safe="true"
5757
href="."
@@ -167,8 +167,8 @@ exports[`NotAuthorized component should render 1`] = `
167167
>
168168
<a
169169
aria-disabled="false"
170-
class="pf-v5-c-button pf-m-primary"
171-
data-ouia-component-id="OUIA-Generated-Button-primary-1"
170+
class="pf-v5-c-button pf-m-link"
171+
data-ouia-component-id="OUIA-Generated-Button-link-1"
172172
data-ouia-component-type="PF5/Button"
173173
data-ouia-safe="true"
174174
href="."
@@ -234,19 +234,28 @@ exports[`NotAuthorized component should show custom actions 1`] = `
234234
>
235235
1
236236
</button>
237-
<button
238-
id="action-one"
239-
>
240-
2
241-
</button>
242237
</div>
243238
<div
244239
class="pf-v5-c-empty-state__actions"
245240
>
241+
<div
242+
class="pf-v5-c-empty-state__actions"
243+
>
244+
<button
245+
id="action-one"
246+
>
247+
2
248+
</button>
249+
<button
250+
id="action-one"
251+
>
252+
3
253+
</button>
254+
</div>
246255
<a
247256
aria-disabled="false"
248-
class="pf-v5-c-button pf-m-primary"
249-
data-ouia-component-id="OUIA-Generated-Button-primary-6"
257+
class="pf-v5-c-button pf-m-link"
258+
data-ouia-component-id="OUIA-Generated-Button-link-6"
250259
data-ouia-component-type="PF5/Button"
251260
data-ouia-safe="true"
252261
href="."
@@ -309,8 +318,8 @@ exports[`NotAuthorized component should show custom description 1`] = `
309318
>
310319
<a
311320
aria-disabled="false"
312-
class="pf-v5-c-button pf-m-primary"
313-
data-ouia-component-id="OUIA-Generated-Button-primary-4"
321+
class="pf-v5-c-button pf-m-link"
322+
data-ouia-component-id="OUIA-Generated-Button-link-4"
314323
data-ouia-component-type="PF5/Button"
315324
data-ouia-safe="true"
316325
href="."
@@ -373,8 +382,8 @@ exports[`NotAuthorized component should show custom title 1`] = `
373382
>
374383
<a
375384
aria-disabled="false"
376-
class="pf-v5-c-button pf-m-primary"
377-
data-ouia-component-id="OUIA-Generated-Button-primary-5"
385+
class="pf-v5-c-button pf-m-link"
386+
data-ouia-component-id="OUIA-Generated-Button-link-5"
378387
data-ouia-component-type="PF5/Button"
379388
data-ouia-safe="true"
380389
href="."
@@ -437,8 +446,8 @@ exports[`NotAuthorized component should use custom icon 1`] = `
437446
>
438447
<a
439448
aria-disabled="false"
440-
class="pf-v5-c-button pf-m-primary"
441-
data-ouia-component-id="OUIA-Generated-Button-primary-3"
449+
class="pf-v5-c-button pf-m-link"
450+
data-ouia-component-id="OUIA-Generated-Button-link-3"
442451
data-ouia-component-type="PF5/Button"
443452
data-ouia-safe="true"
444453
href="."

0 commit comments

Comments
 (0)