mirror of https://github.com/grafana/grafana.git
				
				
				
			Routing: Replace useHistory hook (#94061)
* Update ConfigureIRM * Update Browse
This commit is contained in:
		
							parent
							
								
									8de1047f65
								
							
						
					
					
						commit
						a20ebbc8f8
					
				|  | @ -1,6 +1,6 @@ | |||
| import { css } from '@emotion/css'; | ||||
| import { useEffect } from 'react'; | ||||
| import { useHistory } from 'react-router-dom'; | ||||
| import { useNavigate } from 'react-router-dom-v5-compat'; | ||||
| 
 | ||||
| import { GrafanaTheme2 } from '@grafana/data'; | ||||
| import { IconName, Text, useStyles2 } from '@grafana/ui'; | ||||
|  | @ -13,6 +13,7 @@ import { useGetConfigurationForUI, useGetEssentialsConfiguration } from '../irmH | |||
| 
 | ||||
| import { ConfigCard } from './ConfigCard'; | ||||
| import { Essentials } from './Essentials'; | ||||
| 
 | ||||
| export interface IrmCardConfiguration { | ||||
|   id: number; | ||||
|   title: string; | ||||
|  | @ -40,7 +41,7 @@ function useGetDataSourceConfiguration(): DataSourceConfigurationData { | |||
| 
 | ||||
| export function ConfigureIRM() { | ||||
|   const styles = useStyles2(getStyles); | ||||
|   const history = useHistory(); | ||||
|   const navigate = useNavigate(); | ||||
| 
 | ||||
|   // get all the configuration data
 | ||||
|   const dataSourceConfigurationData = useGetDataSourceConfiguration(); | ||||
|  | @ -72,9 +73,9 @@ export function ConfigureIRM() { | |||
|     switch (configID) { | ||||
|       case ConfigurationStepsEnum.CONNECT_DATASOURCE: | ||||
|         if (isDone) { | ||||
|           history.push(DATASOURCES_ROUTES.List); | ||||
|           navigate(DATASOURCES_ROUTES.List); | ||||
|         } else { | ||||
|           history.push(DATASOURCES_ROUTES.New); | ||||
|           navigate(DATASOURCES_ROUTES.New); | ||||
|         } | ||||
|         break; | ||||
|       case ConfigurationStepsEnum.ESSENTIALS: | ||||
|  |  | |||
|  | @ -3,13 +3,11 @@ import { TestProvider } from 'test/helpers/TestProvider'; | |||
| 
 | ||||
| import { PluginType, escapeStringForRegex } from '@grafana/data'; | ||||
| 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 { getCatalogPluginMock, getPluginsStateMock } from '../__mocks__'; | ||||
| import { fetchRemotePlugins } from '../state/actions'; | ||||
| import { PluginAdminRoutes, CatalogPlugin, ReducerState, RequestStatus } from '../types'; | ||||
| import { CatalogPlugin, ReducerState, RequestStatus } from '../types'; | ||||
| 
 | ||||
| import BrowsePage from './Browse'; | ||||
| 
 | ||||
|  | @ -30,13 +28,10 @@ const renderBrowse = ( | |||
| ): RenderResult => { | ||||
|   const store = configureStore({ plugins: pluginsStateOverride || getPluginsStateMock(plugins) }); | ||||
|   locationService.push(path); | ||||
|   const props = getRouteComponentProps({ | ||||
|     route: { routeName: PluginAdminRoutes.Home } as RouteDescriptor, | ||||
|   }); | ||||
| 
 | ||||
|   return render( | ||||
|     <TestProvider store={store}> | ||||
|       <BrowsePage {...props} /> | ||||
|       <BrowsePage /> | ||||
|     </TestProvider> | ||||
|   ); | ||||
| }; | ||||
|  |  | |||
|  | @ -1,5 +1,5 @@ | |||
| import { css } from '@emotion/css'; | ||||
| import { ReactElement, useState } from 'react'; | ||||
| import { useState } from 'react'; | ||||
| import { useLocation } from 'react-router-dom-v5-compat'; | ||||
| 
 | ||||
| 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 { Page } from 'app/core/components/Page/Page'; | ||||
| import { Trans } from 'app/core/internationalization'; | ||||
| import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; | ||||
| import { getNavModel } from 'app/core/selectors/navModel'; | ||||
| import { ROUTES as CONNECTIONS_ROUTES } from 'app/features/connections/constants'; | ||||
| import { useSelector } from 'app/types'; | ||||
|  | @ -21,7 +20,7 @@ import { Sorters } from '../helpers'; | |||
| import { useHistory } from '../hooks/useHistory'; | ||||
| import { useGetAll, useGetUpdatable, useIsRemotePluginsAvailable } from '../state/hooks'; | ||||
| 
 | ||||
| export default function Browse({ route }: GrafanaRouteComponentProps): ReactElement | null { | ||||
| export default function Browse() { | ||||
|   const location = useLocation(); | ||||
|   const locationSearch = locationSearchToObject(location.search); | ||||
|   const navModel = useSelector((state) => getNavModel(state.navIndex, 'plugins')); | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue