External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-09-14 16:00:11 -02:30
Code Issues Packages Projects Releases Wiki Activity

Remove alert modal styles

Browse Source
This commit is contained in:
Marliana Lara
2020-02-20 15:19:08 -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
awx/ui_next/dist/index.html
Vendored
+1 -1
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>
awx/ui_next/src/App.jsx
+1 -1
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}
> >
awx/ui_next/src/app.scss
-113
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);
}
}
awx/ui_next/src/components/AlertModal/AlertModal.jsx
+32 -27
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>
); );
}; };
awx/ui_next/src/components/AlertModal/AlertModal.test.jsx
+3 -1
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);
}); });
}); });
awx/ui_next/src/components/ContentError/ContentError.jsx
+1 -7
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');
awx/ui_next/src/components/DeleteButton/DeleteButton.jsx
+16 -15
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>
</> </>
); );
awx/ui_next/src/components/LaunchButton/LaunchButton.jsx
+1 -1
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}
> >
awx/ui_next/src/components/NotificationList/NotificationList.jsx
+1 -1
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}
awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
+5 -4
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>
awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.jsx
+1 -1
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}
> >
awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
+198 -103
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"
awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
+1 -1
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)}
> >
awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx
+1 -1
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}
> >
awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
+2 -2
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)}
> >
awx/ui_next/src/screens/Host/HostList/HostList.jsx
+2 -2
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}
> >
awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx
+1 -1
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)}
awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
+1 -1
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)}
> >
awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx
+1 -1
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')();
}); });
awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
+2 -2
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)}
> >
awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
+1 -1
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}
> >
awx/ui_next/src/screens/Inventory/shared/InventoryGroupsDeleteModal.jsx
+1 -1
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={[
awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
+1 -1
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`)}
> >
awx/ui_next/src/screens/Job/JobList/JobList.jsx
+1 -1
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}
> >
awx/ui_next/src/screens/Job/JobOutput/shared/OutputToolbar.jsx
-3
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`)}>
awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx
+1 -1
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)}
> >
awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
+1 -1
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}
> >
awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx
+1 -1
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)}
> >
awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx
+1 -1
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}
> >
awx/ui_next/src/screens/Project/shared/ProjectSyncButton.jsx
+1 -1
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}
> >
awx/ui_next/src/screens/Team/TeamDetail/TeamDetail.jsx
+1 -1
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)}
> >
awx/ui_next/src/screens/Team/TeamList/TeamList.jsx
+1 -1
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}
> >
awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
+1 -1
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)}
> >
awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
+1 -1
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}
> >
awx/ui_next/src/screens/User/UserDetail/UserDetail.jsx
+1 -1
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)}
> >
awx/ui_next/src/screens/User/UserList/UserList.jsx
+1 -1
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}
> >