diff --git a/graylog2-web-interface/src/components/common/EntityFilters/hooks/useUrlQueryFilters.test.tsx b/graylog2-web-interface/src/components/common/EntityFilters/hooks/useUrlQueryFilters.test.tsx index 1b50c78f1cea..16d73b25c02a 100644 --- a/graylog2-web-interface/src/components/common/EntityFilters/hooks/useUrlQueryFilters.test.tsx +++ b/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 }) => ( - + {children} - + ); diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfilesList.test.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfilesList.test.tsx index 52ee05e555ec..55fce130a735 100644 --- a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfilesList.test.tsx +++ b/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( - + , - , + , ); jest.mock('routing/useParams', () => jest.fn()); diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/IndexSetFieldTypesList.test.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/IndexSetFieldTypesList.test.tsx index f61825c10790..d7bf5a9d5157 100644 --- a/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/IndexSetFieldTypesList.test.tsx +++ b/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( - + , - , + , ); jest.mock('stores/indices/IndexSetsStore', () => ({ diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/SetProfileModal.test.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/SetProfileModal.test.tsx index 55e9de9394c9..06ec2062d318 100644 --- a/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/SetProfileModal.test.tsx +++ b/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( - + {}} show /> - , + , ); jest.mock('routing/useParams', () => jest.fn()); diff --git a/graylog2-web-interface/src/components/streams/StreamsOverview/StreamsOverview.test.tsx b/graylog2-web-interface/src/components/streams/StreamsOverview/StreamsOverview.test.tsx index becbc209569a..40fe20adb9ca 100644 --- a/graylog2-web-interface/src/components/streams/StreamsOverview/StreamsOverview.test.tsx +++ b/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( - + - , + , ); beforeEach(() => { diff --git a/graylog2-web-interface/src/pages/IndexSetFieldTypesPage.test.tsx b/graylog2-web-interface/src/pages/IndexSetFieldTypesPage.test.tsx index d14705a9a65a..07db968ae47f 100644 --- a/graylog2-web-interface/src/pages/IndexSetFieldTypesPage.test.tsx +++ b/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( - + , - , + , ); jest.mock('views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings', () => jest.fn()); diff --git a/graylog2-web-interface/src/routing/App.tsx b/graylog2-web-interface/src/routing/App.tsx index 54aef0ed6b67..75b4ea518e4f 100644 --- a/graylog2-web-interface/src/routing/App.tsx +++ b/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 = () => ( - + {(currentUser) => { if (!currentUser) { @@ -103,7 +102,7 @@ const App = () => ( ); }} - + ); export default singleton('components.App', () => App); diff --git a/graylog2-web-interface/src/routing/DefaultQueryParamProvider.tsx b/graylog2-web-interface/src/routing/DefaultQueryParamProvider.tsx new file mode 100644 index 000000000000..4c0c12719cee --- /dev/null +++ b/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 + * . + */ +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) => ( + + {children} + +); + +export default DefaultQueryParamProvider; diff --git a/graylog2-web-interface/src/views/components/dashboard/DashboardsOverview/DashboardsOverview.test.tsx b/graylog2-web-interface/src/views/components/dashboard/DashboardsOverview/DashboardsOverview.test.tsx index 847e5de0f18d..43a4866dfe1d 100644 --- a/graylog2-web-interface/src/views/components/dashboard/DashboardsOverview/DashboardsOverview.test.tsx +++ b/graylog2-web-interface/src/views/components/dashboard/DashboardsOverview/DashboardsOverview.test.tsx @@ -16,8 +16,7 @@ */ 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'; @@ -25,6 +24,7 @@ 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 = () => ( - + - + ); beforeEach(() => { diff --git a/graylog2-web-interface/src/views/pages/DashboardsPage.test.tsx b/graylog2-web-interface/src/views/pages/DashboardsPage.test.tsx index ab129b31bf01..bd2a9cbfef9c 100644 --- a/graylog2-web-interface/src/views/pages/DashboardsPage.test.tsx +++ b/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( - + - ); + ); await screen.findByRole('heading', { name: /dashboards/i }); await screen.findByText('No dashboards have been found.');