mirror of
https://github.com/ansible/awx.git
synced 2026-01-13 19:10:07 -03:30
Remove alert modal styles
This commit is contained in:
Marliana Lara
parent
34b717d00c
commit
d2f6c367f0
2
awx/ui_next/dist/index.html
vendored
2
awx/ui_next/dist/index.html
vendored
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<div id="app" style="height: 100%"></div>
|
||||
<script src="/bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -204,7 +204,7 @@ class App extends Component {
|
||||
/>
|
||||
<AlertModal
|
||||
isOpen={configError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={this.handleConfigErrorClose}
|
||||
>
|
||||
|
||||
@ -2,116 +2,3 @@
|
||||
#app {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,42 +1,47 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Modal } from '@patternfly/react-core';
|
||||
|
||||
import { Modal, Title } from '@patternfly/react-core';
|
||||
import {
|
||||
ExclamationTriangleIcon,
|
||||
ExclamationCircleIcon,
|
||||
InfoCircleIcon,
|
||||
CheckCircleIcon,
|
||||
ExclamationCircleIcon,
|
||||
ExclamationTriangleIcon,
|
||||
InfoCircleIcon,
|
||||
TimesCircleIcon,
|
||||
} from '@patternfly/react-icons';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const getIcon = variant => {
|
||||
let icon;
|
||||
if (variant === 'warning') {
|
||||
icon = <ExclamationTriangleIcon className="at-c-alertModal__icon" />;
|
||||
} else if (variant === 'danger') {
|
||||
icon = <ExclamationCircleIcon className="at-c-alertModal__icon" />;
|
||||
const Header = styled.div`
|
||||
display: flex;
|
||||
svg {
|
||||
margin-right: 16px;
|
||||
}
|
||||
if (variant === 'info') {
|
||||
icon = <InfoCircleIcon className="at-c-alertModal__icon" />;
|
||||
}
|
||||
if (variant === 'success') {
|
||||
icon = <CheckCircleIcon className="at-c-alertModal__icon" />;
|
||||
}
|
||||
return icon;
|
||||
};
|
||||
`;
|
||||
|
||||
export default ({ isOpen = null, title, variant, children, ...props }) => {
|
||||
const variantIcons = {
|
||||
danger: <ExclamationCircleIcon size="lg" css="color: #c9190b" />,
|
||||
error: <TimesCircleIcon size="lg" css="color: #c9190b" />,
|
||||
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 (
|
||||
<Modal
|
||||
isLarge
|
||||
className={`awx-c-modal${variant &&
|
||||
` at-c-alertModal at-c-alertModal--${variant}`}`}
|
||||
header={customHeader}
|
||||
isFooterLeftAligned
|
||||
isOpen={Boolean(isOpen)}
|
||||
isSmall
|
||||
title={title}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{getIcon(variant)}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
@ -5,7 +5,9 @@ import AlertModal from './AlertModal';
|
||||
|
||||
describe('AlertModal', () => {
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Link, Redirect } from 'react-router-dom';
|
||||
import { bool, instanceOf } from 'prop-types';
|
||||
import { t } from '@lingui/macro';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import {
|
||||
Title,
|
||||
EmptyState as PFEmptyState,
|
||||
EmptyState,
|
||||
EmptyStateIcon,
|
||||
EmptyStateBody,
|
||||
} from '@patternfly/react-core';
|
||||
@ -14,11 +13,6 @@ import { ExclamationTriangleIcon } from '@patternfly/react-icons';
|
||||
import { RootAPI } from '@api';
|
||||
import ErrorDetail from '@components/ErrorDetail';
|
||||
|
||||
const EmptyState = styled(PFEmptyState)`
|
||||
width: var(--pf-c-empty-state--m-lg--MaxWidth);
|
||||
margin: 0 auto;
|
||||
`;
|
||||
|
||||
async function logout() {
|
||||
await RootAPI.logout();
|
||||
window.location.replace('/#/login');
|
||||
|
||||
@ -3,7 +3,6 @@ import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { Button } from '@patternfly/react-core';
|
||||
import AlertModal from '@components/AlertModal';
|
||||
import { CardActionsRow } from '@components/Card';
|
||||
|
||||
function DeleteButton({
|
||||
onConfirm,
|
||||
@ -29,26 +28,28 @@ function DeleteButton({
|
||||
title={modalTitle}
|
||||
variant="danger"
|
||||
onClose={() => setIsOpen(false)}
|
||||
>
|
||||
{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>
|
||||
actions={[
|
||||
<Button
|
||||
key="delete"
|
||||
variant="danger"
|
||||
aria-label={i18n._(t`Delete`)}
|
||||
onClick={onConfirm}
|
||||
>
|
||||
{i18n._(t`Delete`)}
|
||||
</Button>
|
||||
</CardActionsRow>
|
||||
</Button>,
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -128,7 +128,7 @@ class LaunchButton extends React.Component {
|
||||
{launchError && (
|
||||
<AlertModal
|
||||
isOpen={launchError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={this.handleLaunchErrorClose}
|
||||
>
|
||||
|
||||
@ -250,7 +250,7 @@ class NotificationList extends Component {
|
||||
)}
|
||||
/>
|
||||
<AlertModal
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
isOpen={toggleError && !toggleLoading}
|
||||
onClose={this.handleNotificationErrorClose}
|
||||
|
||||
@ -137,6 +137,7 @@ class ToolbarDeleteButton extends React.Component {
|
||||
render() {
|
||||
const { itemsToDelete, pluralizedItemName, i18n } = this.props;
|
||||
const { isModalOpen } = this.state;
|
||||
const modalTitle = i18n._(t`Delete ${pluralizedItemName}?`);
|
||||
|
||||
const isDisabled =
|
||||
itemsToDelete.length === 0 || itemsToDelete.some(cannotDelete);
|
||||
@ -161,7 +162,7 @@ class ToolbarDeleteButton extends React.Component {
|
||||
{isModalOpen && (
|
||||
<AlertModal
|
||||
variant="danger"
|
||||
title={pluralizedItemName}
|
||||
title={modalTitle}
|
||||
isOpen={isModalOpen}
|
||||
onClose={this.handleCancelDelete}
|
||||
actions={[
|
||||
@ -183,15 +184,15 @@ class ToolbarDeleteButton extends React.Component {
|
||||
</Button>,
|
||||
]}
|
||||
>
|
||||
{i18n._(t`Are you sure you want to delete:`)}
|
||||
<br />
|
||||
<div css="margin-bottom: 16px;">
|
||||
{i18n._(t`This action will delete the following:`)}
|
||||
</div>
|
||||
{itemsToDelete.map(item => (
|
||||
<span key={item.id}>
|
||||
<strong>{item.name || item.username}</strong>
|
||||
<br />
|
||||
</span>
|
||||
))}
|
||||
<br />
|
||||
</AlertModal>
|
||||
)}
|
||||
</Fragment>
|
||||
|
||||
@ -232,7 +232,7 @@ class ResourceAccessList extends React.Component {
|
||||
)}
|
||||
<AlertModal
|
||||
isOpen={hasDeletionError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={this.handleDeleteErrorClose}
|
||||
>
|
||||
|
||||
@ -73,7 +73,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
aria-describedby="pf-modal-0"
|
||||
aria-label="Remove {0} Access"
|
||||
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"
|
||||
>
|
||||
<button
|
||||
@ -96,13 +96,34 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<h1
|
||||
class="pf-c-title pf-m-2xl"
|
||||
<div
|
||||
class="pf-c-title"
|
||||
>
|
||||
|
||||
Remove {0} Access
|
||||
|
||||
</h1>
|
||||
<div
|
||||
class="AlertModal__Header-sc-9waqvl-0 dYqVFx"
|
||||
>
|
||||
<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
|
||||
class="pf-c-modal-box__body"
|
||||
id="pf-modal-0"
|
||||
@ -111,24 +132,9 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
<br />
|
||||
<br />
|
||||
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
|
||||
class="pf-c-modal-box__footer"
|
||||
class="pf-c-modal-box__footer pf-m-align-left"
|
||||
>
|
||||
<button
|
||||
aria-label="Confirm delete"
|
||||
@ -151,12 +157,24 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
</body>
|
||||
}
|
||||
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}
|
||||
isFooterLeftAligned={false}
|
||||
isLarge={true}
|
||||
isFooterLeftAligned={true}
|
||||
isLarge={false}
|
||||
isOpen={true}
|
||||
isSmall={false}
|
||||
isSmall={true}
|
||||
onClose={[Function]}
|
||||
showClose={true}
|
||||
title="Remove {0} Access"
|
||||
@ -174,7 +192,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
aria-describedby="pf-modal-0"
|
||||
aria-label="Remove {0} Access"
|
||||
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"
|
||||
>
|
||||
<button
|
||||
@ -197,13 +215,34 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<h1
|
||||
class="pf-c-title pf-m-2xl"
|
||||
<div
|
||||
class="pf-c-title"
|
||||
>
|
||||
|
||||
Remove {0} Access
|
||||
|
||||
</h1>
|
||||
<div
|
||||
class="AlertModal__Header-sc-9waqvl-0 dYqVFx"
|
||||
>
|
||||
<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
|
||||
class="pf-c-modal-box__body"
|
||||
id="pf-modal-0"
|
||||
@ -212,24 +251,9 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
<br />
|
||||
<br />
|
||||
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
|
||||
class="pf-c-modal-box__footer"
|
||||
class="pf-c-modal-box__footer pf-m-align-left"
|
||||
>
|
||||
<button
|
||||
aria-label="Confirm delete"
|
||||
@ -270,13 +294,25 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
]
|
||||
}
|
||||
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}
|
||||
id="pf-modal-0"
|
||||
isFooterLeftAligned={false}
|
||||
isLarge={true}
|
||||
isFooterLeftAligned={true}
|
||||
isLarge={false}
|
||||
isOpen={true}
|
||||
isSmall={false}
|
||||
isSmall={true}
|
||||
onClose={[Function]}
|
||||
showClose={true}
|
||||
title="Remove {0} Access"
|
||||
@ -301,10 +337,10 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
className="pf-l-bullseye"
|
||||
>
|
||||
<ModalBox
|
||||
className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
|
||||
className=""
|
||||
id="pf-modal-0"
|
||||
isLarge={true}
|
||||
isSmall={false}
|
||||
isLarge={false}
|
||||
isSmall={true}
|
||||
style={Object {}}
|
||||
title="Remove {0} Access"
|
||||
>
|
||||
@ -312,7 +348,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
aria-describedby="pf-modal-0"
|
||||
aria-label="Remove {0} Access"
|
||||
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"
|
||||
style={Object {}}
|
||||
>
|
||||
@ -395,23 +431,110 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
</ComponentWithOuia>
|
||||
</Component>
|
||||
</ModalBoxCloseButton>
|
||||
<ModalBoxHeader
|
||||
hideTitle={false}
|
||||
<div
|
||||
className="pf-c-title"
|
||||
>
|
||||
<Title
|
||||
className=""
|
||||
headingLevel="h1"
|
||||
size="2xl"
|
||||
>
|
||||
<h1
|
||||
className="pf-c-title pf-m-2xl"
|
||||
<AlertModal__Header>
|
||||
<StyledComponent
|
||||
forwardedComponent={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"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}
|
||||
>
|
||||
|
||||
Remove {0} Access
|
||||
|
||||
</h1>
|
||||
</Title>
|
||||
</ModalBoxHeader>
|
||||
<div
|
||||
className="AlertModal__Header-sc-9waqvl-0 dYqVFx"
|
||||
>
|
||||
<Styled(ExclamationCircleIcon)
|
||||
size="lg"
|
||||
>
|
||||
<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
|
||||
id="pf-modal-0"
|
||||
>
|
||||
@ -423,41 +546,13 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
<br />
|
||||
<br />
|
||||
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>
|
||||
</ModalBoxBody>
|
||||
<ModalBoxFooter
|
||||
isLeftAligned={false}
|
||||
isLeftAligned={true}
|
||||
>
|
||||
<div
|
||||
className="pf-c-modal-box__footer"
|
||||
className="pf-c-modal-box__footer pf-m-align-left"
|
||||
>
|
||||
<Component
|
||||
aria-label="Confirm delete"
|
||||
|
||||
@ -158,7 +158,7 @@ function CredentialDetail({ i18n, credential }) {
|
||||
{deletionError && (
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={() => setDeletionError(null)}
|
||||
>
|
||||
|
||||
@ -135,7 +135,7 @@ function CredentialList({ i18n }) {
|
||||
</Card>
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={clearDeletionError}
|
||||
>
|
||||
|
||||
@ -69,7 +69,7 @@ function HostDetail({ host, i18n, onUpdateHost }) {
|
||||
if (toggleError && !toggleLoading) {
|
||||
return (
|
||||
<AlertModal
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
isOpen={toggleError && !toggleLoading}
|
||||
onClose={() => setToggleError(false)}
|
||||
@ -83,7 +83,7 @@ function HostDetail({ host, i18n, onUpdateHost }) {
|
||||
return (
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={() => setDeletionError(false)}
|
||||
>
|
||||
|
||||
@ -250,7 +250,7 @@ class HostsList extends Component {
|
||||
</Card>
|
||||
{toggleError && !toggleLoading && (
|
||||
<AlertModal
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
isOpen={toggleError && !toggleLoading}
|
||||
onClose={this.handleHostToggleErrorClose}
|
||||
@ -262,7 +262,7 @@ class HostsList extends Component {
|
||||
{deletionError && (
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={this.handleDeleteErrorClose}
|
||||
>
|
||||
|
||||
@ -98,7 +98,7 @@ function InventoryGroupDetail({ i18n, inventoryGroup }) {
|
||||
)}
|
||||
{error && (
|
||||
<AlertModal
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
isOpen={error}
|
||||
onClose={() => setError(false)}
|
||||
|
||||
@ -259,7 +259,7 @@ function InventoryGroupsList({ i18n, location, match }) {
|
||||
{deletionError && (
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={() => setDeletionError(null)}
|
||||
>
|
||||
|
||||
@ -213,7 +213,7 @@ describe('<InventoryGroupsList />', () => {
|
||||
.find('ModalBoxFooter Button[aria-label="Delete"]')
|
||||
.invoke('onClick')();
|
||||
});
|
||||
await waitForElement(wrapper, { title: 'Error!', variant: 'danger' });
|
||||
await waitForElement(wrapper, { title: 'Error!', variant: 'error' });
|
||||
await act(async () => {
|
||||
wrapper.find('ModalBoxCloseButton').invoke('onClose')();
|
||||
});
|
||||
|
||||
@ -198,7 +198,7 @@ function InventoryHostList({ i18n, location, match }) {
|
||||
|
||||
{toggleError && !toggleLoading && (
|
||||
<AlertModal
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
isOpen={toggleError && !toggleLoading}
|
||||
onClose={() => setToggleError(false)}
|
||||
@ -211,7 +211,7 @@ function InventoryHostList({ i18n, location, match }) {
|
||||
{deletionError && (
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={() => setDeletionError(null)}
|
||||
>
|
||||
|
||||
@ -231,7 +231,7 @@ class InventoriesList extends Component {
|
||||
</Card>
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={this.handleDeleteErrorClose}
|
||||
>
|
||||
|
||||
@ -27,7 +27,7 @@ const InventoryGroupsDeleteModal = ({
|
||||
isOpen={isModalOpen}
|
||||
variant="danger"
|
||||
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}
|
||||
actions={[
|
||||
|
||||
@ -275,7 +275,7 @@ function JobDetail({ job, i18n }) {
|
||||
{errorMsg && (
|
||||
<AlertModal
|
||||
isOpen={errorMsg}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
onClose={() => setErrorMsg()}
|
||||
title={i18n._(t`Job Delete Error`)}
|
||||
>
|
||||
|
||||
@ -236,7 +236,7 @@ function JobList({ i18n }) {
|
||||
</Card>
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={clearDeletionError}
|
||||
>
|
||||
|
||||
@ -9,7 +9,6 @@ import {
|
||||
TrashAltIcon,
|
||||
} from '@patternfly/react-icons';
|
||||
import { Badge as PFBadge, Button, Tooltip } from '@patternfly/react-core';
|
||||
import VerticalSeparator from '@components/VerticalSeparator';
|
||||
import DeleteButton from '@components/DeleteButton';
|
||||
import LaunchButton from '@components/LaunchButton';
|
||||
|
||||
@ -123,8 +122,6 @@ const OutputToolbar = ({ i18n, job, onDelete }) => {
|
||||
</Tooltip>
|
||||
</BadgeGroup>
|
||||
|
||||
<VerticalSeparator />
|
||||
|
||||
{job.type !== 'system_job' &&
|
||||
job.summary_fields.user_capabilities?.start && (
|
||||
<Tooltip content={i18n._(t`Relaunch Job`)}>
|
||||
|
||||
@ -132,7 +132,7 @@ function OrganizationDetail({ i18n, organization }) {
|
||||
{deletionError && (
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={() => setDeletionError(null)}
|
||||
>
|
||||
|
||||
@ -169,7 +169,7 @@ function OrganizationsList({ i18n }) {
|
||||
</PageSection>
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={clearDeletionError}
|
||||
>
|
||||
|
||||
@ -177,7 +177,7 @@ function ProjectDetail({ project, i18n }) {
|
||||
{deletionError && (
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={() => setDeletionError(null)}
|
||||
>
|
||||
|
||||
@ -231,7 +231,7 @@ class ProjectsList extends Component {
|
||||
</PageSection>
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={this.handleDeleteErrorClose}
|
||||
>
|
||||
|
||||
@ -54,7 +54,7 @@ class ProjectSyncButton extends React.Component {
|
||||
{syncError && (
|
||||
<AlertModal
|
||||
isOpen={syncError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={this.handleSyncErrorClose}
|
||||
>
|
||||
|
||||
@ -83,7 +83,7 @@ function TeamDetail({ team, i18n }) {
|
||||
{deletionError && (
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={() => setDeletionError(null)}
|
||||
>
|
||||
|
||||
@ -218,7 +218,7 @@ class TeamsList extends Component {
|
||||
</PageSection>
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={this.handleDeleteErrorClose}
|
||||
>
|
||||
|
||||
@ -338,7 +338,7 @@ function JobTemplateDetail({ i18n, template }) {
|
||||
{deletionError && (
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={() => setDeletionError(null)}
|
||||
>
|
||||
|
||||
@ -234,7 +234,7 @@ function TemplateList({ i18n }) {
|
||||
</Card>
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={clearDeletionError}
|
||||
>
|
||||
|
||||
@ -99,7 +99,7 @@ function UserDetail({ user, i18n }) {
|
||||
{deletionError && (
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={() => setDeletionError(null)}
|
||||
>
|
||||
|
||||
@ -222,7 +222,7 @@ class UsersList extends Component {
|
||||
</PageSection>
|
||||
<AlertModal
|
||||
isOpen={deletionError}
|
||||
variant="danger"
|
||||
variant="error"
|
||||
title={i18n._(t`Error!`)}
|
||||
onClose={this.handleDeleteErrorClose}
|
||||
>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user