Skip to content

Commit b76ceb7

Browse files
dlabajdlabaj
committed
Added Not Authorized.
1 parent c39ee89 commit b76ceb7

File tree

5 files changed

+339
-0
lines changed

5 files changed

+339
-0
lines changed

‎packages/module/src/NotAuthorized/NotAuthorized.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.ins-c-not-authorized {
2+
.pf-c-title {
3+
max-width: 540px;
4+
margin-left: auto;
5+
margin-right: auto;
6+
}
7+
}

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from 'react';
2+
3+
import { Button, EmptyState, EmptyStateBody, EmptyStateIcon, EmptyStateProps, EmptyStateVariant, Title } from '@patternfly/react-core';
4+
5+
import { LockIcon } from '@patternfly/react-icons';
6+
7+
import './NotAuthorized.scss';
8+
9+
export interface NotAuthorizedProps extends Omit<EmptyStateProps, 'children' | 'title'> {
10+
serviceName?: string;
11+
icon?: React.ComponentType<any>;
12+
description?: React.ReactNode;
13+
showReturnButton?: boolean;
14+
className?: string;
15+
title?: React.ReactNode;
16+
actions?: React.ReactNode;
17+
prevPageButtonText?: React.ReactNode;
18+
toLandingPageText?: React.ReactNode;
19+
}
20+
21+
const ContactBody = () => (
22+
<React.Fragment>
23+
Contact your organization administrator(s) for more information or visit&nbsp;
24+
<a href={`./settings/my-user-access`}>My User Access</a>&nbsp; to learn more about your permissions.
25+
</React.Fragment>
26+
);
27+
28+
const NotAuthorized: React.FunctionComponent<NotAuthorizedProps> = ({
29+
prevPageButtonText = 'Return to previous page',
30+
toLandingPageText = 'Go to landing page',
31+
title,
32+
actions = null,
33+
serviceName,
34+
icon: Icon = LockIcon,
35+
description = <ContactBody />,
36+
showReturnButton = true,
37+
className,
38+
...props
39+
}) => {
40+
const heading = title || `You do not have access to ${serviceName}`;
41+
return (
42+
<EmptyState variant={EmptyStateVariant.full} className={`ins-c-not-authorized ${className || ''}`} {...props}>
43+
<EmptyStateIcon icon={Icon} />
44+
<Title headingLevel="h5" size="lg">
45+
{heading}
46+
</Title>
47+
<EmptyStateBody>{description}</EmptyStateBody>
48+
{actions}
49+
{showReturnButton &&
50+
(document.referrer ? (
51+
<Button variant="primary" onClick={() => history.back()}>
52+
{prevPageButtonText}
53+
</Button>
54+
) : (
55+
<Button variant="primary" component="a" href=".">
56+
{toLandingPageText}
57+
</Button>
58+
))}
59+
</EmptyState>
60+
);
61+
};
62+
63+
export default NotAuthorized;

‎packages/module/src/NotAuthorized/__tests__/NotAuthorized.test.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import { mount, shallow } from 'enzyme';
3+
import toJson from 'enzyme-to-json';
4+
import NotAuthorized from './NotAuthorized';
5+
6+
describe('NotAuthorized component', () => {
7+
const initialProps = {
8+
serviceName: 'Foo',
9+
};
10+
it('should render', () => {
11+
const wrapper = shallow(<NotAuthorized {...initialProps} />);
12+
expect(toJson(wrapper)).toMatchSnapshot();
13+
});
14+
15+
it('should apply custom styles', () => {
16+
const wrapper = shallow(<NotAuthorized {...initialProps} className="something" />);
17+
expect(toJson(wrapper)).toMatchSnapshot();
18+
});
19+
20+
it('should use custom icon', () => {
21+
const wrapper = mount(<NotAuthorized {...initialProps} icon={() => 'some Icon!'} />);
22+
expect(toJson(wrapper, { mode: 'deep' })).toMatchSnapshot();
23+
});
24+
25+
it('should not show buttons', () => {
26+
const wrapper = shallow(<NotAuthorized {...initialProps} showReturnButton={false} />);
27+
expect(toJson(wrapper)).toMatchSnapshot();
28+
});
29+
30+
it('should show custom description', () => {
31+
const wrapper = shallow(<NotAuthorized {...initialProps} description="Some text" />);
32+
expect(toJson(wrapper)).toMatchSnapshot();
33+
});
34+
35+
it('should show custom title', () => {
36+
const wrapper = shallow(<NotAuthorized title="Custom title" />);
37+
expect(toJson(wrapper)).toMatchSnapshot();
38+
});
39+
40+
it('should show custom actions', () => {
41+
const actions = [
42+
<button id="action-one" key="1">
43+
1
44+
</button>,
45+
<button id="action-one" key="2">
46+
2
47+
</button>,
48+
];
49+
const wrapper = shallow(<NotAuthorized {...initialProps} actions={actions} />);
50+
expect(toJson(wrapper)).toMatchSnapshot();
51+
});
52+
});

‎packages/module/src/NotAuthorized/__tests__/__snapshots__/NotAuthorized.test.js.snap‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`NotAuthorized component should apply custom styles 1`] = `
4+
<EmptyState
5+
className="ins-c-not-authorized something"
6+
variant="full"
7+
>
8+
<EmptyStateIcon
9+
icon={[Function]}
10+
/>
11+
<Title
12+
headingLevel="h5"
13+
size="lg"
14+
>
15+
You do not have access to Foo
16+
</Title>
17+
<EmptyStateBody>
18+
<ContactBody />
19+
</EmptyStateBody>
20+
<Button
21+
component="a"
22+
href="."
23+
variant="primary"
24+
>
25+
Go to landing page
26+
</Button>
27+
</EmptyState>
28+
`;
29+
30+
exports[`NotAuthorized component should not show buttons 1`] = `
31+
<EmptyState
32+
className="ins-c-not-authorized "
33+
variant="full"
34+
>
35+
<EmptyStateIcon
36+
icon={[Function]}
37+
/>
38+
<Title
39+
headingLevel="h5"
40+
size="lg"
41+
>
42+
You do not have access to Foo
43+
</Title>
44+
<EmptyStateBody>
45+
<ContactBody />
46+
</EmptyStateBody>
47+
</EmptyState>
48+
`;
49+
50+
exports[`NotAuthorized component should render 1`] = `
51+
<EmptyState
52+
className="ins-c-not-authorized "
53+
variant="full"
54+
>
55+
<EmptyStateIcon
56+
icon={[Function]}
57+
/>
58+
<Title
59+
headingLevel="h5"
60+
size="lg"
61+
>
62+
You do not have access to Foo
63+
</Title>
64+
<EmptyStateBody>
65+
<ContactBody />
66+
</EmptyStateBody>
67+
<Button
68+
component="a"
69+
href="."
70+
variant="primary"
71+
>
72+
Go to landing page
73+
</Button>
74+
</EmptyState>
75+
`;
76+
77+
exports[`NotAuthorized component should show custom actions 1`] = `
78+
<EmptyState
79+
className="ins-c-not-authorized "
80+
variant="full"
81+
>
82+
<EmptyStateIcon
83+
icon={[Function]}
84+
/>
85+
<Title
86+
headingLevel="h5"
87+
size="lg"
88+
>
89+
You do not have access to Foo
90+
</Title>
91+
<EmptyStateBody>
92+
<ContactBody />
93+
</EmptyStateBody>
94+
<button
95+
id="action-one"
96+
key="1"
97+
>
98+
1
99+
</button>
100+
<button
101+
id="action-one"
102+
key="2"
103+
>
104+
2
105+
</button>
106+
<Button
107+
component="a"
108+
href="."
109+
variant="primary"
110+
>
111+
Go to landing page
112+
</Button>
113+
</EmptyState>
114+
`;
115+
116+
exports[`NotAuthorized component should show custom description 1`] = `
117+
<EmptyState
118+
className="ins-c-not-authorized "
119+
variant="full"
120+
>
121+
<EmptyStateIcon
122+
icon={[Function]}
123+
/>
124+
<Title
125+
headingLevel="h5"
126+
size="lg"
127+
>
128+
You do not have access to Foo
129+
</Title>
130+
<EmptyStateBody>
131+
Some text
132+
</EmptyStateBody>
133+
<Button
134+
component="a"
135+
href="."
136+
variant="primary"
137+
>
138+
Go to landing page
139+
</Button>
140+
</EmptyState>
141+
`;
142+
143+
exports[`NotAuthorized component should show custom title 1`] = `
144+
<EmptyState
145+
className="ins-c-not-authorized "
146+
variant="full"
147+
>
148+
<EmptyStateIcon
149+
icon={[Function]}
150+
/>
151+
<Title
152+
headingLevel="h5"
153+
size="lg"
154+
>
155+
Custom title
156+
</Title>
157+
<EmptyStateBody>
158+
<ContactBody />
159+
</EmptyStateBody>
160+
<Button
161+
component="a"
162+
href="."
163+
variant="primary"
164+
>
165+
Go to landing page
166+
</Button>
167+
</EmptyState>
168+
`;
169+
170+
exports[`NotAuthorized component should use custom icon 1`] = `
171+
<div
172+
className="pf-c-empty-state ins-c-not-authorized "
173+
>
174+
<div
175+
className="pf-c-empty-state__content"
176+
>
177+
some Icon!
178+
<h5
179+
className="pf-c-title pf-m-lg"
180+
data-ouia-component-id="OUIA-Generated-Title-1"
181+
data-ouia-component-type="PF4/Title"
182+
data-ouia-safe={true}
183+
>
184+
You do not have access to Foo
185+
</h5>
186+
<div
187+
className="pf-c-empty-state__body"
188+
>
189+
Array [
190+
"Contact your organization administrator(s) for more information or visit ",
191+
<a
192+
href="./settings/my-user-access"
193+
>
194+
My User Access
195+
</a>,
196+
"  to learn more about your permissions.",
197+
]
198+
</div>
199+
<a
200+
aria-disabled={false}
201+
aria-label={null}
202+
className="pf-c-button pf-m-primary"
203+
data-ouia-component-id="OUIA-Generated-Button-primary-1"
204+
data-ouia-component-type="PF4/Button"
205+
data-ouia-safe={true}
206+
disabled={null}
207+
href="."
208+
role={null}
209+
type={null}
210+
>
211+
Go to landing page
212+
</a>
213+
</div>
214+
</div>
215+
`;

‎packages/module/src/NotAuthorized/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default } from './NotAuthorized';
2+
export { default as NotAuthorized } from './NotAuthorized';

0 commit comments

Comments
 (0)