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

__tests__/components/Lookup.test.jsx

@@ -11,6 +11,7 @@ describe('<Lookup />', () => {
         lookup_header="Foo Bar"
         lookupChange={() => { }}
         data={mockData}
+        selected={[]}
       />
     );
   });
@@ -22,6 +23,7 @@ describe('<Lookup />', () => {
           lookup_header="Foo Bar"
           lookupChange={() => { }}
           data={mockData}
+          selected={[]}
         />
       </I18nProvider>
     );
@@ -38,6 +40,7 @@ describe('<Lookup />', () => {
           lookup_header="Foo Bar"
           lookupChange={() => { }}
           data={mockData}
+          selected={[]}
         />
       </I18nProvider>
     );
@@ -55,6 +58,7 @@ describe('<Lookup />', () => {
           lookup_header="Foo Bar"
           lookupChange={() => { }}
           data={mockData}
+          selected={[]}
         />
       </I18nProvider>
     );
@@ -71,6 +75,7 @@ describe('<Lookup />', () => {
           lookup_header="Foo Bar"
           lookupChange={() => { }}
           data={mockData}
+          selected={[]}
         />
       </I18nProvider>
     );

__tests__/components/SelectedList.test.jsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import SelectedList from '../../src/components/SelectedList';
+
+describe('<SelectedList />', () => {
+  test('initially renders succesfully', () => {
+    const mockSelected = [
+      {
+        id: 1,
+        name: 'foo'
+      }, {
+        id: 2,
+        name: 'bar'
+      }
+    ];
+    mount(
+      <SelectedList
+        label="Selected"
+        selected={mockSelected}
+        showOverflowAfter={5}
+        onRemove={() => {}}
+      />
+    );
+  });
+  test('showOverflow should set showOverflow state to true', () => {
+    const wrapper = mount(
+      <SelectedList
+        label="Selected"
+        selected={[]}
+        showOverflowAfter={5}
+        onRemove={() => {}}
+      />
+    );
+    expect(wrapper.state('showOverflow')).toBe(false);
+    wrapper.instance().showOverflow();
+    expect(wrapper.state('showOverflow')).toBe(true);
+  });
+  test('Overflow chip should be shown when more selected.length exceeds showOverflowAfter', () => {
+    const mockSelected = [
+      {
+        id: 1,
+        name: 'foo'
+      }, {
+        id: 2,
+        name: 'bar'
+      }, {
+        id: 3,
+        name: 'foobar'
+      }, {
+        id: 4,
+        name: 'baz'
+      }, {
+        id: 5,
+        name: 'foobaz'
+      }
+    ];
+    const wrapper = mount(
+      <SelectedList
+        label="Selected"
+        selected={mockSelected}
+        showOverflowAfter={3}
+        onRemove={() => {}}
+      />
+    );
+    expect(wrapper.find('Chip').length).toBe(4);
+    expect(wrapper.find('[isOverflowChip=true]').length).toBe(1);
+  });
+  test('Clicking overflow chip should show all chips', () => {
+    const mockSelected = [
+      {
+        id: 1,
+        name: 'foo'
+      }, {
+        id: 2,
+        name: 'bar'
+      }, {
+        id: 3,
+        name: 'foobar'
+      }, {
+        id: 4,
+        name: 'baz'
+      }, {
+        id: 5,
+        name: 'foobaz'
+      }
+    ];
+    const wrapper = mount(
+      <SelectedList
+        label="Selected"
+        selected={mockSelected}
+        showOverflowAfter={3}
+        onRemove={() => {}}
+      />
+    );
+    expect(wrapper.find('Chip').length).toBe(4);
+    expect(wrapper.find('[isOverflowChip=true]').length).toBe(1);
+    wrapper.find('[isOverflowChip=true] button').simulate('click');
+    expect(wrapper.find('Chip').length).toBe(5);
+    expect(wrapper.find('[isOverflowChip=true]').length).toBe(0);
+  });
+  test('Clicking remove on chip calls onRemove callback prop with correct params', () => {
+    const onRemove = jest.fn();
+    const mockSelected = [
+      {
+        id: 1,
+        name: 'foo'
+      }
+    ];
+    const wrapper = mount(
+      <SelectedList
+        label="Selected"
+        selected={mockSelected}
+        showOverflowAfter={3}
+        onRemove={onRemove}
+      />
+    );
+    wrapper.find('.pf-c-chip button').first().simulate('click');
+    expect(onRemove).toBeCalledWith({
+      id: 1,
+      name: 'foo'
+    });
+  });
+});

__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx

@@ -92,4 +92,85 @@ describe('<OrganizationAdd />', () => {
       done();
     });
   });
+
+  test('onSelectChange successfully sets custom_virtualenv state', () => {
+    const wrapper = mount(
+      <MemoryRouter>
+        <OrganizationAdd api={{}} />
+      </MemoryRouter>
+    ).find('OrganizationAdd');
+    wrapper.instance().onSelectChange('foobar');
+    expect(wrapper.state('custom_virtualenv')).toBe('foobar');
+  });
+
+  test('onLookupChange successfully adds/removes row from selectedInstanceGroups state', () => {
+    const wrapper = mount(
+      <MemoryRouter>
+        <OrganizationAdd api={{}} />
+      </MemoryRouter>
+    ).find('OrganizationAdd');
+    wrapper.setState({ results: [{
+      id: 1,
+      name: 'foo'
+    }] });
+    wrapper.instance().onLookupChange({
+      id: 1,
+      name: 'foo'
+    });
+    expect(wrapper.state('results')).toEqual([{
+      id: 1,
+      name: 'foo',
+      isChecked: true
+    }]);
+    expect(wrapper.state('selectedInstanceGroups')).toEqual([{
+      id: 1,
+      name: 'foo'
+    }]);
+    wrapper.instance().onLookupChange({
+      id: 1,
+      name: 'foo'
+    });
+    expect(wrapper.state('results')).toEqual([{
+      id: 1,
+      name: 'foo',
+      isChecked: false
+    }]);
+    expect(wrapper.state('selectedInstanceGroups')).toEqual([]);
+  });
+
+  test('onSubmit posts instance groups from selectedInstanceGroups', async () => {
+    const createOrganizationFn = jest.fn().mockResolvedValue({
+      data: {
+        id: 1,
+        name: 'mock org',
+        related: {
+          instance_groups: '/api/v2/organizations/1/instance_groups'
+        }
+      }
+    });
+    const createInstanceGroupsFn = jest.fn().mockResolvedValue('done');
+    const api = {
+      createOrganization: createOrganizationFn,
+      createInstanceGroups: createInstanceGroupsFn
+    };
+    const wrapper = mount(
+      <MemoryRouter>
+        <OrganizationAdd api={api} />
+      </MemoryRouter>
+    ).find('OrganizationAdd');
+    wrapper.setState({
+      name: 'mock org',
+      selectedInstanceGroups: [{
+        id: 1,
+        name: 'foo'
+      }]
+    });
+    await wrapper.instance().onSubmit();
+    expect(createOrganizationFn).toHaveBeenCalledWith({
+      custom_virtualenv: '',
+      description: '',
+      name: 'mock org'
+    });
+    expect(createInstanceGroupsFn).toHaveBeenCalledWith('/api/v2/organizations/1/instance_groups', 1);
+  });
 });

package-lock.json

@@ -1311,22 +1311,27 @@
       "integrity": "sha512-sIRfo/tk4NSnaRwHIHLUf4XoqzNNa4MMa8ZWivzzSfdZ5pCbgvZtyEUqKnQAEH6zuaCM9S8HyhxcNXnm/xaYaQ=="
     },
     "@patternfly/react-core": {
-      "version": "1.43.5",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-1.43.5.tgz",
-      "integrity": "sha512-xO37/q5BJEdGvAoPllm/gbcwCtW7t0Ae7mKm5UU7d4i5bycEjd0UwJacYxCA6GFTwxN5kzn61XEpAUPY49U3pA==",
+      "version": "1.49.5",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-1.49.5.tgz",
+      "integrity": "sha512-bb62fkL8nB6F1cUd/szfpLOIAjaa5HBzAoOa4Vc1AjdagwZ6w4MsU7xBPtC0Sp937CpGckRGiVOf0XHWEiSL2g==",
       "requires": {
-        "@patternfly/react-icons": "^2.9.5",
+        "@patternfly/react-icons": "^2.10.1",
         "@patternfly/react-styles": "^2.3.0",
-        "@patternfly/react-tokens": "^1.0.0",
+        "@patternfly/react-tokens": "^1.10.0",
         "@tippy.js/react": "^1.1.1",
         "exenv": "^1.2.2",
         "focus-trap-react": "^4.0.1"
       },
       "dependencies": {
         "@patternfly/react-icons": {
-          "version": "2.9.5",
-          "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-2.9.5.tgz",
-          "integrity": "sha512-5e/BD2ER5jifUjUgbIilApOfhVldlAjhQdh7EwH/M3M+qzIb+2qKxV/xQ6hWD3AA71lcYIxvPMMHgdWIAl5oPQ=="
+          "version": "2.10.1",
+          "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-2.10.1.tgz",
+          "integrity": "sha512-d3uWfQQeCgCLel2DVlF1SSlyOI0Z12tT1YjSLDE091E2uCB582DUQQ4HfmuV51nH5aTXg+en35QG7JP5jzYlvA=="
+        },
+        "@patternfly/react-tokens": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-1.10.0.tgz",
+          "integrity": "sha512-jslQPSRgwbSXAGszA22prGSVye6ri3sRFkaF3BUdWBa8fO6Z2MDFB59x4d6BGK9iW7S+3U/Qkden6myP1CgXdA=="
         }
       }
     },
@@ -13808,9 +13813,9 @@
       "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY="
     },
     "tabbable": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-3.1.1.tgz",
-      "integrity": "sha512-583MHIOwictf7+zbxqO/L5fBqMN6Li4SJ1XTKQA9WzHRA7c2BB+D+Ny7Y6kGqU2u+rHK59+oRzrBvMU53aZz+A=="
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-3.1.2.tgz",
+      "integrity": "sha512-wjB6puVXTYO0BSFtCmWQubA/KIn7Xvajw0x0l6eJUudMG/EAiJvIUnyNX6xO4NpGrJ16lbD0eUseB9WxW0vlpQ=="
     },
     "table": {
       "version": "5.1.0",
@@ -13927,9 +13932,9 @@
       }
     },
     "tippy.js": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-3.3.0.tgz",
-      "integrity": "sha512-2gIQg57EFSCBqE97NZbakSkGBJF0GzdOhx/lneGQGMzJiJyvbpyKgNy4l4qofq0nEbXACl7C/jW/ErsdQa21aQ==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-3.4.1.tgz",
+      "integrity": "sha512-ZiyGP9WZyCCcjxKM4G88cm4U1r1ytjeMDGa5FSKPaPzwc/3yZJVZsb1ffcmqUMCpryRp5LNxRNGKLzbs11sb/Q==",
       "requires": {
         "popper.js": "^1.14.6"
       }

package.json

@@ -48,7 +48,7 @@
   "dependencies": {
     "@lingui/react": "^2.7.2",
     "@patternfly/patternfly-next": "^1.0.84",
-    "@patternfly/react-core": "^1.43.5",
+    "@patternfly/react-core": "^1.49.5",
     "@patternfly/react-icons": "^2.9.1",
     "@patternfly/react-styles": "^2.3.0",
     "@patternfly/react-tokens": "^1.9.0",

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>