Merge pull request #4733 from keithjgrant/4612-lookup-param-bugs

Prevent Lookup search filters from affecting other Lookups on page

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx

@@ -40,6 +40,7 @@ class InstanceGroupsLookup extends React.Component {
             value={value}
             onLookupSave={onChange}
             getItems={getInstanceGroups}
+            qsNamespace="instance-group"
             multiple
             columns={[
               {

awx/ui_next/src/components/Lookup/InventoriesLookup.jsx

@@ -38,6 +38,7 @@ class InventoriesLookup extends React.Component {
           onLookupSave={onChange}
           getItems={getInventories}
           required={required}
+          qsNamespace="inventory"
           columns={[
             { name: i18n._(t`Name`), key: 'name', isSortable: true },
             {

awx/ui_next/src/components/Lookup/Lookup.jsx

@@ -64,7 +64,7 @@ class Lookup extends React.Component {
       count: 0,
       error: null,
     };
-    this.qsConfig = getQSConfig('lookup', {
+    this.qsConfig = getQSConfig(props.qsNamespace, {
       page: 1,
       page_size: 5,
       order_by: props.sortedColumnKey,
@@ -73,6 +73,7 @@ class Lookup extends React.Component {
     this.toggleSelected = this.toggleSelected.bind(this);
     this.saveModal = this.saveModal.bind(this);
     this.getData = this.getData.bind(this);
+    this.clearQSParams = this.clearQSParams.bind(this);
   }
 
   componentDidMount() {
@@ -163,6 +164,8 @@ class Lookup extends React.Component {
         lookupSelectedItems = multiple ? [...value] : [value];
       }
       this.setState({ lookupSelectedItems });
+    } else {
+      this.clearQSParams();
     }
     this.setState(prevState => ({
       isModalOpen: !prevState.isModalOpen,
@@ -179,6 +182,14 @@ class Lookup extends React.Component {
     this.handleModalToggle();
   }
 
+  clearQSParams() {
+    const { history } = this.props;
+    const parts = history.location.search.replace(/^\?/, '').split('&');
+    const ns = this.qsConfig.namespace;
+    const otherParts = parts.filter(param => !param.startsWith(`${ns}.`));
+    history.push(`${history.location.pathname}?${otherParts.join('&')}`);
+  }
+
   render() {
     const {
       isModalOpen,
@@ -303,6 +314,7 @@ Lookup.propTypes = {
   sortedColumnKey: string.isRequired,
   multiple: bool,
   required: bool,
+  qsNamespace: string,
 };
 
 Lookup.defaultProps = {
@@ -312,6 +324,7 @@ Lookup.defaultProps = {
   value: null,
   multiple: false,
   required: false,
+  qsNamespace: 'lookup',
 };
 
 export { Lookup as _Lookup };

awx/ui_next/src/components/Lookup/Lookup.test.jsx

@@ -359,4 +359,33 @@ describe('<Lookup />', () => {
     expect(getItems).toHaveBeenCalledTimes(2);
     done();
   });
+
+  test('should clear its query params when closed', async () => {
+    mockData = [{ name: 'foo', id: 1, isChecked: false }];
+    const history = createMemoryHistory({
+      initialEntries: ['/organizations/add?inventory.name=foo&bar=baz'],
+    });
+    wrapper = mountWithContexts(
+      <_Lookup
+        multiple
+        name="foo"
+        lookupHeader="Foo Bar"
+        onLookupSave={() => {}}
+        value={mockData}
+        columns={mockColumns}
+        sortedColumnKey="name"
+        getItems={() => {}}
+        location={{ history }}
+        history={history}
+        qsNamespace="inventory"
+        i18n={{ _: val => val.toString() }}
+      />
+    );
+    wrapper
+      .find('InputGroup Button')
+      .at(0)
+      .invoke('onClick')();
+    wrapper.find('Modal').invoke('onClose')();
+    expect(history.location.search).toEqual('?bar=baz');
+  });
 });

awx/ui_next/src/screens/Template/shared/ProjectLookup.jsx

@@ -51,6 +51,7 @@ class ProjectLookup extends React.Component {
           getItems={loadProjects}
           required={required}
           sortedColumnKey="name"
+          qsNamespace="project"
         />
       </FormGroup>
     );