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(); - 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('', () => { - test('renders the expected content', () => { - const wrapper = mount(); - 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`] = ` - - - - - - -
- - - - - - -
- - - - - - -`; 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[` renders the expected content 1`] = ` - - .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} - > - - - -`; 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[` initially renders succesfully 1`] = ` fullWidth={false} label="Team Roles" value={ - - Member - - + + } /> @@ -142,16 +147,21 @@ exports[` initially renders succesfully 1`] = ` fullWidth={false} label="Team Roles" value={ - - Member - - + + } /> @@ -221,16 +231,21 @@ exports[` initially renders succesfully 1`] = ` fullWidth={false} label="Team Roles" value={ - - Member - - + + } /> @@ -561,16 +576,21 @@ exports[` initially renders succesfully 1`] = ` fullWidth={false} label="Team Roles" value={ - - Member - - + + } > initially renders succesfully 1`] = ` data-pf-content={true} > - .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} +
    - -
      - - + - - - + + - - - - - + + + + + + + + + + - -
    -     - + + + +
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('', () => { 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';