External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-02 01:08:48 -03:30
Code Issues Packages Projects Releases Wiki Activity

Remove alert modal styles

Browse Source
This commit is contained in:
Marliana Lara
2020-02-17 15:33:11 -05:00
parent 34b717d00c
commit d2f6c367f0
36 changed files with 286 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui_next/dist/index.html vendored
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>
<div id="app"></div> <div id="app" style="height: 100%"></div>
<script src="/bundle.js"></script> <script src="/bundle.js"></script>
</body> </body>
</html> </html>

2
awx/ui_next/src/App.jsx
View File

@@ -204,7 +204,7 @@ class App extends Component {
/> />
<AlertModal <AlertModal
isOpen={configError} isOpen={configError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={this.handleConfigErrorClose} onClose={this.handleConfigErrorClose}
> >

113
awx/ui_next/src/app.scss
View File

@@ -2,116 +2,3 @@
#app { #app {
height: 100%; height: 100%;
} }
//
// data list overrides
//
.pf-c-data-list {
--pf-global--target-size--MinHeight: 32px;
--pf-global--target-size--MinWidth: 32px;
--pf-global--FontSize--md: 14px;
.pf-c-badge:not(:last-child),
.pf-c-switch:not(:last-child) {
margin-right: 18px;
}
}
.pf-c-data-list__item-row {
--pf-c-data-list__item-row--PaddingRight: 20px;
--pf-c-data-list__item-row--PaddingLeft: 20px;
}
.pf-c-data-list__item-content {
--pf-c-data-list__item-content--PaddingBottom: 16px;
min-height: 59px;
align-items: center;
}
.pf-c-data-list__item-control {
--pf-c-data-list__item-control--PaddingTop: 16px;
--pf-c-data-list__item-control--MarginRight: 8px;
--pf-c-data-list__item-control--PaddingBottom: 16px;
}
.pf-c-data-list__item {
--pf-c-data-list__item--PaddingLeft: 20px;
--pf-c-data-list__item--PaddingRight: 20px;
}
.pf-c-data-list__cell {
--pf-c-data-list__cell--PaddingTop: 16px;
--pf-c-data-list__cell-cell--PaddingTop: 16px;
&.pf-c-data-list__cell--divider {
--pf-c-data-list__cell-cell--MarginRight: 0;
--pf-c-data-list__cell--PaddingTop: 12px;
flex-grow: 0;
}
}
//
// AlertModal styles
//
.at-c-alertModal.pf-c-modal-box {
border: 0;
border-left: 56px solid black;
.at-c-alertModal__icon {
position: absolute;
font-size: 23px;
top: 28px;
left: -39px;
}
}
.at-c-alertModal--warning.pf-c-modal-box {
border-color: var(--pf-global--warning-color--100);
.pf-c-title {
color: var(--pf-global--warning-color--200);
}
.at-c-alertModal__icon {
color: var(--pf-global--warning-color--200);
}
}
.at-c-alertModal--danger.pf-c-modal-box {
border-color: var(--pf-global--danger-color--100);
.pf-c-title {
color: var(--pf-global--danger-color--200);
}
.at-c-alertModal__icon {
color: white;
}
}
.at-c-alertModal--info.pf-c-modal-box {
border-color: var(--pf-global--info-color--100);
.pf-c-title {
color: var(--pf-global--info-color--200);
}
.at-c-alertModal__icon {
color: var(--pf-global--info-color--200);
}
}
.at-c-alertModal--success.pf-c-modal-box {
border-color: var(--pf-global--success-color--100);
.pf-c-title {
color: var(--pf-global--success-color--200);
}
.at-c-alertModal__icon {
color: var(--pf-global--success-color--200);
}
}

59
awx/ui_next/src/components/AlertModal/AlertModal.jsx
View File

@@ -1,42 +1,47 @@
import React from 'react'; import React from 'react';
import { Modal, Title } from '@patternfly/react-core';
import { Modal } from '@patternfly/react-core';
import { import {
ExclamationTriangleIcon,
ExclamationCircleIcon,
InfoCircleIcon,
CheckCircleIcon, CheckCircleIcon,
ExclamationCircleIcon,
ExclamationTriangleIcon,
InfoCircleIcon,
TimesCircleIcon,
} from '@patternfly/react-icons'; } from '@patternfly/react-icons';
import styled from 'styled-components';
const getIcon = variant => { const Header = styled.div`
let icon; display: flex;
if (variant === 'warning') { svg {
icon = <ExclamationTriangleIcon className="at-c-alertModal__icon" />; margin-right: 16px;
} else if (variant === 'danger') {
icon = <ExclamationCircleIcon className="at-c-alertModal__icon" />;
} }
if (variant === 'info') { `;
icon = <InfoCircleIcon className="at-c-alertModal__icon" />;
} export default ({ isOpen = null, title, variant, children, ...props }) => {
if (variant === 'success') { const variantIcons = {
icon = <CheckCircleIcon className="at-c-alertModal__icon" />; danger: <ExclamationCircleIcon size="lg" css="color: #c9190b" />,
} error: <TimesCircleIcon size="lg" css="color: #c9190b" />,
return icon; info: <InfoCircleIcon size="lg" css="color: #73bcf7" />,
}; success: <CheckCircleIcon size="lg" css="color: #92d400" />,
warning: <ExclamationTriangleIcon size="lg" css="color: #f0ab00" />,
};
const customHeader = (
<Header>
{variant ? variantIcons[variant] : null}
<Title size="2xl">{title}</Title>
</Header>
);
export default ({ variant, children, ...props }) => {
const { isOpen = null } = props;
props.isOpen = Boolean(isOpen);
return ( return (
<Modal <Modal
isLarge header={customHeader}
className={`awx-c-modal${variant && isFooterLeftAligned
` at-c-alertModal at-c-alertModal--${variant}`}`} isOpen={Boolean(isOpen)}
isSmall
title={title}
{...props} {...props}
> >
{children} {children}
{getIcon(variant)}
</Modal> </Modal>
); );
}; };

4
awx/ui_next/src/components/AlertModal/AlertModal.test.jsx
View File

@@ -5,7 +5,9 @@ import AlertModal from './AlertModal';
describe('AlertModal', () => { describe('AlertModal', () => {
test('renders the expected content', () => { test('renders the expected content', () => {
const wrapper = mount(<AlertModal title="Danger!" />); const wrapper = mount(
<AlertModal title="Danger!">Are you sure?</AlertModal>
);
expect(wrapper).toHaveLength(1); expect(wrapper).toHaveLength(1);
}); });
}); });

8
awx/ui_next/src/components/ContentError/ContentError.jsx
View File

@@ -1,12 +1,11 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import styled from 'styled-components';
import { Link, Redirect } from 'react-router-dom'; import { Link, Redirect } from 'react-router-dom';
import { bool, instanceOf } from 'prop-types'; import { bool, instanceOf } from 'prop-types';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { import {
Title, Title,
EmptyState as PFEmptyState, EmptyState,
EmptyStateIcon, EmptyStateIcon,
EmptyStateBody, EmptyStateBody,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
@@ -14,11 +13,6 @@ import { ExclamationTriangleIcon } from '@patternfly/react-icons';
import { RootAPI } from '@api'; import { RootAPI } from '@api';
import ErrorDetail from '@components/ErrorDetail'; import ErrorDetail from '@components/ErrorDetail';
const EmptyState = styled(PFEmptyState)`
width: var(--pf-c-empty-state--m-lg--MaxWidth);
margin: 0 auto;
`;
async function logout() { async function logout() {
await RootAPI.logout(); await RootAPI.logout();
window.location.replace('/#/login'); window.location.replace('/#/login');

31
awx/ui_next/src/components/DeleteButton/DeleteButton.jsx
View File

@@ -3,7 +3,6 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Button } from '@patternfly/react-core'; import { Button } from '@patternfly/react-core';
import AlertModal from '@components/AlertModal'; import AlertModal from '@components/AlertModal';
import { CardActionsRow } from '@components/Card';
function DeleteButton({ function DeleteButton({
onConfirm, onConfirm,
@@ -29,26 +28,28 @@ function DeleteButton({
title={modalTitle} title={modalTitle}
variant="danger" variant="danger"
onClose={() => setIsOpen(false)} onClose={() => setIsOpen(false)}
> actions={[
{i18n._(t`Are you sure you want to delete:`)}
<br />
<strong>{name}</strong>
<CardActionsRow>
<Button
variant="secondary"
aria-label={i18n._(t`Cancel`)}
onClick={() => setIsOpen(false)}
>
{i18n._(t`Cancel`)}
</Button>
<Button <Button
key="delete"
variant="danger" variant="danger"
aria-label={i18n._(t`Delete`)} aria-label={i18n._(t`Delete`)}
onClick={onConfirm} onClick={onConfirm}
> >
{i18n._(t`Delete`)} {i18n._(t`Delete`)}
</Button> </Button>,
</CardActionsRow> <Button
key="cancel"
variant="secondary"
aria-label={i18n._(t`Cancel`)}
onClick={() => setIsOpen(false)}
>
{i18n._(t`Cancel`)}
</Button>,
]}
>
{i18n._(t`Are you sure you want to delete:`)}
<br />
<strong>{name}</strong>
</AlertModal> </AlertModal>
</> </>
); );

2
awx/ui_next/src/components/LaunchButton/LaunchButton.jsx
View File

@@ -128,7 +128,7 @@ class LaunchButton extends React.Component {
{launchError && ( {launchError && (
<AlertModal <AlertModal
isOpen={launchError} isOpen={launchError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={this.handleLaunchErrorClose} onClose={this.handleLaunchErrorClose}
> >

2
awx/ui_next/src/components/NotificationList/NotificationList.jsx
View File

@@ -250,7 +250,7 @@ class NotificationList extends Component {
)} )}
/> />
<AlertModal <AlertModal
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
isOpen={toggleError && !toggleLoading} isOpen={toggleError && !toggleLoading}
onClose={this.handleNotificationErrorClose} onClose={this.handleNotificationErrorClose}

9
awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
View File

@@ -137,6 +137,7 @@ class ToolbarDeleteButton extends React.Component {
render() { render() {
const { itemsToDelete, pluralizedItemName, i18n } = this.props; const { itemsToDelete, pluralizedItemName, i18n } = this.props;
const { isModalOpen } = this.state; const { isModalOpen } = this.state;
const modalTitle = i18n._(t`Delete ${pluralizedItemName}?`);
const isDisabled = const isDisabled =
itemsToDelete.length === 0 || itemsToDelete.some(cannotDelete); itemsToDelete.length === 0 || itemsToDelete.some(cannotDelete);
@@ -161,7 +162,7 @@ class ToolbarDeleteButton extends React.Component {
{isModalOpen && ( {isModalOpen && (
<AlertModal <AlertModal
variant="danger" variant="danger"
title={pluralizedItemName} title={modalTitle}
isOpen={isModalOpen} isOpen={isModalOpen}
onClose={this.handleCancelDelete} onClose={this.handleCancelDelete}
actions={[ actions={[
@@ -183,15 +184,15 @@ class ToolbarDeleteButton extends React.Component {
</Button>, </Button>,
]} ]}
> >
{i18n._(t`Are you sure you want to delete:`)} <div css="margin-bottom: 16px;">
<br /> {i18n._(t`This action will delete the following:`)}
</div>
{itemsToDelete.map(item => ( {itemsToDelete.map(item => (
<span key={item.id}> <span key={item.id}>
<strong>{item.name || item.username}</strong> <strong>{item.name || item.username}</strong>
<br /> <br />
</span> </span>
))} ))}
<br />
</AlertModal> </AlertModal>
)} )}
</Fragment> </Fragment>

2
awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.jsx
View File

@@ -232,7 +232,7 @@ class ResourceAccessList extends React.Component {
)} )}
<AlertModal <AlertModal
isOpen={hasDeletionError} isOpen={hasDeletionError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={this.handleDeleteErrorClose} onClose={this.handleDeleteErrorClose}
> >

301
awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
View File

@@ -73,7 +73,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
aria-describedby="pf-modal-0" aria-describedby="pf-modal-0"
aria-label="Remove {0} Access" aria-label="Remove {0} Access"
aria-modal="true" aria-modal="true"
class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg" class="pf-c-modal-box pf-m-sm"
role="dialog" role="dialog"
> >
<button <button
@@ -96,13 +96,34 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
/> />
</svg> </svg>
</button> </button>
<h1 <div
class="pf-c-title pf-m-2xl" class="pf-c-title"
> >
<div
Remove {0} Access class="AlertModal__Header-sc-9waqvl-0 dYqVFx"
>
</h1> <svg
aria-hidden="true"
class="sc-bdVaJa bkDjEn"
fill="currentColor"
height="2em"
role="img"
style="vertical-align: -0.25em;"
viewBox="0 0 512 512"
width="2em"
>
<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"
transform=""
/>
</svg>
<h1
class="pf-c-title pf-m-2xl"
>
Remove {0} Access
</h1>
</div>
</div>
<div <div
class="pf-c-modal-box__body" class="pf-c-modal-box__body"
id="pf-modal-0" id="pf-modal-0"
@@ -111,24 +132,9 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
<br /> <br />
<br /> <br />
If you only want to remove access for this particular user, please remove them from the team. If you only want to remove access for this particular user, please remove them from the team.
<svg
aria-hidden="true"
class="at-c-alertModal__icon"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -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"
transform=""
/>
</svg>
</div> </div>
<div <div
class="pf-c-modal-box__footer" class="pf-c-modal-box__footer pf-m-align-left"
> >
<button <button
aria-label="Confirm delete" aria-label="Confirm delete"
@@ -151,12 +157,24 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
</body> </body>
} }
ariaDescribedById="" ariaDescribedById=""
className="awx-c-modal at-c-alertModal at-c-alertModal--danger" className=""
header={
<ForwardRef>
<ForwardRef
size="lg"
/>
<Title
size="2xl"
>
Remove {0} Access
</Title>
</ForwardRef>
}
hideTitle={false} hideTitle={false}
isFooterLeftAligned={false} isFooterLeftAligned={true}
isLarge={true} isLarge={false}
isOpen={true} isOpen={true}
isSmall={false} isSmall={true}
onClose={[Function]} onClose={[Function]}
showClose={true} showClose={true}
title="Remove {0} Access" title="Remove {0} Access"
@@ -174,7 +192,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
aria-describedby="pf-modal-0" aria-describedby="pf-modal-0"
aria-label="Remove {0} Access" aria-label="Remove {0} Access"
aria-modal="true" aria-modal="true"
class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg" class="pf-c-modal-box pf-m-sm"
role="dialog" role="dialog"
> >
<button <button
@@ -197,13 +215,34 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
/> />
</svg> </svg>
</button> </button>
<h1 <div
class="pf-c-title pf-m-2xl" class="pf-c-title"
> >
<div
Remove {0} Access class="AlertModal__Header-sc-9waqvl-0 dYqVFx"
>
</h1> <svg
aria-hidden="true"
class="sc-bdVaJa bkDjEn"
fill="currentColor"
height="2em"
role="img"
style="vertical-align: -0.25em;"
viewBox="0 0 512 512"
width="2em"
>
<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"
transform=""
/>
</svg>
<h1
class="pf-c-title pf-m-2xl"
>
Remove {0} Access
</h1>
</div>
</div>
<div <div
class="pf-c-modal-box__body" class="pf-c-modal-box__body"
id="pf-modal-0" id="pf-modal-0"
@@ -212,24 +251,9 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
<br /> <br />
<br /> <br />
If you only want to remove access for this particular user, please remove them from the team. If you only want to remove access for this particular user, please remove them from the team.
<svg
aria-hidden="true"
class="at-c-alertModal__icon"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -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"
transform=""
/>
</svg>
</div> </div>
<div <div
class="pf-c-modal-box__footer" class="pf-c-modal-box__footer pf-m-align-left"
> >
<button <button
aria-label="Confirm delete" aria-label="Confirm delete"
@@ -270,13 +294,25 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
] ]
} }
ariaDescribedById="" ariaDescribedById=""
className="awx-c-modal at-c-alertModal at-c-alertModal--danger" className=""
header={
<ForwardRef>
<ForwardRef
size="lg"
/>
<Title
size="2xl"
>
Remove {0} Access
</Title>
</ForwardRef>
}
hideTitle={false} hideTitle={false}
id="pf-modal-0" id="pf-modal-0"
isFooterLeftAligned={false} isFooterLeftAligned={true}
isLarge={true} isLarge={false}
isOpen={true} isOpen={true}
isSmall={false} isSmall={true}
onClose={[Function]} onClose={[Function]}
showClose={true} showClose={true}
title="Remove {0} Access" title="Remove {0} Access"
@@ -301,10 +337,10 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
className="pf-l-bullseye" className="pf-l-bullseye"
> >
<ModalBox <ModalBox
className="awx-c-modal at-c-alertModal at-c-alertModal--danger" className=""
id="pf-modal-0" id="pf-modal-0"
isLarge={true} isLarge={false}
isSmall={false} isSmall={true}
style={Object {}} style={Object {}}
title="Remove {0} Access" title="Remove {0} Access"
> >
@@ -312,7 +348,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
aria-describedby="pf-modal-0" aria-describedby="pf-modal-0"
aria-label="Remove {0} Access" aria-label="Remove {0} Access"
aria-modal="true" aria-modal="true"
className="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg" className="pf-c-modal-box pf-m-sm"
role="dialog" role="dialog"
style={Object {}} style={Object {}}
> >
@@ -395,23 +431,110 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
</ComponentWithOuia> </ComponentWithOuia>
</Component> </Component>
</ModalBoxCloseButton> </ModalBoxCloseButton>
<ModalBoxHeader <div
hideTitle={false} className="pf-c-title"
> >
<Title <AlertModal__Header>
className="" <StyledComponent
headingLevel="h1" forwardedComponent={
size="2xl" Object {
> "$$typeof": Symbol(react.forward_ref),
<h1 "attrs": Array [],
className="pf-c-title pf-m-2xl" "componentStyle": ComponentStyle {
"componentId": "AlertModal__Header-sc-9waqvl-0",
"isStatic": true,
"lastClassName": "dYqVFx",
"rules": Array [
"display:flex;svg{margin-right:16px;}",
],
},
"displayName": "AlertModal__Header",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "AlertModal__Header-sc-9waqvl-0",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
> >
<div
Remove {0} Access className="AlertModal__Header-sc-9waqvl-0 dYqVFx"
>
</h1> <Styled(ExclamationCircleIcon)
</Title> size="lg"
</ModalBoxHeader> >
<StyledComponent
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bdVaJa",
"isStatic": true,
"lastClassName": "bkDjEn",
"rules": Array [
"color: #c9190b",
],
},
"displayName": "Styled(ExclamationCircleIcon)",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "sc-bdVaJa",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
size="lg"
>
<ExclamationCircleIcon
className="sc-bdVaJa bkDjEn"
color="currentColor"
noVerticalAlign={false}
size="lg"
title={null}
>
<svg
aria-hidden={true}
aria-labelledby={null}
className="sc-bdVaJa bkDjEn"
fill="currentColor"
height="2em"
role="img"
style={
Object {
"verticalAlign": "-0.25em",
}
}
viewBox="0 0 512 512"
width="2em"
>
<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"
transform=""
/>
</svg>
</ExclamationCircleIcon>
</StyledComponent>
</Styled(ExclamationCircleIcon)>
<Title
size="2xl"
>
<h1
className="pf-c-title pf-m-2xl"
>
Remove {0} Access
</h1>
</Title>
</div>
</StyledComponent>
</AlertModal__Header>
</div>
<ModalBoxBody <ModalBoxBody
id="pf-modal-0" id="pf-modal-0"
> >
@@ -423,41 +546,13 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
<br /> <br />
<br /> <br />
If you only want to remove access for this particular user, please remove them from the team. If you only want to remove access for this particular user, please remove them from the team.
<ExclamationCircleIcon
className="at-c-alertModal__icon"
color="currentColor"
noVerticalAlign={false}
size="sm"
title={null}
>
<svg
aria-hidden={true}
aria-labelledby={null}
className="at-c-alertModal__icon"
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"
transform=""
/>
</svg>
</ExclamationCircleIcon>
</div> </div>
</ModalBoxBody> </ModalBoxBody>
<ModalBoxFooter <ModalBoxFooter
isLeftAligned={false} isLeftAligned={true}
> >
<div <div
className="pf-c-modal-box__footer" className="pf-c-modal-box__footer pf-m-align-left"
> >
<Component <Component
aria-label="Confirm delete" aria-label="Confirm delete"

2
awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
View File

@@ -158,7 +158,7 @@ function CredentialDetail({ i18n, credential }) {
{deletionError && ( {deletionError && (
<AlertModal <AlertModal
isOpen={deletionError} isOpen={deletionError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={() => setDeletionError(null)} onClose={() => setDeletionError(null)}
> >

2
awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx
View File

@@ -135,7 +135,7 @@ function CredentialList({ i18n }) {
</Card> </Card>
<AlertModal <AlertModal
isOpen={deletionError} isOpen={deletionError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={clearDeletionError} onClose={clearDeletionError}
> >

4
awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
View File

@@ -69,7 +69,7 @@ function HostDetail({ host, i18n, onUpdateHost }) {
if (toggleError && !toggleLoading) { if (toggleError && !toggleLoading) {
return ( return (
<AlertModal <AlertModal
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
isOpen={toggleError && !toggleLoading} isOpen={toggleError && !toggleLoading}
onClose={() => setToggleError(false)} onClose={() => setToggleError(false)}
@@ -83,7 +83,7 @@ function HostDetail({ host, i18n, onUpdateHost }) {
return ( return (
<AlertModal <AlertModal
isOpen={deletionError} isOpen={deletionError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={() => setDeletionError(false)} onClose={() => setDeletionError(false)}
> >

4
awx/ui_next/src/screens/Host/HostList/HostList.jsx
View File

@@ -250,7 +250,7 @@ class HostsList extends Component {
</Card> </Card>
{toggleError && !toggleLoading && ( {toggleError && !toggleLoading && (
<AlertModal <AlertModal
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
isOpen={toggleError && !toggleLoading} isOpen={toggleError && !toggleLoading}
onClose={this.handleHostToggleErrorClose} onClose={this.handleHostToggleErrorClose}
@@ -262,7 +262,7 @@ class HostsList extends Component {
{deletionError && ( {deletionError && (
<AlertModal <AlertModal
isOpen={deletionError} isOpen={deletionError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={this.handleDeleteErrorClose} onClose={this.handleDeleteErrorClose}
> >

2
awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx
View File

@@ -98,7 +98,7 @@ function InventoryGroupDetail({ i18n, inventoryGroup }) {
)} )}
{error && ( {error && (
<AlertModal <AlertModal
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
isOpen={error} isOpen={error}
onClose={() => setError(false)} onClose={() => setError(false)}

2
awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
View File

@@ -259,7 +259,7 @@ function InventoryGroupsList({ i18n, location, match }) {
{deletionError && ( {deletionError && (
<AlertModal <AlertModal
isOpen={deletionError} isOpen={deletionError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={() => setDeletionError(null)} onClose={() => setDeletionError(null)}
> >

2
awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx
View File

@@ -213,7 +213,7 @@ describe('<InventoryGroupsList />', () => {
.find('ModalBoxFooter Button[aria-label="Delete"]') .find('ModalBoxFooter Button[aria-label="Delete"]')
.invoke('onClick')(); .invoke('onClick')();
}); });
await waitForElement(wrapper, { title: 'Error!', variant: 'danger' }); await waitForElement(wrapper, { title: 'Error!', variant: 'error' });
await act(async () => { await act(async () => {
wrapper.find('ModalBoxCloseButton').invoke('onClose')(); wrapper.find('ModalBoxCloseButton').invoke('onClose')();
}); });

4
awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
View File

@@ -198,7 +198,7 @@ function InventoryHostList({ i18n, location, match }) {
{toggleError && !toggleLoading && ( {toggleError && !toggleLoading && (
<AlertModal <AlertModal
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
isOpen={toggleError && !toggleLoading} isOpen={toggleError && !toggleLoading}
onClose={() => setToggleError(false)} onClose={() => setToggleError(false)}
@@ -211,7 +211,7 @@ function InventoryHostList({ i18n, location, match }) {
{deletionError && ( {deletionError && (
<AlertModal <AlertModal
isOpen={deletionError} isOpen={deletionError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={() => setDeletionError(null)} onClose={() => setDeletionError(null)}
> >

2
awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
View File

@@ -231,7 +231,7 @@ class InventoriesList extends Component {
</Card> </Card>
<AlertModal <AlertModal
isOpen={deletionError} isOpen={deletionError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={this.handleDeleteErrorClose} onClose={this.handleDeleteErrorClose}
> >

2
awx/ui_next/src/screens/Inventory/shared/InventoryGroupsDeleteModal.jsx
View File

@@ -27,7 +27,7 @@ const InventoryGroupsDeleteModal = ({
isOpen={isModalOpen} isOpen={isModalOpen}
variant="danger" variant="danger"
title={ title={
groups.length > 1 ? i18n._(t`Delete Groups`) : i18n._(t`Delete Group`) groups.length > 1 ? i18n._(t`Delete Groups?`) : i18n._(t`Delete Group?`)
} }
onClose={onClose} onClose={onClose}
actions={[ actions={[

2
awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
View File

@@ -275,7 +275,7 @@ function JobDetail({ job, i18n }) {
{errorMsg && ( {errorMsg && (
<AlertModal <AlertModal
isOpen={errorMsg} isOpen={errorMsg}
variant="danger" variant="error"
onClose={() => setErrorMsg()} onClose={() => setErrorMsg()}
title={i18n._(t`Job Delete Error`)} title={i18n._(t`Job Delete Error`)}
> >

2
awx/ui_next/src/screens/Job/JobList/JobList.jsx
View File

@@ -236,7 +236,7 @@ function JobList({ i18n }) {
</Card> </Card>
<AlertModal <AlertModal
isOpen={deletionError} isOpen={deletionError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={clearDeletionError} onClose={clearDeletionError}
> >

3
awx/ui_next/src/screens/Job/JobOutput/shared/OutputToolbar.jsx
View File

@@ -9,7 +9,6 @@ import {
TrashAltIcon, TrashAltIcon,
} from '@patternfly/react-icons'; } from '@patternfly/react-icons';
import { Badge as PFBadge, Button, Tooltip } from '@patternfly/react-core'; import { Badge as PFBadge, Button, Tooltip } from '@patternfly/react-core';
import VerticalSeparator from '@components/VerticalSeparator';
import DeleteButton from '@components/DeleteButton'; import DeleteButton from '@components/DeleteButton';
import LaunchButton from '@components/LaunchButton'; import LaunchButton from '@components/LaunchButton';
@@ -123,8 +122,6 @@ const OutputToolbar = ({ i18n, job, onDelete }) => {
</Tooltip> </Tooltip>
</BadgeGroup> </BadgeGroup>
<VerticalSeparator />
{job.type !== 'system_job' && {job.type !== 'system_job' &&
job.summary_fields.user_capabilities?.start && ( job.summary_fields.user_capabilities?.start && (
<Tooltip content={i18n._(t`Relaunch Job`)}> <Tooltip content={i18n._(t`Relaunch Job`)}>

2
awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx
View File

@@ -132,7 +132,7 @@ function OrganizationDetail({ i18n, organization }) {
{deletionError && ( {deletionError && (
<AlertModal <AlertModal
isOpen={deletionError} isOpen={deletionError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={() => setDeletionError(null)} onClose={() => setDeletionError(null)}
> >

2
awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
View File

@@ -169,7 +169,7 @@ function OrganizationsList({ i18n }) {
</PageSection> </PageSection>
<AlertModal <AlertModal
isOpen={deletionError} isOpen={deletionError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={clearDeletionError} onClose={clearDeletionError}
> >

2
awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx
View File

@@ -177,7 +177,7 @@ function ProjectDetail({ project, i18n }) {
{deletionError && ( {deletionError && (
<AlertModal <AlertModal
isOpen={deletionError} isOpen={deletionError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={() => setDeletionError(null)} onClose={() => setDeletionError(null)}
> >

2
awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx
View File

@@ -231,7 +231,7 @@ class ProjectsList extends Component {
</PageSection> </PageSection>
<AlertModal <AlertModal
isOpen={deletionError} isOpen={deletionError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={this.handleDeleteErrorClose} onClose={this.handleDeleteErrorClose}
> >

2
awx/ui_next/src/screens/Project/shared/ProjectSyncButton.jsx
View File

@@ -54,7 +54,7 @@ class ProjectSyncButton extends React.Component {
{syncError && ( {syncError && (
<AlertModal <AlertModal
isOpen={syncError} isOpen={syncError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={this.handleSyncErrorClose} onClose={this.handleSyncErrorClose}
> >

2
awx/ui_next/src/screens/Team/TeamDetail/TeamDetail.jsx
View File

@@ -83,7 +83,7 @@ function TeamDetail({ team, i18n }) {
{deletionError && ( {deletionError && (
<AlertModal <AlertModal
isOpen={deletionError} isOpen={deletionError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={() => setDeletionError(null)} onClose={() => setDeletionError(null)}
> >

2
awx/ui_next/src/screens/Team/TeamList/TeamList.jsx
View File

@@ -218,7 +218,7 @@ class TeamsList extends Component {
</PageSection> </PageSection>
<AlertModal <AlertModal
isOpen={deletionError} isOpen={deletionError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={this.handleDeleteErrorClose} onClose={this.handleDeleteErrorClose}
> >

2
awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
View File

@@ -338,7 +338,7 @@ function JobTemplateDetail({ i18n, template }) {
{deletionError && ( {deletionError && (
<AlertModal <AlertModal
isOpen={deletionError} isOpen={deletionError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={() => setDeletionError(null)} onClose={() => setDeletionError(null)}
> >

2
awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
View File

@@ -234,7 +234,7 @@ function TemplateList({ i18n }) {
</Card> </Card>
<AlertModal <AlertModal
isOpen={deletionError} isOpen={deletionError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={clearDeletionError} onClose={clearDeletionError}
> >

2
awx/ui_next/src/screens/User/UserDetail/UserDetail.jsx
View File

@@ -99,7 +99,7 @@ function UserDetail({ user, i18n }) {
{deletionError && ( {deletionError && (
<AlertModal <AlertModal
isOpen={deletionError} isOpen={deletionError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={() => setDeletionError(null)} onClose={() => setDeletionError(null)}
> >

2
awx/ui_next/src/screens/User/UserList/UserList.jsx
View File

@@ -222,7 +222,7 @@ class UsersList extends Component {
</PageSection> </PageSection>
<AlertModal <AlertModal
isOpen={deletionError} isOpen={deletionError}
variant="danger" variant="error"
title={i18n._(t`Error!`)} title={i18n._(t`Error!`)}
onClose={this.handleDeleteErrorClose} onClose={this.handleDeleteErrorClose}
> >