diff --git a/public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx b/public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx index d3bed574dcc..b01d6951d5c 100644 --- a/public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx +++ b/public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/css'; import { DOMAttributes } from '@react-types/shared'; import { memo, forwardRef, useCallback } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { GrafanaTheme2, NavModelItem } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; diff --git a/public/app/core/components/AppChrome/MegaMenu/MegaMenuItem.tsx b/public/app/core/components/AppChrome/MegaMenu/MegaMenuItem.tsx index 94410dfa696..3640ff5fed9 100644 --- a/public/app/core/components/AppChrome/MegaMenu/MegaMenuItem.tsx +++ b/public/app/core/components/AppChrome/MegaMenu/MegaMenuItem.tsx @@ -1,7 +1,7 @@ import { css, cx } from '@emotion/css'; import { useEffect, useRef } from 'react'; import * as React from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { useLocalStorage } from 'react-use'; import { GrafanaTheme2, NavModelItem, toIconName } from '@grafana/data'; diff --git a/public/app/core/components/AppChrome/TopBar/SignInLink.tsx b/public/app/core/components/AppChrome/TopBar/SignInLink.tsx index 95f5006f507..538614eb527 100644 --- a/public/app/core/components/AppChrome/TopBar/SignInLink.tsx +++ b/public/app/core/components/AppChrome/TopBar/SignInLink.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/css'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { GrafanaTheme2, locationUtil, textUtil } from '@grafana/data'; import { useStyles2 } from '@grafana/ui'; diff --git a/public/app/core/components/AppChrome/TopBar/TopSearchBar.tsx b/public/app/core/components/AppChrome/TopBar/TopSearchBar.tsx index 8f5635d0e74..ecfcdd468db 100644 --- a/public/app/core/components/AppChrome/TopBar/TopSearchBar.tsx +++ b/public/app/core/components/AppChrome/TopBar/TopSearchBar.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/css'; import { cloneDeep } from 'lodash'; import { memo } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { GrafanaTheme2, locationUtil, textUtil } from '@grafana/data'; import { Dropdown, ToolbarButton, useStyles2 } from '@grafana/ui'; diff --git a/public/app/core/hooks/useQueryParams.ts b/public/app/core/hooks/useQueryParams.ts index 907f039e1e5..832330af4ed 100644 --- a/public/app/core/hooks/useQueryParams.ts +++ b/public/app/core/hooks/useQueryParams.ts @@ -1,5 +1,5 @@ import { useCallback, useMemo } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { UrlQueryMap } from '@grafana/data'; import { locationSearchToObject, locationService } from '@grafana/runtime'; diff --git a/public/app/core/navigation/GrafanaRouteError.tsx b/public/app/core/navigation/GrafanaRouteError.tsx index 052df6bb0f7..7c3650eaec7 100644 --- a/public/app/core/navigation/GrafanaRouteError.tsx +++ b/public/app/core/navigation/GrafanaRouteError.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/css'; import { ErrorInfo, useEffect } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { GrafanaTheme2, locationUtil, PageLayoutType } from '@grafana/data'; import { Button, ErrorWithStack, useStyles2 } from '@grafana/ui'; diff --git a/public/app/core/navigation/hooks.ts b/public/app/core/navigation/hooks.ts index b03333d3fe9..a6c35d44a75 100644 --- a/public/app/core/navigation/hooks.ts +++ b/public/app/core/navigation/hooks.ts @@ -1,4 +1,4 @@ -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { locationService } from '@grafana/runtime'; diff --git a/public/app/features/alerting/unified/components/notification-policies/Policy.test.tsx b/public/app/features/alerting/unified/components/notification-policies/Policy.test.tsx index 77d54ae2a5c..dfff88a463a 100644 --- a/public/app/features/alerting/unified/components/notification-policies/Policy.test.tsx +++ b/public/app/features/alerting/unified/components/notification-policies/Policy.test.tsx @@ -2,6 +2,7 @@ import { render, renderHook, screen, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { first, noop } from 'lodash'; import { Router } from 'react-router-dom'; +import { CompatRouter } from 'react-router-dom-v5-compat'; import { config, locationService } from '@grafana/runtime'; import { contextSrv } from 'app/core/core'; @@ -347,7 +348,9 @@ describe('Policy', () => { const renderPolicy = (element: JSX.Element) => render( - {element} + + {element} + ); diff --git a/public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.test.tsx b/public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.test.tsx index 1db7c0c5c0a..f48f54461c3 100644 --- a/public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.test.tsx +++ b/public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.test.tsx @@ -1,5 +1,6 @@ -import { render, screen } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import { render } from 'test/test-utils'; import { PanelModel } from 'app/features/dashboard/state'; import { createDashboardModelFixture } from 'app/features/dashboard/state/__fixtures__/dashboardFixtures'; @@ -16,12 +17,6 @@ jest.mock('app/types', () => { }; }); -jest.mock('react-router-dom', () => ({ - useLocation: () => ({ - pathname: 'localhost:3000/example/path', - }), -})); - jest.spyOn(analytics, 'logInfo'); jest.mock('react-use', () => ({ diff --git a/public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.tsx b/public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.tsx index a07e0b2d054..f868376e67d 100644 --- a/public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.tsx +++ b/public/app/features/alerting/unified/components/panel-alerts-tab/NewRuleFromPanelButton.tsx @@ -1,4 +1,4 @@ -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { useAsync } from 'react-use'; import { urlUtil } from '@grafana/data'; diff --git a/public/app/features/alerting/unified/components/rule-list/RuleList.v1.tsx b/public/app/features/alerting/unified/components/rule-list/RuleList.v1.tsx index a61e94cfd9b..8b0fe0707d9 100644 --- a/public/app/features/alerting/unified/components/rule-list/RuleList.v1.tsx +++ b/public/app/features/alerting/unified/components/rule-list/RuleList.v1.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/css'; import { useCallback, useEffect, useMemo, useState } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { useAsyncFn, useInterval } from 'react-use'; import { GrafanaTheme2, urlUtil } from '@grafana/data'; diff --git a/public/app/features/alerting/unified/components/rule-list/RuleList.v2.tsx b/public/app/features/alerting/unified/components/rule-list/RuleList.v2.tsx index 21271c658c9..4cd337802a1 100644 --- a/public/app/features/alerting/unified/components/rule-list/RuleList.v2.tsx +++ b/public/app/features/alerting/unified/components/rule-list/RuleList.v2.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/css'; import { useCallback, useEffect, useMemo, useState } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { useAsyncFn, useInterval, useMeasure } from 'react-use'; import { GrafanaTheme2, urlUtil } from '@grafana/data'; diff --git a/public/app/features/alerting/unified/components/rules/CloudRules.tsx b/public/app/features/alerting/unified/components/rules/CloudRules.tsx index e7bf42ea817..56157c689a3 100644 --- a/public/app/features/alerting/unified/components/rules/CloudRules.tsx +++ b/public/app/features/alerting/unified/components/rules/CloudRules.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/css'; import pluralize from 'pluralize'; import { useMemo } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { GrafanaTheme2, urlUtil } from '@grafana/data'; import { LinkButton, LoadingPlaceholder, Pagination, Spinner, Text, useStyles2 } from '@grafana/ui'; diff --git a/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx b/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx index f4c89a906de..b747de47c3c 100644 --- a/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx @@ -1,6 +1,6 @@ import { css, cx } from '@emotion/css'; import { useState } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { GrafanaTheme2 } from '@grafana/data'; import { LinkButton, Stack, useStyles2 } from '@grafana/ui'; diff --git a/public/app/features/alerting/unified/components/rules/RuleListGroupView.test.tsx b/public/app/features/alerting/unified/components/rules/RuleListGroupView.test.tsx index f6c2e092c68..a2d07b1ec94 100644 --- a/public/app/features/alerting/unified/components/rules/RuleListGroupView.test.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleListGroupView.test.tsx @@ -1,11 +1,9 @@ -import { render, waitFor } from '@testing-library/react'; -import { Provider } from 'react-redux'; -import { Router } from 'react-router-dom'; +import { waitFor } from '@testing-library/react'; +import { render } from 'test/test-utils'; import { byRole } from 'testing-library-selector'; -import { locationService, setPluginExtensionsHook } from '@grafana/runtime'; +import { setPluginExtensionsHook } from '@grafana/runtime'; import { contextSrv } from 'app/core/services/context_srv'; -import { configureStore } from 'app/store/configureStore'; import { AccessControlAction } from 'app/types'; import { CombinedRuleNamespace } from 'app/types/unified-alerting'; @@ -101,15 +99,7 @@ describe('RuleListGroupView', () => { }); function renderRuleList(namespaces: CombinedRuleNamespace[]) { - const store = configureStore(); - - render( - - - - - - ); + render(); } function getGrafanaNamespace(): CombinedRuleNamespace { diff --git a/public/app/features/alerting/unified/hooks/useURLSearchParams.ts b/public/app/features/alerting/unified/hooks/useURLSearchParams.ts index 3203c883afc..0c23f8299f9 100644 --- a/public/app/features/alerting/unified/hooks/useURLSearchParams.ts +++ b/public/app/features/alerting/unified/hooks/useURLSearchParams.ts @@ -1,5 +1,5 @@ import { useCallback, useMemo } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { locationService } from '@grafana/runtime'; diff --git a/public/app/features/alerting/unified/state/AlertmanagerContext.test.tsx b/public/app/features/alerting/unified/state/AlertmanagerContext.test.tsx index adcba4180b1..9a4ab2346f4 100644 --- a/public/app/features/alerting/unified/state/AlertmanagerContext.test.tsx +++ b/public/app/features/alerting/unified/state/AlertmanagerContext.test.tsx @@ -2,6 +2,7 @@ import { renderHook } from '@testing-library/react'; import { createMemoryHistory } from 'history'; import * as React from 'react'; import { MemoryRouter, Router } from 'react-router-dom'; +import { CompatRouter } from 'react-router-dom-v5-compat'; import store from 'app/core/store'; import { AlertManagerImplementation } from 'app/plugins/datasource/alertmanager/types'; @@ -34,7 +35,9 @@ describe('useAlertmanager', () => { .mockReturnValueOnce({ availableExternalDataSources: [], availableInternalDataSources: [] }); const wrapper = ({ children }: React.PropsWithChildren) => ( - {children} + + {children} + ); @@ -50,7 +53,9 @@ describe('useAlertmanager', () => { const wrapper = ({ children }: React.PropsWithChildren) => ( - {children} + + {children} + ); @@ -68,7 +73,9 @@ describe('useAlertmanager', () => { const wrapper = ({ children }: React.PropsWithChildren) => ( - {children} + + {children} + ); @@ -86,7 +93,9 @@ describe('useAlertmanager', () => { const wrapper = ({ children }: React.PropsWithChildren) => ( - {children} + + {children} + ); @@ -101,7 +110,9 @@ describe('useAlertmanager', () => { const wrapper = ({ children }: React.PropsWithChildren) => ( - {children} + + {children} + ); @@ -122,7 +133,9 @@ describe('useAlertmanager', () => { const wrapper = ({ children }: React.PropsWithChildren) => ( - {children} + + {children} + ); diff --git a/public/app/features/browse-dashboards/BrowseDashboardsPage.tsx b/public/app/features/browse-dashboards/BrowseDashboardsPage.tsx index 47c7137b065..87b8239db2f 100644 --- a/public/app/features/browse-dashboards/BrowseDashboardsPage.tsx +++ b/public/app/features/browse-dashboards/BrowseDashboardsPage.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/css'; import { memo, useEffect, useMemo } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import AutoSizer from 'react-virtualized-auto-sizer'; import { GrafanaTheme2 } from '@grafana/data'; diff --git a/public/app/features/browse-dashboards/components/CreateNewButton.tsx b/public/app/features/browse-dashboards/components/CreateNewButton.tsx index b50fed9f669..204aa6c99e2 100644 --- a/public/app/features/browse-dashboards/components/CreateNewButton.tsx +++ b/public/app/features/browse-dashboards/components/CreateNewButton.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { config, reportInteraction } from '@grafana/runtime'; import { Button, Drawer, Dropdown, Icon, Menu, MenuItem } from '@grafana/ui'; diff --git a/public/app/features/dashboard-scene/inspect/PanelInspectDrawer.tsx b/public/app/features/dashboard-scene/inspect/PanelInspectDrawer.tsx index 7024aca1ebd..919c8e32cc3 100644 --- a/public/app/features/dashboard-scene/inspect/PanelInspectDrawer.tsx +++ b/public/app/features/dashboard-scene/inspect/PanelInspectDrawer.tsx @@ -1,4 +1,4 @@ -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { locationUtil } from '@grafana/data'; import { locationService } from '@grafana/runtime'; diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/NewAlertRuleButton.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/NewAlertRuleButton.tsx index 8116a56f648..cb5c4cd2b07 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/NewAlertRuleButton.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/NewAlertRuleButton.tsx @@ -1,4 +1,4 @@ -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { useAsync } from 'react-use'; import { urlUtil } from '@grafana/data'; diff --git a/public/app/features/dashboard-scene/panel-edit/PanelOptions.test.tsx b/public/app/features/dashboard-scene/panel-edit/PanelOptions.test.tsx index 83d2e0363ce..fbecf91ece8 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelOptions.test.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelOptions.test.tsx @@ -1,5 +1,6 @@ -import { act, fireEvent, render, screen } from '@testing-library/react'; +import { act, fireEvent, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import { render } from 'test/test-utils'; import { standardEditorsRegistry, standardFieldConfigEditorRegistry } from '@grafana/data'; import { getPanelPlugin } from '@grafana/data/test/__mocks__/pluginMocks'; @@ -21,12 +22,6 @@ import { VizPanelManager } from './VizPanelManager'; const OptionsPaneSelector = selectors.components.PanelEditor.OptionsPane; -jest.mock('react-router-dom', () => ({ - useLocation: () => ({ - pathname: '', - }), -})); - standardEditorsRegistry.setInit(getAllOptionEditors); standardFieldConfigEditorRegistry.setInit(getAllStandardFieldConfigs); diff --git a/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx b/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx index 39e7b1f47dc..522d28e25af 100644 --- a/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx +++ b/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx @@ -1,6 +1,6 @@ import { css, cx } from '@emotion/css'; import { useEffect, useMemo } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { GrafanaTheme2, PageLayoutType } from '@grafana/data'; import { useChromeHeaderHeight } from '@grafana/runtime'; diff --git a/public/app/features/dashboard-scene/settings/utils.ts b/public/app/features/dashboard-scene/settings/utils.ts index 1f40d2be8e6..d726085c7b3 100644 --- a/public/app/features/dashboard-scene/settings/utils.ts +++ b/public/app/features/dashboard-scene/settings/utils.ts @@ -1,4 +1,4 @@ -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { locationUtil, NavModelItem } from '@grafana/data'; import { SceneObject, SceneObjectState } from '@grafana/scenes'; diff --git a/public/app/features/dashboard/components/DashNav/DashNav.tsx b/public/app/features/dashboard/components/DashNav/DashNav.tsx index b6accdf8c29..86a3986be31 100644 --- a/public/app/features/dashboard/components/DashNav/DashNav.tsx +++ b/public/app/features/dashboard/components/DashNav/DashNav.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/css'; import { memo, ReactNode } from 'react'; import { connect, ConnectedProps } from 'react-redux'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { textUtil } from '@grafana/data'; import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src'; diff --git a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx index 0a302f3048c..adb6af01c37 100644 --- a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx +++ b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx @@ -1,6 +1,6 @@ import * as H from 'history'; import { useEffect, useMemo, useState } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { locationUtil, NavModel, NavModelItem } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; diff --git a/public/app/features/dashboard/components/DashboardSettings/LinksSettings.test.tsx b/public/app/features/dashboard/components/DashboardSettings/LinksSettings.test.tsx index 98d08bc2191..21e7144ba45 100644 --- a/public/app/features/dashboard/components/DashboardSettings/LinksSettings.test.tsx +++ b/public/app/features/dashboard/components/DashboardSettings/LinksSettings.test.tsx @@ -1,20 +1,13 @@ -import { render, screen, within } from '@testing-library/react'; +import { screen, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { Provider } from 'react-redux'; -import { Router } from 'react-router-dom'; -import { getGrafanaContextMock } from 'test/mocks/getGrafanaContextMock'; +import { render } from 'test/test-utils'; -import { locationService } from '@grafana/runtime'; -import { GrafanaContext } from 'app/core/context/GrafanaContext'; - -import { configureStore } from '../../../../store/configureStore'; import { DashboardModel } from '../../state'; import { createDashboardModelFixture } from '../../state/__fixtures__/dashboardFixtures'; import { DashboardSettings } from './DashboardSettings'; function setup(dashboard: DashboardModel) { - const store = configureStore(); const sectionNav = { main: { text: 'Dashboard' }, node: { @@ -24,13 +17,7 @@ function setup(dashboard: DashboardModel) { // Need to use DashboardSettings here as it's responsible for fetching the state back from location return render( - - - - - - - + ); } diff --git a/public/app/features/dashboard/components/Inspector/PanelInspector.tsx b/public/app/features/dashboard/components/Inspector/PanelInspector.tsx index 863ee5cfbfc..719664fca24 100644 --- a/public/app/features/dashboard/components/Inspector/PanelInspector.tsx +++ b/public/app/features/dashboard/components/Inspector/PanelInspector.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import { connect, MapStateToProps } from 'react-redux'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { PanelPlugin } from '@grafana/data'; import { locationService } from '@grafana/runtime'; diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.test.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.test.tsx index e096f073f83..374a8fd5e80 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.test.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.test.tsx @@ -1,6 +1,7 @@ -import { fireEvent, render, screen, within } from '@testing-library/react'; +import { fireEvent, screen, within } from '@testing-library/react'; import { Provider } from 'react-redux'; import configureMockStore from 'redux-mock-store'; +import { render } from 'test/test-utils'; import { FieldConfigSource, diff --git a/public/app/features/dashboard/containers/DashboardPage.test.tsx b/public/app/features/dashboard/containers/DashboardPage.test.tsx index 66072472742..4e178bfe8a6 100644 --- a/public/app/features/dashboard/containers/DashboardPage.test.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.test.tsx @@ -1,26 +1,22 @@ -import { render, screen, waitFor } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import { KBarProvider } from 'kbar'; import { Component } from 'react'; -import { Provider } from 'react-redux'; -import { match, Router } from 'react-router-dom'; +import { match } from 'react-router-dom'; import { useEffectOnce } from 'react-use'; import { mockToolkitActionCreator } from 'test/core/redux/mocks'; -import { TestProvider } from 'test/helpers/TestProvider'; -import { getGrafanaContextMock } from 'test/mocks/getGrafanaContextMock'; +import { render } from 'test/test-utils'; import { createTheme } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { config, locationService, setDataSourceSrv } from '@grafana/runtime'; +import { config, setDataSourceSrv } from '@grafana/runtime'; import { Dashboard } from '@grafana/schema'; import { notifyApp } from 'app/core/actions'; import { AppChrome } from 'app/core/components/AppChrome/AppChrome'; -import { GrafanaContext } from 'app/core/context/GrafanaContext'; import { getRouteComponentProps } from 'app/core/navigation/__mocks__/routeProps'; import { RouteDescriptor } from 'app/core/navigation/types'; import { HOME_NAV_ID } from 'app/core/reducers/navModel'; import { DashboardInitPhase, DashboardMeta, DashboardRoutes } from 'app/types'; -import { configureStore } from '../../../store/configureStore'; import { Props as LazyLoaderProps } from '../dashgrid/LazyLoader'; import { DashboardSrv, setDashboardSrv } from '../services/DashboardSrv'; import { DashboardModel } from '../state'; @@ -103,7 +99,6 @@ function setup(propOverrides?: Partial) { }, ]; - const store = configureStore(); const props: Props = { ...getRouteComponentProps({ match: { params: { slug: 'my-dash', uid: '11' } } as unknown as match, @@ -130,29 +125,11 @@ function setup(propOverrides?: Partial) { Object.assign(props, propOverrides); - const context = getGrafanaContextMock(); - - const { unmount, rerender } = render( - - - - - - - - ); + const { unmount, rerender } = render(); const wrappedRerender = (newProps: Partial) => { Object.assign(props, newProps); - return rerender( - - - - - - - - ); + return rerender(); }; return { rerender: wrappedRerender, unmount }; @@ -190,7 +167,7 @@ describe('DashboardPage', () => { it('only calls initDashboard once when wrapped in AppChrome', async () => { const props: Props = { ...getRouteComponentProps({ - match: { params: { slug: 'my-dash', uid: '11' } } as unknown as match, + match: { params: { slug: 'my-dash', uid: '11' }, isExact: true, path: '', url: '' }, route: { routeName: DashboardRoutes.Normal } as RouteDescriptor, }), navIndex: { @@ -214,11 +191,9 @@ describe('DashboardPage', () => { render( - - - - - + + + ); diff --git a/public/app/features/dashboard/containers/DashboardPageProxy.test.tsx b/public/app/features/dashboard/containers/DashboardPageProxy.test.tsx index cad16a8b2b2..35370d47621 100644 --- a/public/app/features/dashboard/containers/DashboardPageProxy.test.tsx +++ b/public/app/features/dashboard/containers/DashboardPageProxy.test.tsx @@ -1,16 +1,12 @@ -import { act, render, screen, waitFor } from '@testing-library/react'; -import { Provider } from 'react-redux'; -import { Router } from 'react-router-dom'; +import { act, screen, waitFor } from '@testing-library/react'; import { Props } from 'react-virtualized-auto-sizer'; -import { getGrafanaContextMock } from 'test/mocks/getGrafanaContextMock'; +import { render } from 'test/test-utils'; import { config, locationService } from '@grafana/runtime'; -import { GrafanaContext } from 'app/core/context/GrafanaContext'; import { HOME_DASHBOARD_CACHE_KEY, getDashboardScenePageStateManager, } from 'app/features/dashboard-scene/pages/DashboardScenePageStateManager'; -import { configureStore } from 'app/store/configureStore'; import { DashboardDTO, DashboardRoutes } from 'app/types'; import DashboardPageProxy, { DashboardPageProxyProps } from './DashboardPageProxy'; @@ -84,24 +80,15 @@ jest.mock('app/features/dashboard/api/dashboard_api', () => ({ })); function setup(props: Partial) { - const context = getGrafanaContextMock(); - const store = configureStore({}); - return render( - - - - null, path: '/' }} - match={{ params: {}, isExact: true, path: '/', url: '/' }} - {...props} - /> - - - + null, path: '/' }} + match={{ params: {}, isExact: true, path: '/', url: '/' }} + {...props} + /> ); } diff --git a/public/app/features/datasources/components/DataSourcesList.test.tsx b/public/app/features/datasources/components/DataSourcesList.test.tsx index a3c320f3ed7..aff0285ecbe 100644 --- a/public/app/features/datasources/components/DataSourcesList.test.tsx +++ b/public/app/features/datasources/components/DataSourcesList.test.tsx @@ -1,30 +1,20 @@ -import { render, screen } from '@testing-library/react'; -import { Provider } from 'react-redux'; -import { Router } from 'react-router-dom'; - -import { locationService } from '@grafana/runtime'; -import { configureStore } from 'app/store/configureStore'; +import { screen } from '@testing-library/react'; +import { render } from 'test/test-utils'; import { getMockDataSources } from '../__mocks__'; import { DataSourcesListView } from './DataSourcesList'; const setup = () => { - const store = configureStore(); - return render( - - - - - + ); }; diff --git a/public/app/features/datasources/components/DataSourcesList.tsx b/public/app/features/datasources/components/DataSourcesList.tsx index e0ad9e5c19f..bf5a3f2f829 100644 --- a/public/app/features/datasources/components/DataSourcesList.tsx +++ b/public/app/features/datasources/components/DataSourcesList.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/css'; import { useEffect } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { DataSourceSettings, GrafanaTheme2 } from '@grafana/data'; import { config } from '@grafana/runtime'; diff --git a/public/app/features/plugins/admin/components/InstallControls/InstallControlsButton.tsx b/public/app/features/plugins/admin/components/InstallControls/InstallControlsButton.tsx index 4791edbe6f9..cbad3dee8e6 100644 --- a/public/app/features/plugins/admin/components/InstallControls/InstallControlsButton.tsx +++ b/public/app/features/plugins/admin/components/InstallControls/InstallControlsButton.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { AppEvents } from '@grafana/data'; import { config, locationService } from '@grafana/runtime'; diff --git a/public/app/features/plugins/admin/components/PluginDetailsPage.tsx b/public/app/features/plugins/admin/components/PluginDetailsPage.tsx index 47d03e5c5fd..61903f80ed2 100644 --- a/public/app/features/plugins/admin/components/PluginDetailsPage.tsx +++ b/public/app/features/plugins/admin/components/PluginDetailsPage.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/css'; import * as React from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { GrafanaTheme2, NavModelItem } from '@grafana/data'; import { config } from '@grafana/runtime'; diff --git a/public/app/features/plugins/admin/components/PluginList.tsx b/public/app/features/plugins/admin/components/PluginList.tsx index 2650e3abee2..4d6961966c6 100644 --- a/public/app/features/plugins/admin/components/PluginList.tsx +++ b/public/app/features/plugins/admin/components/PluginList.tsx @@ -1,4 +1,4 @@ -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { config } from '@grafana/runtime'; import { EmptyState, Grid } from '@grafana/ui'; diff --git a/public/app/features/plugins/admin/hooks/usePluginDetailsTabs.tsx b/public/app/features/plugins/admin/hooks/usePluginDetailsTabs.tsx index 3173e5df198..1778c03e058 100644 --- a/public/app/features/plugins/admin/hooks/usePluginDetailsTabs.tsx +++ b/public/app/features/plugins/admin/hooks/usePluginDetailsTabs.tsx @@ -1,5 +1,5 @@ import { useMemo } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { GrafanaPlugin, NavModelItem, PluginIncludeType, PluginType } from '@grafana/data'; import { config } from '@grafana/runtime'; diff --git a/public/app/features/plugins/admin/pages/Browse.tsx b/public/app/features/plugins/admin/pages/Browse.tsx index c72d702ab73..e85dedc6fb4 100644 --- a/public/app/features/plugins/admin/pages/Browse.tsx +++ b/public/app/features/plugins/admin/pages/Browse.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/css'; import { ReactElement } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom-v5-compat'; import { SelectableValue, GrafanaTheme2, PluginType } from '@grafana/data'; import { locationSearchToObject } from '@grafana/runtime';