Skip to content

Commit

Permalink
refactor(modal): discovery-149 apply pf4 wrapper
Browse files Browse the repository at this point in the history 
* locale, button strings for modals
* authentication, apply pf4 modal
* confirmationModal, refactor using pf4 modal
* createCredentialDialog, pf4 modal, buttons
* createScanDialog, pf4 modal, buttons
* credentials, pf4 modal
* mergeReportsDialog, pf modal, buttons
* scans, pf4 modal
* sources, pf4 modal
  • Loading branch information
@cdcabrera
cdcabrera committed Jul 1, 2022
1 parent 81865f4 commit 5aaf2c6
Show file tree
Hide file tree
Showing 18 changed files with 958 additions and 696 deletions.
13 changes: 13 additions & 0 deletions public/locales/en.json
View file
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..."
}
}
53 changes: 18 additions & 35 deletions src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
View file
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
View file
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
145 changes: 92 additions & 53 deletions src/components/confirmationModal/__tests__/__snapshots__/confirmationModal.test.js.snap
View file
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="Warning Alert"
class="pf-c-alert pf-m-inline pf-m-plain pf-m-warning"
data-ouia-component-id="OUIA-Generated-Alert-warning-1"
data-ouia-component-type="PF4/Alert"
data-ouia-safe="true"
>
<button
class="close"
<div
class="pf-c-alert__icon"
>
<span
<svg
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 576 512"
width="1em"
>
Close
</span>
</button>
<path
d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-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>
</div>
<h4
class="modal-title"
id=""
class="pf-c-alert__title"
>
Confirm
<span
class="pf-u-screen-reader"
>
Warning 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
16 changes: 7 additions & 9 deletions src/components/confirmationModal/__tests__/confirmationModal.test.js
View file
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,34 +28,32 @@ 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,
title: 'Confirm',
heading: 'test',
icon: null,
icon: undefined,
body: 'Test body',
confirmButtonText: 'Confirm',
cancelButtonText: 'Cancel',
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

0 comments on commit 5aaf2c6

Please sign in to comment.