Implement DefaultQueryParamProvider.

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

@@ -17,9 +17,9 @@
 import { renderHook } from 'wrappedTestingLibrary/hooks';
 import { OrderedMap } from 'immutable';
 import * as React from 'react';
-import { useQueryParam, QueryParamProvider } from 'use-query-params';
-import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
+import { useQueryParam } from 'use-query-params';
 import { MemoryRouter } from 'react-router-dom';
+import DefaultQueryParamProvider from 'src/routing/DefaultQueryParamProvider';
 
 import { asMock } from 'helpers/mocking';
 
@@ -33,9 +33,9 @@ jest.mock('use-query-params', () => ({
 describe('useUrlQueryFilters', () => {
   const wrapper = ({ children }: { children: React.ReactNode }) => (
     <MemoryRouter>
-      <QueryParamProvider adapter={ReactRouter6Adapter}>
+      <DefaultQueryParamProvider>
         {children}
-      </QueryParamProvider>
+      </DefaultQueryParamProvider>
     </MemoryRouter>
   );
 

graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfilesList.test.tsx

@@ -16,8 +16,6 @@
  */
 import * as React from 'react';
 import { render, screen, fireEvent, within } from 'wrappedTestingLibrary';
-import { QueryParamProvider } from 'use-query-params';
-import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
 
 import asMock from 'helpers/mocking/AsMock';
 import useUserLayoutPreferences from 'components/common/EntityDataTable/hooks/useUserLayoutPreferences';
@@ -28,6 +26,7 @@ import useFieldTypesForMappings from 'views/logic/fieldactions/ChangeFieldType/h
 import { profile1, attributes, profile2 } from 'fixtures/indexSetFieldTypeProfiles';
 import ProfilesList from 'components/indices/IndexSetFieldTypeProfiles/ProfilesList';
 import useFetchEntities from 'components/common/PaginatedEntityTable/useFetchEntities';
+import DefaultQueryParamProvider from 'routing/DefaultQueryParamProvider';
 
 const getData = (list = [profile1]) => (
   {
@@ -40,11 +39,11 @@ const getData = (list = [profile1]) => (
 );
 
 const renderIndexSetFieldTypeProfilesList = () => render(
-  <QueryParamProvider adapter={ReactRouter6Adapter}>
+  <DefaultQueryParamProvider>
     <TestStoreProvider>
       <ProfilesList />
     </TestStoreProvider>,
-  </QueryParamProvider>,
+  </DefaultQueryParamProvider>,
 );
 
 jest.mock('routing/useParams', () => jest.fn());

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

@@ -16,8 +16,7 @@
  */
 import * as React from 'react';
 import { render, screen, fireEvent, within } from 'wrappedTestingLibrary';
-import { useQueryParam, QueryParamProvider } from 'use-query-params';
-import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
+import { useQueryParam } from 'use-query-params';
 
 import { MockStore } from 'helpers/mocking';
 import useParams from 'routing/useParams';
@@ -40,6 +39,7 @@ import useProfile from 'components/indices/IndexSetFieldTypeProfiles/hooks/usePr
 import useIndexProfileWithMappingsByField
   from 'components/indices/IndexSetFieldTypes/hooks/useIndexProfileWithMappingsByField';
 import useProfileOptions from 'components/indices/IndexSetFieldTypeProfiles/hooks/useProfileOptions';
+import DefaultQueryParamProvider from 'routing/DefaultQueryParamProvider';
 
 const getData = (list = [defaultField]) => (
   {
@@ -52,11 +52,11 @@ const getData = (list = [defaultField]) => (
 );
 
 const renderIndexSetFieldTypesList = () => render(
-  <QueryParamProvider adapter={ReactRouter6Adapter}>
+  <DefaultQueryParamProvider>
     <TestStoreProvider>
       <IndexSetFieldTypesList />
     </TestStoreProvider>,
-  </QueryParamProvider>,
+  </DefaultQueryParamProvider>,
 );
 
 jest.mock('stores/indices/IndexSetsStore', () => ({

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

@@ -16,8 +16,6 @@
  */
 import * as React from 'react';
 import { render, screen, fireEvent } from 'wrappedTestingLibrary';
-import { QueryParamProvider } from 'use-query-params';
-import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
 import selectEvent from 'react-select-event';
 
 import useSetIndexSetProfileMutation from 'components/indices/IndexSetFieldTypes/hooks/useSetIndexSetProfileMutation';
@@ -27,6 +25,7 @@ import SetProfileModal from 'components/indices/IndexSetFieldTypes/SetProfileMod
 import useProfileOptions from 'components/indices/IndexSetFieldTypeProfiles/hooks/useProfileOptions';
 import useRemoveProfileFromIndexMutation
   from 'components/indices/IndexSetFieldTypes/hooks/useRemoveProfileFromIndexMutation';
+import DefaultQueryParamProvider from 'routing/DefaultQueryParamProvider';
 
 const selectItem = async (select: HTMLElement, option: string | RegExp) => {
   selectEvent.openMenu(select);
@@ -35,9 +34,9 @@ const selectItem = async (select: HTMLElement, option: string | RegExp) => {
 };
 
 const renderModal = (currentProfile = 'profile-id-111') => render(
-  <QueryParamProvider adapter={ReactRouter6Adapter}>
+  <DefaultQueryParamProvider>
     <SetProfileModal currentProfile={currentProfile} onClose={() => {}} show />
-  </QueryParamProvider>,
+  </DefaultQueryParamProvider>,
 );
 
 jest.mock('routing/useParams', () => jest.fn());

graylog2-web-interface/src/components/streams/StreamsOverview/StreamsOverview.test.tsx

@@ -17,8 +17,6 @@
 import React from 'react';
 import { render, screen, within } from 'wrappedTestingLibrary';
 import userEvent from '@testing-library/user-event';
-import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
-import { QueryParamProvider } from 'use-query-params';
 
 import { indexSets } from 'fixtures/indexSets';
 import { asMock, MockStore } from 'helpers/mocking';
@@ -28,6 +26,7 @@ import useUserLayoutPreferences from 'components/common/EntityDataTable/hooks/us
 import { layoutPreferences } from 'fixtures/entityListLayoutPreferences';
 import useStreamRuleTypes from 'components/streams/hooks/useStreamRuleTypes';
 import { streamRuleTypes } from 'fixtures/streamRuleTypes';
+import DefaultQueryParamProvider from 'routing/DefaultQueryParamProvider';
 
 import StreamsOverview from './StreamsOverview';
 
@@ -77,9 +76,9 @@ const paginatedStreams = (exampleStream = stream) => ({
 
 describe('StreamsOverview', () => {
   const renderSut = () => render(
-    <QueryParamProvider adapter={ReactRouter6Adapter}>
+    <DefaultQueryParamProvider>
       <StreamsOverview indexSets={indexSets} />
-    </QueryParamProvider>,
+    </DefaultQueryParamProvider>,
   );
 
   beforeEach(() => {

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

@@ -16,8 +16,7 @@
  */
 import * as React from 'react';
 import { render, screen, fireEvent, within } from 'wrappedTestingLibrary';
-import { useQueryParam, QueryParamProvider } from 'use-query-params';
-import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
+import { useQueryParam } from 'use-query-params';
 
 import { MockStore } from 'helpers/mocking';
 import asMock from 'helpers/mocking/AsMock';
@@ -29,6 +28,7 @@ import useViewsPlugin from 'views/test/testViewsPlugin';
 import IndexSetFieldTypesPage from 'pages/IndexSetFieldTypesPage';
 import useFieldTypesForMappings from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings';
 import { overriddenIndexField, defaultField, attributes } from 'fixtures/indexSetFieldTypes';
+import DefaultQueryParamProvider from 'routing/DefaultQueryParamProvider';
 
 const getData = (list = [defaultField]) => (
   {
@@ -41,11 +41,11 @@ const getData = (list = [defaultField]) => (
 );
 
 const renderIndexSetFieldTypesPage = () => render(
-  <QueryParamProvider adapter={ReactRouter6Adapter}>
+  <DefaultQueryParamProvider>
     <TestStoreProvider>
       <IndexSetFieldTypesPage />
     </TestStoreProvider>,
-  </QueryParamProvider>,
+  </DefaultQueryParamProvider>,
 );
 
 jest.mock('views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings', () => jest.fn());

graylog2-web-interface/src/routing/App.tsx

@@ -18,8 +18,6 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import chroma from 'chroma-js';
 import { Outlet } from 'react-router-dom';
-import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
-import { QueryParamProvider } from 'use-query-params';
 
 import { ScratchpadProvider } from 'contexts/ScratchpadProvider';
 import { Icon, Spinner } from 'components/common';
@@ -34,6 +32,7 @@ import HotkeysModalContainer from 'components/hotkeys/HotkeysModalContainer';
 import PerspectivesProvider from 'components/perspectives/contexts/PerspectivesProvider';
 import PageContextProviders from 'components/page/contexts/PageContextProviders';
 import { singleton } from 'logic/singleton';
+import DefaultQueryParamProvider from 'routing/DefaultQueryParamProvider';
 
 const AppLayout = styled.div`
   display: flex;
@@ -66,7 +65,7 @@ const ScrollToHint = styled.div(({ theme }) => css`
 `);
 
 const App = () => (
-  <QueryParamProvider adapter={ReactRouter6Adapter}>
+  <DefaultQueryParamProvider>
     <CurrentUserContext.Consumer>
       {(currentUser) => {
         if (!currentUser) {
@@ -103,7 +102,7 @@ const App = () => (
         );
       }}
     </CurrentUserContext.Consumer>
-  </QueryParamProvider>
+  </DefaultQueryParamProvider>
 );
 
 export default singleton('components.App', () => App);

graylog2-web-interface/src/routing/DefaultQueryParamProvider.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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 * as React from 'react';
+import type { PropsWithChildren } from 'react';
+import { QueryParamProvider } from 'use-query-params';
+import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
+
+const DefaultQueryParamProvider = ({ children }: PropsWithChildren) => (
+  <QueryParamProvider adapter={ReactRouter6Adapter}>
+    {children}
+  </QueryParamProvider>
+);
+
+export default DefaultQueryParamProvider;

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

@@ -16,15 +16,15 @@
  */
 import React from 'react';
 import { render, screen } from 'wrappedTestingLibrary';
-import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
-import { useQueryParam, QueryParamProvider } from 'use-query-params';
+import { useQueryParam } from 'use-query-params';
 
 import View from 'views/logic/views/View';
 import Search from 'views/logic/search/Search';
 import { asMock } from 'helpers/mocking';
 import useFetchEntities from 'components/common/PaginatedEntityTable/useFetchEntities';
 import useUserLayoutPreferences from 'components/common/EntityDataTable/hooks/useUserLayoutPreferences';
 import { layoutPreferences } from 'fixtures/entityListLayoutPreferences';
+import DefaultQueryParamProvider from 'routing/DefaultQueryParamProvider';
 
 import DashboardsOverview from './DashboardsOverview';
 
@@ -98,9 +98,9 @@ const loadDashboardsResponse = (count = 1) => {
 
 describe('DashboardsOverview', () => {
   const SUT = () => (
-    <QueryParamProvider adapter={ReactRouter6Adapter}>
+    <DefaultQueryParamProvider>
       <DashboardsOverview />
-    </QueryParamProvider>
+    </DefaultQueryParamProvider>
   );
 
   beforeEach(() => {

graylog2-web-interface/src/views/pages/DashboardsPage.test.tsx

@@ -16,8 +16,8 @@
  */
 import * as React from 'react';
 import { render, screen } from 'wrappedTestingLibrary';
-import { QueryParamProvider } from 'use-query-params';
-import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
+
+import DefaultQueryParamProvider from 'routing/DefaultQueryParamProvider';
 
 import DashboardsPage from './DashboardsPage';
 
@@ -41,9 +41,9 @@ jest.mock('routing/Routes', () => ({
 describe('DashboardsPage', () => {
   it('should render header and list', async () => {
     render(
-      <QueryParamProvider adapter={ReactRouter6Adapter}>
+      <DefaultQueryParamProvider>
         <DashboardsPage />
-      </QueryParamProvider>);
+      </DefaultQueryParamProvider>);
 
     await screen.findByRole('heading', { name: /dashboards/i });
     await screen.findByText('No dashboards have been found.');