From 268d50a339e3b6aff9f354d932eb523ce53822ea Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Wed, 3 Apr 2019 12:24:24 -0400
Subject: [PATCH 1/2] Update Org Details UX layout and add show more/less to
 instance groups field

---
 src/components/BasicChip/BasicChip.jsx        |  8 ++-
 src/components/BasicChip/basicChip.scss       | 10 ++-
 .../Organization/OrganizationDetail.jsx       | 61 +++++++++++++------
 3 files changed, 57 insertions(+), 22 deletions(-)

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 }) => (
   <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;
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..2f4bc6dc04 100644
--- a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
+++ b/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`}>

From 868ad511584b97a125067169795c47b35f96f376 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Fri, 5 Apr 2019 09:58:19 -0400
Subject: [PATCH 2/2] Set static value to const variable

---
 .../screens/Organization/OrganizationDetail.jsx           | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
index 2f4bc6dc04..9784d56910 100644
--- a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
+++ b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
@@ -51,7 +51,6 @@ class OrganizationDetail extends Component {
       error: false
     };
 
-    this.showOverflowChipAfter = 5;
     this.handleChipToggle = this.handleChipToggle.bind(this);
     this.loadInstanceGroups = this.loadInstanceGroups.bind(this);
   }
@@ -100,9 +99,10 @@ class OrganizationDetail extends Component {
       },
       match
     } = this.props;
+    const showOverflowChipAfter = 5;
 
     const instanceGroupChips = instanceGroups.slice(0, isToggleOpen
-      ? instanceGroups.length : this.showOverflowChipAfter)
+      ? instanceGroups.length : showOverflowChipAfter)
       .map(instanceGroup => (
         <BasicChip
           key={instanceGroup.id}
@@ -111,12 +111,12 @@ class OrganizationDetail extends Component {
         </BasicChip>
       ));
 
-    const overflowChip = (instanceGroups.length > this.showOverflowChipAfter) ? (
+    const overflowChip = (instanceGroups.length > showOverflowChipAfter) ? (
       <BasicChip
         isOverflowChip
         onToggle={this.handleChipToggle}
       >
-        {isToggleOpen ? 'Show less' : `${(instanceGroups.length - this.showOverflowChipAfter).toString()} more`}
+        {isToggleOpen ? 'Show less' : `${(instanceGroups.length - showOverflowChipAfter).toString()} more`}
       </BasicChip>
     ) : null;