Update Org Details UX layout and add show more/less to instance groups field

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 }) => (
   <Chip
     className="awx-c-chip--basic"
+    onClick={onToggle}
+    isOverflowChip={isOverflowChip}
   >
-    {text}
+    {children}
   </Chip>
 );
 
 BasicChip.propTypes = {
-  text: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
 };
 
 export default BasicChip;

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;
   }
 }

src/pages/Organizations/screens/Organization/OrganizationDetail.jsx

@@ -47,9 +47,12 @@ class OrganizationDetail extends Component {
 
     this.state = {
       instanceGroups: [],
+      isToggleOpen: false,
       error: false
     };
 
+    this.showOverflowChipAfter = 5;
+    this.handleChipToggle = this.handleChipToggle.bind(this);
     this.loadInstanceGroups = this.loadInstanceGroups.bind(this);
   }
 
@@ -57,6 +60,12 @@ class OrganizationDetail extends Component {
     this.loadInstanceGroups();
   }
 
+  handleChipToggle = () => {
+    this.setState((prevState) => ({
+      isToggleOpen: !prevState.isToggleOpen
+    }));
+  }
+
   async loadInstanceGroups () {
     const {
       api,
@@ -78,6 +87,7 @@ class OrganizationDetail extends Component {
     const {
       error,
       instanceGroups,
+      isToggleOpen,
     } = this.state;
 
     const {
@@ -91,6 +101,25 @@ class OrganizationDetail extends Component {
       match
     } = this.props;
 
+    const instanceGroupChips = instanceGroups.slice(0, isToggleOpen
+      ? instanceGroups.length : this.showOverflowChipAfter)
+      .map(instanceGroup => (
+        <BasicChip
+          key={instanceGroup.id}
+        >
+          {instanceGroup.name}
+        </BasicChip>
+      ));
+
+    const overflowChip = (instanceGroups.length > this.showOverflowChipAfter) ? (
+      <BasicChip
+        isOverflowChip
+        onToggle={this.handleChipToggle}
+      >
+        {isToggleOpen ? 'Show less' : `${(instanceGroups.length - this.showOverflowChipAfter).toString()} more`}
+      </BasicChip>
+    ) : null;
+
     return (
       <I18n>
         {({ i18n }) => (
@@ -104,24 +133,6 @@ class OrganizationDetail extends Component {
                 label={i18n._(t`Description`)}
                 value={description}
               />
-              {(instanceGroups && instanceGroups.length > 0) && (
-                <TextContent style={detailWrapperStyle}>
-                  <Text
-                    component={TextVariants.h6}
-                    style={detailLabelStyle}
-                  >
-                    <Trans>Instance Groups</Trans>
-                  </Text>
-                  <div style={detailValueStyle}>
-                    {instanceGroups.map(instanceGroup => (
-                      <BasicChip
-                        key={instanceGroup.id}
-                        text={instanceGroup.name}
-                      />
-                    ))}
-                  </div>
-                </TextContent>
-              )}
               <Detail
                 label={i18n._(t`Ansible Environment`)}
                 value={custom_virtualenv}
@@ -134,6 +145,20 @@ class OrganizationDetail extends Component {
                 label={i18n._(t`Last Modified`)}
                 value={modified}
               />
+              {(instanceGroups && instanceGroups.length > 0) && (
+                <TextContent style={{ display: 'flex', gridColumn: '1 / -1' }}>
+                  <Text
+                    component={TextVariants.h6}
+                    style={detailLabelStyle}
+                  >
+                    <Trans>Instance Groups</Trans>
+                  </Text>
+                  <div style={detailValueStyle}>
+                    {instanceGroupChips}
+                    {overflowChip}
+                  </div>
+                </TextContent>
+              )}
             </div>
             <div style={{ display: 'flex', flexDirection: 'row-reverse', marginTop: '20px' }}>
               <Link to={`/organizations/${match.params.id}/edit`}>