External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-16 04:10:44 -03:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6935 from nixocio/ui_issue_6861

Browse Source 
Add `Preview`, `more` and `Show Less` for translation

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot] 2020-05-12 17:06:03 +00:00 committed by GitHub
commit d2698c2cb1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 319 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
awx/ui_next/src/components/ChipGroup/ChipGroup.jsx Normal file
View File

@ -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 (
<PFChipGroup
{...props}
numChips={numChips}
expandedText={i18n._(t`Show less`)}
collapsedText={i18n._(t`${totalChips - numChips} more`)}
/>
);
}
ChipGroup.propTypes = {
numChips: number.isRequired,
totalChips: number.isRequired,
i18n: shape({}).isRequired,
};
export default withI18n()(ChipGroup);

17
awx/ui_next/src/components/ChipGroup/ChipGroup.test.jsx Normal file
View File

@ -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(
<ChipGroup numChips={5} totalChips={10} />
);
expect(
wrapper
.find('ChipGroup')
.at(1)
.props().collapsedText
).toEqual('5 more');
});
});

1
awx/ui_next/src/components/ChipGroup/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './ChipGroup';

4
awx/ui_next/src/components/Lookup/Lookup.jsx
View File

@ -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) {
<SearchIcon />
</SearchButton>
<ChipHolder className="pf-c-form-control">
<ChipGroup numChips={5}>
<ChipGroup numChips={5} totalChips={items.length}>
{items.map(item =>
renderItemChip({
item,

20
awx/ui_next/src/components/PromptDetail/PromptDetail.jsx
View File

@ -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={
<ChipGroup numChips={5}>
<ChipGroup
numChips={5}
totalChips={overrides.credentials.length}
>
{overrides.credentials.map(cred => (
<CredentialChip
key={cred.id}
@ -258,7 +262,10 @@ function PromptDetail({ i18n, resource, launchConfig = {} }) {
fullWidth
label={i18n._(t`Job Tags`)}
value={
<ChipGroup numChips={5}>
<ChipGroup
numChips={5}
totalChips={overrides.job_tags.split(',').length}
>
{overrides.job_tags.split(',').map(jobTag => (
<Chip key={jobTag} isReadOnly>
{jobTag}
@ -273,7 +280,10 @@ function PromptDetail({ i18n, resource, launchConfig = {} }) {
fullWidth
label={i18n._(t`Skip Tags`)}
value={
<ChipGroup numChips={5}>
<ChipGroup
numChips={5}
totalChips={overrides.skip_tags.split(',').length}
>
{overrides.skip_tags.split(',').map(skipTag => (
<Chip key={skipTag} isReadOnly>
{skipTag}

15
awx/ui_next/src/components/PromptDetail/PromptInventorySourceDetail.jsx
View File

@ -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={
<ChipGroup numChips={5}>
<ChipGroup
numChips={5}
totalChips={source_regions.split(',').length}
>
{source_regions.split(',').map(region => (
<Chip key={region} isReadOnly>
{region}
@ -135,7 +139,10 @@ function PromptInventorySourceDetail({ i18n, resource }) {
fullWidth
label={i18n._(t`Instance Filters`)}
value={
<ChipGroup numChips={5}>
<ChipGroup
numChips={5}
totalChips={instance_filters.split(',').length}
>
{instance_filters.split(',').map(filter => (
<Chip key={filter} isReadOnly>
{filter}
@ -150,7 +157,7 @@ function PromptInventorySourceDetail({ i18n, resource }) {
fullWidth
label={i18n._(t`Only Group By`)}
value={
<ChipGroup numChips={5}>
<ChipGroup numChips={5} totalChips={group_by.split(',').length}>
{group_by.split(',').map(group => (
<Chip key={group} isReadOnly>
{group}

23
awx/ui_next/src/components/PromptDetail/PromptJobTemplateDetail.jsx
View File

@ -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={
<ChipGroup numChips={5}>
<ChipGroup
numChips={5}
totalChips={summary_fields.credentials.length}
>
{summary_fields.credentials.map(cred => (
<CredentialChip key={cred.id} credential={cred} isReadOnly />
))}
@ -187,7 +191,10 @@ function PromptJobTemplateDetail({ i18n, resource }) {
fullWidth
label={i18n._(t`Labels`)}
value={
<ChipGroup numChips={5}>
<ChipGroup
numChips={5}
totalChips={summary_fields.labels.results.length}
>
{summary_fields.labels.results.map(label => (
<Chip key={label.id} isReadOnly>
{label.name}
@ -202,7 +209,7 @@ function PromptJobTemplateDetail({ i18n, resource }) {
fullWidth
label={i18n._(t`Instance Groups`)}
value={
<ChipGroup numChips={5}>
<ChipGroup numChips={5} totalChips={instance_groups.length}>
{instance_groups.map(ig => (
<Chip key={ig.id} isReadOnly>
{ig.name}
@ -217,7 +224,7 @@ function PromptJobTemplateDetail({ i18n, resource }) {
fullWidth
label={i18n._(t`Job Tags`)}
value={
<ChipGroup numChips={5}>
<ChipGroup numChips={5} totalChips={job_tags.split(',').length}>
{job_tags.split(',').map(jobTag => (
<Chip key={jobTag} isReadOnly>
{jobTag}
@ -232,7 +239,7 @@ function PromptJobTemplateDetail({ i18n, resource }) {
fullWidth
label={i18n._(t`Skip Tags`)}
value={
<ChipGroup numChips={5}>
<ChipGroup numChips={5} totalChips={skip_tags.split(',').length}>
{skip_tags.split(',').map(skipTag => (
<Chip key={skipTag} isReadOnly>
{skipTag}

8
awx/ui_next/src/components/PromptDetail/PromptWFJobTemplateDetail.jsx
View File

@ -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={
<ChipGroup numChips={5}>
<ChipGroup
numChips={5}
totalChips={summary_fields.labels.results.length}
>
{summary_fields.labels.results.map(label => (
<Chip key={label.id} isReadOnly>
{label.name}

6
awx/ui_next/src/components/ResourceAccessList/ResourceAccessListItem.jsx
View File

@ -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 {
<Detail
label={i18n._(t`User Roles`)}
value={
<ChipGroup numChips={5}>
<ChipGroup numChips={5} totalChips={userRoles.length}>
{userRoles.map(this.renderChip)}
</ChipGroup>
}
@ -125,7 +125,7 @@ class ResourceAccessListItem extends React.Component {
<Detail
label={i18n._(t`Team Roles`)}
value={
<ChipGroup numChips={5}>
<ChipGroup numChips={5} totalChips={teamRoles.length}>
{teamRoles.map(this.renderChip)}
</ChipGroup>
}

340
awx/ui_next/src/components/ResourceAccessList/__snapshots__/ResourceAccessListItem.test.jsx.snap
View File

@ -88,13 +88,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
fullWidth={false}
label="Team Roles"
value={
<ChipGroup
className=""
collapsedText="\${remaining} more"
defaultIsOpen={false}
expandedText="Show Less"
<WithI18n
numChips={5}
withToolbar={false}
totalChips={1}
>
<Unknown
isReadOnly={false}
@ -102,7 +98,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
>
Member
</Unknown>
</ChipGroup>
</WithI18n>
}
/>
</DetailList>
@ -151,13 +147,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
fullWidth={false}
label="Team Roles"
value={
<ChipGroup
className=""
collapsedText="\${remaining} more"
defaultIsOpen={false}
expandedText="Show Less"
<WithI18n
numChips={5}
withToolbar={false}
totalChips={1}
>
<Unknown
isReadOnly={false}
@ -165,7 +157,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
>
Member
</Unknown>
</ChipGroup>
</WithI18n>
}
/>
</DetailList>
@ -237,13 +229,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
fullWidth={false}
label="Team Roles"
value={
<ChipGroup
className=""
collapsedText="\${remaining} more"
defaultIsOpen={false}
expandedText="Show Less"
<WithI18n
numChips={5}
withToolbar={false}
totalChips={1}
>
<Unknown
isReadOnly={false}
@ -251,7 +239,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
>
Member
</Unknown>
</ChipGroup>
</WithI18n>
}
/>
</DetailList>
@ -644,13 +632,9 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
fullWidth={false}
label="Team Roles"
value={
<ChipGroup
className=""
collapsedText="\${remaining} more"
defaultIsOpen={false}
expandedText="Show Less"
<WithI18n
numChips={5}
withToolbar={false}
totalChips={1}
>
<Unknown
isReadOnly={false}
@ -658,7 +642,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
>
Member
</Unknown>
</ChipGroup>
</WithI18n>
}
>
<Detail__DetailName
@ -769,177 +753,193 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
data-cy={null}
data-pf-content={true}
>
<ChipGroup
className=""
collapsedText="\${remaining} more"
defaultIsOpen={false}
expandedText="Show Less"
<WithI18n
numChips={5}
withToolbar={false}
totalChips={1}
>
<ul
className="pf-c-chip-group"
<I18n
update={true}
withHash={true}
>
<InnerChipGroup
className=""
collapsedText="\${remaining} more"
defaultIsOpen={false}
expandedText="Show Less"
isOpen={false}
<ChipGroup
i18n={"/i18n/"}
numChips={5}
onToggleCollapse={[Function]}
withToolbar={false}
totalChips={1}
>
<Component
component="li"
isReadOnly={false}
key=".$3"
onClick={[Function]}
<ChipGroup
className=""
collapsedText="-4 more"
defaultIsOpen={false}
expandedText="Show less"
numChips={5}
withToolbar={false}
>
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"children": "Member",
"component": "li",
"isReadOnly": false,
"onClick": [Function],
}
}
consumerContext={null}
<ul
className="pf-c-chip-group"
>
<Chip
<InnerChipGroup
className=""
closeBtnAriaLabel="close"
component="li"
isOverflowChip={false}
isReadOnly={false}
onClick={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
tooltipPosition="top"
collapsedText="-4 more"
defaultIsOpen={false}
expandedText="Show less"
isOpen={false}
numChips={5}
onToggleCollapse={[Function]}
withToolbar={false}
>
<GenerateId
prefix="pf-random-id-"
<Component
component="li"
isReadOnly={false}
key=".$3"
onClick={[Function]}
>
<li
className="pf-c-chip"
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"children": "Member",
"component": "li",
"isReadOnly": false,
"onClick": [Function],
}
}
consumerContext={null}
>
<span
className="pf-c-chip__text"
id="pf-random-id-0"
>
Member
</span>
<ChipButton
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
ariaLabel="close"
id="remove_pf-random-id-0"
<Chip
className=""
closeBtnAriaLabel="close"
component="li"
isOverflowChip={false}
isReadOnly={false}
onClick={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
tooltipPosition="top"
>
<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"
<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"
>
<Button
aria-label="close"
<span
className="pf-c-chip__text"
id="pf-random-id-0"
>
Member
</span>
<ChipButton
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
className=""
ariaLabel="close"
id="remove_pf-random-id-0"
onClick={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
variant="plain"
>
<button
aria-disabled={null}
<Component
aria-label="close"
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
className="pf-c-button pf-m-plain"
disabled={false}
className=""
id="remove_pf-random-id-0"
onClick={[Function]}
tabIndex={null}
type="button"
variant="plain"
>
<TimesCircleIcon
aria-hidden="true"
color="currentColor"
noVerticalAlign={false}
size="sm"
title={null}
<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,
}
}
>
<svg
aria-hidden="true"
aria-labelledby={null}
fill="currentColor"
height="1em"
role="img"
style={
<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 {
"verticalAlign": "-0.125em",
"isOuia": false,
"ouiaId": null,
}
}
viewBox="0 0 512 512"
width="1em"
variant="plain"
>
<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>
</Component>
</InnerChipGroup>
</ul>
</ChipGroup>
<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>
</Component>
</InnerChipGroup>
</ul>
</ChipGroup>
</ChipGroup>
</I18n>
</WithI18n>
</dd>
</TextListItem>
</Component>

15
awx/ui_next/src/components/Schedule/ScheduleDetail/ScheduleDetail.jsx
View File

@ -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={
<ChipGroup numChips={5}>
<ChipGroup numChips={5} totalChips={credentials.length}>
{credentials.map(c => (
<CredentialChip key={c.id} credential={c} isReadOnly />
))}
@ -186,7 +187,10 @@ function ScheduleDetail({ schedule, i18n }) {
fullWidth
label={i18n._(t`Job Tags`)}
value={
<ChipGroup numChips={5}>
<ChipGroup
numChips={5}
totalChips={job_tags.split(',').length}
>
{job_tags.split(',').map(jobTag => (
<Chip key={jobTag} isReadOnly>
{jobTag}
@ -201,7 +205,10 @@ function ScheduleDetail({ schedule, i18n }) {
fullWidth
label={i18n._(t`Skip Tags`)}
value={
<ChipGroup numChips={5}>
<ChipGroup
numChips={5}
totalChips={skip_tags.split(',').length}
>
{skip_tags.split(',').map(skipTag => (
<Chip key={skipTag} isReadOnly>
{skipTag}

11
awx/ui_next/src/components/SelectedList/SelectedList.jsx
View File

@ -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 {
<Split>
<SplitLabelItem>{label}</SplitLabelItem>
<SplitItem>
<ChipGroup numChips={5}>
<ChipGroup numChips={5} totalChips={selected.length}>
{selected.map(item =>
renderChip({
item,

13
awx/ui_next/src/components/SelectedList/SelectedList.test.jsx
View File

@ -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('<SelectedList />', () => {
test('initially renders succesfully', () => {
test('initially renders successfully', () => {
const mockSelected = [
{
id: 1,
@ -16,17 +16,18 @@ describe('<SelectedList />', () => {
name: 'bar',
},
];
mount(
const wrapper = mountWithContexts(
<SelectedList
label="Selectedeeee"
selected={mockSelected}
onRemove={() => {}}
/>
);
expect(wrapper.length).toBe(1);
});
test('showOverflow should set showOverflow on ChipGroup', () => {
const wrapper = mount(
const wrapper = mountWithContexts(
<SelectedList label="Selected" selected={[]} onRemove={() => {}} />
);
const chipGroup = wrapper.find(ChipGroup);
@ -42,7 +43,7 @@ describe('<SelectedList />', () => {
name: 'foo',
},
];
const wrapper = mount(
const wrapper = mountWithContexts(
<SelectedList
label="Selected"
selected={mockSelected}

5
awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx
View File

@ -2,13 +2,14 @@ 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, Chip, ChipGroup } from '@patternfly/react-core';
import { Button, Chip } from '@patternfly/react-core';
import { CardBody, CardActionsRow } from '@components/Card';
import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
import { VariablesDetail } from '@components/CodeMirrorInput';
import DeleteButton from '@components/DeleteButton';
import ContentError from '@components/ContentError';
import ContentLoading from '@components/ContentLoading';
import ChipGroup from '@components/ChipGroup';
import { InventoriesAPI } from '@api';
import useRequest from '@util/useRequest';
import { Inventory } from '../../../types';
@ -74,7 +75,7 @@ function InventoryDetail({ inventory, i18n }) {
fullWidth
label={i18n._(t`Instance Groups`)}
value={
<ChipGroup numChips={5}>
<ChipGroup numChips={5} totalChips={instanceGroups.length}>
{instanceGroups.map(ig => (
<Chip key={ig.id} isReadOnly>
{ig.name}

7
awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
View File

@ -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={
<ChipGroup numChips={5}>
<ChipGroup numChips={5} totalChips={credentials.length}>
{credentials.map(c => (
<CredentialChip key={c.id} credential={c} isReadOnly />
))}
@ -228,7 +229,7 @@ function JobDetail({ job, i18n }) {
fullWidth
label={i18n._(t`Labels`)}
value={
<ChipGroup numChips={5}>
<ChipGroup numChips={5} totalChips={labels.results.length}>
{labels.results.map(l => (
<Chip key={l.id} isReadOnly>
{l.name}

5
awx/ui_next/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx
View File

@ -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={
<ChipGroup numChips={5}>
<ChipGroup numChips={5} totalChips={instanceGroups.length}>
{instanceGroups.map(ig => (
<Chip key={ig.id} isReadOnly>
{ig.name}

18
awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
View File

@ -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={
<ChipGroup numChips={5}>
<ChipGroup
numChips={5}
totalChips={summary_fields.credentials.length}
>
{summary_fields.credentials.map(c => (
<CredentialChip key={c.id} credential={c} isReadOnly />
))}
@ -294,7 +297,10 @@ function JobTemplateDetail({ i18n, template }) {
fullWidth
label={i18n._(t`Labels`)}
value={
<ChipGroup numChips={5}>
<ChipGroup
numChips={5}
totalChips={summary_fields.labels.results.length}
>
{summary_fields.labels.results.map(l => (
<Chip key={l.id} isReadOnly>
{l.name}
@ -309,7 +315,7 @@ function JobTemplateDetail({ i18n, template }) {
fullWidth
label={i18n._(t`Instance Groups`)}
value={
<ChipGroup numChips={5}>
<ChipGroup numChips={5} totalChips={instanceGroups.length}>
{instanceGroups.map(ig => (
<Chip key={ig.id} isReadOnly>
{ig.name}
@ -324,7 +330,7 @@ function JobTemplateDetail({ i18n, template }) {
fullWidth
label={i18n._(t`Job Tags`)}
value={
<ChipGroup numChips={5}>
<ChipGroup numChips={5} totalChips={job_tags.split(',').length}>
{job_tags.split(',').map(jobTag => (
<Chip key={jobTag} isReadOnly>
{jobTag}
@ -339,7 +345,7 @@ function JobTemplateDetail({ i18n, template }) {
fullWidth
label={i18n._(t`Skip Tags`)}
value={
<ChipGroup numChips={5}>
<ChipGroup numChips={5} totalChips={skip_tags.split(',').length}>
{skip_tags.split(',').map(skipTag => (
<Chip key={skipTag} isReadOnly>
{skipTag}

2
awx/ui_next/src/screens/Template/Survey/SurveyList.jsx
View File

@ -114,7 +114,7 @@ function SurveyList({
variant="primary"
aria-label={i18n._(t`Preview`)}
>
Preview
{i18n._(t`Preview`)}
</Button>
</DataList>
);

7
awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx
View File

@ -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 && (
<ChipGroup numChips={5}>
<ChipGroup
numChips={5}
totalChips={question.default.split('\n').length}
>
{question.default.split('\n').map(chip => (
<Chip key={chip} isReadOnly>
{chip}

7
awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
View File

@ -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={
<ChipGroup>
<ChipGroup
numChips={3}
totalChips={summary_fields.labels.results.length}
>
{summary_fields.labels.results.map(l => (
<Chip key={l.id} isReadOnly>
{l.name}