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.

Sign up for GitHub

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

Jump to bottom

refactor(button,icon,spinner): discovery-149 pf4 replacements #165

Merged
merged 2 commits into from
Sep 16, 2022
Merged

refactor(button,icon,spinner): discovery-149 pf4 replacements #165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
667d9a4
refactor(icon,button,spinner): discovery-149 pf4 replacements
cdcabrera Sep 15, 2022
4b8ea22
DEV align pending messages with wizard pending
cdcabrera Sep 15, 2022
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
38 changes: 37 additions & 1 deletion src/components/contextIcon/__tests__/__snapshots__/contextIcon.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,14 @@ exports[`ContextIcon Component should export, and handle icon variants: icon var
/>
`;

exports[`ContextIcon Component should export, and handle icon variants: icon variant, error 1`] = `
<ErrorCircleOIcon
color="#c9190b"
noVerticalAlign={false}
size="sm"
/>
`;

exports[`ContextIcon Component should export, and handle icon variants: icon variant, failed 1`] = `
<ErrorCircleOIcon
color="#c9190b"
Expand All @@ -61,6 +69,14 @@ exports[`ContextIcon Component should export, and handle icon variants: icon var
/>
`;

exports[`ContextIcon Component should export, and handle icon variants: icon variant, info 1`] = `
<InfoCircleIcon
color="currentColor"
noVerticalAlign={false}
size="sm"
/>
`;

exports[`ContextIcon Component should export, and handle icon variants: icon variant, network 1`] = `
<PficonNetworkRangeIcon
color="currentColor"
Expand Down Expand Up @@ -167,6 +183,14 @@ exports[`ContextIcon Component should export, and handle icon variants: icon var
/>
`;

exports[`ContextIcon Component should export, and handle icon variants: icon variant, user 1`] = `
<UserIcon
color="currentColor"
noVerticalAlign={false}
size="sm"
/>
`;

exports[`ContextIcon Component should export, and handle icon variants: icon variant, vcenter 1`] = `
<PficonVcenterIcon
color="currentColor"
Expand All @@ -175,17 +199,27 @@ exports[`ContextIcon Component should export, and handle icon variants: icon var
/>
`;

exports[`ContextIcon Component should export, and handle icon variants: icon variant, warning 1`] = `
<ExclamationTriangleIcon
color="#f0ab00"
noVerticalAlign={false}
size="sm"
/>
`;

exports[`ContextIcon Component should export, and handle icon variants: variants 1`] = `
Object {
"canceled": "failed",
"cancelled": "failed",
"completed": "success",
"created": "pending",
"download": "download",
"error": "failed",
"failed": "failed",
"idCard": "idCard",
"info": "info",
"network": "network",
"paused": "paused",
"paused": "warning",
"pencil": "pencil",
"pending": "pending",
"running": "pending",
Expand All @@ -196,7 +230,9 @@ Object {
"trash": "trash",
"unknown": "unknown",
"unreachable": "unreachable",
"user": "user",
"vcenter": "vcenter",
"warning": "warning",
}
`;

Expand Down
26 changes: 19 additions & 7 deletions src/components/contextIcon/contextIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,22 @@ import PropTypes from 'prop-types';
import { Spinner } from '@patternfly/react-core';
import {
CheckCircleIcon,
ClipboardCheckIcon,
CrosshairsIcon,
DisconnectedIcon,
DownloadIcon,
ErrorCircleOIcon,
ExclamationTriangleIcon,
IdCardIcon,
InfoCircleIcon,
PencilAltIcon,
PficonNetworkRangeIcon,
PficonSatelliteIcon,
PficonVcenterIcon,
TrashIcon,
UnknownIcon,
IconSize,
ClipboardCheckIcon,
CrosshairsIcon
UserIcon,
IconSize
} from '@patternfly/react-icons';
import {
global_Color_dark_100 as gray,
Expand All @@ -40,21 +42,26 @@ const ContextIconColors = {
/**
* Context icon variants
*
* @type {{running: string, canceled: string, paused: string, unreachable: string, success: string, created: string,
* pending: string, cancelled: string, completed: string, failed: string}}
* @type {{paused: string, unreachable: string, sources: string, created: string, idCard: string, pending: string,
* completed: string, failed: string, error: string, pencil: string, network: string, trash: string, unknown: string,
* running: string, canceled: string, download: string, scans: string, success: string, cancelled: string,
* warning: string, vcenter: string, satellite: string, user: string, info: string}}
*/
const ContextIconVariant = {
completed: 'success',
success: 'success',
error: 'failed',
failed: 'failed',
canceled: 'failed',
cancelled: 'failed',
created: 'pending',
pending: 'pending',
running: 'pending',
paused: 'paused',
paused: 'warning',
warning: 'warning',
download: 'download',
idCard: 'idCard',
info: 'info',
network: 'network',
pencil: 'pencil',
satellite: 'satellite',
Expand All @@ -63,6 +70,7 @@ const ContextIconVariant = {
trash: 'trash',
unknown: 'unknown',
unreachable: 'unreachable',
user: 'user',
vcenter: 'vcenter'
};

Expand Down Expand Up @@ -106,9 +114,11 @@ const ContextIcon = ({ symbol, ...props }) => {
return <ErrorCircleOIcon {...{ ...{ color: red.value }, ...props }} />;
case ContextIconVariant.idCard:
return <IdCardIcon {...{ ...{ color: gray.value }, ...props }} />;
case ContextIconVariant.info:
return <InfoCircleIcon {...props} />;
case ContextIconVariant.network:
return <PficonNetworkRangeIcon {...props} />;
case ContextIconVariant.paused:
case ContextIconVariant.warning:
return <ExclamationTriangleIcon {...{ ...{ color: yellow.value }, ...props }} />;
case ContextIconVariant.pencil:
return <PencilAltIcon {...props} />;
Expand All @@ -134,6 +144,8 @@ const ContextIcon = ({ symbol, ...props }) => {
return <TrashIcon {...props} />;
case ContextIconVariant.unreachable:
return <DisconnectedIcon {...{ ...{ color: red.value }, ...props }} />;
case ContextIconVariant.user:
return <UserIcon {...props} />;
case ContextIconVariant.vcenter:
return <PficonVcenterIcon {...props} />;
case ContextIconVariant.unknown:
Expand Down
102 changes: 102 additions & 0 deletions src/components/createScanDialog/__tests__/__snapshots__/createScanDialog.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,108 @@ exports[`CreateScanDialog Component should handle multiple error responses: name
</div>
`;

exports[`CreateScanDialog Component should render a component, pending: pending 1`] = `
<div
class="pf-c-backdrop"
>
<div
class="pf-l-bullseye"
>
<div
aria-describedby="pf-modal-part-3"
aria-label="t(modal.aria-label-default)"
aria-labelledby="pf-modal-part-1"
aria-modal="true"
class="pf-c-modal-box pf-m-align-top"
data-ouia-component-id="OUIA-Generated-Modal-2"
data-ouia-component-type="PF4/ModalContent"
data-ouia-safe="true"
id="pf-modal-part-1"
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-2-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-2"
data-ouia-component-type="PF4/Title"
data-ouia-safe="true"
>
Scan
</h4>
</header>
<div
class="pf-c-modal-box__body"
id="pf-modal-part-3"
>
<form
class="form-horizontal"
>
<div
class="pf-c-empty-state quipucords-empty-state"
>
<div
class="pf-c-empty-state__content"
>
<span
aria-hidden="true"
aria-label="Contents"
aria-valuetext="Loading..."
class="pf-c-spinner pf-m-xl pf-c-empty-state__icon"
role="progressbar"
>
<span
class="pf-c-spinner__clipper"
/>
<span
class="pf-c-spinner__lead-ball"
/>
<span
class="pf-c-spinner__tail-ball"
/>
</span>
<h3
class="pf-c-title pf-m-lg"
data-ouia-component-id="OUIA-Generated-Title-3"
data-ouia-component-type="PF4/Title"
data-ouia-safe="true"
>
Scan updating...
</h3>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
`;

exports[`CreateScanDialog Component should render a connected component with default props: connected 1`] = `<Connect(CreateScanDialog) />`;

exports[`CreateScanDialog Component should render a non-connected component: non-connected 1`] = `
Expand Down
11 changes: 11 additions & 0 deletions src/components/createScanDialog/__tests__/createScanDialog.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,17 @@ describe('CreateScanDialog Component', () => {
expect(component.render()).toMatchSnapshot('empty');
});

it('should render a component, pending', () => {
const props = {
pending: true,
show: true,
sources: [{ name: 'test name' }]
};

const component = mount(<CreateScanDialog {...props} />);
expect(component.render()).toMatchSnapshot('pending');
});

it('should handle multiple error responses', () => {
const props = {
show: true,
Expand Down
21 changes: 15 additions & 6 deletions src/components/createScanDialog/createScanDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Alert, AlertVariant, Button, ButtonVariant, Title } from '@patternfly/react-core';
import { FieldLevelHelp, Form, Spinner } from 'patternfly-react';
import {
Alert,
AlertVariant,
Button,
ButtonVariant,
EmptyState,
EmptyStateIcon,
Spinner,
Title
} from '@patternfly/react-core';
import { FieldLevelHelp, Form } from 'patternfly-react';
import { Modal } from '../modal/modal';
import { connect, reduxActions, reduxTypes, store } from '../../redux';
import { FormState } from '../formState/formState';
Expand Down Expand Up @@ -373,10 +382,10 @@ class CreateScanDialog extends React.Component {
>
<Form horizontal onSubmit={handleOnSubmit}>
{pending && (
<React.Fragment>
<Spinner loading size="lg" className="blank-slate-pf-icon" />
<div className="text-center">Scan updating...</div>
</React.Fragment>
<EmptyState className="quipucords-empty-state">
<EmptyStateIcon icon={Spinner} />
<Title headingLevel="h3">Scan updating...</Title>
</EmptyState>
)}
{!pending && this.renderErrorMessage(options)}
{!pending && this.renderNameSources(options)}
Expand Down
50 changes: 42 additions & 8 deletions src/components/mergeReportsDialog/__tests__/__snapshots__/mergeReportsDialog.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,37 @@ exports[`MergeReportsDialog Component should render a component, pending: pendin
>
<div>
<div
class="blank-slate-pf-icon spinner spinner-lg"
/>
<div
class="text-center"
class="pf-c-empty-state quipucords-empty-state"
>
Merging reports...
<div
class="pf-c-empty-state__content"
>
<span
aria-hidden="true"
aria-label="Contents"
aria-valuetext="Loading..."
class="pf-c-spinner pf-m-xl pf-c-empty-state__icon"
role="progressbar"
>
<span
class="pf-c-spinner__clipper"
/>
<span
class="pf-c-spinner__lead-ball"
/>
<span
class="pf-c-spinner__tail-ball"
/>
</span>
<h3
class="pf-c-title pf-m-lg"
data-ouia-component-id="OUIA-Generated-Title-3"
data-ouia-component-type="PF4/Title"
data-ouia-safe="true"
>
Merging reports...
</h3>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -122,10 +147,19 @@ exports[`MergeReportsDialog Component should render a non-connected component, f
<span
class="merge-reports-icon"
>
<span
<svg
aria-hidden="true"
class="pficon pficon-error-circle-o"
/>
fill="#c9190b"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M409.5,319 C406.699326,316.168774 402.882413,314.575614 398.9,314.575614 C394.917587,314.575614 391.100674,316.168774 388.3,319 L319,388.3 C316.168774,391.100674 314.575614,394.917587 314.575614,398.9 C314.575614,402.882413 316.168774,406.699326 319,409.5 L421.5,512 L319,614.5 C316.168774,617.300674 314.575614,621.117587 314.575614,625.1 C314.575614,629.082413 316.168774,632.899326 319,635.7 L388.3,705 C391.100674,707.831226 394.917587,709.424386 398.9,709.424386 C402.882413,709.424386 406.699326,707.831226 409.5,705 L512,602.5 L614.5,705 C620.367618,710.877435 629.877455,710.922082 635.8,705.1 L705.1,635.8 C707.926508,632.970191 709.505822,629.128746 709.48721,625.129169 C709.468267,621.129592 707.852954,617.303145 705,614.5 L602.5,512 L705,409.5 C707.821142,406.720523 709.417879,402.93109 709.436648,398.97079 C709.455417,395.01049 707.89467,391.206092 705.1,388.4 L635.8,319 C629.932382,313.122565 620.422545,313.077918 614.5,318.9 L512,421.5 L409.5,319 Z M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 Z M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0 Z"
/>
</svg>
</span>
<span>
<h3
Expand Down
Loading