fix: moved routing components to own high-level folder (#997)

* refactor: moved routing components to own high-level folder

* fix: move routing.consts to routing folder

* fix: upstream merge changes

* refactor: split uninitialisedRouter

* fix: reparent ROUTES type to routing/types

* fix: high-level routing folder

.eslintrc.js

@@ -37,6 +37,7 @@ module.exports = {
             '^faro',
             '^sessionStorage',
             '^utils',
+            '^routing',
             '^validation',
             '^datasource',
             '^contexts',

src/components/AlertStatus/AlertStatus.tsx

@@ -3,11 +3,12 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { Icon, IconButton, LinkButton, Tooltip, useStyles2, useTheme2 } from '@grafana/ui';
 import { css, cx } from '@emotion/css';
 
-import { AlertSensitivity, Check, PrometheusAlertsGroup, ROUTES } from 'types';
+import { AlertSensitivity, Check, PrometheusAlertsGroup } from 'types';
+import { ROUTES } from 'routing/types';
+import { getRoute } from 'routing/utils';
 import { useAlertRules } from 'hooks/useAlertRules';
 import { useMetricsDS } from 'hooks/useMetricsDS';
 import { AlertSensitivityBadge } from 'components/AlertSensitivityBadge';
-import { getRoute } from 'components/Routing.utils';
 import { Toggletip } from 'components/Toggletip';
 
 type AlertStatusProps = {

src/components/App.tsx

@@ -5,14 +5,14 @@ import { AppRootProps } from '@grafana/data';
 import { css, Global } from '@emotion/react';
 
 import { ProvisioningJsonData } from 'types';
+import { InitialisedRouter } from 'routing/InitialisedRouter';
 import { MetaContextProvider } from 'contexts/MetaContext';
 import { PermissionsContextProvider } from 'contexts/PermissionsContext';
 import { SMDatasourceProvider } from 'contexts/SMDatasourceContext';
 import { queryClient } from 'data/queryClient';
 import { queryKeys as alertingQueryKeys } from 'data/useAlerts';
 
 import { FeatureFlagProvider } from './FeatureFlagProvider';
-import { InitialisedRouter } from './Routing';
 
 export const App = (props: AppRootProps<ProvisioningJsonData>) => {
   const { meta } = props;

src/components/AppInitializer.tsx

@@ -4,8 +4,8 @@ import { Alert, Button, Spinner, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 import { DataTestIds } from 'test/dataTestIds';
 
-import { ROUTES } from 'types';
 import { hasGlobalPermission } from 'utils';
+import { ROUTES } from 'routing/types';
 import { useAppInitializer } from 'hooks/useAppInitializer';
 import { useMeta } from 'hooks/useMeta';
 import { MismatchedDatasourceModal } from 'components/MismatchedDatasourceModal';

src/components/CheckEditor/CheckProbes/PrivateProbesAlert.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { Alert, LinkButton, Stack, TextLink } from '@grafana/ui';
 import { useLocalStorage } from 'usehooks-ts';
 
-import { ROUTES } from 'types';
-import { getRoute } from 'components/Routing.utils';
+import { ROUTES } from 'routing/types';
+import { getRoute } from 'routing/utils';
 
 export const PrivateProbesAlert = () => {
   const [dismissed, setDismissed] = useLocalStorage<boolean>('dismissedPrivateProbesAlert', false);

src/components/CheckForm/CheckForm.tsx

@@ -5,11 +5,12 @@ import { PluginPage } from '@grafana/runtime';
 import { Alert, Button, Stack, Text, Tooltip, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { generateRoutePath } from 'routes';
 import { DataTestIds } from 'test/dataTestIds';
 
-import { Check, CheckFormValues, CheckType, ROUTES } from 'types';
+import { Check, CheckFormValues, CheckType } from 'types';
 import { createNavModel } from 'utils';
+import { ROUTES } from 'routing/types';
+import { generateRoutePath } from 'routing/utils';
 import { AdHocCheckResponse } from 'datasource/responses.types';
 import { useCheckTypeGroupOption } from 'hooks/useCheckTypeGroupOptions';
 import { useCheckTypeOptions } from 'hooks/useCheckTypeOptions';

src/components/CheckForm/checkForm.hooks.ts

@@ -10,7 +10,8 @@ import { ScriptedCheckSchema } from 'schemas/forms/ScriptedCheckSchema';
 import { TCPCheckSchema } from 'schemas/forms/TCPCheckSchema';
 import { TracerouteCheckSchema } from 'schemas/forms/TracerouteCheckSchema';
 
-import { Check, CheckFormValues, CheckType, ROUTES } from 'types';
+import { Check, CheckFormValues, CheckType } from 'types';
+import { ROUTES } from 'routing/types';
 import { AdHocCheckResponse } from 'datasource/responses.types';
 import { useCUDChecks, useTestCheck } from 'data/useChecks';
 import { useNavigation } from 'hooks/useNavigation';

src/components/CheckList/AddNewCheckButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button } from '@grafana/ui';
 
-import { ROUTES } from 'types';
+import { ROUTES } from 'routing/types';
 import { useCanWriteSM } from 'hooks/useDSPermission';
 import { useNavigation } from 'hooks/useNavigation';
 

src/components/CheckList/CheckList.test.tsx

@@ -14,9 +14,10 @@ import { render } from 'test/render';
 import { server } from 'test/server';
 import { getSelect, selectOption } from 'test/utils';
 
-import { Check, FeatureName, ROUTES } from 'types';
+import { Check, FeatureName } from 'types';
+import { ROUTES } from 'routing/types';
+import { generateRoutePath } from 'routing/utils';
 
-import { generateRoutePath } from '../../routes';
 import { CheckList } from './CheckList';
 
 jest.mock('hooks/useNavigation', () => {

src/components/CheckList/EmptyCheckList.tsx

@@ -3,7 +3,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { Button, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 
-import { ROUTES } from 'types';
+import { ROUTES } from 'routing/types';
 import { useNavigation } from 'hooks/useNavigation';
 
 const getStyles = (theme: GrafanaTheme2) => ({

src/components/CheckListItem/CheckItemActionButtons.tsx

@@ -2,12 +2,12 @@ import React, { useState } from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { ConfirmModal, IconButton, LinkButton, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
-import { generateRoutePath } from 'routes/utils';
 
-import { Check, ROUTES } from 'types';
+import { Check } from 'types';
+import { ROUTES } from 'routing/types';
+import { generateRoutePath, getRoute } from 'routing/utils';
 import { useDeleteCheck } from 'data/useChecks';
 import { useCanReadMetrics, useCanWriteSM } from 'hooks/useDSPermission';
-import { getRoute } from 'components/Routing.utils';
 
 const getStyles = (theme: GrafanaTheme2) => ({
   actionButtonGroup: css`

src/components/ChooseCheckGroup/CheckGroupCard.tsx

@@ -4,12 +4,13 @@ import { Icon, LinkButton, Stack, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 import { DataTestIds } from 'test/dataTestIds';
 
-import { CheckTypeGroup, ROUTES } from 'types';
+import { CheckTypeGroup } from 'types';
+import { ROUTES } from 'routing/types';
+import { getRoute } from 'routing/utils';
 import { CheckTypeGroupOption } from 'hooks/useCheckTypeGroupOptions';
 import { useCheckTypeOptions } from 'hooks/useCheckTypeOptions';
 import { useLimits } from 'hooks/useLimits';
 import { CheckStatusInfo, NewStatusBadge } from 'components/CheckEditor/FormComponents/CheckStatusInfo';
-import { getRoute } from 'components/Routing.utils';
 
 import { Card } from '../Card';
 import { Protocol } from './Protocol';

src/components/ConfigActions.tsx

@@ -2,12 +2,12 @@ import React, { useState } from 'react';
 import { getBackendSrv } from '@grafana/runtime';
 import { Button, LinkButton } from '@grafana/ui';
 
-import { ROUTES } from 'types';
 import { hasGlobalPermission } from 'utils';
+import { ROUTES } from 'routing/types';
+import { getRoute } from 'routing/utils';
 import { useMeta } from 'hooks/useMeta';
 
 import { DisablePluginModal } from './DisablePluginModal';
-import { getRoute } from './Routing.utils';
 
 export const ConfigActions = ({ initialized }: { initialized?: boolean }) => {
   const [showDisableModal, setShowDisableModal] = useState(false);

src/components/OverLimitAlert/BrowserCheckLimitAlert.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { TextLink } from '@grafana/ui';
 
-import { ROUTES } from 'types';
+import { ROUTES } from 'routing/types';
+import { getRoute } from 'routing/utils';
 import { useLimits } from 'hooks/useLimits';
-import { getRoute } from 'components/Routing.utils';
 import { Ul } from 'components/Ul';
 
 import { AlertContainer } from './AlertContainer';

src/components/OverLimitAlert/CheckLimitAlert.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { TextLink } from '@grafana/ui';
 
-import { ROUTES } from 'types';
+import { ROUTES } from 'routing/types';
+import { getRoute } from 'routing/utils';
 import { useLimits } from 'hooks/useLimits';
-import { getRoute } from 'components/Routing.utils';
 import { Ul } from 'components/Ul';
 
 import { AlertContainer } from './AlertContainer';

src/components/OverLimitAlert/ExecutionLimitAlert.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { TextLink } from '@grafana/ui';
 
-import { ROUTES } from 'types';
+import { ROUTES } from 'routing/types';
+import { getRoute } from 'routing/utils';
 import { FREE_EXECUTION_LIMIT } from 'hooks/useAtHgExecutionLimit';
-import { getRoute } from 'components/Routing.utils';
 import { Ul } from 'components/Ul';
 
 import { AlertContainer } from './AlertContainer';

src/components/OverLimitAlert/ScriptedCheckLimitAlert.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { TextLink } from '@grafana/ui';
 
-import { ROUTES } from 'types';
+import { ROUTES } from 'routing/types';
+import { getRoute } from 'routing/utils';
 import { useLimits } from 'hooks/useLimits';
-import { getRoute } from 'components/Routing.utils';
 import { Ul } from 'components/Ul';
 
 import { AlertContainer } from './AlertContainer';

src/components/ProbeCard/ProbeCard.test.tsx

@@ -8,9 +8,10 @@ import { OFFLINE_PROBE, ONLINE_PROBE, PRIVATE_PROBE, PUBLIC_PROBE } from 'test/f
 import { render } from 'test/render';
 import { probeToExtendedProbe, runTestAsViewer } from 'test/utils';
 
-import { type ExtendedProbe, ROUTES } from 'types';
+import { type ExtendedProbe } from 'types';
+import { ROUTES } from 'routing/types';
+import { generateRoutePath } from 'routing/utils';
 
-import { generateRoutePath } from '../../routes';
 import { ProbeCard } from './ProbeCard';
 
 it(`Displays the correct information`, async () => {

src/components/ProbeCard/ProbeCard.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { Card, Link, LinkButton, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
-import { generateRoutePath } from 'routes/utils';
 
-import { type ExtendedProbe, type Label, ROUTES } from 'types';
+import { type ExtendedProbe, type Label } from 'types';
+import { ROUTES } from 'routing/types';
+import { generateRoutePath } from 'routing/utils';
 import { useCanEditProbe } from 'hooks/useCanEditProbe';
 import { SuccessRateGaugeProbe } from 'components/Gauges';
 

src/components/ProbeEditor/ProbeEditor.tsx

@@ -6,13 +6,14 @@ import { css } from '@emotion/css';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ProbeSchema } from 'schemas/forms/ProbeSchema';
 
-import { ExtendedProbe, FeatureName, Probe, ROUTES } from 'types';
+import { ExtendedProbe, FeatureName, Probe } from 'types';
+import { ROUTES } from 'routing/types';
+import { getRoute } from 'routing/utils';
 import { useCanEditProbe } from 'hooks/useCanEditProbe';
 import { FeatureFlag } from 'components/FeatureFlag';
 import { HorizontalCheckboxField } from 'components/HorizonalCheckboxField';
 import { LabelField } from 'components/LabelField';
 import { ProbeRegionsSelect } from 'components/ProbeRegionsSelect';
-import { getRoute } from 'components/Routing.utils';
 import { SimpleMap } from 'components/SimpleMap';
 
 type ProbeEditorProps = {

src/components/ProbeUsageLink.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { ThemeTypographyVariantTypes } from '@grafana/data';
 import { TextLink } from '@grafana/ui';
 
-import { ExtendedProbe, ROUTES } from 'types';
+import { ExtendedProbe } from 'types';
+import { ROUTES } from 'routing/types';
+import { getRoute } from 'routing/utils';
 
 import { DataTestIds } from '../test/dataTestIds';
-import { getRoute } from './Routing.utils';
-
 interface ProbeUsageLinkProps {
   probe: ExtendedProbe;
   variant?: keyof Omit<ThemeTypographyVariantTypes, 'code'>;

src/components/SceneRedirecter.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Navigate } from 'react-router-dom-v5-compat';
 import { LoadingPlaceholder } from '@grafana/ui';
-import { generateRoutePath } from 'routes/utils';
 
-import { ROUTES } from 'types';
+import { ROUTES } from 'routing/types';
+import { generateRoutePath } from 'routing/utils';
 import { useChecks } from 'data/useChecks';
 import { useQuery } from 'hooks/useQuery';
 

src/configPage/PluginConfigPage/PluginConfigPage.tsx

@@ -4,10 +4,11 @@ import { Alert, Badge, Button, Card, Divider, LinkButton, TextLink, useStyles2 }
 import { css } from '@emotion/css';
 import { DataTestIds } from 'test/dataTestIds';
 
-import { ProvisioningJsonData, ROUTES } from 'types';
+import { ProvisioningJsonData } from 'types';
 import { hasGlobalPermission } from 'utils';
+import { ROUTES } from 'routing/types';
+import { getRoute } from 'routing/utils';
 import type { SMDataSource } from 'datasource/DataSource';
-import { getRoute } from 'components/Routing.utils';
 
 import { DataSourceInfo, useLinkedDataSources } from './PluginConfigPage.hooks';
 import { enablePlugin } from './PluginConfigPage.utils';

src/contexts/SMDatasourceContext.tsx

@@ -1,10 +1,10 @@
 import React, { createContext, PropsWithChildren, useContext } from 'react';
 import { PluginPage } from '@grafana/runtime';
 
+import { UninitialisedRouter } from 'routing/UninitialisedRouter';
 import { SMDataSource } from 'datasource/DataSource';
 import { useGetSMDatasource } from 'data/useSMSetup';
 import { CenteredSpinner } from 'components/CenteredSpinner';
-import { UninitialisedRouter } from 'components/Routing';
 
 type SMDatasourceContextValue = {
   smDS: SMDataSource;

src/hooks/useAppInitializer.ts

@@ -3,11 +3,12 @@ import { DataSourceInstanceSettings, DataSourceJsonData } from '@grafana/data';
 import { config, getBackendSrv } from '@grafana/runtime';
 import { isNumber } from 'lodash';
 
-import { ROUTES, SubmissionErrorWrapper } from 'types';
+import { SubmissionErrorWrapper } from 'types';
 import { FaroEvent, reportError, reportEvent } from 'faro';
 import { initializeDatasource } from 'utils';
+import { ROUTES } from 'routing/types';
+import { getRoute } from 'routing/utils';
 import { LEGACY_LOGS_DS_NAME, LEGACY_METRICS_DS_NAME } from 'components/constants';
-import { getRoute } from 'components/Routing.utils';
 
 import { useMeta } from './useMeta';
 

src/hooks/useCheckTypeGroupOptions.tsx

@@ -1,9 +1,10 @@
 import { ReactNode, useContext } from 'react';
 import { IconName } from '@grafana/data';
 
-import { CheckType, CheckTypeGroup, FeatureName, ROUTES } from 'types';
+import { CheckType, CheckTypeGroup, FeatureName } from 'types';
+import { ROUTES } from 'routing/types';
+import { getRoute } from 'routing/utils';
 import { FeatureFlagContext } from 'contexts/FeatureFlagContext';
-import { getRoute } from 'components/Routing.utils';
 
 import { CHECK_TYPE_OPTIONS } from './useCheckTypeOptions';
 

src/hooks/useNavigation.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { getLocationSrv } from '@grafana/runtime';
 
-import { PLUGIN_URL_PATH } from 'components/Routing.consts';
+import { PLUGIN_URL_PATH } from 'routing/constants';
 
 export type QueryParamMap = {
   [key: string]: string;

src/page/AlertingWelcomePage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextLink } from '@grafana/ui';
 
-import { ROUTES } from 'types';
+import { ROUTES } from 'routing/types';
 
 import { SubsectionWelcomePage } from './SubsectionWelcomePage';
 

src/page/ChecksPage.test.tsx

@@ -10,16 +10,17 @@ import { apiRoute } from 'test/handlers';
 import { ComponentWrapperProps, render } from 'test/render';
 import { server } from 'test/server';
 
-import { AlertSensitivity, Check, CheckTypeGroup, ROUTES } from 'types';
+import { AlertSensitivity, Check, CheckTypeGroup } from 'types';
+import { PLUGIN_URL_PATH } from 'routing/constants';
+import { InitialisedRouter } from 'routing/InitialisedRouter';
+import { ROUTES } from 'routing/types';
+import { generateRoutePath } from 'routing/utils';
 
 import { FeatureFlagProvider } from '../components/FeatureFlagProvider';
-import { InitialisedRouter } from '../components/Routing';
-import { PLUGIN_URL_PATH } from '../components/Routing.consts';
 import { MetaContextProvider } from '../contexts/MetaContext';
 import { PermissionsContextProvider } from '../contexts/PermissionsContext';
 import { SMDatasourceProvider } from '../contexts/SMDatasourceContext';
 import { getQueryClient } from '../data/queryClient';
-import { generateRoutePath } from '../routes';
 import { SM_META } from '../test/fixtures/meta';
 
 function RouteWrapper({ children, meta, history }: ComponentWrapperProps) {

src/page/ChecksWelcomePage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextLink } from '@grafana/ui';
 
-import { ROUTES } from 'types';
+import { ROUTES } from 'routing/types';
 
 import { SubsectionWelcomePage } from './SubsectionWelcomePage';