Skip to content

Commit

Permalink
refactor(authentication): discovery-148 replace empty-state (#113)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cdcabrera
cdcabrera committed Sep 8, 2022
1 parent 940363a commit dab26cd
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 171 deletions.
223 changes: 58 additions & 165 deletions src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,183 +32,76 @@ exports[`Authentication Component should render a non-connected component author
`;

exports[`Authentication Component should render a non-connected component error: non-connected error 1`] = `
<Authentication
authorizeUser={[Function]}
session={
Object {
"authorized": false,
"error": true,
"errorMessage": "Authentication credentials were not provided.",
"pending": false,
}
}
t={[Function]}
<div
aria-live="polite"
className="pf-c-modal-box__body"
id="pf-modal-part-2"
>
<PageLayout
history={Object {}}
isFullPage={false}
location={Object {}}
logoutUser={[Function]}
menu={
Array [
Object {
"component": Object {
"$$typeof": Symbol(react.memo),
"WrappedComponent": [Function],
"compare": null,
"type": [Function],
},
"iconClass": "fa fa-crosshairs",
"redirect": true,
"title": "Sources",
"to": "/sources",
},
Object {
"component": Object {
"$$typeof": Symbol(react.memo),
"WrappedComponent": [Function],
"compare": null,
"type": [Function],
},
"iconClass": "pficon pficon-orders",
"title": "Scans",
"to": "/scans",
},
Object {
"component": Object {
"$$typeof": Symbol(react.memo),
"WrappedComponent": [Function],
"compare": null,
"type": [Function],
},
"iconClass": "fa fa-id-card",
"title": "Credentials",
"to": "/credentials",
},
]
}
session={
Object {
"authorized": false,
"username": "",
}
}
uiBrand={false}
uiName="Quipucords"
<Alert
title="t(view.login, {\\"context\\":\\"error\\"})"
variant="danger"
>
<div
className="layout-pf layout-pf-fixed fadein"
aria-label="Danger Alert"
className="pf-c-alert pf-m-danger"
data-ouia-component-id="OUIA-Generated-Alert-danger-1"
data-ouia-component-type="PF4/Alert"
data-ouia-safe={true}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<Masthead
className=""
href="#"
iconImg=""
middleContent={null}
navToggle={false}
onNavToggleClick={[Function]}
onTitleClick={[Function]}
thin={false}
title="Quipucords"
titleImg="title.svg"
<AlertIcon
variant="danger"
>
<nav
className="navbar navbar-pf-vertical"
<div
className="pf-c-alert__icon"
>
<div
className="navbar-header"
<ExclamationCircleIcon
color="currentColor"
noVerticalAlign={false}
size="sm"
>
<a
className="navbar-brand"
href="#"
onClick={[Function]}
role="button"
<svg
aria-hidden={true}
aria-labelledby={null}
fill="currentColor"
height="1em"
role="img"
style={
Object {
"verticalAlign": "-0.125em",
}
}
viewBox="0 0 512 512"
width="1em"
>
<img
alt="Quipucords"
className="navbar-brand-name"
src="title.svg"
<path
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
/>
</a>
</div>
</nav>
</Masthead>
<div>
<EmptyState
className="full-page-blank-slate"
</svg>
</ExclamationCircleIcon>
</div>
</AlertIcon>
<h4
className="pf-c-alert__title"
>
<span
className="pf-u-screen-reader"
>
<div
className="blank-slate-pf full-page-blank-slate"
>
<Alert
title="t(view.login, {\\"context\\":\\"error\\"})"
variant="danger"
>
<div
aria-label="Danger Alert"
className="pf-c-alert pf-m-danger"
data-ouia-component-id="OUIA-Generated-Alert-danger-1"
data-ouia-component-type="PF4/Alert"
data-ouia-safe={true}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<AlertIcon
variant="danger"
>
<div
className="pf-c-alert__icon"
>
<ExclamationCircleIcon
color="currentColor"
noVerticalAlign={false}
size="sm"
>
<svg
aria-hidden={true}
aria-labelledby={null}
fill="currentColor"
height="1em"
role="img"
style={
Object {
"verticalAlign": "-0.125em",
}
}
viewBox="0 0 512 512"
width="1em"
>
<path
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
/>
</svg>
</ExclamationCircleIcon>
</div>
</AlertIcon>
<h4
className="pf-c-alert__title"
>
<span
className="pf-u-screen-reader"
>
Danger alert:
</span>
t(view.login, {"context":"error"})
</h4>
<div
className="pf-c-alert__description"
>
Authentication credentials were not provided
.
t(view.login-message, {"context":"error"}, [object Object])
</div>
</div>
</Alert>
</div>
</EmptyState>
Danger alert:
</span>
t(view.login, {"context":"error"})
</h4>
<div
className="pf-c-alert__description"
>
Authentication credentials were not provided
.
t(view.login-message, {"context":"error"}, [object Object])
</div>
</div>
</PageLayout>
</Authentication>
</Alert>
</div>
`;

exports[`Authentication Component should render a non-connected component pending: non-connected pending 1`] = `
Expand Down
2 changes: 1 addition & 1 deletion src/components/authentication/__tests__/authentication.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ describe('Authentication Component', () => {
</Authentication>
);

expect(component).toMatchSnapshot('non-connected error');
expect(component.find('.pf-c-modal-box__body')).toMatchSnapshot('non-connected error');
});

it('should render a non-connected component pending', () => {
Expand Down
10 changes: 5 additions & 5 deletions src/components/authentication/authentication.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Alert, Button, Bullseye } from '@patternfly/react-core';
import { EmptyState } from 'patternfly-react';
import { Alert, AlertVariant, Button, Bullseye } from '@patternfly/react-core';
import { Modal, ModalVariant } from '../modal/modal';
import { ConfirmationModal, ConfirmationVariant } from '../confirmationModal/confirmationModal';
import { reduxActions } from '../../redux';
import helpers from '../../common/helpers';
import { PageLayout } from '../pageLayout/pageLayout';
Expand Down Expand Up @@ -39,16 +39,16 @@ class Authentication extends React.Component {

return (
<PageLayout>
<EmptyState className="full-page-blank-slate">
<Alert variant="danger" title={t('view.login', { context: 'error' })}>
<ConfirmationModal icon={ConfirmationVariant.danger} show isContentOnly isClose={false} isActions={false}>
<Alert variant={AlertVariant.danger} title={t('view.login', { context: 'error' })}>
{session.errorMessage.replace(/\.$/, '')}
{session.errorMessage && '.'}
{!session.authorized &&
t('view.login-message', { context: 'error' }, [
<Button isInline component="a" variant="link" href="/login" />
])}
</Alert>
</EmptyState>
</ConfirmationModal>
</PageLayout>
);
}
Expand Down

0 comments on commit dab26cd

Please sign in to comment.