diff --git a/awx/ui_next/dist/index.html b/awx/ui_next/dist/index.html index 10a4088e01..8afa7581c8 100644 --- a/awx/ui_next/dist/index.html +++ b/awx/ui_next/dist/index.html @@ -1,7 +1,7 @@ -
+
diff --git a/awx/ui_next/src/App.jsx b/awx/ui_next/src/App.jsx index 704515c113..fdc4bb4ec2 100644 --- a/awx/ui_next/src/App.jsx +++ b/awx/ui_next/src/App.jsx @@ -204,7 +204,7 @@ class App extends Component { /> diff --git a/awx/ui_next/src/app.scss b/awx/ui_next/src/app.scss index 2c02873917..6da11a0e7a 100644 --- a/awx/ui_next/src/app.scss +++ b/awx/ui_next/src/app.scss @@ -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); - } -} diff --git a/awx/ui_next/src/components/AlertModal/AlertModal.jsx b/awx/ui_next/src/components/AlertModal/AlertModal.jsx index 1b31f79653..f600d77745 100644 --- a/awx/ui_next/src/components/AlertModal/AlertModal.jsx +++ b/awx/ui_next/src/components/AlertModal/AlertModal.jsx @@ -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 = ; - } else if (variant === 'danger') { - icon = ; +const Header = styled.div` + display: flex; + svg { + margin-right: 16px; } - if (variant === 'info') { - icon = ; - } - if (variant === 'success') { - icon = ; - } - return icon; -}; +`; + +export default ({ isOpen = null, title, variant, children, ...props }) => { + const variantIcons = { + danger: , + error: , + info: , + success: , + warning: , + }; + + const customHeader = ( +
+ {variant ? variantIcons[variant] : null} + {title} +
+ ); -export default ({ variant, children, ...props }) => { - const { isOpen = null } = props; - props.isOpen = Boolean(isOpen); return ( {children} - {getIcon(variant)} ); }; diff --git a/awx/ui_next/src/components/AlertModal/AlertModal.test.jsx b/awx/ui_next/src/components/AlertModal/AlertModal.test.jsx index 4c9389543f..da8b234e5c 100644 --- a/awx/ui_next/src/components/AlertModal/AlertModal.test.jsx +++ b/awx/ui_next/src/components/AlertModal/AlertModal.test.jsx @@ -5,7 +5,9 @@ import AlertModal from './AlertModal'; describe('AlertModal', () => { test('renders the expected content', () => { - const wrapper = mount(); + const wrapper = mount( + Are you sure? + ); expect(wrapper).toHaveLength(1); }); }); diff --git a/awx/ui_next/src/components/ContentError/ContentError.jsx b/awx/ui_next/src/components/ContentError/ContentError.jsx index 548cb77c89..7f766f7e91 100644 --- a/awx/ui_next/src/components/ContentError/ContentError.jsx +++ b/awx/ui_next/src/components/ContentError/ContentError.jsx @@ -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'); diff --git a/awx/ui_next/src/components/DeleteButton/DeleteButton.jsx b/awx/ui_next/src/components/DeleteButton/DeleteButton.jsx index f434ea40d5..184caf9ef9 100644 --- a/awx/ui_next/src/components/DeleteButton/DeleteButton.jsx +++ b/awx/ui_next/src/components/DeleteButton/DeleteButton.jsx @@ -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:`)} -
- {name} - - + actions={[ - + , + , + ]} + > + {i18n._(t`Are you sure you want to delete:`)} +
+ {name} ); diff --git a/awx/ui_next/src/components/LaunchButton/LaunchButton.jsx b/awx/ui_next/src/components/LaunchButton/LaunchButton.jsx index 1793eed8ba..86df83f41e 100644 --- a/awx/ui_next/src/components/LaunchButton/LaunchButton.jsx +++ b/awx/ui_next/src/components/LaunchButton/LaunchButton.jsx @@ -128,7 +128,7 @@ class LaunchButton extends React.Component { {launchError && ( diff --git a/awx/ui_next/src/components/NotificationList/NotificationList.jsx b/awx/ui_next/src/components/NotificationList/NotificationList.jsx index 120d9c86b0..3fc3ae429f 100644 --- a/awx/ui_next/src/components/NotificationList/NotificationList.jsx +++ b/awx/ui_next/src/components/NotificationList/NotificationList.jsx @@ -250,7 +250,7 @@ class NotificationList extends Component { )} /> , ]} > - {i18n._(t`Are you sure you want to delete:`)} -
+
+ {i18n._(t`This action will delete the following:`)} +
{itemsToDelete.map(item => ( {item.name || item.username}
))} -
)} diff --git a/awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.jsx b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.jsx index 1baefcf6a5..e321a14b2b 100644 --- a/awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.jsx +++ b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.jsx @@ -232,7 +232,7 @@ class ResourceAccessList extends React.Component { )} diff --git a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap index 50969673ec..9ea0627668 100644 --- a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap +++ b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap @@ -73,7 +73,7 @@ exports[` 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" > -

- - Remove {0} Access - -

+
+ +

+ Remove {0} Access +

+
+
should render initially 1`] = `

If you only want to remove access for this particular user, please remove them from the team. -
-

- - Remove {0} Access - -

+
+ +

+ Remove {0} Access +

+
+
should render initially 1`] = `

If you only want to remove access for this particular user, please remove them from the team. -
@@ -423,41 +546,13 @@ exports[` should render initially 1`] = `

If you only want to remove access for this particular user, please remove them from the team. - - - - -
setDeletionError(null)} > diff --git a/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx b/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx index 87451cf0e7..ada903e709 100644 --- a/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx +++ b/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx @@ -135,7 +135,7 @@ function CredentialList({ i18n }) { diff --git a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx index f3c70b066f..4682abaf26 100644 --- a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx +++ b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx @@ -69,7 +69,7 @@ function HostDetail({ host, i18n, onUpdateHost }) { if (toggleError && !toggleLoading) { return ( setToggleError(false)} @@ -83,7 +83,7 @@ function HostDetail({ host, i18n, onUpdateHost }) { return ( setDeletionError(false)} > diff --git a/awx/ui_next/src/screens/Host/HostList/HostList.jsx b/awx/ui_next/src/screens/Host/HostList/HostList.jsx index a84af76a4c..5d1dbbdfbd 100644 --- a/awx/ui_next/src/screens/Host/HostList/HostList.jsx +++ b/awx/ui_next/src/screens/Host/HostList/HostList.jsx @@ -250,7 +250,7 @@ class HostsList extends Component { {toggleError && !toggleLoading && ( diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx index 36aac69ed9..eaee439dfe 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx @@ -98,7 +98,7 @@ function InventoryGroupDetail({ i18n, inventoryGroup }) { )} {error && ( setError(false)} diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx index a60c16c973..96f9d64327 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx @@ -259,7 +259,7 @@ function InventoryGroupsList({ i18n, location, match }) { {deletionError && ( setDeletionError(null)} > diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx index d3f9f042c1..b0f4521c30 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx @@ -213,7 +213,7 @@ describe('', () => { .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')(); }); diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx index df4d7783fd..1a4a7e35a7 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx @@ -198,7 +198,7 @@ function InventoryHostList({ i18n, location, match }) { {toggleError && !toggleLoading && ( setToggleError(false)} @@ -211,7 +211,7 @@ function InventoryHostList({ i18n, location, match }) { {deletionError && ( setDeletionError(null)} > diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx index 6ac8aef809..ef7ec6ff1b 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx @@ -231,7 +231,7 @@ class InventoriesList extends Component { diff --git a/awx/ui_next/src/screens/Inventory/shared/InventoryGroupsDeleteModal.jsx b/awx/ui_next/src/screens/Inventory/shared/InventoryGroupsDeleteModal.jsx index ca86d722b5..f17320bb1c 100644 --- a/awx/ui_next/src/screens/Inventory/shared/InventoryGroupsDeleteModal.jsx +++ b/awx/ui_next/src/screens/Inventory/shared/InventoryGroupsDeleteModal.jsx @@ -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={[ diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx index d93ee7d457..68907b4564 100644 --- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx +++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx @@ -275,7 +275,7 @@ function JobDetail({ job, i18n }) { {errorMsg && ( setErrorMsg()} title={i18n._(t`Job Delete Error`)} > diff --git a/awx/ui_next/src/screens/Job/JobList/JobList.jsx b/awx/ui_next/src/screens/Job/JobList/JobList.jsx index 1779febeed..94bb99b73e 100644 --- a/awx/ui_next/src/screens/Job/JobList/JobList.jsx +++ b/awx/ui_next/src/screens/Job/JobList/JobList.jsx @@ -236,7 +236,7 @@ function JobList({ i18n }) { diff --git a/awx/ui_next/src/screens/Job/JobOutput/shared/OutputToolbar.jsx b/awx/ui_next/src/screens/Job/JobOutput/shared/OutputToolbar.jsx index d5b79749ae..81e75938bc 100644 --- a/awx/ui_next/src/screens/Job/JobOutput/shared/OutputToolbar.jsx +++ b/awx/ui_next/src/screens/Job/JobOutput/shared/OutputToolbar.jsx @@ -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 }) => { - - {job.type !== 'system_job' && job.summary_fields.user_capabilities?.start && ( diff --git a/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx b/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx index 28af839efa..ceb4caef04 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx @@ -132,7 +132,7 @@ function OrganizationDetail({ i18n, organization }) { {deletionError && ( setDeletionError(null)} > diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx index 380011d545..65564f5bd0 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx @@ -169,7 +169,7 @@ function OrganizationsList({ i18n }) { diff --git a/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx b/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx index 78f746c8a0..a0ef3c5041 100644 --- a/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx +++ b/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx @@ -177,7 +177,7 @@ function ProjectDetail({ project, i18n }) { {deletionError && ( setDeletionError(null)} > diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx index 95d12e828a..1f65b7da5a 100644 --- a/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx +++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx @@ -231,7 +231,7 @@ class ProjectsList extends Component { diff --git a/awx/ui_next/src/screens/Project/shared/ProjectSyncButton.jsx b/awx/ui_next/src/screens/Project/shared/ProjectSyncButton.jsx index bc3e40d022..a2700169b4 100644 --- a/awx/ui_next/src/screens/Project/shared/ProjectSyncButton.jsx +++ b/awx/ui_next/src/screens/Project/shared/ProjectSyncButton.jsx @@ -54,7 +54,7 @@ class ProjectSyncButton extends React.Component { {syncError && ( diff --git a/awx/ui_next/src/screens/Team/TeamDetail/TeamDetail.jsx b/awx/ui_next/src/screens/Team/TeamDetail/TeamDetail.jsx index 90f994aa6b..9383ca148c 100644 --- a/awx/ui_next/src/screens/Team/TeamDetail/TeamDetail.jsx +++ b/awx/ui_next/src/screens/Team/TeamDetail/TeamDetail.jsx @@ -83,7 +83,7 @@ function TeamDetail({ team, i18n }) { {deletionError && ( setDeletionError(null)} > diff --git a/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx b/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx index 38afbc0213..91de161404 100644 --- a/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx +++ b/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx @@ -218,7 +218,7 @@ class TeamsList extends Component { diff --git a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx index 2c63c6537e..999af636e2 100644 --- a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx +++ b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx @@ -338,7 +338,7 @@ function JobTemplateDetail({ i18n, template }) { {deletionError && ( setDeletionError(null)} > diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx index cc688886b0..2b2239d0fd 100644 --- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx +++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx @@ -234,7 +234,7 @@ function TemplateList({ i18n }) { diff --git a/awx/ui_next/src/screens/User/UserDetail/UserDetail.jsx b/awx/ui_next/src/screens/User/UserDetail/UserDetail.jsx index 72c4bdab6a..8170ab33b0 100644 --- a/awx/ui_next/src/screens/User/UserDetail/UserDetail.jsx +++ b/awx/ui_next/src/screens/User/UserDetail/UserDetail.jsx @@ -99,7 +99,7 @@ function UserDetail({ user, i18n }) { {deletionError && ( setDeletionError(null)} > diff --git a/awx/ui_next/src/screens/User/UserList/UserList.jsx b/awx/ui_next/src/screens/User/UserList/UserList.jsx index 1cfd3b4a69..de8801669c 100644 --- a/awx/ui_next/src/screens/User/UserList/UserList.jsx +++ b/awx/ui_next/src/screens/User/UserList/UserList.jsx @@ -222,7 +222,7 @@ class UsersList extends Component {