From 5d2912605f1c68e91f5241dc3ef7d2515bf25f97 Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Tue, 11 Feb 2020 11:53:22 -0500 Subject: [PATCH 1/2] Remove PF style overrides from card, breadcrumb, sidenav, tooltip, and modal components --- awx/ui_next/src/app.scss | 139 ------------------ .../src/components/AlertModal/AlertModal.jsx | 1 + .../components/Breadcrumbs/Breadcrumbs.jsx | 8 +- .../components/ContentEmpty/ContentEmpty.jsx | 2 +- .../components/ContentError/ContentError.jsx | 2 +- .../ContentLoading/ContentLoading.jsx | 2 +- awx/ui_next/src/components/Lookup/Lookup.jsx | 6 +- .../PaginatedDataListItem.jsx | 2 +- .../DeleteRoleConfirmationModal.test.jsx.snap | 12 +- .../src/components/Sparkline/StatusIcon.jsx | 2 +- .../src/screens/Credential/Credential.jsx | 4 +- awx/ui_next/src/screens/Host/Host.jsx | 4 +- .../src/screens/Inventory/Inventory.jsx | 4 +- .../src/screens/Inventory/SmartInventory.jsx | 4 +- .../Inventory/shared/InventoryGroupForm.jsx | 2 +- awx/ui_next/src/screens/Job/Job.jsx | 2 +- .../src/screens/Job/JobDetail/JobDetail.jsx | 7 +- .../screens/Job/JobOutput/HostEventModal.jsx | 7 +- .../src/screens/Job/JobTypeRedirect.jsx | 2 +- awx/ui_next/src/screens/NotFound.jsx | 2 +- .../src/screens/Organization/Organization.jsx | 4 +- awx/ui_next/src/screens/Project/Project.jsx | 4 +- awx/ui_next/src/screens/Team/Team.jsx | 4 +- awx/ui_next/src/screens/Template/Template.jsx | 4 +- .../screens/Template/WorkflowJobTemplate.jsx | 4 +- awx/ui_next/src/screens/User/User.jsx | 4 +- 26 files changed, 45 insertions(+), 193 deletions(-) diff --git a/awx/ui_next/src/app.scss b/awx/ui_next/src/app.scss index f0ba17e429..2c02873917 100644 --- a/awx/ui_next/src/app.scss +++ b/awx/ui_next/src/app.scss @@ -3,41 +3,6 @@ height: 100%; } -// -// sidebar overrides -// - -.pf-c-page__sidebar { - --pf-c-page__sidebar--md--Width: 255px; - - .pf-c-nav { - overflow-y: auto; - - .pf-c-nav__section { - --pf-c-nav__section--MarginTop: 8px; - } - - .pf-c-nav__section + .pf-c-nav__section { - --pf-c-nav__section--MarginTop: 8px; - } - - .pf-c-nav__simple-list .pf-c-nav__link { - --pf-c-nav__simple-list-link--PaddingBottom: 6px; - --pf-c-nav__simple-list-link--PaddingTop: 6px; - } - - .pf-c-nav__section-title { - --pf-c-nav__section-title--PaddingLeft: 24px; - } - - .pf-c-nav__link { - display: flex; - align-items: center; - padding-right: 64px; - } - } -} - // // data list overrides // @@ -87,102 +52,6 @@ } } -// -// pf modal overrides -// - -.awx-c-modal.pf-c-modal-box { - margin: 0; - padding: 24px; - width: 600px; - - .pf-c-modal-box__body { - overflow: auto; - } - - .pf-c-modal-box__footer > .pf-c-button:not(:last-child) { - margin-right: 20px; - } -} - -.pf-c-modal-box__footer { - --pf-c-modal-box__footer--PaddingTop: 20px; - --pf-c-modal-box__footer--PaddingRight: 20px; - --pf-c-modal-box__footer--PaddingBottom: 20px; - --pf-c-modal-box__footer--PaddingLeft: 20px; - --pf-c-modal-box__footer--MarginTop: 24px; - justify-content: flex-end; -} - -.pf-c-modal-box__header { - --pf-c-modal-box__header--PaddingTop: 10px; - --pf-c-modal-box__header--PaddingRight: 0; - --pf-c-modal-box__header--PaddingBottom: 0; - --pf-c-modal-box__header--PaddingLeft: 20px; -} - -.pf-c-modal-box__body { - --pf-c-modal-box__body--PaddingLeft: 20px; - --pf-c-modal-box__body--PaddingRight: 20px; - --pf-c-modal-box__body--PaddingBottom: 5px; -} - -// -// pf tooltip overrides -// - -.pf-c-tooltip__content { - --pf-c-tooltip__content--PaddingTop: 0.71rem; - --pf-c-tooltip__content--PaddingRight: 0.71rem; - --pf-c-tooltip__content--PaddingBottom: 0.71rem; - --pf-c-tooltip__content--PaddingLeft: 0.71rem; -} -// higher specificity needed to override PF styles added dynamically to page -.pf-c-tooltip .pf-c-tooltip__content { - text-align: left; -} - -// -// pf empty state overrides -// - -.pf-c-empty-state { - align-self: center; -} - -// -// assorted custom component styles -// note that these should be given a consistent prefix -// and bem style, as well as moved into component-based scss files -// - -.awx-c-card { - position: relative; -} - -// -// PF Alert notification component overrides -// - -.pf-c-alert__title { - --pf-c-alert__title--PaddingTop: 20px; - --pf-c-alert__title--PaddingRight: 20px; - --pf-c-alert__title--PaddingBottom: 20px; - --pf-c-alert__title--PaddingLeft: 20px; -} - -.pf-c-alert__description { - --pf-c-alert__description--PaddingRight: 20px; - --pf-c-alert__description--PaddingBottom: 20px; - --pf-c-alert__description--PaddingLeft: 20px; -} - -.pf-c-alert { - position: absolute; - width: 100%; - z-index: 20; -} - // // AlertModal styles // @@ -246,11 +115,3 @@ color: var(--pf-global--success-color--200); } } - -// -// LoginModal overrides -// - -.pf-m-error p.pf-c-form__helper-text { - color: var(--pf-global--danger-color--100); -} diff --git a/awx/ui_next/src/components/AlertModal/AlertModal.jsx b/awx/ui_next/src/components/AlertModal/AlertModal.jsx index 783f08f0a5..1b31f79653 100644 --- a/awx/ui_next/src/components/AlertModal/AlertModal.jsx +++ b/awx/ui_next/src/components/AlertModal/AlertModal.jsx @@ -30,6 +30,7 @@ export default ({ variant, children, ...props }) => { props.isOpen = Boolean(isOpen); return ( { const { light } = PageSectionVariants; diff --git a/awx/ui_next/src/components/ContentEmpty/ContentEmpty.jsx b/awx/ui_next/src/components/ContentEmpty/ContentEmpty.jsx index ebb0d94fd8..f01c8468ec 100644 --- a/awx/ui_next/src/components/ContentEmpty/ContentEmpty.jsx +++ b/awx/ui_next/src/components/ContentEmpty/ContentEmpty.jsx @@ -10,7 +10,7 @@ import { import { CubesIcon } from '@patternfly/react-icons'; const ContentEmpty = ({ i18n, title = '', message = '' }) => ( - + {title || i18n._(t`No items found.`)} {message} diff --git a/awx/ui_next/src/components/ContentError/ContentError.jsx b/awx/ui_next/src/components/ContentError/ContentError.jsx index 30fa451124..548cb77c89 100644 --- a/awx/ui_next/src/components/ContentError/ContentError.jsx +++ b/awx/ui_next/src/components/ContentError/ContentError.jsx @@ -39,7 +39,7 @@ function ContentError({ error, children, isNotFound, i18n }) { {is401 ? ( ) : ( - + {is404 ? i18n._(t`Not Found`) : i18n._(t`Something went wrong...`)} diff --git a/awx/ui_next/src/components/ContentLoading/ContentLoading.jsx b/awx/ui_next/src/components/ContentLoading/ContentLoading.jsx index 90747007da..c737c96d44 100644 --- a/awx/ui_next/src/components/ContentLoading/ContentLoading.jsx +++ b/awx/ui_next/src/components/ContentLoading/ContentLoading.jsx @@ -5,7 +5,7 @@ import { EmptyState, EmptyStateBody } from '@patternfly/react-core'; // TODO: Better loading state - skeleton lines / spinner, etc. const ContentLoading = ({ className, i18n }) => ( - <EmptyState className={className}> + <EmptyState variant="full" className={className}> <EmptyStateBody>{i18n._(t`Loading...`)}</EmptyStateBody> </EmptyState> ); diff --git a/awx/ui_next/src/components/Lookup/Lookup.jsx b/awx/ui_next/src/components/Lookup/Lookup.jsx index 500c4ce986..ed8bf363d8 100644 --- a/awx/ui_next/src/components/Lookup/Lookup.jsx +++ b/awx/ui_next/src/components/Lookup/Lookup.jsx @@ -139,7 +139,7 @@ function Lookup(props) { </ChipHolder> </InputGroup> <Modal - className="awx-c-modal" + isLarge title={i18n._(t`Select ${header || i18n._(t`Items`)}`)} isOpen={isModalOpen} onClose={closeModal} @@ -148,9 +148,7 @@ function Lookup(props) { key="select" variant="primary" onClick={save} - style={ - required && selectedItems.length === 0 ? { display: 'none' } : {} - } + isDisabled={required && selectedItems.length === 0} > {i18n._(t`Select`)} </Button>, diff --git a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataListItem.jsx b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataListItem.jsx index 5b4fa20257..43b3263618 100644 --- a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataListItem.jsx +++ b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataListItem.jsx @@ -27,7 +27,7 @@ export default function PaginatedDataListItem({ item }) { <DataListItemRow> <DataListItemCells dataListCells={[ - <DataListCell key="team-name"> + <DataListCell key="name"> <DetailWrapper> <Link to={{ pathname: item.url }}> <b id={`items-list-item-${item.id}`}>{item.name}</b> 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 0cf60593da..50969673ec 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[`<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" + class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg" role="dialog" > <button @@ -154,7 +154,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = ` className="awx-c-modal at-c-alertModal at-c-alertModal--danger" hideTitle={false} isFooterLeftAligned={false} - isLarge={false} + isLarge={true} isOpen={true} isSmall={false} onClose={[Function]} @@ -174,7 +174,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" + class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg" role="dialog" > <button @@ -274,7 +274,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = ` hideTitle={false} id="pf-modal-0" isFooterLeftAligned={false} - isLarge={false} + isLarge={true} isOpen={true} isSmall={false} onClose={[Function]} @@ -303,7 +303,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = ` <ModalBox className="awx-c-modal at-c-alertModal at-c-alertModal--danger" id="pf-modal-0" - isLarge={false} + isLarge={true} isSmall={false} style={Object {}} title="Remove {0} Access" @@ -312,7 +312,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" + className="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg" role="dialog" style={Object {}} > diff --git a/awx/ui_next/src/components/Sparkline/StatusIcon.jsx b/awx/ui_next/src/components/Sparkline/StatusIcon.jsx index 2c9b7ae16b..d89d5592d4 100644 --- a/awx/ui_next/src/components/Sparkline/StatusIcon.jsx +++ b/awx/ui_next/src/components/Sparkline/StatusIcon.jsx @@ -75,7 +75,7 @@ const SkippedBottom = styled.div` const StatusIcon = ({ status, ...props }) => { return ( - <div className="at-c-statusIcon" {...props}> + <div {...props}> {status === 'running' && <RunningJob />} {(status === 'new' || status === 'pending' || diff --git a/awx/ui_next/src/screens/Credential/Credential.jsx b/awx/ui_next/src/screens/Credential/Credential.jsx index 1c9266f852..705c305e61 100644 --- a/awx/ui_next/src/screens/Credential/Credential.jsx +++ b/awx/ui_next/src/screens/Credential/Credential.jsx @@ -63,7 +63,7 @@ function Credential({ i18n, setBreadcrumb }) { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response && contentError.response.status === 404 && ( <span> @@ -79,7 +79,7 @@ function Credential({ i18n, setBreadcrumb }) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> <Redirect diff --git a/awx/ui_next/src/screens/Host/Host.jsx b/awx/ui_next/src/screens/Host/Host.jsx index 22439da660..0b26a0ad61 100644 --- a/awx/ui_next/src/screens/Host/Host.jsx +++ b/awx/ui_next/src/screens/Host/Host.jsx @@ -117,7 +117,7 @@ function Host({ inventory, i18n, setBreadcrumb }) { if (!hasContentLoading && contentError) { return ( - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response && contentError.response.status === 404 && ( <span> @@ -141,7 +141,7 @@ function Host({ inventory, i18n, setBreadcrumb }) { ); return ( - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> {redirect} diff --git a/awx/ui_next/src/screens/Inventory/Inventory.jsx b/awx/ui_next/src/screens/Inventory/Inventory.jsx index 6e8f55c60b..3eb114a466 100644 --- a/awx/ui_next/src/screens/Inventory/Inventory.jsx +++ b/awx/ui_next/src/screens/Inventory/Inventory.jsx @@ -92,7 +92,7 @@ function Inventory({ i18n, setBreadcrumb }) { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response.status === 404 && ( <span> @@ -108,7 +108,7 @@ function Inventory({ i18n, setBreadcrumb }) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> <Redirect diff --git a/awx/ui_next/src/screens/Inventory/SmartInventory.jsx b/awx/ui_next/src/screens/Inventory/SmartInventory.jsx index 440667d1f0..39560ad4a3 100644 --- a/awx/ui_next/src/screens/Inventory/SmartInventory.jsx +++ b/awx/ui_next/src/screens/Inventory/SmartInventory.jsx @@ -88,7 +88,7 @@ class SmartInventory extends Component { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response.status === 404 && ( <span> @@ -105,7 +105,7 @@ class SmartInventory extends Component { } return ( <PageSection> - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> <Redirect diff --git a/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx b/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx index e1ae21f64d..ccec0375ac 100644 --- a/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx +++ b/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx @@ -26,7 +26,7 @@ function InventoryGroupForm({ }; return ( - <Card className="awx-c-card"> + <Card> <CardBody> <Formik initialValues={initialValues} onSubmit={handleSubmit}> {formik => ( diff --git a/awx/ui_next/src/screens/Job/Job.jsx b/awx/ui_next/src/screens/Job/Job.jsx index b3fe268ce8..7975260e8e 100644 --- a/awx/ui_next/src/screens/Job/Job.jsx +++ b/awx/ui_next/src/screens/Job/Job.jsx @@ -83,7 +83,7 @@ class Job extends Component { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response.status === 404 && ( <span> diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx index 8e906e7319..a23c6a268b 100644 --- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx +++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx @@ -34,10 +34,9 @@ const VariablesInput = styled(_VariablesInput)` const StatusDetailValue = styled.div` align-items: center; - display: inline-flex; - .at-c-statusIcon { - margin-right: 10px; - } + display: inline-grid; + grid-gap: 10px; + grid-template-columns: auto auto; `; const VERBOSITY = { diff --git a/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx b/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx index f563b1ef0c..989270325d 100644 --- a/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx +++ b/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx @@ -26,10 +26,9 @@ const Modal = styled(PFModal)` const HostNameDetailValue = styled.div` align-items: center; - display: inline-flex; - .at-c-statusIcon { - margin-right: 10px; - } + display: inline-grid; + grid-gap: 10px; + grid-template-columns: auto auto; `; const Tabs = styled(PFTabs)` diff --git a/awx/ui_next/src/screens/Job/JobTypeRedirect.jsx b/awx/ui_next/src/screens/Job/JobTypeRedirect.jsx index 9f1cc15e55..1dc45adbe8 100644 --- a/awx/ui_next/src/screens/Job/JobTypeRedirect.jsx +++ b/awx/ui_next/src/screens/Job/JobTypeRedirect.jsx @@ -54,7 +54,7 @@ class JobTypeRedirect extends Component { if (error) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> {error === NOT_FOUND ? ( <ContentError isNotFound> <Link to="/jobs">{i18n._(`View all Jobs`)}</Link> diff --git a/awx/ui_next/src/screens/NotFound.jsx b/awx/ui_next/src/screens/NotFound.jsx index f09a8fdba9..16be2e5b7e 100644 --- a/awx/ui_next/src/screens/NotFound.jsx +++ b/awx/ui_next/src/screens/NotFound.jsx @@ -5,7 +5,7 @@ import ContentError from '@components/ContentError'; function NotFound() { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError isNotFound /> </Card> </PageSection> diff --git a/awx/ui_next/src/screens/Organization/Organization.jsx b/awx/ui_next/src/screens/Organization/Organization.jsx index 8acb673b5b..c469bf0c0a 100644 --- a/awx/ui_next/src/screens/Organization/Organization.jsx +++ b/awx/ui_next/src/screens/Organization/Organization.jsx @@ -147,7 +147,7 @@ class Organization extends Component { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response.status === 404 && ( <span> @@ -165,7 +165,7 @@ class Organization extends Component { return ( <PageSection> - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> <Redirect diff --git a/awx/ui_next/src/screens/Project/Project.jsx b/awx/ui_next/src/screens/Project/Project.jsx index 29ebb17940..a6a2cf16b0 100644 --- a/awx/ui_next/src/screens/Project/Project.jsx +++ b/awx/ui_next/src/screens/Project/Project.jsx @@ -167,7 +167,7 @@ class Project extends Component { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response.status === 404 && ( <span> @@ -183,7 +183,7 @@ class Project extends Component { return ( <PageSection> - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> <Redirect from="/projects/:id" to="/projects/:id/details" exact /> diff --git a/awx/ui_next/src/screens/Team/Team.jsx b/awx/ui_next/src/screens/Team/Team.jsx index 7440bad624..d471a45da3 100644 --- a/awx/ui_next/src/screens/Team/Team.jsx +++ b/awx/ui_next/src/screens/Team/Team.jsx @@ -59,7 +59,7 @@ function Team({ i18n, setBreadcrumb }) { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response.status === 404 && ( <span> @@ -75,7 +75,7 @@ function Team({ i18n, setBreadcrumb }) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> <Redirect from="/teams/:id" to="/teams/:id/details" exact /> diff --git a/awx/ui_next/src/screens/Template/Template.jsx b/awx/ui_next/src/screens/Template/Template.jsx index 8e22494524..660e7beed8 100644 --- a/awx/ui_next/src/screens/Template/Template.jsx +++ b/awx/ui_next/src/screens/Template/Template.jsx @@ -135,7 +135,7 @@ class Template extends Component { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response.status === 404 && ( <span> @@ -150,7 +150,7 @@ class Template extends Component { } return ( - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> <Redirect diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx index 96dd9683fb..7e0ba0cc0c 100644 --- a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx +++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx @@ -79,7 +79,7 @@ class WorkflowJobTemplate extends Component { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response.status === 404 && ( <span> @@ -94,7 +94,7 @@ class WorkflowJobTemplate extends Component { } return ( - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> <Redirect diff --git a/awx/ui_next/src/screens/User/User.jsx b/awx/ui_next/src/screens/User/User.jsx index 416eafecb6..2e711bd7f2 100644 --- a/awx/ui_next/src/screens/User/User.jsx +++ b/awx/ui_next/src/screens/User/User.jsx @@ -96,7 +96,7 @@ class User extends Component { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response.status === 404 && ( <span> @@ -112,7 +112,7 @@ class User extends Component { return ( <PageSection> - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> <Redirect from="/users/:id" to="/users/:id/details" exact /> From ca85020b26b77401e8921f7a1d2f35acdef3b11a Mon Sep 17 00:00:00 2001 From: Marliana Lara <mlara@redhat.com> Date: Tue, 11 Feb 2020 12:50:25 -0500 Subject: [PATCH 2/2] Use PF Chip and ChipGroup components --- awx/ui_next/src/components/Chip/Chip.jsx | 17 - awx/ui_next/src/components/Chip/Chip.test.jsx | 10 - awx/ui_next/src/components/Chip/ChipGroup.jsx | 14 - .../src/components/Chip/ChipGroup.test.jsx | 10 - .../Chip/__snapshots__/Chip.test.jsx.snap | 171 -------- .../__snapshots__/ChipGroup.test.jsx.snap | 40 -- awx/ui_next/src/components/Chip/index.js | 3 - .../CredentialChip.jsx | 2 +- .../CredentialChip.test.jsx | 0 .../src/components/CredentialChip/index.js | 1 + awx/ui_next/src/components/Lookup/Lookup.jsx | 3 +- .../Lookup/MultiCredentialsLookup.jsx | 2 +- .../ResourceAccessListItem.jsx | 3 +- .../ResourceAccessListItem.test.jsx.snap | 392 ++++++++---------- .../components/SelectedList/SelectedList.jsx | 8 +- .../SelectedList/SelectedList.test.jsx | 3 +- .../InventoryDetail/InventoryDetail.jsx | 3 +- .../src/screens/Job/JobDetail/JobDetail.jsx | 4 +- .../OrganizationDetail/OrganizationDetail.jsx | 3 +- .../Project/ProjectDetail/ProjectDetail.jsx | 2 +- .../JobTemplateDetail/JobTemplateDetail.jsx | 4 +- 21 files changed, 195 insertions(+), 500 deletions(-) delete mode 100644 awx/ui_next/src/components/Chip/Chip.jsx delete mode 100644 awx/ui_next/src/components/Chip/Chip.test.jsx delete mode 100644 awx/ui_next/src/components/Chip/ChipGroup.jsx delete mode 100644 awx/ui_next/src/components/Chip/ChipGroup.test.jsx delete mode 100644 awx/ui_next/src/components/Chip/__snapshots__/Chip.test.jsx.snap delete mode 100644 awx/ui_next/src/components/Chip/__snapshots__/ChipGroup.test.jsx.snap delete mode 100644 awx/ui_next/src/components/Chip/index.js rename awx/ui_next/src/components/{Chip => CredentialChip}/CredentialChip.jsx (94%) rename awx/ui_next/src/components/{Chip => CredentialChip}/CredentialChip.test.jsx (100%) create mode 100644 awx/ui_next/src/components/CredentialChip/index.js diff --git a/awx/ui_next/src/components/Chip/Chip.jsx b/awx/ui_next/src/components/Chip/Chip.jsx deleted file mode 100644 index 2f0a6c1049..0000000000 --- a/awx/ui_next/src/components/Chip/Chip.jsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Chip } from '@patternfly/react-core'; -import styled from 'styled-components'; - -Chip.displayName = 'PFChip'; -export default styled(Chip)` - --pf-c-chip--m-read-only--PaddingTop: 3px; - --pf-c-chip--m-read-only--PaddingBottom: 3px; - --pf-c-chip--m-read-only--PaddingLeft: 8px; - --pf-c-chip--m-read-only--PaddingRight: 8px; - - .pf-c-button { - --pf-c-button--PaddingTop: 3px; - --pf-c-button--PaddingBottom: 3px; - --pf-c-button--PaddingLeft: 8px; - --pf-c-button--PaddingRight: 8px; - } -`; diff --git a/awx/ui_next/src/components/Chip/Chip.test.jsx b/awx/ui_next/src/components/Chip/Chip.test.jsx deleted file mode 100644 index b0b9819794..0000000000 --- a/awx/ui_next/src/components/Chip/Chip.test.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import Chip from './Chip'; - -describe('Chip', () => { - test('renders the expected content', () => { - const wrapper = mount(<Chip />); - expect(wrapper).toMatchSnapshot(); - }); -}); diff --git a/awx/ui_next/src/components/Chip/ChipGroup.jsx b/awx/ui_next/src/components/Chip/ChipGroup.jsx deleted file mode 100644 index 4098faf1f2..0000000000 --- a/awx/ui_next/src/components/Chip/ChipGroup.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import { ChipGroup } from '@patternfly/react-core'; -import styled from 'styled-components'; - -export default styled(ChipGroup)` - --pf-c-chip-group--c-chip--MarginRight: 10px; - --pf-c-chip-group--c-chip--MarginBottom: 10px; - - > .pf-c-chip.pf-m-overflow .pf-c-button { - --pf-c-button--PaddingTop: 3px; - --pf-c-button--PaddingBottom: 3px; - --pf-c-chip--m-overflow--c-button--PaddingLeft: 8px; - --pf-c-chip--m-overflow--c-button--PaddingRight: 8px; - } -`; diff --git a/awx/ui_next/src/components/Chip/ChipGroup.test.jsx b/awx/ui_next/src/components/Chip/ChipGroup.test.jsx deleted file mode 100644 index 90e0dcb48f..0000000000 --- a/awx/ui_next/src/components/Chip/ChipGroup.test.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import { ChipGroup } from '.'; - -describe('<ChipGroup />', () => { - test('renders the expected content', () => { - const wrapper = mount(<ChipGroup />); - expect(wrapper).toMatchSnapshot(); - }); -}); diff --git a/awx/ui_next/src/components/Chip/__snapshots__/Chip.test.jsx.snap b/awx/ui_next/src/components/Chip/__snapshots__/Chip.test.jsx.snap deleted file mode 100644 index 0fc48e9943..0000000000 --- a/awx/ui_next/src/components/Chip/__snapshots__/Chip.test.jsx.snap +++ /dev/null @@ -1,171 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Chip renders the expected content 1`] = ` -<Chip> - <StyledComponent - forwardedComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "Chip-sc-1rzr8oo-0", - "isStatic": true, - "lastClassName": "iczEeI", - "rules": Array [ - "--pf-c-chip--m-read-only--PaddingTop:3px;--pf-c-chip--m-read-only--PaddingBottom:3px;--pf-c-chip--m-read-only--PaddingLeft:8px;--pf-c-chip--m-read-only--PaddingRight:8px;.pf-c-button{--pf-c-button--PaddingTop:3px;--pf-c-button--PaddingBottom:3px;--pf-c-button--PaddingLeft:8px;--pf-c-button--PaddingRight:8px;}", - ], - }, - "displayName": "Chip", - "foldedComponentIds": Array [], - "render": [Function], - "styledComponentId": "Chip-sc-1rzr8oo-0", - "target": [Function], - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - forwardedRef={null} - > - <PFChip - className="Chip-sc-1rzr8oo-0 iczEeI" - > - <ComponentWithOuia - component={[Function]} - componentProps={ - Object { - "className": "Chip-sc-1rzr8oo-0 iczEeI", - } - } - consumerContext={null} - > - <Chip - className="Chip-sc-1rzr8oo-0 iczEeI" - closeBtnAriaLabel="close" - component="div" - isOverflowChip={false} - isReadOnly={false} - onClick={[Function]} - ouiaContext={ - Object { - "isOuia": false, - "ouiaId": null, - } - } - tooltipPosition="top" - > - <GenerateId - prefix="pf-random-id-" - > - <div - className="pf-c-chip Chip-sc-1rzr8oo-0 iczEeI" - > - <span - className="pf-c-chip__text" - id="pf-random-id-0" - /> - <ChipButton - aria-labelledby="remove_pf-random-id-0 pf-random-id-0" - ariaLabel="close" - id="remove_pf-random-id-0" - onClick={[Function]} - > - <Component - aria-label="close" - aria-labelledby="remove_pf-random-id-0 pf-random-id-0" - className="" - id="remove_pf-random-id-0" - onClick={[Function]} - variant="plain" - > - <ComponentWithOuia - component={[Function]} - componentProps={ - Object { - "aria-label": "close", - "aria-labelledby": "remove_pf-random-id-0 pf-random-id-0", - "children": <TimesCircleIcon - aria-hidden="true" - color="currentColor" - noVerticalAlign={false} - size="sm" - title={null} - />, - "className": "", - "id": "remove_pf-random-id-0", - "onClick": [Function], - "variant": "plain", - } - } - consumerContext={ - Object { - "isOuia": false, - "ouiaId": null, - } - } - > - <Button - aria-label="close" - aria-labelledby="remove_pf-random-id-0 pf-random-id-0" - className="" - id="remove_pf-random-id-0" - onClick={[Function]} - ouiaContext={ - Object { - "isOuia": false, - "ouiaId": null, - } - } - variant="plain" - > - <button - aria-disabled={null} - aria-label="close" - aria-labelledby="remove_pf-random-id-0 pf-random-id-0" - className="pf-c-button pf-m-plain" - disabled={false} - id="remove_pf-random-id-0" - onClick={[Function]} - tabIndex={null} - type="button" - > - <TimesCircleIcon - aria-hidden="true" - color="currentColor" - noVerticalAlign={false} - size="sm" - title={null} - > - <svg - aria-hidden="true" - aria-labelledby={null} - fill="currentColor" - height="1em" - role="img" - style={ - Object { - "verticalAlign": "-0.125em", - } - } - viewBox="0 0 512 512" - width="1em" - > - <path - d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z" - transform="" - /> - </svg> - </TimesCircleIcon> - </button> - </Button> - </ComponentWithOuia> - </Component> - </ChipButton> - </div> - </GenerateId> - </Chip> - </ComponentWithOuia> - </PFChip> - </StyledComponent> -</Chip> -`; diff --git a/awx/ui_next/src/components/Chip/__snapshots__/ChipGroup.test.jsx.snap b/awx/ui_next/src/components/Chip/__snapshots__/ChipGroup.test.jsx.snap deleted file mode 100644 index 30d29d4107..0000000000 --- a/awx/ui_next/src/components/Chip/__snapshots__/ChipGroup.test.jsx.snap +++ /dev/null @@ -1,40 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<ChipGroup /> renders the expected content 1`] = ` -<ChipGroup> - <StyledComponent - forwardedComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "ChipGroup-sc-10zu8t0-0", - "isStatic": true, - "lastClassName": "bwbBYO", - "rules": Array [ - "--pf-c-chip-group--c-chip--MarginRight:10px;--pf-c-chip-group--c-chip--MarginBottom:10px;> .pf-c-chip.pf-m-overflow .pf-c-button{--pf-c-button--PaddingTop:3px;--pf-c-button--PaddingBottom:3px;--pf-c-chip--m-overflow--c-button--PaddingLeft:8px;--pf-c-chip--m-overflow--c-button--PaddingRight:8px;}", - ], - }, - "displayName": "ChipGroup", - "foldedComponentIds": Array [], - "render": [Function], - "styledComponentId": "ChipGroup-sc-10zu8t0-0", - "target": [Function], - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - forwardedRef={null} - > - <ChipGroup - className="ChipGroup-sc-10zu8t0-0 bwbBYO" - collapsedText="\${remaining} more" - defaultIsOpen={false} - expandedText="Show Less" - numChips={3} - withToolbar={false} - /> - </StyledComponent> -</ChipGroup> -`; diff --git a/awx/ui_next/src/components/Chip/index.js b/awx/ui_next/src/components/Chip/index.js deleted file mode 100644 index 56324606bf..0000000000 --- a/awx/ui_next/src/components/Chip/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export { default as ChipGroup } from './ChipGroup'; -export { default as Chip } from './Chip'; -export { default as CredentialChip } from './CredentialChip'; diff --git a/awx/ui_next/src/components/Chip/CredentialChip.jsx b/awx/ui_next/src/components/CredentialChip/CredentialChip.jsx similarity index 94% rename from awx/ui_next/src/components/Chip/CredentialChip.jsx rename to awx/ui_next/src/components/CredentialChip/CredentialChip.jsx index 37e344bee4..bc1cd89bed 100644 --- a/awx/ui_next/src/components/Chip/CredentialChip.jsx +++ b/awx/ui_next/src/components/CredentialChip/CredentialChip.jsx @@ -3,8 +3,8 @@ import { shape } from 'prop-types'; import { toTitleCase } from '@util/strings'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; -import Chip from './Chip'; import { Credential } from '@types'; +import { Chip } from '@patternfly/react-core'; function CredentialChip({ credential, i18n, ...props }) { let type; diff --git a/awx/ui_next/src/components/Chip/CredentialChip.test.jsx b/awx/ui_next/src/components/CredentialChip/CredentialChip.test.jsx similarity index 100% rename from awx/ui_next/src/components/Chip/CredentialChip.test.jsx rename to awx/ui_next/src/components/CredentialChip/CredentialChip.test.jsx diff --git a/awx/ui_next/src/components/CredentialChip/index.js b/awx/ui_next/src/components/CredentialChip/index.js new file mode 100644 index 0000000000..c4cb5cc38a --- /dev/null +++ b/awx/ui_next/src/components/CredentialChip/index.js @@ -0,0 +1 @@ +export { default } from './CredentialChip'; diff --git a/awx/ui_next/src/components/Lookup/Lookup.jsx b/awx/ui_next/src/components/Lookup/Lookup.jsx index ed8bf363d8..7642b978d6 100644 --- a/awx/ui_next/src/components/Lookup/Lookup.jsx +++ b/awx/ui_next/src/components/Lookup/Lookup.jsx @@ -13,6 +13,8 @@ import { SearchIcon } from '@patternfly/react-icons'; import { Button, ButtonVariant, + Chip, + ChipGroup, InputGroup as PFInputGroup, Modal, } from '@patternfly/react-core'; @@ -21,7 +23,6 @@ import { t } from '@lingui/macro'; import styled from 'styled-components'; import reducer, { initReducer } from './shared/reducer'; -import { ChipGroup, Chip } from '../Chip'; import { QSConfig } from '@types'; const SearchButton = styled(Button)` diff --git a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx index 8a1e15faf4..782b11da36 100644 --- a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx +++ b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx @@ -7,7 +7,7 @@ import { FormGroup, ToolbarItem } from '@patternfly/react-core'; import { CredentialsAPI, CredentialTypesAPI } from '@api'; import AnsibleSelect from '@components/AnsibleSelect'; import { FieldTooltip } from '@components/FormField'; -import { CredentialChip } from '@components/Chip'; +import CredentialChip from '@components/CredentialChip'; import VerticalSeperator from '@components/VerticalSeparator'; import { getQSConfig, parseQueryString } from '@util/qs'; import Lookup from './Lookup'; diff --git a/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx index 07c276b22e..63c44e5a2a 100644 --- a/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx +++ b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx @@ -3,6 +3,8 @@ import { func } from 'prop-types'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { + Chip, + ChipGroup, DataListItem, DataListItemRow, DataListItemCells as PFDataListItemCells, @@ -14,7 +16,6 @@ import { import { Link } from 'react-router-dom'; import styled from 'styled-components'; -import { ChipGroup, Chip } from '@components/Chip'; import { DetailList, Detail } from '@components/DetailList'; import { AccessRecord } from '@types'; diff --git a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap index dd5305ebe4..dbebf79172 100644 --- a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap +++ b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap @@ -86,16 +86,21 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = ` fullWidth={false} label="Team Roles" value={ - <ForwardRef + <ChipGroup + className="" + collapsedText="\${remaining} more" + defaultIsOpen={false} + expandedText="Show Less" numChips={5} + withToolbar={false} > - <ForwardRef + <Unknown isReadOnly={false} onClick={[Function]} > Member - </ForwardRef> - </ForwardRef> + </Unknown> + </ChipGroup> } /> </ForwardRef> @@ -142,16 +147,21 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = ` fullWidth={false} label="Team Roles" value={ - <ForwardRef + <ChipGroup + className="" + collapsedText="\${remaining} more" + defaultIsOpen={false} + expandedText="Show Less" numChips={5} + withToolbar={false} > - <ForwardRef + <Unknown isReadOnly={false} onClick={[Function]} > Member - </ForwardRef> - </ForwardRef> + </Unknown> + </ChipGroup> } /> </ForwardRef> @@ -221,16 +231,21 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = ` fullWidth={false} label="Team Roles" value={ - <ForwardRef + <ChipGroup + className="" + collapsedText="\${remaining} more" + defaultIsOpen={false} + expandedText="Show Less" numChips={5} + withToolbar={false} > - <ForwardRef + <Unknown isReadOnly={false} onClick={[Function]} > Member - </ForwardRef> - </ForwardRef> + </Unknown> + </ChipGroup> } /> </ForwardRef> @@ -561,16 +576,21 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = ` fullWidth={false} label="Team Roles" value={ - <ForwardRef + <ChipGroup + className="" + collapsedText="\${remaining} more" + defaultIsOpen={false} + expandedText="Show Less" numChips={5} + withToolbar={false} > - <ForwardRef + <Unknown isReadOnly={false} onClick={[Function]} > Member - </ForwardRef> - </ForwardRef> + </Unknown> + </ChipGroup> } > <Detail__DetailName @@ -680,243 +700,175 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = ` data-pf-content={true} > <ChipGroup + className="" + collapsedText="\${remaining} more" + defaultIsOpen={false} + expandedText="Show Less" numChips={5} + withToolbar={false} > - <StyledComponent - forwardedComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "ChipGroup-sc-10zu8t0-0", - "isStatic": true, - "lastClassName": "bwbBYO", - "rules": Array [ - "--pf-c-chip-group--c-chip--MarginRight:10px;--pf-c-chip-group--c-chip--MarginBottom:10px;> .pf-c-chip.pf-m-overflow .pf-c-button{--pf-c-button--PaddingTop:3px;--pf-c-button--PaddingBottom:3px;--pf-c-chip--m-overflow--c-button--PaddingLeft:8px;--pf-c-chip--m-overflow--c-button--PaddingRight:8px;}", - ], - }, - "displayName": "ChipGroup", - "foldedComponentIds": Array [], - "render": [Function], - "styledComponentId": "ChipGroup-sc-10zu8t0-0", - "target": [Function], - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } - } - forwardedRef={null} - numChips={5} + <ul + className="pf-c-chip-group" > - <ChipGroup - className="ChipGroup-sc-10zu8t0-0 bwbBYO" + <InnerChipGroup + className="" collapsedText="\${remaining} more" defaultIsOpen={false} expandedText="Show Less" + isOpen={false} numChips={5} + onToggleCollapse={[Function]} withToolbar={false} > - <ul - className="pf-c-chip-group ChipGroup-sc-10zu8t0-0 bwbBYO" + <Component + component="li" + isReadOnly={false} + key=".$3" + onClick={[Function]} > - <InnerChipGroup - className="ChipGroup-sc-10zu8t0-0 bwbBYO" - collapsedText="\${remaining} more" - defaultIsOpen={false} - expandedText="Show Less" - isOpen={false} - numChips={5} - onToggleCollapse={[Function]} - withToolbar={false} + <ComponentWithOuia + component={[Function]} + componentProps={ + Object { + "children": "Member", + "component": "li", + "isReadOnly": false, + "onClick": [Function], + } + } + consumerContext={null} > <Chip + className="" + closeBtnAriaLabel="close" component="li" + isOverflowChip={false} isReadOnly={false} - key=".$3" onClick={[Function]} - > - <StyledComponent - component="li" - forwardedComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "Chip-sc-1rzr8oo-0", - "isStatic": true, - "lastClassName": "iczEeI", - "rules": Array [ - "--pf-c-chip--m-read-only--PaddingTop:3px;--pf-c-chip--m-read-only--PaddingBottom:3px;--pf-c-chip--m-read-only--PaddingLeft:8px;--pf-c-chip--m-read-only--PaddingRight:8px;.pf-c-button{--pf-c-button--PaddingTop:3px;--pf-c-button--PaddingBottom:3px;--pf-c-button--PaddingLeft:8px;--pf-c-button--PaddingRight:8px;}", - ], - }, - "displayName": "Chip", - "foldedComponentIds": Array [], - "render": [Function], - "styledComponentId": "Chip-sc-1rzr8oo-0", - "target": [Function], - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } + ouiaContext={ + Object { + "isOuia": false, + "ouiaId": null, } - forwardedRef={null} - isReadOnly={false} - onClick={[Function]} + } + tooltipPosition="top" + > + <GenerateId + prefix="pf-random-id-" > - <PFChip - className="Chip-sc-1rzr8oo-0 iczEeI" - component="li" - isReadOnly={false} - onClick={[Function]} + <li + className="pf-c-chip" > - <ComponentWithOuia - component={[Function]} - componentProps={ - Object { - "children": "Member", - "className": "Chip-sc-1rzr8oo-0 iczEeI", - "component": "li", - "isReadOnly": false, - "onClick": [Function], - } - } - consumerContext={null} + <span + className="pf-c-chip__text" + id="pf-random-id-0" > - <Chip - className="Chip-sc-1rzr8oo-0 iczEeI" - closeBtnAriaLabel="close" - component="li" - isOverflowChip={false} - isReadOnly={false} + Member + </span> + <ChipButton + aria-labelledby="remove_pf-random-id-0 pf-random-id-0" + ariaLabel="close" + id="remove_pf-random-id-0" + onClick={[Function]} + > + <Component + aria-label="close" + aria-labelledby="remove_pf-random-id-0 pf-random-id-0" + className="" + id="remove_pf-random-id-0" onClick={[Function]} - ouiaContext={ - Object { - "isOuia": false, - "ouiaId": null, - } - } - tooltipPosition="top" + variant="plain" > - <GenerateId - prefix="pf-random-id-" + <ComponentWithOuia + component={[Function]} + componentProps={ + Object { + "aria-label": "close", + "aria-labelledby": "remove_pf-random-id-0 pf-random-id-0", + "children": <TimesCircleIcon + aria-hidden="true" + color="currentColor" + noVerticalAlign={false} + size="sm" + title={null} + />, + "className": "", + "id": "remove_pf-random-id-0", + "onClick": [Function], + "variant": "plain", + } + } + consumerContext={ + Object { + "isOuia": false, + "ouiaId": null, + } + } > - <li - className="pf-c-chip Chip-sc-1rzr8oo-0 iczEeI" + <Button + aria-label="close" + aria-labelledby="remove_pf-random-id-0 pf-random-id-0" + className="" + id="remove_pf-random-id-0" + onClick={[Function]} + ouiaContext={ + Object { + "isOuia": false, + "ouiaId": null, + } + } + variant="plain" > - <span - className="pf-c-chip__text" - id="pf-random-id-0" - > - Member - </span> - <ChipButton + <button + aria-disabled={null} + aria-label="close" aria-labelledby="remove_pf-random-id-0 pf-random-id-0" - ariaLabel="close" + className="pf-c-button pf-m-plain" + disabled={false} id="remove_pf-random-id-0" onClick={[Function]} + tabIndex={null} + type="button" > - <Component - aria-label="close" - aria-labelledby="remove_pf-random-id-0 pf-random-id-0" - className="" - id="remove_pf-random-id-0" - onClick={[Function]} - variant="plain" + <TimesCircleIcon + aria-hidden="true" + color="currentColor" + noVerticalAlign={false} + size="sm" + title={null} > - <ComponentWithOuia - component={[Function]} - componentProps={ + <svg + aria-hidden="true" + aria-labelledby={null} + fill="currentColor" + height="1em" + role="img" + style={ Object { - "aria-label": "close", - "aria-labelledby": "remove_pf-random-id-0 pf-random-id-0", - "children": <TimesCircleIcon - aria-hidden="true" - color="currentColor" - noVerticalAlign={false} - size="sm" - title={null} - />, - "className": "", - "id": "remove_pf-random-id-0", - "onClick": [Function], - "variant": "plain", - } - } - consumerContext={ - Object { - "isOuia": false, - "ouiaId": null, + "verticalAlign": "-0.125em", } } + viewBox="0 0 512 512" + width="1em" > - <Button - aria-label="close" - aria-labelledby="remove_pf-random-id-0 pf-random-id-0" - className="" - id="remove_pf-random-id-0" - onClick={[Function]} - ouiaContext={ - Object { - "isOuia": false, - "ouiaId": null, - } - } - variant="plain" - > - <button - aria-disabled={null} - aria-label="close" - aria-labelledby="remove_pf-random-id-0 pf-random-id-0" - className="pf-c-button pf-m-plain" - disabled={false} - id="remove_pf-random-id-0" - onClick={[Function]} - tabIndex={null} - type="button" - > - <TimesCircleIcon - aria-hidden="true" - color="currentColor" - noVerticalAlign={false} - size="sm" - title={null} - > - <svg - aria-hidden="true" - aria-labelledby={null} - fill="currentColor" - height="1em" - role="img" - style={ - Object { - "verticalAlign": "-0.125em", - } - } - viewBox="0 0 512 512" - width="1em" - > - <path - d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z" - transform="" - /> - </svg> - </TimesCircleIcon> - </button> - </Button> - </ComponentWithOuia> - </Component> - </ChipButton> - </li> - </GenerateId> - </Chip> - </ComponentWithOuia> - </PFChip> - </StyledComponent> + <path + d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z" + transform="" + /> + </svg> + </TimesCircleIcon> + </button> + </Button> + </ComponentWithOuia> + </Component> + </ChipButton> + </li> + </GenerateId> </Chip> - </InnerChipGroup> - </ul> - </ChipGroup> - </StyledComponent> + </ComponentWithOuia> + </Component> + </InnerChipGroup> + </ul> </ChipGroup> </dd> </TextListItem> diff --git a/awx/ui_next/src/components/SelectedList/SelectedList.jsx b/awx/ui_next/src/components/SelectedList/SelectedList.jsx index 784d4f08d5..2727fc67e6 100644 --- a/awx/ui_next/src/components/SelectedList/SelectedList.jsx +++ b/awx/ui_next/src/components/SelectedList/SelectedList.jsx @@ -1,8 +1,12 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { Split as PFSplit, SplitItem } from '@patternfly/react-core'; +import { + Chip, + ChipGroup, + Split as PFSplit, + SplitItem, +} from '@patternfly/react-core'; import styled from 'styled-components'; -import { ChipGroup, Chip } from '../Chip'; import VerticalSeparator from '../VerticalSeparator'; const Split = styled(PFSplit)` diff --git a/awx/ui_next/src/components/SelectedList/SelectedList.test.jsx b/awx/ui_next/src/components/SelectedList/SelectedList.test.jsx index 10a0f271b6..a9b522a7d9 100644 --- a/awx/ui_next/src/components/SelectedList/SelectedList.test.jsx +++ b/awx/ui_next/src/components/SelectedList/SelectedList.test.jsx @@ -1,6 +1,7 @@ import React from 'react'; import { mount } from 'enzyme'; -import { ChipGroup } from '../Chip'; +import { ChipGroup } from '@patternfly/react-core'; + import SelectedList from './SelectedList'; describe('<SelectedList />', () => { diff --git a/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx b/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx index 628d5d71e7..7026461c79 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx @@ -2,10 +2,9 @@ import React, { useCallback, useEffect } from 'react'; import { Link, useHistory } from 'react-router-dom'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; -import { Button } from '@patternfly/react-core'; +import { Button, Chip, ChipGroup } from '@patternfly/react-core'; import { CardBody, CardActionsRow } from '@components/Card'; import { DetailList, Detail, UserDateDetail } from '@components/DetailList'; -import { ChipGroup, Chip } from '@components/Chip'; import { VariablesDetail } from '@components/CodeMirrorInput'; import DeleteButton from '@components/DeleteButton'; import ContentError from '@components/ContentError'; diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx index a23c6a268b..d93ee7d457 100644 --- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx +++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx @@ -2,13 +2,13 @@ import React, { useState } from 'react'; import { Link, useHistory } from 'react-router-dom'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; -import { Button } from '@patternfly/react-core'; +import { Button, Chip, ChipGroup } from '@patternfly/react-core'; import styled from 'styled-components'; import AlertModal from '@components/AlertModal'; import { DetailList, Detail } from '@components/DetailList'; import { CardBody, CardActionsRow } from '@components/Card'; -import { ChipGroup, Chip, CredentialChip } from '@components/Chip'; +import CredentialChip from '@components/CredentialChip'; import { VariablesInput as _VariablesInput } from '@components/CodeMirrorInput'; import DeleteButton from '@components/DeleteButton'; import ErrorDetail from '@components/ErrorDetail'; diff --git a/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx b/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx index 6811431627..28af839efa 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx @@ -2,11 +2,10 @@ import React, { useEffect, useState } from 'react'; import { Link, useHistory, useRouteMatch } from 'react-router-dom'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; -import { Button } from '@patternfly/react-core'; +import { Button, Chip, ChipGroup } from '@patternfly/react-core'; import { OrganizationsAPI } from '@api'; import { DetailList, Detail, UserDateDetail } from '@components/DetailList'; import { CardBody, CardActionsRow } from '@components/Card'; -import { ChipGroup, Chip } from '@components/Chip'; import AlertModal from '@components/AlertModal'; import ContentError from '@components/ContentError'; import ContentLoading from '@components/ContentLoading'; diff --git a/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx b/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx index f08c8951cf..78f746c8a0 100644 --- a/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx +++ b/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx @@ -12,7 +12,7 @@ import ContentLoading from '@components/ContentLoading'; import DeleteButton from '@components/DeleteButton'; import { DetailList, Detail, UserDateDetail } from '@components/DetailList'; import ErrorDetail from '@components/ErrorDetail'; -import { CredentialChip } from '@components/Chip'; +import CredentialChip from '@components/CredentialChip'; import { ProjectsAPI } from '@api'; import { toTitleCase } from '@util/strings'; diff --git a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx index 6af3b424ed..2c63c6537e 100644 --- a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx +++ b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx @@ -3,6 +3,8 @@ import { Link, useHistory, useParams } from 'react-router-dom'; import { withI18n } from '@lingui/react'; import { Button, + Chip, + ChipGroup, TextList, TextListItem, TextListItemVariants, @@ -15,7 +17,7 @@ import AlertModal from '@components/AlertModal'; import { CardBody, CardActionsRow } from '@components/Card'; import ContentError from '@components/ContentError'; import ContentLoading from '@components/ContentLoading'; -import { ChipGroup, Chip, CredentialChip } from '@components/Chip'; +import CredentialChip from '@components/CredentialChip'; import { DetailList, Detail, UserDateDetail } from '@components/DetailList'; import DeleteButton from '@components/DeleteButton'; import ErrorDetail from '@components/ErrorDetail';