diff --git a/awx/ui_next/src/components/ChipGroup/ChipGroup.jsx b/awx/ui_next/src/components/ChipGroup/ChipGroup.jsx new file mode 100644 index 0000000000..972efbe5a7 --- /dev/null +++ b/awx/ui_next/src/components/ChipGroup/ChipGroup.jsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; +import { ChipGroup as PFChipGroup } from '@patternfly/react-core'; +import { number, shape } from 'prop-types'; + +function ChipGroup({ i18n, numChips, totalChips, ...props }) { + return ( + + ); +} + +ChipGroup.propTypes = { + numChips: number.isRequired, + totalChips: number.isRequired, + i18n: shape({}).isRequired, +}; + +export default withI18n()(ChipGroup); diff --git a/awx/ui_next/src/components/ChipGroup/ChipGroup.test.jsx b/awx/ui_next/src/components/ChipGroup/ChipGroup.test.jsx new file mode 100644 index 0000000000..e1193e26ce --- /dev/null +++ b/awx/ui_next/src/components/ChipGroup/ChipGroup.test.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { mountWithContexts } from '@testUtils/enzymeHelpers'; +import ChipGroup from './ChipGroup'; + +describe('ChipGroup', () => { + test('should mount properly', () => { + const wrapper = mountWithContexts( + + ); + expect( + wrapper + .find('ChipGroup') + .at(1) + .props().collapsedText + ).toEqual('5 more'); + }); +}); diff --git a/awx/ui_next/src/components/ChipGroup/index.js b/awx/ui_next/src/components/ChipGroup/index.js new file mode 100644 index 0000000000..e38952cc63 --- /dev/null +++ b/awx/ui_next/src/components/ChipGroup/index.js @@ -0,0 +1 @@ +export { default } from './ChipGroup'; diff --git a/awx/ui_next/src/components/Lookup/Lookup.jsx b/awx/ui_next/src/components/Lookup/Lookup.jsx index c2694dcd07..6494a35426 100644 --- a/awx/ui_next/src/components/Lookup/Lookup.jsx +++ b/awx/ui_next/src/components/Lookup/Lookup.jsx @@ -14,10 +14,10 @@ import { Button, ButtonVariant, Chip, - ChipGroup, InputGroup as PFInputGroup, Modal, } from '@patternfly/react-core'; +import ChipGroup from '@components/ChipGroup'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import styled from 'styled-components'; @@ -128,7 +128,7 @@ function Lookup(props) { - + {items.map(item => renderItemChip({ item, diff --git a/awx/ui_next/src/components/PromptDetail/PromptDetail.jsx b/awx/ui_next/src/components/PromptDetail/PromptDetail.jsx index 05ff230175..53e0dc092f 100644 --- a/awx/ui_next/src/components/PromptDetail/PromptDetail.jsx +++ b/awx/ui_next/src/components/PromptDetail/PromptDetail.jsx @@ -6,10 +6,11 @@ import { Link } from 'react-router-dom'; import styled from 'styled-components'; import { toTitleCase } from '@util/strings'; -import { Chip, ChipGroup, Divider } from '@patternfly/react-core'; -import { VariablesDetail } from '@components/CodeMirrorInput'; +import { Chip, Divider } from '@patternfly/react-core'; import CredentialChip from '@components/CredentialChip'; +import ChipGroup from '@components/ChipGroup'; import { DetailList, Detail, UserDateDetail } from '@components/DetailList'; +import { VariablesDetail } from '@components/CodeMirrorInput'; import PromptProjectDetail from './PromptProjectDetail'; import PromptInventorySourceDetail from './PromptInventorySourceDetail'; @@ -220,7 +221,10 @@ function PromptDetail({ i18n, resource, launchConfig = {} }) { label={i18n._(t`Credentials`)} rows={4} value={ - + {overrides.credentials.map(cred => ( + {overrides.job_tags.split(',').map(jobTag => ( {jobTag} @@ -273,7 +280,10 @@ function PromptDetail({ i18n, resource, launchConfig = {} }) { fullWidth label={i18n._(t`Skip Tags`)} value={ - + {overrides.skip_tags.split(',').map(skipTag => ( {skipTag} diff --git a/awx/ui_next/src/components/PromptDetail/PromptInventorySourceDetail.jsx b/awx/ui_next/src/components/PromptDetail/PromptInventorySourceDetail.jsx index f3ec46c003..364646ec14 100644 --- a/awx/ui_next/src/components/PromptDetail/PromptInventorySourceDetail.jsx +++ b/awx/ui_next/src/components/PromptDetail/PromptInventorySourceDetail.jsx @@ -3,10 +3,11 @@ import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Link } from 'react-router-dom'; -import { Chip, ChipGroup, List, ListItem } from '@patternfly/react-core'; +import { Chip, List, ListItem } from '@patternfly/react-core'; import { Detail, DeletedDetail } from '@components/DetailList'; import { VariablesDetail } from '@components/CodeMirrorInput'; import CredentialChip from '@components/CredentialChip'; +import ChipGroup from '@components/ChipGroup'; function PromptInventorySourceDetail({ i18n, resource }) { const { @@ -120,7 +121,10 @@ function PromptInventorySourceDetail({ i18n, resource }) { fullWidth label={i18n._(t`Regions`)} value={ - + {source_regions.split(',').map(region => ( {region} @@ -135,7 +139,10 @@ function PromptInventorySourceDetail({ i18n, resource }) { fullWidth label={i18n._(t`Instance Filters`)} value={ - + {instance_filters.split(',').map(filter => ( {filter} @@ -150,7 +157,7 @@ function PromptInventorySourceDetail({ i18n, resource }) { fullWidth label={i18n._(t`Only Group By`)} value={ - + {group_by.split(',').map(group => ( {group} diff --git a/awx/ui_next/src/components/PromptDetail/PromptJobTemplateDetail.jsx b/awx/ui_next/src/components/PromptDetail/PromptJobTemplateDetail.jsx index d7502bb942..ffdf6c69ea 100644 --- a/awx/ui_next/src/components/PromptDetail/PromptJobTemplateDetail.jsx +++ b/awx/ui_next/src/components/PromptDetail/PromptJobTemplateDetail.jsx @@ -3,11 +3,12 @@ import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Link } from 'react-router-dom'; -import { Chip, ChipGroup, List, ListItem } from '@patternfly/react-core'; +import { Chip, List, ListItem } from '@patternfly/react-core'; +import CredentialChip from '@components/CredentialChip'; +import ChipGroup from '@components/ChipGroup'; +import Sparkline from '@components/Sparkline'; import { Detail, DeletedDetail } from '@components/DetailList'; import { VariablesDetail } from '@components/CodeMirrorInput'; -import CredentialChip from '@components/CredentialChip'; -import Sparkline from '@components/Sparkline'; import { toTitleCase } from '@util/strings'; function PromptJobTemplateDetail({ i18n, resource }) { @@ -174,7 +175,10 @@ function PromptJobTemplateDetail({ i18n, resource }) { fullWidth label={i18n._(t`Credentials`)} value={ - + {summary_fields.credentials.map(cred => ( ))} @@ -187,7 +191,10 @@ function PromptJobTemplateDetail({ i18n, resource }) { fullWidth label={i18n._(t`Labels`)} value={ - + {summary_fields.labels.results.map(label => ( {label.name} @@ -202,7 +209,7 @@ function PromptJobTemplateDetail({ i18n, resource }) { fullWidth label={i18n._(t`Instance Groups`)} value={ - + {instance_groups.map(ig => ( {ig.name} @@ -217,7 +224,7 @@ function PromptJobTemplateDetail({ i18n, resource }) { fullWidth label={i18n._(t`Job Tags`)} value={ - + {job_tags.split(',').map(jobTag => ( {jobTag} @@ -232,7 +239,7 @@ function PromptJobTemplateDetail({ i18n, resource }) { fullWidth label={i18n._(t`Skip Tags`)} value={ - + {skip_tags.split(',').map(skipTag => ( {skipTag} diff --git a/awx/ui_next/src/components/PromptDetail/PromptWFJobTemplateDetail.jsx b/awx/ui_next/src/components/PromptDetail/PromptWFJobTemplateDetail.jsx index c823b34184..0f4cc60716 100644 --- a/awx/ui_next/src/components/PromptDetail/PromptWFJobTemplateDetail.jsx +++ b/awx/ui_next/src/components/PromptDetail/PromptWFJobTemplateDetail.jsx @@ -3,8 +3,9 @@ import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Link } from 'react-router-dom'; -import { Chip, ChipGroup, List, ListItem } from '@patternfly/react-core'; +import { Chip, List, ListItem } from '@patternfly/react-core'; import CredentialChip from '@components/CredentialChip'; +import ChipGroup from '@components/ChipGroup'; import { Detail } from '@components/DetailList'; import { VariablesDetail } from '@components/CodeMirrorInput'; import Sparkline from '@components/Sparkline'; @@ -108,7 +109,10 @@ function PromptWFJobTemplateDetail({ i18n, resource }) { fullWidth label={i18n._(t`Labels`)} value={ - + {summary_fields.labels.results.map(label => ( {label.name} diff --git a/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx index 70e4047ac7..99ed696e0c 100644 --- a/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx +++ b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx @@ -4,7 +4,6 @@ import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Chip, - ChipGroup, DataListItem, DataListItemRow, DataListItemCells as PFDataListItemCells, @@ -16,6 +15,7 @@ import DataListCell from '@components/DataListCell'; import { Link } from 'react-router-dom'; import styled from 'styled-components'; +import ChipGroup from '@components/ChipGroup'; import { DetailList, Detail } from '@components/DetailList'; import { AccessRecord } from '@types'; @@ -115,7 +115,7 @@ class ResourceAccessListItem extends React.Component { + {userRoles.map(this.renderChip)} } @@ -125,7 +125,7 @@ class ResourceAccessListItem extends React.Component { + {teamRoles.map(this.renderChip)} } 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 ab88ab9847..11cf9202ab 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 @@ -88,13 +88,9 @@ exports[` initially renders succesfully 1`] = ` fullWidth={false} label="Team Roles" value={ - initially renders succesfully 1`] = ` > Member - + } /> @@ -151,13 +147,9 @@ exports[` initially renders succesfully 1`] = ` fullWidth={false} label="Team Roles" value={ - initially renders succesfully 1`] = ` > Member - + } /> @@ -237,13 +229,9 @@ exports[` initially renders succesfully 1`] = ` fullWidth={false} label="Team Roles" value={ - initially renders succesfully 1`] = ` > Member - + } /> @@ -644,13 +632,9 @@ exports[` initially renders succesfully 1`] = ` fullWidth={false} label="Team Roles" value={ - initially renders succesfully 1`] = ` > Member - + } > initially renders succesfully 1`] = ` data-cy={null} data-pf-content={true} > - -
    - - - - - -
  • - - Member - - - -
  • - - - - - -
    • -     -     -     -     -     -
- + + + + + + + + + + + + + + + + diff --git a/awx/ui_next/src/components/Schedule/ScheduleDetail/ScheduleDetail.jsx b/awx/ui_next/src/components/Schedule/ScheduleDetail/ScheduleDetail.jsx index 58a094dace..60394e21f8 100644 --- a/awx/ui_next/src/components/Schedule/ScheduleDetail/ScheduleDetail.jsx +++ b/awx/ui_next/src/components/Schedule/ScheduleDetail/ScheduleDetail.jsx @@ -5,7 +5,7 @@ import styled from 'styled-components'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Schedule } from '@types'; -import { Chip, ChipGroup, Title, Button } from '@patternfly/react-core'; +import { Chip, Title, Button } from '@patternfly/react-core'; import AlertModal from '@components/AlertModal'; import { CardBody, CardActionsRow } from '@components/Card'; import ContentError from '@components/ContentError'; @@ -18,6 +18,7 @@ import useRequest from '@util/useRequest'; import { SchedulesAPI } from '@api'; import DeleteButton from '@components/DeleteButton'; import ErrorDetail from '@components/ErrorDetail'; +import ChipGroup from '@components/ChipGroup'; const PromptTitle = styled(Title)` --pf-c-title--m-md--FontWeight: 700; @@ -173,7 +174,7 @@ function ScheduleDetail({ schedule, i18n }) { fullWidth label={i18n._(t`Credentials`)} value={ - + {credentials.map(c => ( ))} @@ -186,7 +187,10 @@ function ScheduleDetail({ schedule, i18n }) { fullWidth label={i18n._(t`Job Tags`)} value={ - + {job_tags.split(',').map(jobTag => ( {jobTag} @@ -201,7 +205,10 @@ function ScheduleDetail({ schedule, i18n }) { fullWidth label={i18n._(t`Skip Tags`)} value={ - + {skip_tags.split(',').map(skipTag => ( {skipTag} diff --git a/awx/ui_next/src/components/SelectedList/SelectedList.jsx b/awx/ui_next/src/components/SelectedList/SelectedList.jsx index 6fd0eb9da1..870b7f334d 100644 --- a/awx/ui_next/src/components/SelectedList/SelectedList.jsx +++ b/awx/ui_next/src/components/SelectedList/SelectedList.jsx @@ -1,11 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { - Chip, - ChipGroup, - Split as PFSplit, - SplitItem, -} from '@patternfly/react-core'; +import { Chip, Split as PFSplit, SplitItem } from '@patternfly/react-core'; + +import ChipGroup from '@components/ChipGroup'; import styled from 'styled-components'; const Split = styled(PFSplit)` @@ -42,7 +39,7 @@ class SelectedList extends Component { {label} - + {selected.map(item => renderChip({ item, diff --git a/awx/ui_next/src/components/SelectedList/SelectedList.test.jsx b/awx/ui_next/src/components/SelectedList/SelectedList.test.jsx index a9b522a7d9..e4c886c5cc 100644 --- a/awx/ui_next/src/components/SelectedList/SelectedList.test.jsx +++ b/awx/ui_next/src/components/SelectedList/SelectedList.test.jsx @@ -1,11 +1,11 @@ import React from 'react'; -import { mount } from 'enzyme'; -import { ChipGroup } from '@patternfly/react-core'; +import { mountWithContexts } from '@testUtils/enzymeHelpers'; +import ChipGroup from '@components/ChipGroup'; import SelectedList from './SelectedList'; describe('', () => { - test('initially renders succesfully', () => { + test('initially renders successfully', () => { const mockSelected = [ { id: 1, @@ -16,17 +16,18 @@ describe('', () => { name: 'bar', }, ]; - mount( + const wrapper = mountWithContexts( {}} /> ); + expect(wrapper.length).toBe(1); }); test('showOverflow should set showOverflow on ChipGroup', () => { - const wrapper = mount( + const wrapper = mountWithContexts( {}} /> ); const chipGroup = wrapper.find(ChipGroup); @@ -42,7 +43,7 @@ describe('', () => { name: 'foo', }, ]; - const wrapper = mount( + const wrapper = mountWithContexts( + {instanceGroups.map(ig => ( {ig.name} diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx index 01f09e6c11..7a0d06618e 100644 --- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx +++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx @@ -2,12 +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, Chip, ChipGroup } from '@patternfly/react-core'; +import { Button, Chip } 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 from '@components/ChipGroup'; import CredentialChip from '@components/CredentialChip'; import { VariablesInput as _VariablesInput } from '@components/CodeMirrorInput'; import DeleteButton from '@components/DeleteButton'; @@ -215,7 +216,7 @@ function JobDetail({ job, i18n }) { fullWidth label={i18n._(t`Credentials`)} value={ - + {credentials.map(c => ( ))} @@ -228,7 +229,7 @@ function JobDetail({ job, i18n }) { fullWidth label={i18n._(t`Labels`)} value={ - + {labels.results.map(l => ( {l.name} diff --git a/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx b/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx index ceb4caef04..61183eecab 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx @@ -2,11 +2,12 @@ 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, Chip, ChipGroup } from '@patternfly/react-core'; +import { Button, Chip } from '@patternfly/react-core'; import { OrganizationsAPI } from '@api'; import { DetailList, Detail, UserDateDetail } from '@components/DetailList'; import { CardBody, CardActionsRow } from '@components/Card'; import AlertModal from '@components/AlertModal'; +import ChipGroup from '@components/ChipGroup'; import ContentError from '@components/ContentError'; import ContentLoading from '@components/ContentLoading'; import DeleteButton from '@components/DeleteButton'; @@ -96,7 +97,7 @@ function OrganizationDetail({ i18n, organization }) { fullWidth label={i18n._(t`Instance Groups`)} value={ - + {instanceGroups.map(ig => ( {ig.name} diff --git a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx index 28bdcec16f..52f3dce4ae 100644 --- a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx +++ b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx @@ -4,7 +4,6 @@ import { withI18n } from '@lingui/react'; import { Button, Chip, - ChipGroup, TextList, TextListItem, TextListItemVariants, @@ -15,6 +14,7 @@ import { t } from '@lingui/macro'; import AlertModal from '@components/AlertModal'; import { CardBody, CardActionsRow } from '@components/Card'; +import ChipGroup from '@components/ChipGroup'; import ContentError from '@components/ContentError'; import ContentLoading from '@components/ContentLoading'; import CredentialChip from '@components/CredentialChip'; @@ -281,7 +281,10 @@ function JobTemplateDetail({ i18n, template }) { fullWidth label={i18n._(t`Credentials`)} value={ - + {summary_fields.credentials.map(c => ( ))} @@ -294,7 +297,10 @@ function JobTemplateDetail({ i18n, template }) { fullWidth label={i18n._(t`Labels`)} value={ - + {summary_fields.labels.results.map(l => ( {l.name} @@ -309,7 +315,7 @@ function JobTemplateDetail({ i18n, template }) { fullWidth label={i18n._(t`Instance Groups`)} value={ - + {instanceGroups.map(ig => ( {ig.name} @@ -324,7 +330,7 @@ function JobTemplateDetail({ i18n, template }) { fullWidth label={i18n._(t`Job Tags`)} value={ - + {job_tags.split(',').map(jobTag => ( {jobTag} @@ -339,7 +345,7 @@ function JobTemplateDetail({ i18n, template }) { fullWidth label={i18n._(t`Skip Tags`)} value={ - + {skip_tags.split(',').map(skipTag => ( {skipTag} diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyList.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyList.jsx index 201136e1b3..9cfc946fa7 100644 --- a/awx/ui_next/src/screens/Template/Survey/SurveyList.jsx +++ b/awx/ui_next/src/screens/Template/Survey/SurveyList.jsx @@ -114,7 +114,7 @@ function SurveyList({ variant="primary" aria-label={i18n._(t`Preview`)} > - Preview + {i18n._(t`Preview`)} ); diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx index 44260988b7..4c8f73a5a1 100644 --- a/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx +++ b/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx @@ -5,7 +5,6 @@ import { Link } from 'react-router-dom'; import { Button as _Button, Chip, - ChipGroup, DataListAction as _DataListAction, DataListCheck, DataListItemCells, @@ -15,6 +14,7 @@ import { StackItem, } from '@patternfly/react-core'; import DataListCell from '@components/DataListCell'; +import ChipGroup from '@components/ChipGroup'; import { CaretDownIcon, CaretUpIcon } from '@patternfly/react-icons'; import styled from 'styled-components'; @@ -119,7 +119,10 @@ function SurveyListItem({ )} {[question.type].includes('multiselect') && question.default.length > 0 && ( - + {question.default.split('\n').map(chip => ( {chip} diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx index 93aa40a212..1047607b4d 100644 --- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx +++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx @@ -5,7 +5,6 @@ import { t } from '@lingui/macro'; import { WorkflowJobTemplatesAPI } from '@api'; import { Chip, - ChipGroup, Button, TextList, TextListItem, @@ -16,6 +15,7 @@ import { import AlertModal from '@components/AlertModal'; import { CardBody, CardActionsRow } from '@components/Card'; +import ChipGroup from '@components/ChipGroup'; import { VariablesDetail } from '@components/CodeMirrorInput'; import ContentLoading from '@components/ContentLoading'; import DeleteButton from '@components/DeleteButton'; @@ -168,7 +168,10 @@ function WorkflowJobTemplateDetail({ template, i18n }) { fullWidth label={i18n._(t`Labels`)} value={ - + {summary_fields.labels.results.map(l => ( {l.name}