diff --git a/src/components/BasicChip/BasicChip.jsx b/src/components/BasicChip/BasicChip.jsx index 753922bbb0..625cdb0ff4 100644 --- a/src/components/BasicChip/BasicChip.jsx +++ b/src/components/BasicChip/BasicChip.jsx @@ -4,16 +4,18 @@ import PropTypes from 'prop-types'; import { Chip } from '@patternfly/react-core'; import './basicChip.scss'; -const BasicChip = ({ text }) => ( +const BasicChip = ({ children, onToggle, isOverflowChip }) => ( - {text} + {children} ); BasicChip.propTypes = { - text: PropTypes.string.isRequired, + children: PropTypes.node.isRequired, }; export default BasicChip; diff --git a/src/components/BasicChip/basicChip.scss b/src/components/BasicChip/basicChip.scss index 8cea76d049..63c4d1d9ea 100644 --- a/src/components/BasicChip/basicChip.scss +++ b/src/components/BasicChip/basicChip.scss @@ -4,7 +4,15 @@ margin-right: 10px; margin-bottom: 10px; - .pf-c-button { + &.pf-c-chip { + margin-top: 0; + } + + &.pf-m-overflow { + padding: 0; + } + + &:not(.pf-m-overflow) .pf-c-button { display: none; } } diff --git a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx index ca8bfc78cd..9784d56910 100644 --- a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx +++ b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx @@ -47,9 +47,11 @@ class OrganizationDetail extends Component { this.state = { instanceGroups: [], + isToggleOpen: false, error: false }; + this.handleChipToggle = this.handleChipToggle.bind(this); this.loadInstanceGroups = this.loadInstanceGroups.bind(this); } @@ -57,6 +59,12 @@ class OrganizationDetail extends Component { this.loadInstanceGroups(); } + handleChipToggle = () => { + this.setState((prevState) => ({ + isToggleOpen: !prevState.isToggleOpen + })); + } + async loadInstanceGroups () { const { api, @@ -78,6 +86,7 @@ class OrganizationDetail extends Component { const { error, instanceGroups, + isToggleOpen, } = this.state; const { @@ -90,6 +99,26 @@ class OrganizationDetail extends Component { }, match } = this.props; + const showOverflowChipAfter = 5; + + const instanceGroupChips = instanceGroups.slice(0, isToggleOpen + ? instanceGroups.length : showOverflowChipAfter) + .map(instanceGroup => ( + + {instanceGroup.name} + + )); + + const overflowChip = (instanceGroups.length > showOverflowChipAfter) ? ( + + {isToggleOpen ? 'Show less' : `${(instanceGroups.length - showOverflowChipAfter).toString()} more`} + + ) : null; return ( @@ -104,24 +133,6 @@ class OrganizationDetail extends Component { label={i18n._(t`Description`)} value={description} /> - {(instanceGroups && instanceGroups.length > 0) && ( - - - Instance Groups - -
- {instanceGroups.map(instanceGroup => ( - - ))} -
-
- )} + {(instanceGroups && instanceGroups.length > 0) && ( + + + Instance Groups + +
+ {instanceGroupChips} + {overflowChip} +
+
+ )}