diff --git a/awx/ui_next/src/components/ListHeader/ListHeader.jsx b/awx/ui_next/src/components/ListHeader/ListHeader.jsx index d24d3899ba..b974f1d410 100644 --- a/awx/ui_next/src/components/ListHeader/ListHeader.jsx +++ b/awx/ui_next/src/components/ListHeader/ListHeader.jsx @@ -9,7 +9,7 @@ import { parseQueryString, mergeParams, removeParams, - replaceNamespacedParams, + updateQueryString, } from '../../util/qs'; import { QSConfig, SearchColumns, SortColumns } from '../../types'; @@ -38,7 +38,7 @@ class ListHeader extends React.Component { handleSearch(key, value) { const { location, qsConfig } = this.props; const params = parseQueryString(qsConfig, location.search); - const qs = replaceNamespacedParams(qsConfig, location.search, { + const qs = updateQueryString(qsConfig, location.search, { ...mergeParams(params, { [key]: value }), page: 1, }); @@ -47,7 +47,7 @@ class ListHeader extends React.Component { handleReplaceSearch(key, value) { const { location, qsConfig } = this.props; - const qs = replaceNamespacedParams(qsConfig, location.search, { + const qs = updateQueryString(qsConfig, location.search, { [key]: value, }); this.pushHistoryState(qs); @@ -59,11 +59,7 @@ class ListHeader extends React.Component { const updatedParams = removeParams(qsConfig, oldParams, { [key]: value, }); - const qs = replaceNamespacedParams( - qsConfig, - location.search, - updatedParams - ); + const qs = updateQueryString(qsConfig, location.search, updatedParams); this.pushHistoryState(qs); } @@ -75,13 +71,13 @@ class ListHeader extends React.Component { }); delete oldParams.page_size; delete oldParams.order_by; - const qs = replaceNamespacedParams(qsConfig, location.search, oldParams); + const qs = updateQueryString(qsConfig, location.search, oldParams); this.pushHistoryState(qs); } handleSort(key, order) { const { location, qsConfig } = this.props; - const qs = replaceNamespacedParams(qsConfig, location.search, { + const qs = updateQueryString(qsConfig, location.search, { order_by: order === 'ascending' ? key : `-${key}`, page: null, }); diff --git a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx index 6a30d821b0..74a0596de1 100644 --- a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx +++ b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx @@ -13,7 +13,7 @@ import ContentLoading from '../ContentLoading'; import Pagination from '../Pagination'; import DataListToolbar from '../DataListToolbar'; -import { parseQueryString, replaceNamespacedParams } from '../../util/qs'; +import { parseQueryString, updateQueryString } from '../../util/qs'; import { QSConfig, SearchColumns, SortColumns } from '../../types'; @@ -46,22 +46,22 @@ function PaginatedDataList({ }; const handleSetPage = (event, pageNumber) => { - const encodedParams = replaceNamespacedParams(qsConfig, search, { + const qs = updateQueryString(qsConfig, search, { page: pageNumber, }); - pushHistoryState(encodedParams); + pushHistoryState(qs); }; const handleSetPageSize = (event, pageSize, page) => { - const encodedParams = replaceNamespacedParams(qsConfig, search, { + const qs = updateQueryString(qsConfig, search, { page_size: pageSize, page, }); - pushHistoryState(encodedParams); + pushHistoryState(qs); }; - const pushHistoryState = encodedParams => { - history.push(encodedParams ? `${pathname}?${encodedParams}` : pathname); + const pushHistoryState = qs => { + history.push(qs ? `${pathname}?${qs}` : pathname); }; const searchColumns = toolbarSearchColumns.length diff --git a/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx b/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx index 368c3eac23..230a61705b 100644 --- a/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx +++ b/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx @@ -3,7 +3,7 @@ import React from 'react'; import { useLocation, useHistory } from 'react-router-dom'; import { Thead, Tr, Th as PFTh } from '@patternfly/react-table'; import styled from 'styled-components'; -import { parseQueryString, replaceNamespacedParams } from '../../util/qs'; +import { parseQueryString, updateQueryString } from '../../util/qs'; const Th = styled(PFTh)` --pf-c-table--cell--Overflow: initial; @@ -21,15 +21,11 @@ export default function HeaderRow({ const params = parseQueryString(qsConfig, location.search); const onSort = (key, order) => { - const encodedParams = replaceNamespacedParams(qsConfig, location.search, { + const qs = updateQueryString(qsConfig, location.search, { order_by: order === 'asc' ? key : `-${key}`, page: null, }); - history.push( - encodedParams - ? `${location.pathname}?${encodedParams}` - : location.pathname - ); + history.push(qs ? `${location.pathname}?${qs}` : location.pathname); }; const sortKey = params.order_by?.replace('-', ''); diff --git a/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx b/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx index d73082162a..7fd76a207d 100644 --- a/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx +++ b/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx @@ -14,7 +14,7 @@ import Pagination from '../Pagination'; import DataListToolbar from '../DataListToolbar'; import LoadingSpinner from '../LoadingSpinner'; -import { parseQueryString, replaceNamespacedParams } from '../../util/qs'; +import { parseQueryString, updateQueryString } from '../../util/qs'; import { QSConfig, SearchColumns } from '../../types'; function PaginatedTable({ @@ -38,23 +38,23 @@ function PaginatedTable({ const { search, pathname } = useLocation(); const history = useHistory(); - const pushHistoryState = encodedParams => { - history.push(encodedParams ? `${pathname}?${encodedParams}` : pathname); + const pushHistoryState = qs => { + history.push(qs ? `${pathname}?${qs}` : pathname); }; const handleSetPage = (event, pageNumber) => { - const encodedParams = replaceNamespacedParams(qsConfig, search, { + const qs = updateQueryString(qsConfig, search, { page: pageNumber, }); - pushHistoryState(encodedParams); + pushHistoryState(qs); }; const handleSetPageSize = (event, pageSize, page) => { - const encodedParams = replaceNamespacedParams(qsConfig, search, { + const qs = updateQueryString(qsConfig, search, { page_size: pageSize, page, }); - pushHistoryState(encodedParams); + pushHistoryState(qs); }; const searchColumns = toolbarSearchColumns.length diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/useWsInventories.js b/awx/ui_next/src/screens/Inventory/InventoryList/useWsInventories.js index c975100906..b595cdf028 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryList/useWsInventories.js +++ b/awx/ui_next/src/screens/Inventory/InventoryList/useWsInventories.js @@ -1,6 +1,6 @@ import { useState, useEffect } from 'react'; import { useLocation, useHistory } from 'react-router-dom'; -import { parseQueryString, replaceNamespacedParams } from '../../../util/qs'; +import { parseQueryString, updateQueryString } from '../../../util/qs'; import useWebsocket from '../../../util/useWebsocket'; import useThrottle from '../../../util/useThrottle'; @@ -86,10 +86,10 @@ export default function useWsInventories( ) { // We've deleted the last inventory on this page so we'll // try to navigate back to the previous page - const newParams = replaceNamespacedParams(qsConfig, location.search, { + const qs = updateQueryString(qsConfig, location.search, { page: params.page - 1, }); - history.push(`${location.pathname}?${newParams}`); + history.push(`${location.pathname}?${qs}`); return; } diff --git a/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx b/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx index e4282e9922..dfcdc90178 100644 --- a/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx +++ b/awx/ui_next/src/screens/Job/JobOutput/JobOutput.jsx @@ -43,7 +43,7 @@ import { mergeParams, removeParams, getQSConfig, - replaceNamespacedParams, + updateQueryString, } from '../../../util/qs'; import useIsMounted from '../../../util/useIsMounted'; @@ -589,7 +589,7 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) { const handleSearch = (key, value) => { const params = parseQueryString(QS_CONFIG, location.search); - const qs = replaceNamespacedParams( + const qs = updateQueryString( QS_CONFIG, location.search, mergeParams(params, { [key]: value }) @@ -598,7 +598,7 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) { }; const handleReplaceSearch = (key, value) => { - const qs = replaceNamespacedParams(QS_CONFIG, location.search, { + const qs = updateQueryString(QS_CONFIG, location.search, { [key]: value, }); pushHistoryState(qs); @@ -609,11 +609,7 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) { const updatedParams = removeParams(QS_CONFIG, oldParams, { [key]: value, }); - const qs = replaceNamespacedParams( - QS_CONFIG, - location.search, - updatedParams - ); + const qs = updateQueryString(QS_CONFIG, location.search, updatedParams); pushHistoryState(qs); }; @@ -622,7 +618,7 @@ function JobOutput({ job, eventRelatedSearchableKeys, eventSearchableKeys }) { Object.keys(oldParams).forEach(key => { oldParams[key] = null; }); - const qs = replaceNamespacedParams(QS_CONFIG, location.search, oldParams); + const qs = updateQueryString(QS_CONFIG, location.search, oldParams); pushHistoryState(qs); }; diff --git a/awx/ui_next/src/util/qs.js b/awx/ui_next/src/util/qs.js index a5e0005626..f3eaaa6cd1 100644 --- a/awx/ui_next/src/util/qs.js +++ b/awx/ui_next/src/util/qs.js @@ -262,10 +262,10 @@ export function replaceParams(oldParams, newParams) { * @param {object} qs config object for namespacing params, filtering defaults * @param {string} the url query string to update * @param {object} namespaced params to add or update. use null to indicate - * a param should be deleted from the query string + * a param that should be deleted from the query string * @return {string} url query string */ -export function replaceNamespacedParams(config, queryString, newParams) { +export function updateQueryString(config, queryString, newParams) { const oldParams = parseQueryString(config, queryString); const updatedParams = replaceParams(oldParams, newParams); const nonNamespacedParams = parseQueryString({}, queryString); diff --git a/awx/ui_next/src/util/qs.test.js b/awx/ui_next/src/util/qs.test.js index 5c0d8ed1b6..aa90f3ed3b 100644 --- a/awx/ui_next/src/util/qs.test.js +++ b/awx/ui_next/src/util/qs.test.js @@ -8,7 +8,7 @@ import { _addDefaultsToObject, mergeParams, replaceParams, - replaceNamespacedParams, + updateQueryString, } from './qs'; describe('qs (qs.js)', () => { @@ -851,7 +851,7 @@ describe('qs (qs.js)', () => { }); }); - describe('replaceNamespacedParams', () => { + describe('updateQueryString', () => { const config = { namespace: 'template', defaultParams: { page: 1, page_size: 5, order_by: 'name' }, @@ -863,7 +863,7 @@ describe('qs (qs.js)', () => { const newParams = { page: 3, }; - expect(replaceNamespacedParams(config, query, newParams)).toEqual( + expect(updateQueryString(config, query, newParams)).toEqual( 'template.name__icontains=workflow&template.page=3' ); }); @@ -873,7 +873,7 @@ describe('qs (qs.js)', () => { const newParams = { or__type: 'job_template', }; - expect(replaceNamespacedParams(config, query, newParams)).toEqual( + expect(updateQueryString(config, query, newParams)).toEqual( 'template.name__icontains=workflow&template.or__type=job_template&template.page=2' ); }); @@ -883,7 +883,7 @@ describe('qs (qs.js)', () => { const newParams = { page: 3, }; - expect(replaceNamespacedParams(config, query, newParams)).toEqual( + expect(updateQueryString(config, query, newParams)).toEqual( 'foo=bar&template.name__icontains=workflow&template.page=3' ); }); @@ -894,7 +894,7 @@ describe('qs (qs.js)', () => { page: 3, name__icontains: null, }; - expect(replaceNamespacedParams(config, query, newParams)).toEqual( + expect(updateQueryString(config, query, newParams)).toEqual( 'template.page=3' ); }); @@ -905,20 +905,20 @@ describe('qs (qs.js)', () => { page: 3, page_size: 5, }; - expect(replaceNamespacedParams(config, query, newParams)).toEqual( + expect(updateQueryString(config, query, newParams)).toEqual( 'template.page=3' ); }); // This fix needed after we're confident refactoring components - // to use replaceNamespacedParams provides equivalent functionality + // to use updateQueryString provides equivalent functionality test.skip('should not alter params of other namespaces', () => { const query = 'template.name__icontains=workflow&template.page=2&credential.page=3'; const newParams = { page: 3, }; - expect(replaceNamespacedParams(config, query, newParams)).toEqual( + expect(updateQueryString(config, query, newParams)).toEqual( 'template.name__icontains=workflow&template.page=3&credential.page=3' ); }); diff --git a/awx/ui_next/src/util/useRequest.js b/awx/ui_next/src/util/useRequest.js index e9392b3238..54ffb9d6dd 100644 --- a/awx/ui_next/src/util/useRequest.js +++ b/awx/ui_next/src/util/useRequest.js @@ -1,6 +1,6 @@ import { useEffect, useState, useCallback } from 'react'; import { useLocation, useHistory } from 'react-router-dom'; -import { parseQueryString, replaceNamespacedParams } from './qs'; +import { parseQueryString, updateQueryString } from './qs'; import useIsMounted from './useIsMounted'; /* @@ -107,10 +107,10 @@ export function useDeleteItems( } const params = parseQueryString(qsConfig, location.search); if (params.page > 1 && allItemsSelected) { - const newParams = replaceNamespacedParams(qsConfig, location.search, { + const qs = updateQueryString(qsConfig, location.search, { page: params.page - 1, }); - history.push(`${location.pathname}?${newParams}`); + history.push(`${location.pathname}?${qs}`); } else { fetchItems(); }