Fixes #37112 - Remove query-string dependency (Katello#11025)

* Fixes #37112 - Remove query-string dependency
* Refs #37112 - remove unsupported ouiaId

package.json

@@ -51,7 +51,6 @@
     "angular": "1.8.2",
     "bootstrap-select": "1.13.18",
     "ngreact": "^0.5.0",
-    "query-string": "^6.1.0",
     "react-bootstrap": "^0.32.1",
     "use-deep-compare-effect": "^1.6.1"
   }

webpack/components/Content/ContentTable.js

@@ -20,7 +20,6 @@ const ContentTable = ({ content, tableSchema, onPaginationChange }) => {
       loadingText={__('Loading')}
     >
       <Table
-        ouiaId="content-table-table"
         columns={tableSchema}
         rows={results}
         pagination={pagination}

webpack/components/Content/__tests__/__snapshots__/ContentTable.test.js.snap

@@ -15,7 +15,6 @@ exports[`Content Table should render and contain appropriate components 1`] = `
     }
     itemCount={2}
     onPaginationChange={[Function]}
-    ouiaId="content-table-table"
     pagination={Object {}}
     rows={
       Array [

webpack/scenes/ModuleStreams/ModuleStreamsPage.js

@@ -1,59 +1,53 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import qs from 'query-string';
+import { useUrlParams } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { orgId } from '../../services/api';
 import TableSchema from '../ModuleStreams/ModuleStreamsTableSchema';
 import GenericContentPage from '../../components/Content/GenericContentPage';
 
-class ModuleStreamsPage extends Component {
-  constructor(props) {
-    super(props);
+const ModuleStreamsPage = (props) => {
+  const { searchParam } = useUrlParams();
+  const [searchQuery, setSearchQuery] = useState(searchParam || '');
+  const { getModuleStreams } = props;
 
-    const queryParams = qs.parse(this.props.location.search);
-    this.state = {
-      searchQuery: queryParams.search || '',
-    };
-  }
-
-  componentDidMount() {
-    this.props.getModuleStreams({
-      search: this.state.searchQuery,
+  useEffect(() => {
+    getModuleStreams({
+      search: searchQuery,
     });
-  }
+  }, [getModuleStreams, searchQuery]);
 
-  onPaginationChange = (pagination) => {
-    this.props.getModuleStreams({
+  const onPaginationChange = (pagination) => {
+    props.getModuleStreams({
       ...pagination,
     });
   };
 
-  onSearch = (search) => {
-    this.props.getModuleStreams({ search });
+  const onSearch = (search) => {
+    props.getModuleStreams({ search });
   };
 
-  updateSearchQuery = (searchQuery) => {
-    this.setState({ searchQuery });
+  const updateSearchQuery = (newSearchQuery) => {
+    setSearchQuery(newSearchQuery);
   };
 
-  render() {
-    const { moduleStreams } = this.props;
-    return (
-      <GenericContentPage
-        header={__('Module Streams')}
-        content={moduleStreams}
-        tableSchema={TableSchema}
-        onSearch={this.onSearch}
-        autocompleteEndpoint="/katello/api/v2/module_streams"
-        autocompleteQueryParams={{ organization_id: orgId() }}
-        bookmarkController="katello_module_streams"
-        updateSearchQuery={this.updateSearchQuery}
-        initialInputValue={this.state.searchQuery}
-        onPaginationChange={this.onPaginationChange}
-      />
-    );
-  }
-}
+  const { moduleStreams } = props;
+  return (
+    <GenericContentPage
+      header={__('Module Streams')}
+      content={moduleStreams}
+      tableSchema={TableSchema}
+      onSearch={onSearch}
+      autocompleteEndpoint="/katello/api/v2/module_streams"
+      autocompleteQueryParams={{ organization_id: orgId() }}
+      bookmarkController="katello_module_streams"
+      updateSearchQuery={updateSearchQuery}
+      initialInputValue={searchQuery}
+      onPaginationChange={onPaginationChange}
+    />
+  );
+};
+
 
 ModuleStreamsPage.propTypes = {
   location: PropTypes.shape({

webpack/scenes/ModuleStreams/__tests__/ModuleStreamPage.test.js

@@ -1,19 +1,21 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
+import * as hooks from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
 import ModuleStreamsPage from '../ModuleStreamsPage';
 import GenericContentPage from '../../../components/Content/GenericContentPage';
 
 describe('Module streams page', () => {
   it('should render and contain appropiate components', async () => {
     const moduleStreams = {};
-    const mockLocation = { search: '' };
+    jest.spyOn(hooks, 'useUrlParams').mockImplementation(() => ({
+      searchParam: '',
+    }));
     const getModuleStreams = () => {};
 
     const wrapper = shallow(<ModuleStreamsPage
       moduleStreams={moduleStreams}
       getModuleStreams={getModuleStreams}
-      location={mockLocation}
     />);
 
     expect(toJson(wrapper)).toMatchSnapshot();

webpack/scenes/ModuleStreams/__tests__/__snapshots__/ModuleStreamsTable.test.js.snap

@@ -88,7 +88,6 @@ exports[`Module streams table should render and contain appropiate components 1`
     }
     itemCount={0}
     onPaginationChange={[Function]}
-    ouiaId="content-table-table"
     pagination={Object {}}
     rows={Array []}
   />