Implement abstraction for use-query-params usage.

graylog2-web-interface/src/components/common/EntityFilters/hooks/useUrlQueryFilters.test.tsx

@@ -17,16 +17,16 @@
 import { renderHook } from 'wrappedTestingLibrary/hooks';
 import { OrderedMap } from 'immutable';
 import * as React from 'react';
-import { useQueryParam } from 'use-query-params';
 import { MemoryRouter } from 'react-router-dom';
 
+import { useQueryParam } from 'routing/QueryParams';
 import DefaultQueryParamProvider from 'routing/DefaultQueryParamProvider';
 import { asMock } from 'helpers/mocking';
 
 import useUrlQueryFilters from './useUrlQueryFilters';
 
-jest.mock('use-query-params', () => ({
-  ...jest.requireActual('use-query-params'),
+jest.mock('routing/QueryParams', () => ({
+  ...jest.requireActual('routing/QueryParams'),
   useQueryParam: jest.fn(),
 }));
 

graylog2-web-interface/src/components/common/EntityFilters/hooks/useUrlQueryFilters.ts

@@ -14,10 +14,10 @@
  * along with this program. If not, see
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
-import { useQueryParam, ArrayParam } from 'use-query-params';
 import { useMemo, useCallback } from 'react';
 import { OrderedMap } from 'immutable';
 
+import { useQueryParam, ArrayParam } from 'routing/QueryParams';
 import type { UrlQueryFilters } from 'components/common/EntityFilters/types';
 
 const useUrlQueryFilters = (): [UrlQueryFilters, (filters: UrlQueryFilters) => void] => {

graylog2-web-interface/src/components/common/PaginatedEntityTable/PaginatedEntityTable.tsx

@@ -16,9 +16,9 @@
  */
 import * as React from 'react';
 import { useMemo, useCallback } from 'react';
-import { useQueryParam, StringParam } from 'use-query-params';
 import styled from 'styled-components';
 
+import { useQueryParam, StringParam } from 'routing/QueryParams';
 import useTableLayout from 'components/common/EntityDataTable/hooks/useTableLayout';
 import usePaginationQueryParameter from 'hooks/usePaginationQueryParameter';
 import useUpdateUserLayoutPreferences from 'components/common/EntityDataTable/hooks/useUpdateUserLayoutPreferences';

graylog2-web-interface/src/components/datanode/migrations/RemoteReindexingMigration.test.tsx

@@ -16,17 +16,17 @@
  */
 import React from 'react';
 import { render, screen } from 'wrappedTestingLibrary';
-import { useQueryParam } from 'use-query-params';
 
+import { useQueryParam } from 'routing/QueryParams';
 import type { MigrationState, MigrationStateItem } from 'components/datanode/Types';
 import { asMock } from 'helpers/mocking';
 
 import RemoteReindexingMigration from './RemoteReindexingMigration';
 
 import { MIGRATION_STATE } from '../Constants';
 
-jest.mock('use-query-params', () => ({
-  ...jest.requireActual('use-query-params'),
+jest.mock('routing/QueryParams', () => ({
+  ...jest.requireActual('routing/QueryParams'),
   useQueryParam: jest.fn(),
 }));
 

graylog2-web-interface/src/components/datanode/migrations/remoteReindexing/RemoteReindexRunning.tsx

@@ -18,8 +18,8 @@ import * as React from 'react';
 import { useState, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import type { ColorVariant } from '@graylog/sawmill';
-import { useQueryParam, StringParam } from 'use-query-params';
 
+import { useQueryParam, StringParam } from 'routing/QueryParams';
 import { ConfirmDialog } from 'components/common';
 import { Alert, BootstrapModalWrapper, Button, Modal } from 'components/bootstrap';
 import useSendTelemetry from 'logic/telemetry/useSendTelemetry';

graylog2-web-interface/src/components/indices/IndexSetFieldTypes/IndexSetFieldTypesList.test.tsx

@@ -16,8 +16,8 @@
  */
 import * as React from 'react';
 import { render, screen, fireEvent, within } from 'wrappedTestingLibrary';
-import { useQueryParam } from 'use-query-params';
 
+import { useQueryParam } from 'routing/QueryParams';
 import { MockStore } from 'helpers/mocking';
 import useParams from 'routing/useParams';
 import asMock from 'helpers/mocking/AsMock';
@@ -80,8 +80,8 @@ jest.mock('components/indices/IndexSetFieldTypeProfiles/hooks/useProfile');
 jest.mock('components/indices/IndexSetFieldTypes/hooks/useIndexProfileWithMappingsByField');
 jest.mock('components/indices/IndexSetFieldTypeProfiles/hooks/useProfileOptions');
 
-jest.mock('use-query-params', () => ({
-  ...jest.requireActual('use-query-params'),
+jest.mock('routing/QueryParams', () => ({
+  ...jest.requireActual('routing/QueryParams'),
   useQueryParam: jest.fn(),
 }));
 

graylog2-web-interface/src/pages/IndexSetFieldTypesPage.test.tsx

@@ -16,8 +16,8 @@
  */
 import * as React from 'react';
 import { render, screen, fireEvent, within } from 'wrappedTestingLibrary';
-import { useQueryParam } from 'use-query-params';
 
+import { useQueryParam } from 'routing/QueryParams';
 import { MockStore } from 'helpers/mocking';
 import asMock from 'helpers/mocking/AsMock';
 import useFetchEntities from 'components/common/PaginatedEntityTable/useFetchEntities';
@@ -53,8 +53,8 @@ jest.mock('components/common/PaginatedEntityTable/useFetchEntities', () => jest.
 
 jest.mock('components/common/EntityDataTable/hooks/useUserLayoutPreferences');
 
-jest.mock('use-query-params', () => ({
-  ...jest.requireActual('use-query-params'),
+jest.mock('routing/QueryParams', () => ({
+  ...jest.requireActual('routing/QueryParams'),
   useQueryParam: jest.fn(),
 }));
 

graylog2-web-interface/src/routing/QueryParams.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import { useQueryParams, useQueryParam, StringParam, NumberParam, ArrayParam } from 'use-query-params';
+
+const parseNestedObject = (fieldQueryString: string) => {
+  try {
+    return JSON.parse(decodeURIComponent(fieldQueryString));
+  } catch (_error) {
+    return undefined;
+  }
+};
+
+const NestedObjectParam = {
+  encode: (object: Object | null | undefined) => encodeURIComponent(JSON.stringify(object)),
+  decode: (objectStr: string | null | undefined) => parseNestedObject(objectStr),
+};
+
+export { useQueryParams, useQueryParam, StringParam, NumberParam, NestedObjectParam, ArrayParam };

graylog2-web-interface/src/views/components/dashboard/DashboardsOverview/DashboardsOverview.test.tsx

@@ -16,8 +16,8 @@
  */
 import React from 'react';
 import { render, screen } from 'wrappedTestingLibrary';
-import { useQueryParam } from 'use-query-params';
 
+import { useQueryParam } from 'routing/QueryParams';
 import View from 'views/logic/views/View';
 import Search from 'views/logic/search/Search';
 import { asMock } from 'helpers/mocking';
@@ -43,8 +43,8 @@ jest.mock('views/stores/ViewManagementStore', () => ({
   },
 }));
 
-jest.mock('use-query-params', () => ({
-  ...jest.requireActual('use-query-params'),
+jest.mock('routing/QueryParams', () => ({
+  ...jest.requireActual('routing/QueryParams'),
   useQueryParam: jest.fn(),
 }));