From ee864b2df318c50b74acc7b67b9496fef60d12ce Mon Sep 17 00:00:00 2001 From: Keith Grant Date: Thu, 12 Sep 2019 14:11:49 -0700 Subject: [PATCH 1/3] clear Lookup query params when lookup is closed --- awx/ui_next/src/components/Lookup/Lookup.jsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/awx/ui_next/src/components/Lookup/Lookup.jsx b/awx/ui_next/src/components/Lookup/Lookup.jsx index 5d2dab89ba..a90ff851ae 100644 --- a/awx/ui_next/src/components/Lookup/Lookup.jsx +++ b/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 }; From 26e320582ae16a41cd6e49fca699de4994fa3012 Mon Sep 17 00:00:00 2001 From: Keith Grant Date: Thu, 12 Sep 2019 14:14:49 -0700 Subject: [PATCH 2/3] namespace qs params for each lookup separately --- awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx | 1 + awx/ui_next/src/components/Lookup/InventoriesLookup.jsx | 1 + awx/ui_next/src/screens/Template/shared/ProjectLookup.jsx | 1 + 3 files changed, 3 insertions(+) diff --git a/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx b/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx index b348356db1..f44c9e5144 100644 --- a/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx +++ b/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={[ { diff --git a/awx/ui_next/src/components/Lookup/InventoriesLookup.jsx b/awx/ui_next/src/components/Lookup/InventoriesLookup.jsx index f4ef84771d..c0e0dd04a3 100644 --- a/awx/ui_next/src/components/Lookup/InventoriesLookup.jsx +++ b/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 }, { diff --git a/awx/ui_next/src/screens/Template/shared/ProjectLookup.jsx b/awx/ui_next/src/screens/Template/shared/ProjectLookup.jsx index 1d4113cec9..fd38b5079e 100644 --- a/awx/ui_next/src/screens/Template/shared/ProjectLookup.jsx +++ b/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" /> ); From e854b179e41973fba12012b52d77be123e3485ca Mon Sep 17 00:00:00 2001 From: Keith Grant Date: Thu, 12 Sep 2019 15:48:17 -0700 Subject: [PATCH 3/3] add test for Lookup clearing QS params --- awx/ui_next/src/components/Lookup/Lookup.jsx | 2 +- .../src/components/Lookup/Lookup.test.jsx | 29 +++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/awx/ui_next/src/components/Lookup/Lookup.jsx b/awx/ui_next/src/components/Lookup/Lookup.jsx index a90ff851ae..f168953bb5 100644 --- a/awx/ui_next/src/components/Lookup/Lookup.jsx +++ b/awx/ui_next/src/components/Lookup/Lookup.jsx @@ -186,7 +186,7 @@ class Lookup extends React.Component { const { history } = this.props; const parts = history.location.search.replace(/^\?/, '').split('&'); const ns = this.qsConfig.namespace; - const otherParts = parts.filter(param => !param.startsWith(`${ns}.`)) + const otherParts = parts.filter(param => !param.startsWith(`${ns}.`)); history.push(`${history.location.pathname}?${otherParts.join('&')}`); } diff --git a/awx/ui_next/src/components/Lookup/Lookup.test.jsx b/awx/ui_next/src/components/Lookup/Lookup.test.jsx index 186f231f11..09a44a77b8 100644 --- a/awx/ui_next/src/components/Lookup/Lookup.test.jsx +++ b/awx/ui_next/src/components/Lookup/Lookup.test.jsx @@ -359,4 +359,33 @@ describe('', () => { 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'); + }); });