Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(modal): discovery-148 pf4 modal wrapper #88

Merged
merged 4 commits into from
Jul 6, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions public/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,20 @@
"ui-version": "UI Version",
"username": "Username"
},
"form-dialog": {
"label_cancel": "Cancel",
"label_close": "Close",
"label_submit": "Submit",
"label_submit_confirmation": "Confirm",
"label_submit_create-credential": "Save",
"label_submit_create-scan": "Scan",
"label_submit_merge-reports": "Merge"
},
"modal": {
"aria-label-default": "Application modal"
},
"view": {
"loading": "Loading...",
"loading_credentials": "Loading credentials..."
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -183,43 +183,26 @@ exports[`Authentication Component should render a non-connected component error:

exports[`Authentication Component should render a non-connected component pending: non-connected pending 1`] = `
<Modal
animation={false}
autoFocus={true}
aria-label={null}
backdrop={false}
bsClass="modal"
bsSize="lg"
dialogComponentClass={[Function]}
enforceFocus={true}
keyboard={true}
manager={
ModalManager {
"add": [Function],
"containers": Array [],
"data": Array [],
"handleContainerOverflow": true,
"hideSiblingNodes": true,
"isTopModal": [Function],
"modals": Array [],
"remove": [Function],
}
}
onHide={[Function]}
renderBackdrop={[Function]}
restoreFocus={true}
show={true}
className={null}
disableFocusTrap={true}
footer={null}
header={null}
isOpen={true}
position="top"
positionOffset="5%"
showClose={false}
t={[Function]}
variant="medium"
>
<ModalBody
bsClass="modal-body"
componentClass="div"
<div
className="spinner spinner-xl"
/>
<div
className="text-center"
>
<div
className="spinner spinner-xl"
/>
<div
className="text-center"
>
Logging in...
</div>
</ModalBody>
Logging in...
</div>
</Modal>
`;
11 changes: 5 additions & 6 deletions src/components/authentication/authentication.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Alert, EmptyState, Modal } from 'patternfly-react';
import { Alert, EmptyState } from 'patternfly-react';
import { Modal, ModalVariant } from '../modal/modal';
import { reduxActions } from '../../redux';
import helpers from '../../common/helpers';
import { PageLayout } from '../pageLayout/pageLayout';
Expand All @@ -24,11 +25,9 @@ class Authentication extends React.Component {

if (session.pending) {
return (
<Modal bsSize="lg" backdrop={false} show animation={false}>
<Modal.Body>
<div className="spinner spinner-xl" />
<div className="text-center">Logging in...</div>
</Modal.Body>
<Modal variant={ModalVariant.medium} backdrop={false} isOpen disableFocusTrap>
<div className="spinner spinner-xl" />
<div className="text-center">Logging in...</div>
</Modal>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,82 +4,121 @@ exports[`Confirmation Modal Component should NOT display a confirmation modal: h

exports[`Confirmation Modal Component should display a confirmation modal: show 1`] = `
<div
role="dialog"
class="pf-c-backdrop"
>
<div
class="fade modal-backdrop in"
/>
<div
aria-describedby=""
aria-labelledby=""
aria-modal="true"
class="fade message-dialog-pf in modal"
role="dialog"
style="display: block; padding-right: 0px;"
tabindex="-1"
class="pf-l-bullseye"
>
<div
class="modal-dialog"
aria-describedby="pf-modal-part-2"
aria-label="t(modal.aria-label-default)"
aria-labelledby="pf-modal-part-0"
aria-modal="true"
class="pf-c-modal-box pf-m-align-top"
data-ouia-component-id="OUIA-Generated-Modal-1"
data-ouia-component-type="PF4/ModalContent"
data-ouia-safe="true"
id="pf-modal-part-0"
role="dialog"
style="--pf-c-modal-box--m-align-top--spacer: 5%;"
>
<button
aria-disabled="false"
aria-label="Close"
class="pf-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Modal-1-ModalBoxCloseButton"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 352 512"
width="1em"
>
<path
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
/>
</svg>
</button>
<header
class="pf-c-modal-box__header"
>
<h4
class="pf-c-title pf-m-md"
data-ouia-component-id="OUIA-Generated-Title-1"
data-ouia-component-type="PF4/Title"
data-ouia-safe="true"
>
Confirm
</h4>
</header>
<div
class="modal-content"
role="document"
aria-live="polite"
class="pf-c-modal-box__body"
id="pf-modal-part-2"
>
<div
class="modal-header"
aria-label="Default Alert"
class="pf-c-alert pf-m-inline pf-m-plain"
data-ouia-component-id="OUIA-Generated-Alert-default-1"
data-ouia-component-type="PF4/Alert"
data-ouia-safe="true"
>
<button
class="close"
<div
class="pf-c-alert__icon"
>
<span
<svg
cdcabrera marked this conversation as resolved.
Show resolved Hide resolved
aria-hidden="true"
class="pficon pficon-close"
title="Close"
/>
<span
class="sr-only"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 896 1024"
width="1em"
>
Close
</span>
</button>
<path
d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
/>
</svg>
</div>
<h4
class="modal-title"
id=""
class="pf-c-alert__title"
>
Confirm
<span
class="pf-u-screen-reader"
>
Default alert:
</span>
test
</h4>
</div>
<div
class="modal-body"
>
<div
id=""
class="pf-c-alert__description"
>
<p>
test
</p>
<p>
Test body
</p>
</div>
</div>
<div
class="modal-footer"
>
<button
class="btn btn-default"
type="button"
>
Cancel
</button>
<button
class="btn btn-primary"
type="button"
>
Confirm
</button>
</div>
</div>
<footer
class="pf-c-modal-box__footer"
>
<button
aria-disabled="false"
class="pf-c-button pf-m-secondary"
data-ouia-component-id="OUIA-Generated-Button-secondary-1"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button"
>
Cancel
</button>
</footer>
</div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import configureMockStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import { mount, shallow } from 'enzyme';
import { shallow } from 'enzyme';
import { ConnectedConfirmationModal, ConfirmationModal } from '../confirmationModal';

describe('Confirmation Modal Component', () => {
Expand All @@ -28,7 +28,7 @@ describe('Confirmation Modal Component', () => {
expect(component.find(ConnectedConfirmationModal)).toMatchSnapshot('connected');
});

it('should display a confirmation modal', () => {
it('should display a confirmation modal', async () => {
const onCancel = jest.fn();
const props = {
show: true,
Expand All @@ -41,21 +41,19 @@ describe('Confirmation Modal Component', () => {
onCancel
};

const component = mount(<ConfirmationModal {...props} />);

const component = await mountHookComponent(<ConfirmationModal {...props} />);
expect(component.render()).toMatchSnapshot('show');

component.find('button[className="btn btn-default"]').simulate('click');
component.find('button[className="pf-c-button pf-m-secondary"]').simulate('click');
expect(onCancel).toHaveBeenCalledTimes(1);
});

it('should NOT display a confirmation modal', () => {
it('should NOT display a confirmation modal', async () => {
const props = {
show: false
};

const component = mount(<ConfirmationModal {...props} />);

const component = await mountHookComponent(<ConfirmationModal {...props} />);
expect(component.render()).toMatchSnapshot('hidden');
});
});
Loading