root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 90 Packages Projects Releases Wiki Activity

Routing: Replace useHistory hook (#94061) 

* Update ConfigureIRM

* Update Browse
This commit is contained in:
Alex Khomenko 2024-10-01 14:11:58 +03:00 committed by GitHub
parent 8de1047f65
commit a20ebbc8f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 9 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/app/features/gops/configuration-tracker/components/ConfigureIRM.tsx
View File

@ -1,6 +1,6 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useHistory } from 'react-router-dom'; import { useNavigate } from 'react-router-dom-v5-compat';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { IconName, Text, useStyles2 } from '@grafana/ui'; import { IconName, Text, useStyles2 } from '@grafana/ui';
@ -13,6 +13,7 @@ import { useGetConfigurationForUI, useGetEssentialsConfiguration } from '../irmH
import { ConfigCard } from './ConfigCard'; import { ConfigCard } from './ConfigCard';
import { Essentials } from './Essentials'; import { Essentials } from './Essentials';
export interface IrmCardConfiguration { export interface IrmCardConfiguration {
id: number; id: number;
title: string; title: string;
@ -40,7 +41,7 @@ function useGetDataSourceConfiguration(): DataSourceConfigurationData {
export function ConfigureIRM() { export function ConfigureIRM() {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const history = useHistory(); const navigate = useNavigate();
// get all the configuration data // get all the configuration data
const dataSourceConfigurationData = useGetDataSourceConfiguration(); const dataSourceConfigurationData = useGetDataSourceConfiguration();
@ -72,9 +73,9 @@ export function ConfigureIRM() {
switch (configID) { switch (configID) {
case ConfigurationStepsEnum.CONNECT_DATASOURCE: case ConfigurationStepsEnum.CONNECT_DATASOURCE:
if (isDone) { if (isDone) {
history.push(DATASOURCES_ROUTES.List); navigate(DATASOURCES_ROUTES.List);
} else { } else {
history.push(DATASOURCES_ROUTES.New); navigate(DATASOURCES_ROUTES.New);
} }
break; break;
case ConfigurationStepsEnum.ESSENTIALS: case ConfigurationStepsEnum.ESSENTIALS:

9
public/app/features/plugins/admin/pages/Browse.test.tsx
View File

@ -3,13 +3,11 @@ import { TestProvider } from 'test/helpers/TestProvider';
import { PluginType, escapeStringForRegex } from '@grafana/data'; import { PluginType, escapeStringForRegex } from '@grafana/data';
import { locationService } from '@grafana/runtime'; import { locationService } from '@grafana/runtime';
import { getRouteComponentProps } from 'app/core/navigation/__mocks__/routeProps';
import { RouteDescriptor } from 'app/core/navigation/types';
import { configureStore } from 'app/store/configureStore'; import { configureStore } from 'app/store/configureStore';
import { getCatalogPluginMock, getPluginsStateMock } from '../__mocks__'; import { getCatalogPluginMock, getPluginsStateMock } from '../__mocks__';
import { fetchRemotePlugins } from '../state/actions'; import { fetchRemotePlugins } from '../state/actions';
import { PluginAdminRoutes, CatalogPlugin, ReducerState, RequestStatus } from '../types'; import { CatalogPlugin, ReducerState, RequestStatus } from '../types';
import BrowsePage from './Browse'; import BrowsePage from './Browse';
@ -30,13 +28,10 @@ const renderBrowse = (
): RenderResult => { ): RenderResult => {
const store = configureStore({ plugins: pluginsStateOverride || getPluginsStateMock(plugins) }); const store = configureStore({ plugins: pluginsStateOverride || getPluginsStateMock(plugins) });
locationService.push(path); locationService.push(path);
const props = getRouteComponentProps({
route: { routeName: PluginAdminRoutes.Home } as RouteDescriptor,
});
return render( return render(
<TestProvider store={store}> <TestProvider store={store}>
<BrowsePage {...props} /> <BrowsePage />
</TestProvider> </TestProvider>
); );
}; };

5
public/app/features/plugins/admin/pages/Browse.tsx
View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { ReactElement, useState } from 'react'; import { useState } from 'react';
import { useLocation } from 'react-router-dom-v5-compat'; import { useLocation } from 'react-router-dom-v5-compat';
import { SelectableValue, GrafanaTheme2, PluginType } from '@grafana/data'; import { SelectableValue, GrafanaTheme2, PluginType } from '@grafana/data';
@ -7,7 +7,6 @@ import { locationSearchToObject } from '@grafana/runtime';
import { Select, RadioButtonGroup, useStyles2, Tooltip, Field, Button } from '@grafana/ui'; import { Select, RadioButtonGroup, useStyles2, Tooltip, Field, Button } from '@grafana/ui';
import { Page } from 'app/core/components/Page/Page'; import { Page } from 'app/core/components/Page/Page';
import { Trans } from 'app/core/internationalization'; import { Trans } from 'app/core/internationalization';
import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
import { getNavModel } from 'app/core/selectors/navModel'; import { getNavModel } from 'app/core/selectors/navModel';
import { ROUTES as CONNECTIONS_ROUTES } from 'app/features/connections/constants'; import { ROUTES as CONNECTIONS_ROUTES } from 'app/features/connections/constants';
import { useSelector } from 'app/types'; import { useSelector } from 'app/types';
@ -21,7 +20,7 @@ import { Sorters } from '../helpers';
import { useHistory } from '../hooks/useHistory'; import { useHistory } from '../hooks/useHistory';
import { useGetAll, useGetUpdatable, useIsRemotePluginsAvailable } from '../state/hooks'; import { useGetAll, useGetUpdatable, useIsRemotePluginsAvailable } from '../state/hooks';
export default function Browse({ route }: GrafanaRouteComponentProps): ReactElement | null { export default function Browse() {
const location = useLocation(); const location = useLocation();
const locationSearch = locationSearchToObject(location.search); const locationSearch = locationSearchToObject(location.search);
const navModel = useSelector((state) => getNavModel(state.navIndex, 'plugins')); const navModel = useSelector((state) => getNavModel(state.navIndex, 'plugins'));