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);
+  // }
+}