Skip to content

Commit

Permalink
refactor(authentication): discovery-148 pf4 alert, locale (#112)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cdcabrera
cdcabrera committed Aug 12, 2022
1 parent 1cc7c14 commit 25e3204
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 47 deletions.
5 changes: 4 additions & 1 deletion public/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@
},
"view": {
"loading": "Loading...",
"loading_credentials": "Loading credentials..."
"loading_credentials": "Loading credentials...",
"login_error": "Login error",
"login-message_error": "Please <0>login</0> to continue.",
"login_pending": "Logging in..."
}
}
90 changes: 59 additions & 31 deletions src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ exports[`Authentication Component should render a non-connected component author
"pending": false,
}
}
t={[Function]}
>
<span
className="test"
Expand All @@ -41,6 +42,7 @@ exports[`Authentication Component should render a non-connected component error:
"pending": false,
}
}
t={[Function]}
>
<PageLayout
history={Object {}}
Expand Down Expand Up @@ -138,39 +140,67 @@ exports[`Authentication Component should render a non-connected component error:
className="blank-slate-pf full-page-blank-slate"
>
<Alert
className=""
onDismiss={null}
type="error"
title="t(view.login, {\\"context\\":\\"error\\"})"
variant="danger"
>
<div
className="alert alert-danger"
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]}
>
<Icon
name="error-circle-o"
type="pf"
<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"
>
<PatternflyIcon
className=""
name="error-circle-o"
<span
className="pf-u-screen-reader"
>
<span
aria-hidden="true"
className="pficon pficon-error-circle-o"
/>
</PatternflyIcon>
</Icon>
<span>
Login error:
Danger alert:
</span>
t(view.login, {"context":"error"})
</h4>
<div
className="pf-c-alert__description"
>
Authentication credentials were not provided
.
Please
<a
href="/login"
>
login
</a>
to continue.
</span>
t(view.login-message, {"context":"error"}, [object Object])
</div>
</div>
</Alert>
</div>
Expand Down Expand Up @@ -199,10 +229,8 @@ exports[`Authentication Component should render a non-connected component pendin
<div
className="spinner spinner-xl"
/>
<div
className="text-center"
>
Logging in...
</div>
<Bullseye>
t(view.login, {"context":"pending"})
</Bullseye>
</Modal>
`;
45 changes: 30 additions & 15 deletions src/components/authentication/authentication.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Alert, EmptyState } from 'patternfly-react';
import { Alert, Button, Bullseye } from '@patternfly/react-core';
import { EmptyState } from 'patternfly-react';
import { Modal, ModalVariant } from '../modal/modal';
import { reduxActions } from '../../redux';
import helpers from '../../common/helpers';
import { PageLayout } from '../pageLayout/pageLayout';
import { translate } from '../i18n/i18n';

/**
* Authentication, determine if a user is authorized.
*/
class Authentication extends React.Component {
componentDidMount() {
const { session, authorizeUser } = this.props;
Expand All @@ -17,7 +22,7 @@ class Authentication extends React.Component {
}

render() {
const { children, session } = this.props;
const { children, session, t } = this.props;

if (session.authorized) {
return <React.Fragment>{children}</React.Fragment>;
Expand All @@ -27,31 +32,33 @@ class Authentication extends React.Component {
return (
<Modal variant={ModalVariant.medium} backdrop={false} isOpen disableFocusTrap>
<div className="spinner spinner-xl" />
<div className="text-center">Logging in...</div>
<Bullseye>{t('view.login', { context: 'pending' })}</Bullseye>
</Modal>
);
}

return (
<PageLayout>
<EmptyState className="full-page-blank-slate">
<Alert type="error">
<span>
Login error: {session.errorMessage.replace(/\.$/, '')}
{session.errorMessage && '.'}
{!session.authorized && (
<React.Fragment>
Please <a href="/login">login</a> to continue.
</React.Fragment>
)}
</span>
<Alert variant="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>
</PageLayout>
);
}
}

/**
* Prop types
*
* @type {{authorizeUser: Function, t: Function, children: React.ReactNode, session: object}}
*/
Authentication.propTypes = {
authorizeUser: PropTypes.func,
children: PropTypes.node.isRequired,
Expand All @@ -60,17 +67,25 @@ Authentication.propTypes = {
error: PropTypes.bool,
errorMessage: PropTypes.string,
pending: PropTypes.bool
})
}),
t: PropTypes.func
};

/**
* Default props.
*
* @type {{authorizeUser: Function, t: translate, session: {authorized: boolean, pending: boolean,
* errorMessage: string, error: boolean}}}
*/
Authentication.defaultProps = {
authorizeUser: helpers.noop,
session: {
authorized: false,
error: false,
errorMessage: '',
pending: false
}
},
t: translate
};

const mapDispatchToProps = dispatch => ({
Expand Down
29 changes: 29 additions & 0 deletions src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,23 @@ Array [
},
],
},
Object {
"file": "./src/components/authentication/authentication.js",
"keys": Array [
Object {
"key": "view.login",
"match": "t('view.login', { context: 'pending' })",
},
Object {
"key": "view.login",
"match": "t('view.login', { context: 'error' })",
},
Object {
"key": "view.login-message",
"match": "t('view.login-message', { context: 'error' }, [ <Button isInline component=\\"a\\" variant=\\"link\\" href=\\"/login\\" /> ])",
},
],
},
Object {
"file": "./src/components/confirmationModal/confirmationModal.js",
"keys": Array [
Expand Down Expand Up @@ -149,6 +166,18 @@ Array [

exports[`I18n Component should have locale keys that exist in the default language JSON: predictable missing locale keys 1`] = `
Array [
Object {
"file": "./src/components/authentication/authentication.js",
"key": "view.login",
},
Object {
"file": "./src/components/authentication/authentication.js",
"key": "view.login",
},
Object {
"file": "./src/components/authentication/authentication.js",
"key": "view.login-message",
},
Object {
"file": "./src/components/confirmationModal/confirmationModal.js",
"key": "form-dialog.label",
Expand Down

0 comments on commit 25e3204

Please sign in to comment.