Pulls in latest pf-react. Adds selected list component to org instance groups lookup

src/components/Lookup/Lookup.jsx

@@ -8,9 +8,13 @@ import {
   Toolbar,
   ToolbarGroup,
 } from '@patternfly/react-core';
+import { I18n } from '@lingui/react';
+import { t } from '@lingui/macro';
 
 import CheckboxListItem from '../ListItem';
 
+import SelectedList from '../SelectedList';
+
 class Lookup extends React.Component {
   constructor (props) {
     super(props);
@@ -28,9 +32,9 @@ class Lookup extends React.Component {
     this.handleModalToggle();
   }
 
-  onChecked (_, evt) {
+  onChecked (row) {
     const { lookupChange } = this.props;
-    lookupChange(evt.target.value);
+    lookupChange(row);
   }
 
   onRemove (evt) {
@@ -57,7 +61,7 @@ class Lookup extends React.Component {
 
   render () {
     const { isModalOpen } = this.state;
-    const { data, lookupHeader } = this.props;
+    const { data, lookupHeader, selected } = this.props;
     return (
       <div className="pf-c-input-group awx-lookup">
         <Button className="pf-c-input-group__text" aria-label="search" id="search" onClick={this.onLookup}>
@@ -77,10 +81,22 @@ class Lookup extends React.Component {
                 itemId={i.id}
                 name={i.name}
                 isSelected={i.isChecked}
-                onSelect={this.onChecked}
+                onSelect={() => this.onChecked(i)}
               />
             ))}
           </ul>
+          {selected.length > 0 && (
+            <I18n>
+              {({ i18n }) => (
+                <SelectedList
+                  label={i18n._(t`Selected`)}
+                  selected={selected}
+                  showOverflowAfter={5}
+                  onRemove={this.onChecked}
+                />
+              )}
+            </I18n>
+          )}
           <ActionGroup className="at-align-right">
             <Toolbar>
               <ToolbarGroup>

src/components/SelectedList/SelectedList.jsx

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import {
+  Chip
+} from '@patternfly/react-core';
+
+class SelectedList extends Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      showOverflow: false
+    };
+
+    this.showOverflow = this.showOverflow.bind(this);
+  }
+
+  showOverflow = () => {
+    this.setState({ showOverflow: true });
+  };
+
+  render () {
+    const { label, selected, showOverflowAfter, onRemove } = this.props;
+    const { showOverflow } = this.state;
+    return (
+      <div className="awx-selectedList">
+        <div className="pf-l-split">
+          <div className="pf-l-split__item pf-u-align-items-center">
+            {label}
+          </div>
+          <div className="pf-l-split__item">
+            <div className="pf-c-chip-group">
+              {selected
+                .slice(0, showOverflow ? selected.length : showOverflowAfter)
+                .map(selectedItem => (
+                  <Chip
+                    key={selectedItem.id}
+                    onClick={() => onRemove(selectedItem)}
+                  >
+                    {selectedItem.name}
+                  </Chip>
+                ))}
+              {(
+                !showOverflow
+                && selected.length > showOverflowAfter
+              ) && (
+                <Chip
+                  isOverflowChip
+                  onClick={() => this.showOverflow()}
+                >
+                  {`${(selected.length - showOverflowAfter).toString()} more`}
+                </Chip>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default SelectedList;

src/components/SelectedList/index.js

@@ -0,0 +1,3 @@
+import SelectedList from './SelectedList';
+
+export default SelectedList;

src/components/SelectedList/styles.scss

@@ -0,0 +1,34 @@
+.awx-selectedList {
+  --awx-selectedList--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+  --awx-selectedList--BorderColor: #d7d7d7;
+  --awx-selectedList--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --awx-selectedList--FontSize: var(--pf-c-chip__text--FontSize);
+
+  
+  .pf-l-split {
+    padding-top: 20px;
+    padding-bottom: 10px;
+    border-bottom: var(--awx-selectedList--BorderWidth) solid var(--awx-selectedList--BorderColor);
+  }
+  .pf-l-split__item:first-child {
+    display: flex;
+    white-space: nowrap;
+    height: 30px;
+  }
+  .pf-l-split__item:not(:last-child):after {
+    content: "";
+    background-color: #d7d7d7;
+    width: 1px;
+    height: 30px;
+    display: block;
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+  .pf-c-chip {
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+  // .pf-c-button {
+  //   font-size: var(--awx-selectedList--FontSize);
+  // }
+}

src/index.jsx

@@ -18,6 +18,7 @@ import '@patternfly/patternfly-next/patternfly.css';
 import './app.scss';
 import './components/Pagination/styles.scss';
 import './components/DataListToolbar/styles.scss';
+import './components/SelectedList/styles.scss';
 
 import APIClient from './api';
 

src/pages/Organizations/screens/OrganizationAdd.jsx

@@ -45,9 +45,9 @@ class OrganizationAdd extends React.Component {
     name: '',
     description: '',
     results: [],
-    instance_groups: [],
     custom_virtualenv: '',
     error: '',
+    selectedInstanceGroups: []
   };
 
   async componentDidMount () {
@@ -57,7 +57,7 @@ class OrganizationAdd extends React.Component {
       const results = format(data);
       this.setState({ results });
     } catch (error) {
-      this.setState({ getInstanceGroupsError: error });
+      this.setState({ error });
     }
   }
 
@@ -65,36 +65,56 @@ class OrganizationAdd extends React.Component {
     this.setState({ custom_virtualenv: value });
   }
 
-  onLookupChange (id) {
-    const { results } = this.state;
-    const selected = { ...results };
-    const index = id - 1;
-    selected[index].isChecked = !selected[index].isChecked;
-    this.setState({ selected });
+  onLookupChange (row) {
+    const { results, selectedInstanceGroups } = this.state;
+    const selectedIndex = selectedInstanceGroups
+      .findIndex(instanceGroup => instanceGroup.id === row.id);
+    const resultsIndex = results.findIndex(instanceGroup => instanceGroup.id === row.id);
+    if (selectedIndex > -1) {
+      // Remove it from the list of selected instance groups
+      selectedInstanceGroups.splice(selectedIndex, 1);
+      if (resultsIndex > -1) {
+        results[resultsIndex].isChecked = false;
+      }
+      this.setState({ selectedInstanceGroups, results });
+    } else {
+      // Add it to the list of selected instance groups
+      if (resultsIndex > -1) {
+        results[resultsIndex].isChecked = true;
+      }
+      this.setState(prevState => ({
+        results,
+        selectedInstanceGroups: [...prevState.selectedInstanceGroups, row]
+      }));
+    }
   }
 
   async onSubmit () {
     const { api } = this.props;
-    const data = Object.assign({}, { ...this.state });
-    const { results } = this.state;
+    const { name, description, custom_virtualenv } = this.state;
+    const data = {
+      name,
+      description,
+      custom_virtualenv
+    };
+    const { selectedInstanceGroups } = this.state;
     try {
       const { data: response } = await api.createOrganization(data);
       const url = response.related.instance_groups;
-      const selected = results.filter(group => group.isChecked);
       try {
-        if (selected.length > 0) {
-          selected.forEach(async (select) => {
+        if (selectedInstanceGroups.length > 0) {
+          selectedInstanceGroups.forEach(async (select) => {
             await api.createInstanceGroups(url, select.id);
           });
         }
       } catch (err) {
-        this.setState({ createInstanceGroupsError: err });
+        this.setState({ error: err });
       } finally {
         this.resetForm();
         this.onSuccess(response.id);
       }
     } catch (err) {
-      this.setState({ onSubmitError: err });
+      this.setState({ error: err });
     }
   }
 
@@ -123,7 +143,14 @@ class OrganizationAdd extends React.Component {
   }
 
   render () {
-    const { name, results, description, custom_virtualenv } = this.state;
+    const {
+      name,
+      results,
+      description,
+      custom_virtualenv,
+      selectedInstanceGroups,
+      error
+    } = this.state;
     const enabled = name.length > 0; // TODO: add better form validation
 
     return (
@@ -159,6 +186,7 @@ class OrganizationAdd extends React.Component {
                     lookupHeader="Instance Groups"
                     lookupChange={this.onLookupChange}
                     data={results}
+                    selected={selectedInstanceGroups}
                   />
                 </FormGroup>
                 <ConfigContext.Consumer>
@@ -182,6 +210,7 @@ class OrganizationAdd extends React.Component {
                   </ToolbarGroup>
                 </Toolbar>
               </ActionGroup>
+              { error ? <div>error</div> : '' }
             </Form>
           </CardBody>
         </Card>