From 02a0a9583a7c66d50bf7976e2c2d58cbb1f5bf07 Mon Sep 17 00:00:00 2001 From: Chris Bedwell Date: Thu, 28 Nov 2024 09:20:53 +0000 Subject: [PATCH] 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 | 1 + src/components/AlertStatus/AlertStatus.tsx | 5 +- src/components/App.tsx | 2 +- src/components/AppInitializer.tsx | 2 +- .../CheckProbes/PrivateProbesAlert.tsx | 4 +- src/components/CheckForm/CheckForm.tsx | 5 +- src/components/CheckForm/checkForm.hooks.ts | 3 +- .../CheckList/AddNewCheckButton.tsx | 2 +- src/components/CheckList/CheckList.test.tsx | 5 +- src/components/CheckList/EmptyCheckList.tsx | 2 +- .../CheckListItem/CheckItemActionButtons.tsx | 6 +- .../ChooseCheckGroup/CheckGroupCard.tsx | 5 +- src/components/ConfigActions.tsx | 4 +- .../OverLimitAlert/BrowserCheckLimitAlert.tsx | 4 +- .../OverLimitAlert/CheckLimitAlert.tsx | 4 +- .../OverLimitAlert/ExecutionLimitAlert.tsx | 4 +- .../ScriptedCheckLimitAlert.tsx | 4 +- src/components/ProbeCard/ProbeCard.test.tsx | 5 +- src/components/ProbeCard/ProbeCard.tsx | 5 +- src/components/ProbeEditor/ProbeEditor.tsx | 5 +- src/components/ProbeUsageLink.tsx | 6 +- src/components/Routing.utils.ts | 7 -- src/components/SceneRedirecter.tsx | 4 +- .../PluginConfigPage/PluginConfigPage.tsx | 5 +- src/contexts/SMDatasourceContext.tsx | 2 +- src/hooks/useAppInitializer.ts | 5 +- src/hooks/useCheckTypeGroupOptions.tsx | 5 +- src/hooks/useNavigation.ts | 2 +- src/page/AlertingWelcomePage.tsx | 2 +- src/page/ChecksPage.test.tsx | 9 +-- src/page/ChecksWelcomePage.tsx | 2 +- .../ConfigPageLayout.test.tsx | 4 +- .../ConfigPageLayout/ConfigPageLayout.tsx | 4 +- .../ConfigPageLayout/tabs/TerraformTab.tsx | 4 +- .../tabs/UninitializedTab.test.tsx | 2 +- .../tabs/UninitializedTab.tsx | 2 +- src/page/DashboardPage.tsx | 5 +- src/page/EditCheck/EditCheck.tsx | 5 +- src/page/EditProbe/EditProbe.test.tsx | 6 +- src/page/EditProbe/EditProbe.tsx | 6 +- src/page/NewCheck/NewCheck.tsx | 5 +- src/page/NewProbe/NewProbe.test.tsx | 6 +- src/page/NewProbe/NewProbe.tsx | 3 +- src/page/NotFound/CheckNotFound.tsx | 4 +- src/page/Probes/Probes.tsx | 5 +- src/page/ProbesWelcomePage.tsx | 2 +- src/page/SceneHomepage.tsx | 5 +- src/page/SubsectionWelcomePage.tsx | 2 +- src/page/__mocks__/DashboardPage.tsx | 5 -- src/page/__mocks__/SceneHomepage.tsx | 5 -- src/page/__testHelpers__/checkForm.tsx | 7 +- src/page/pageDefinitions.ts | 2 +- src/routes/index.ts | 2 - .../InitialisedRouter.test.tsx} | 68 +++---------------- .../InitialisedRouter.tsx} | 48 ++----------- .../LegacyEditRedirect.tsx | 5 +- src/routing/UninitialisedRouter.test.tsx | 60 ++++++++++++++++ src/routing/UninitialisedRouter.tsx | 40 +++++++++++ .../constants.ts} | 0 src/routing/types.ts | 16 +++++ src/{routes => routing}/utils.ts | 9 ++- src/scenes/Common/editButton.tsx | 5 +- src/scenes/Common/emptyScene.tsx | 3 +- .../test => test/helpers}/TestRouteInfo.tsx | 2 +- src/test/render.tsx | 3 +- src/types.ts | 17 ----- 66 files changed, 257 insertions(+), 236 deletions(-) delete mode 100644 src/components/Routing.utils.ts delete mode 100644 src/page/__mocks__/DashboardPage.tsx delete mode 100644 src/page/__mocks__/SceneHomepage.tsx delete mode 100644 src/routes/index.ts rename src/{components/Routing.test.tsx => routing/InitialisedRouter.test.tsx} (57%) rename src/{components/Routing.tsx => routing/InitialisedRouter.tsx} (71%) rename src/{routes => routing}/LegacyEditRedirect.tsx (85%) create mode 100644 src/routing/UninitialisedRouter.test.tsx create mode 100644 src/routing/UninitialisedRouter.tsx rename src/{components/Routing.consts.ts => routing/constants.ts} (100%) create mode 100644 src/routing/types.ts rename src/{routes => routing}/utils.ts (82%) rename src/{routes/test => test/helpers}/TestRouteInfo.tsx (94%) diff --git a/.eslintrc.js b/.eslintrc.js index f0d5aae81..fbb0831ce 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -37,6 +37,7 @@ module.exports = { '^faro', '^sessionStorage', '^utils', + '^routing', '^validation', '^datasource', '^contexts', diff --git a/src/components/AlertStatus/AlertStatus.tsx b/src/components/AlertStatus/AlertStatus.tsx index 53ceb36d8..f19412d7c 100644 --- a/src/components/AlertStatus/AlertStatus.tsx +++ b/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 = { diff --git a/src/components/App.tsx b/src/components/App.tsx index 1bfce4f51..7fee388de 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -5,6 +5,7 @@ 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'; @@ -12,7 +13,6 @@ 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) => { const { meta } = props; diff --git a/src/components/AppInitializer.tsx b/src/components/AppInitializer.tsx index 3c8a46f43..c4d894708 100644 --- a/src/components/AppInitializer.tsx +++ b/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'; diff --git a/src/components/CheckEditor/CheckProbes/PrivateProbesAlert.tsx b/src/components/CheckEditor/CheckProbes/PrivateProbesAlert.tsx index e4d50f85e..c9d95c157 100644 --- a/src/components/CheckEditor/CheckProbes/PrivateProbesAlert.tsx +++ b/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('dismissedPrivateProbesAlert', false); diff --git a/src/components/CheckForm/CheckForm.tsx b/src/components/CheckForm/CheckForm.tsx index 969c65a39..96e16914d 100644 --- a/src/components/CheckForm/CheckForm.tsx +++ b/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'; diff --git a/src/components/CheckForm/checkForm.hooks.ts b/src/components/CheckForm/checkForm.hooks.ts index d622e6b4f..cfa7ca4c5 100644 --- a/src/components/CheckForm/checkForm.hooks.ts +++ b/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'; diff --git a/src/components/CheckList/AddNewCheckButton.tsx b/src/components/CheckList/AddNewCheckButton.tsx index 2aede2f2d..91726af41 100644 --- a/src/components/CheckList/AddNewCheckButton.tsx +++ b/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'; diff --git a/src/components/CheckList/CheckList.test.tsx b/src/components/CheckList/CheckList.test.tsx index 1cf2d66a1..689c5b6f5 100644 --- a/src/components/CheckList/CheckList.test.tsx +++ b/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', () => { diff --git a/src/components/CheckList/EmptyCheckList.tsx b/src/components/CheckList/EmptyCheckList.tsx index 9231c2c51..39b035f09 100644 --- a/src/components/CheckList/EmptyCheckList.tsx +++ b/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) => ({ diff --git a/src/components/CheckListItem/CheckItemActionButtons.tsx b/src/components/CheckListItem/CheckItemActionButtons.tsx index 07cfca7da..90b199d5b 100644 --- a/src/components/CheckListItem/CheckItemActionButtons.tsx +++ b/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` diff --git a/src/components/ChooseCheckGroup/CheckGroupCard.tsx b/src/components/ChooseCheckGroup/CheckGroupCard.tsx index b7aecd8ba..2bca4901e 100644 --- a/src/components/ChooseCheckGroup/CheckGroupCard.tsx +++ b/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'; diff --git a/src/components/ConfigActions.tsx b/src/components/ConfigActions.tsx index 223be259c..17ad11ad2 100644 --- a/src/components/ConfigActions.tsx +++ b/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); diff --git a/src/components/OverLimitAlert/BrowserCheckLimitAlert.tsx b/src/components/OverLimitAlert/BrowserCheckLimitAlert.tsx index 06dbee303..09697bfc6 100644 --- a/src/components/OverLimitAlert/BrowserCheckLimitAlert.tsx +++ b/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'; diff --git a/src/components/OverLimitAlert/CheckLimitAlert.tsx b/src/components/OverLimitAlert/CheckLimitAlert.tsx index fa29be6ce..728148eb5 100644 --- a/src/components/OverLimitAlert/CheckLimitAlert.tsx +++ b/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'; diff --git a/src/components/OverLimitAlert/ExecutionLimitAlert.tsx b/src/components/OverLimitAlert/ExecutionLimitAlert.tsx index d4b847572..226649c05 100644 --- a/src/components/OverLimitAlert/ExecutionLimitAlert.tsx +++ b/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'; diff --git a/src/components/OverLimitAlert/ScriptedCheckLimitAlert.tsx b/src/components/OverLimitAlert/ScriptedCheckLimitAlert.tsx index 6c2be0caa..f889d9d9a 100644 --- a/src/components/OverLimitAlert/ScriptedCheckLimitAlert.tsx +++ b/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'; diff --git a/src/components/ProbeCard/ProbeCard.test.tsx b/src/components/ProbeCard/ProbeCard.test.tsx index ca12bff6b..7e7c818fb 100644 --- a/src/components/ProbeCard/ProbeCard.test.tsx +++ b/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 () => { diff --git a/src/components/ProbeCard/ProbeCard.tsx b/src/components/ProbeCard/ProbeCard.tsx index a99e98f57..0e81c3de1 100644 --- a/src/components/ProbeCard/ProbeCard.tsx +++ b/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'; diff --git a/src/components/ProbeEditor/ProbeEditor.tsx b/src/components/ProbeEditor/ProbeEditor.tsx index b0077cd68..4a91e7508 100644 --- a/src/components/ProbeEditor/ProbeEditor.tsx +++ b/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 = { diff --git a/src/components/ProbeUsageLink.tsx b/src/components/ProbeUsageLink.tsx index 26cd9bc78..ff4c1877b 100644 --- a/src/components/ProbeUsageLink.tsx +++ b/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; diff --git a/src/components/Routing.utils.ts b/src/components/Routing.utils.ts deleted file mode 100644 index 0619e3303..000000000 --- a/src/components/Routing.utils.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { ROUTES } from 'types'; - -import { PLUGIN_URL_PATH } from './Routing.consts'; - -export function getRoute(route: ROUTES) { - return `${PLUGIN_URL_PATH}${route}`; -} diff --git a/src/components/SceneRedirecter.tsx b/src/components/SceneRedirecter.tsx index 28f8fa364..31e4894ac 100644 --- a/src/components/SceneRedirecter.tsx +++ b/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'; diff --git a/src/configPage/PluginConfigPage/PluginConfigPage.tsx b/src/configPage/PluginConfigPage/PluginConfigPage.tsx index 4291dc109..57ff0caa2 100644 --- a/src/configPage/PluginConfigPage/PluginConfigPage.tsx +++ b/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'; diff --git a/src/contexts/SMDatasourceContext.tsx b/src/contexts/SMDatasourceContext.tsx index 2d1d55ea5..0979451f4 100644 --- a/src/contexts/SMDatasourceContext.tsx +++ b/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; diff --git a/src/hooks/useAppInitializer.ts b/src/hooks/useAppInitializer.ts index e09f5eaa3..503b90510 100644 --- a/src/hooks/useAppInitializer.ts +++ b/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'; diff --git a/src/hooks/useCheckTypeGroupOptions.tsx b/src/hooks/useCheckTypeGroupOptions.tsx index f4f8bec4f..e9f6c9dfe 100644 --- a/src/hooks/useCheckTypeGroupOptions.tsx +++ b/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'; diff --git a/src/hooks/useNavigation.ts b/src/hooks/useNavigation.ts index ff5f9272e..627422a7b 100644 --- a/src/hooks/useNavigation.ts +++ b/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; diff --git a/src/page/AlertingWelcomePage.tsx b/src/page/AlertingWelcomePage.tsx index 46f090625..28f254e65 100644 --- a/src/page/AlertingWelcomePage.tsx +++ b/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'; diff --git a/src/page/ChecksPage.test.tsx b/src/page/ChecksPage.test.tsx index 9aa48c89e..cde0a0fe1 100644 --- a/src/page/ChecksPage.test.tsx +++ b/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) { diff --git a/src/page/ChecksWelcomePage.tsx b/src/page/ChecksWelcomePage.tsx index 228c0622a..9138f248e 100644 --- a/src/page/ChecksWelcomePage.tsx +++ b/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'; diff --git a/src/page/ConfigPageLayout/ConfigPageLayout.test.tsx b/src/page/ConfigPageLayout/ConfigPageLayout.test.tsx index d6fe722c4..b537b46e6 100644 --- a/src/page/ConfigPageLayout/ConfigPageLayout.test.tsx +++ b/src/page/ConfigPageLayout/ConfigPageLayout.test.tsx @@ -3,9 +3,9 @@ import { MemoryRouter } from 'react-router-dom'; import { CompatRouter, Route, Routes } from 'react-router-dom-v5-compat'; import { render } from '@testing-library/react'; -import { ROUTES } from '../../types'; +import { ROUTES } from 'routing/types'; +import { getRoute } from 'routing/utils'; -import { getRoute } from '../../components/Routing.utils'; import { DataTestIds } from '../../test/dataTestIds'; import { ConfigPageLayout } from './ConfigPageLayout'; diff --git a/src/page/ConfigPageLayout/ConfigPageLayout.tsx b/src/page/ConfigPageLayout/ConfigPageLayout.tsx index ecb651524..9426f671b 100644 --- a/src/page/ConfigPageLayout/ConfigPageLayout.tsx +++ b/src/page/ConfigPageLayout/ConfigPageLayout.tsx @@ -3,8 +3,8 @@ import { matchPath, Outlet, useLocation } from 'react-router-dom-v5-compat'; import { NavModelItem } from '@grafana/data'; import { PluginPage } from '@grafana/runtime'; -import { ROUTES } from 'types'; -import { getRoute } from 'components/Routing.utils'; +import { ROUTES } from 'routing/types'; +import { getRoute } from 'routing/utils'; function getConfigTabUrl(tab = '/') { return `${getRoute(ROUTES.Config)}/${tab}`.replace(/\/+/g, '/'); diff --git a/src/page/ConfigPageLayout/tabs/TerraformTab.tsx b/src/page/ConfigPageLayout/tabs/TerraformTab.tsx index 77f6ce2af..75bc47fb6 100644 --- a/src/page/ConfigPageLayout/tabs/TerraformTab.tsx +++ b/src/page/ConfigPageLayout/tabs/TerraformTab.tsx @@ -2,10 +2,10 @@ import React, { useEffect } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { Alert, Text, TextLink, useStyles2 } from '@grafana/ui'; import { css } from '@emotion/css'; -import { generateRoutePath } from 'routes'; -import { ROUTES } from 'types'; import { FaroEvent, reportEvent } from 'faro'; +import { ROUTES } from 'routing/types'; +import { generateRoutePath } from 'routing/utils'; import { useTerraformConfig } from 'hooks/useTerraformConfig'; import { Clipboard } from 'components/Clipboard'; diff --git a/src/page/ConfigPageLayout/tabs/UninitializedTab.test.tsx b/src/page/ConfigPageLayout/tabs/UninitializedTab.test.tsx index 3e2f90c01..95d230027 100644 --- a/src/page/ConfigPageLayout/tabs/UninitializedTab.test.tsx +++ b/src/page/ConfigPageLayout/tabs/UninitializedTab.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { screen } from '@testing-library/react'; -import { ROUTES } from '../../../types'; +import { ROUTES } from 'routing/types'; import { AppInitializer } from '../../../components/AppInitializer'; import { DataTestIds } from '../../../test/dataTestIds'; diff --git a/src/page/ConfigPageLayout/tabs/UninitializedTab.tsx b/src/page/ConfigPageLayout/tabs/UninitializedTab.tsx index cfef8acd3..b68871f78 100644 --- a/src/page/ConfigPageLayout/tabs/UninitializedTab.tsx +++ b/src/page/ConfigPageLayout/tabs/UninitializedTab.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { EmptyState, TextLink } from '@grafana/ui'; -import { ROUTES } from 'types'; +import { ROUTES } from 'routing/types'; import { AppInitializer } from 'components/AppInitializer'; import { ConfigContent } from '../ConfigContent'; diff --git a/src/page/DashboardPage.tsx b/src/page/DashboardPage.tsx index 31eee2afe..dac13f987 100644 --- a/src/page/DashboardPage.tsx +++ b/src/page/DashboardPage.tsx @@ -2,10 +2,11 @@ import React, { useMemo } from 'react'; import { useParams } from 'react-router-dom-v5-compat'; import { SceneApp, SceneAppPage } from '@grafana/scenes'; import { Spinner } from '@grafana/ui'; -import { generateRoutePath } from 'routes'; -import { CheckPageParams, CheckType, DashboardSceneAppConfig, FeatureName, ROUTES } from 'types'; +import { CheckPageParams, CheckType, DashboardSceneAppConfig, FeatureName } from 'types'; import { getCheckType } from 'utils'; +import { ROUTES } from 'routing/types'; +import { generateRoutePath } from 'routing/utils'; import { useChecks } from 'data/useChecks'; import { useFeatureFlag } from 'hooks/useFeatureFlag'; import { useLogsDS } from 'hooks/useLogsDS'; diff --git a/src/page/EditCheck/EditCheck.tsx b/src/page/EditCheck/EditCheck.tsx index 2c36448d4..dc40d5a98 100644 --- a/src/page/EditCheck/EditCheck.tsx +++ b/src/page/EditCheck/EditCheck.tsx @@ -2,11 +2,12 @@ import React, { useCallback } from 'react'; import { useParams } from 'react-router-dom-v5-compat'; import { Alert, Button, LinkButton, Modal } from '@grafana/ui'; -import { CheckPageParams, ROUTES } from 'types'; +import { CheckPageParams } from 'types'; +import { ROUTES } from 'routing/types'; +import { getRoute } from 'routing/utils'; import { useChecks } from 'data/useChecks'; import { useNavigation } from 'hooks/useNavigation'; import { CheckForm } from 'components/CheckForm/CheckForm'; -import { getRoute } from 'components/Routing.utils'; export const EditCheck = () => { return ; diff --git a/src/page/EditProbe/EditProbe.test.tsx b/src/page/EditProbe/EditProbe.test.tsx index 2637b1ad9..107165bc0 100644 --- a/src/page/EditProbe/EditProbe.test.tsx +++ b/src/page/EditProbe/EditProbe.test.tsx @@ -5,11 +5,11 @@ import { apiRoute, getServerRequests } from 'test/handlers'; import { render } from 'test/render'; import { server } from 'test/server'; -import { Probe, ROUTES } from 'types'; +import { Probe } from 'types'; import { formatDate } from 'utils'; -import { getRoute } from 'components/Routing.utils'; +import { ROUTES } from 'routing/types'; +import { generateRoutePath, getRoute } from 'routing/utils'; -import { generateRoutePath } from '../../routes'; import { DataTestIds } from '../../test/dataTestIds'; import { EditProbe } from './EditProbe'; diff --git a/src/page/EditProbe/EditProbe.tsx b/src/page/EditProbe/EditProbe.tsx index cd3a16529..3b707db2d 100644 --- a/src/page/EditProbe/EditProbe.tsx +++ b/src/page/EditProbe/EditProbe.tsx @@ -2,9 +2,10 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom-v5-compat'; import { PluginPage } from '@grafana/runtime'; import { LinkButton, TextLink } from '@grafana/ui'; -import { generateRoutePath } from 'routes/utils'; -import { ExtendedProbe, type Probe, type ProbePageParams, ROUTES } from 'types'; +import { ExtendedProbe, type Probe, type ProbePageParams } from 'types'; +import { ROUTES } from 'routing/types'; +import { generateRoutePath, getRoute } from 'routing/utils'; import { useExtendedProbe, useUpdateProbe } from 'data/useProbes'; import { useCanEditProbe } from 'hooks/useCanEditProbe'; import { useNavigation } from 'hooks/useNavigation'; @@ -14,7 +15,6 @@ import { ProbeStatus } from 'components/ProbeStatus'; import { ProbeTokenModal } from 'components/ProbeTokenModal'; import { QueryErrorBoundary } from 'components/QueryErrorBoundary'; -import { getRoute } from '../../components/Routing.utils'; import { PluginPageNotFound } from '../NotFound/NotFound'; import { getErrorInfo, getTitle } from './EditProbe.utils'; diff --git a/src/page/NewCheck/NewCheck.tsx b/src/page/NewCheck/NewCheck.tsx index 428d720b7..315d24d0e 100644 --- a/src/page/NewCheck/NewCheck.tsx +++ b/src/page/NewCheck/NewCheck.tsx @@ -2,10 +2,11 @@ import React from 'react'; import { useParams } from 'react-router-dom-v5-compat'; import { TextLink } from '@grafana/ui'; -import { CheckFormPageParams, ROUTES } from 'types'; +import { CheckFormPageParams } from 'types'; +import { ROUTES } from 'routing/types'; +import { getRoute } from 'routing/utils'; import { CHECK_TYPE_GROUP_OPTIONS } from 'hooks/useCheckTypeGroupOptions'; import { CheckForm } from 'components/CheckForm/CheckForm'; -import { getRoute } from 'components/Routing.utils'; import { PluginPageNotFound } from '../NotFound/NotFound'; diff --git a/src/page/NewProbe/NewProbe.test.tsx b/src/page/NewProbe/NewProbe.test.tsx index b8a0b8000..b22431da5 100644 --- a/src/page/NewProbe/NewProbe.test.tsx +++ b/src/page/NewProbe/NewProbe.test.tsx @@ -5,10 +5,10 @@ import { ADD_PROBE_TOKEN_RESPONSE } from 'test/fixtures/probes'; import { render } from 'test/render'; import { fillProbeForm } from 'test/utils'; -import { FeatureName, ROUTES } from 'types'; -import { getRoute } from 'components/Routing.utils'; +import { FeatureName } from 'types'; +import { ROUTES } from 'routing/types'; +import { generateRoutePath, getRoute } from 'routing/utils'; -import { generateRoutePath } from '../../routes'; import { DataTestIds } from '../../test/dataTestIds'; import { NewProbe } from './NewProbe'; diff --git a/src/page/NewProbe/NewProbe.tsx b/src/page/NewProbe/NewProbe.tsx index 6283c0070..a9bad9d65 100644 --- a/src/page/NewProbe/NewProbe.tsx +++ b/src/page/NewProbe/NewProbe.tsx @@ -3,7 +3,8 @@ import { PluginPage } from '@grafana/runtime'; import { Alert, Label, useTheme2 } from '@grafana/ui'; import { css } from '@emotion/css'; -import { ExtendedProbe, type Probe, ROUTES } from 'types'; +import { ExtendedProbe, type Probe } from 'types'; +import { ROUTES } from 'routing/types'; import { type AddProbeResult } from 'datasource/responses.types'; import { useCreateProbe } from 'data/useProbes'; import { useBackendAddress } from 'hooks/useBackendAddress'; diff --git a/src/page/NotFound/CheckNotFound.tsx b/src/page/NotFound/CheckNotFound.tsx index 41999c76e..a727d8081 100644 --- a/src/page/NotFound/CheckNotFound.tsx +++ b/src/page/NotFound/CheckNotFound.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { useParams } from 'react-router-dom-v5-compat'; import { TextLink } from '@grafana/ui'; -import { generateRoutePath } from 'routes/utils'; -import { ROUTES } from 'types'; import { createNavModel } from 'utils'; +import { ROUTES } from 'routing/types'; +import { generateRoutePath } from 'routing/utils'; import { useCheck } from 'data/useChecks'; import { NotFound, PluginPageNotFound } from './NotFound'; diff --git a/src/page/Probes/Probes.tsx b/src/page/Probes/Probes.tsx index e83cd643d..1fe3f7b94 100644 --- a/src/page/Probes/Probes.tsx +++ b/src/page/Probes/Probes.tsx @@ -4,14 +4,15 @@ import { LinkButton, useTheme2 } from '@grafana/ui'; import { css } from '@emotion/css'; import { DataTestIds } from 'test/dataTestIds'; -import { ExtendedProbe, ROUTES } from 'types'; +import { ExtendedProbe } from 'types'; +import { ROUTES } from 'routing/types'; +import { getRoute } from 'routing/utils'; import { useExtendedProbes } from 'data/useProbes'; import { useCanWriteSM } from 'hooks/useDSPermission'; import { CenteredSpinner } from 'components/CenteredSpinner'; import { DocsLink } from 'components/DocsLink'; import { ProbeList } from 'components/ProbeList'; import { QueryErrorBoundary } from 'components/QueryErrorBoundary'; -import { getRoute } from 'components/Routing.utils'; export const Probes = () => { const theme = useTheme2(); diff --git a/src/page/ProbesWelcomePage.tsx b/src/page/ProbesWelcomePage.tsx index 8e8917194..1dafb965b 100644 --- a/src/page/ProbesWelcomePage.tsx +++ b/src/page/ProbesWelcomePage.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'; diff --git a/src/page/SceneHomepage.tsx b/src/page/SceneHomepage.tsx index 1be44c476..7fdf6f94b 100644 --- a/src/page/SceneHomepage.tsx +++ b/src/page/SceneHomepage.tsx @@ -2,12 +2,13 @@ import React, { useMemo } from 'react'; import { SceneApp, SceneAppPage } from '@grafana/scenes'; import { LoadingPlaceholder } from '@grafana/ui'; -import { DashboardSceneAppConfig, ROUTES } from 'types'; +import { DashboardSceneAppConfig } from 'types'; +import { PLUGIN_URL_PATH } from 'routing/constants'; +import { ROUTES } from 'routing/types'; import { useChecks } from 'data/useChecks'; import { useLogsDS } from 'hooks/useLogsDS'; import { useMetricsDS } from 'hooks/useMetricsDS'; import { useSMDS } from 'hooks/useSMDS'; -import { PLUGIN_URL_PATH } from 'components/Routing.consts'; import { getSummaryScene } from 'scenes/Summary'; export const SceneHomepage = () => { diff --git a/src/page/SubsectionWelcomePage.tsx b/src/page/SubsectionWelcomePage.tsx index 09e3ade6d..dcb39779f 100644 --- a/src/page/SubsectionWelcomePage.tsx +++ b/src/page/SubsectionWelcomePage.tsx @@ -4,7 +4,7 @@ import { PluginPage } from '@grafana/runtime'; import { Stack, Text, useStyles2 } from '@grafana/ui'; import { css } from '@emotion/css'; -import { ROUTES } from 'types'; +import { ROUTES } from 'routing/types'; import { AppInitializer } from 'components/AppInitializer'; import { Card } from 'components/Card'; diff --git a/src/page/__mocks__/DashboardPage.tsx b/src/page/__mocks__/DashboardPage.tsx deleted file mode 100644 index ddef037d3..000000000 --- a/src/page/__mocks__/DashboardPage.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; - -export function DashboardPage() { - return

Dashboard page

; -} diff --git a/src/page/__mocks__/SceneHomepage.tsx b/src/page/__mocks__/SceneHomepage.tsx deleted file mode 100644 index c8094c27d..000000000 --- a/src/page/__mocks__/SceneHomepage.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; - -export function SceneHomepage() { - return

Home page

; -} diff --git a/src/page/__testHelpers__/checkForm.tsx b/src/page/__testHelpers__/checkForm.tsx index a9a5e727c..9ee8f2997 100644 --- a/src/page/__testHelpers__/checkForm.tsx +++ b/src/page/__testHelpers__/checkForm.tsx @@ -6,14 +6,13 @@ import { apiRoute, getServerRequests } from 'test/handlers'; import { render } from 'test/render'; import { server } from 'test/server'; -import { Check, CheckType, ROUTES } from 'types'; +import { Check, CheckType } from 'types'; import { getCheckTypeGroup } from 'utils'; +import { ROUTES } from 'routing/types'; +import { generateRoutePath, getRoute } from 'routing/utils'; import { EditCheck } from 'page/EditCheck'; import { NewCheck } from 'page/NewCheck'; -import { getRoute } from '../../components/Routing.utils'; -import { generateRoutePath } from '../../routes'; - export const TARGET_MAP = { [CheckType.DNS]: 'grafana.com', [CheckType.GRPC]: 'grafana.com:50051', diff --git a/src/page/pageDefinitions.ts b/src/page/pageDefinitions.ts index 4a367e524..ccf6f010c 100644 --- a/src/page/pageDefinitions.ts +++ b/src/page/pageDefinitions.ts @@ -2,7 +2,7 @@ import React from 'react'; import { AppRootProps, NavModelItem } from '@grafana/data'; import { Settings } from 'types'; -import { PLUGIN_URL_PATH } from 'components/Routing.consts'; +import { PLUGIN_URL_PATH } from 'routing/constants'; export type PageDefinition = { component: React.FC>; diff --git a/src/routes/index.ts b/src/routes/index.ts deleted file mode 100644 index abd65a6c0..000000000 --- a/src/routes/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './utils'; -export * from './LegacyEditRedirect'; diff --git a/src/components/Routing.test.tsx b/src/routing/InitialisedRouter.test.tsx similarity index 57% rename from src/components/Routing.test.tsx rename to src/routing/InitialisedRouter.test.tsx index 6b131cd4c..23d3005e0 100644 --- a/src/components/Routing.test.tsx +++ b/src/routing/InitialisedRouter.test.tsx @@ -3,71 +3,25 @@ import { screen } from '@testing-library/react'; import { SM_DATASOURCE } from 'test/fixtures/datasources'; import { type CustomRenderOptions, render } from 'test/render'; -import { ROUTES } from 'types'; -import { PLUGIN_URL_PATH } from 'components/Routing.consts'; - -import { InitialisedRouter, UninitialisedRouter } from './Routing'; -import { getRoute } from './Routing.utils'; +import { PLUGIN_URL_PATH } from 'routing/constants'; +import { InitialisedRouter } from 'routing/InitialisedRouter'; +import { ROUTES } from 'routing/types'; +import { getRoute } from 'routing/utils'; function renderInitialisedRouting(options?: CustomRenderOptions) { return render(, options); } -function renderUninitialisedRouting(options?: CustomRenderOptions) { - render(, options); -} - // Mocking these pages because they renders scenes, which makes jest explode -jest.mock('page/DashboardPage'); -jest.mock('page/SceneHomepage'); - -const notaRoute = `${PLUGIN_URL_PATH}/404`; - -describe('Renders specific welcome pages when app is not initializd', () => { - test(`Route Home`, async () => { - renderUninitialisedRouting({ path: getRoute(ROUTES.Home) }); - const text = await screen.findByText('Up and running in seconds, no instrumentation required'); - expect(text).toBeInTheDocument(); - }); - - test(`Route Probes`, async () => { - renderUninitialisedRouting({ path: getRoute(ROUTES.Probes) }); - const text = await screen.findByText( - 'Click the See Probes button to initialize the plugin and see a list of public probes', - { exact: false } - ); - expect(text).toBeInTheDocument(); - }); +jest.mock('page/DashboardPage', () => ({ + DashboardPage: () =>

Dashboard page

, +})); - test(`Route Alerts`, async () => { - renderUninitialisedRouting({ path: getRoute(ROUTES.Alerts) }); - const text = await screen.findByText( - 'Click the See Alerting button to initialize the plugin and see a list of default alerts', - { exact: false } - ); - expect(text).toBeInTheDocument(); - }); - test(`Route Checks`, async () => { - renderUninitialisedRouting({ path: getRoute(ROUTES.Checks) }); - const text = await screen.findByText('Click the Create a Check button to initialize the plugin and create checks', { - exact: false, - }); - expect(text).toBeInTheDocument(); - }); - - test(`Route Config`, async () => { - renderUninitialisedRouting({ path: getRoute(ROUTES.Config) }); +jest.mock('page/SceneHomepage', () => ({ + SceneHomepage: () =>

Home page

, +})); - const text = await screen.findByText('Synthetic Monitoring is not yet initialized'); - expect(text).toBeInTheDocument(); - }); - - test('Non-existent route (404)', async () => { - renderUninitialisedRouting({ path: notaRoute }); - const text = await screen.findByText('Up and running in seconds, no instrumentation required'); - expect(text).toBeInTheDocument(); - }); -}); +const notaRoute = `${PLUGIN_URL_PATH}/404`; // Would like to have asserted on the h1s but rendering the Grafana pluginpage is tricky describe('Routes to pages correctly', () => { diff --git a/src/components/Routing.tsx b/src/routing/InitialisedRouter.tsx similarity index 71% rename from src/components/Routing.tsx rename to src/routing/InitialisedRouter.tsx index 1734bb671..dda57d32e 100644 --- a/src/components/Routing.tsx +++ b/src/routing/InitialisedRouter.tsx @@ -1,22 +1,22 @@ import React, { useEffect } from 'react'; import { Navigate, Route, Routes } from 'react-router-dom-v5-compat'; import { TextLink } from '@grafana/ui'; -import { getNewCheckTypeRedirects, LegacyEditRedirect } from 'routes'; -import { ROUTES } from 'types'; +import { LegacyEditRedirect } from 'routing/LegacyEditRedirect'; +import { ROUTES } from 'routing/types'; +import { getNewCheckTypeRedirects, getRoute } from 'routing/utils'; import { useCanWriteSM } from 'hooks/useDSPermission'; import { useLimits } from 'hooks/useLimits'; -import { useMeta } from 'hooks/useMeta'; import { QueryParamMap, useNavigation } from 'hooks/useNavigation'; import { useQuery } from 'hooks/useQuery'; +import { CheckList } from 'components/CheckList'; +import { ChooseCheckGroup } from 'components/ChooseCheckGroup'; +import { SceneRedirecter } from 'components/SceneRedirecter'; import { AlertingPage } from 'page/AlertingPage'; -import { AlertingWelcomePage } from 'page/AlertingWelcomePage'; -import { ChecksWelcomePage } from 'page/ChecksWelcomePage'; import { ConfigPageLayout } from 'page/ConfigPageLayout'; import { AccessTokensTab } from 'page/ConfigPageLayout/tabs/AccessTokensTab'; import { GeneralTab } from 'page/ConfigPageLayout/tabs/GeneralTab'; import { TerraformTab } from 'page/ConfigPageLayout/tabs/TerraformTab'; -import { UninitializedTab } from 'page/ConfigPageLayout/tabs/UninitializedTab'; import { DashboardPage } from 'page/DashboardPage'; import { EditCheck } from 'page/EditCheck'; import { EditProbe } from 'page/EditProbe'; @@ -25,15 +25,7 @@ import { NewProbe } from 'page/NewProbe'; import { CheckNotFound } from 'page/NotFound/CheckNotFound'; import { PluginPageNotFound } from 'page/NotFound/NotFound'; import { Probes } from 'page/Probes'; -import { ProbesWelcomePage } from 'page/ProbesWelcomePage'; import { SceneHomepage } from 'page/SceneHomepage'; -import { UnprovisionedSetup } from 'page/UnprovisionedSetup'; -import { WelcomePage } from 'page/WelcomePage'; - -import { CheckList } from './CheckList'; -import { ChooseCheckGroup } from './ChooseCheckGroup'; -import { getRoute } from './Routing.utils'; -import { SceneRedirecter } from './SceneRedirecter'; export const InitialisedRouter = () => { const queryParams = useQuery(); @@ -126,31 +118,3 @@ export const InitialisedRouter = () => { ); }; - -export const UninitialisedRouter = () => { - const meta = useMeta(); - const provisioned = Boolean(meta.jsonData?.metrics?.grafanaName); - - // todo: is this the correct check for provisioning? - // todo: is this state even possible in Grafana v11? - if (!provisioned) { - return ; - } - - return ( - - } /> - } /> - } /> - } /> - } /> - - } /> - } /> - - - {/* TODO: Create 404 instead of navigating to home(?) */} - } /> - - ); -}; diff --git a/src/routes/LegacyEditRedirect.tsx b/src/routing/LegacyEditRedirect.tsx similarity index 85% rename from src/routes/LegacyEditRedirect.tsx rename to src/routing/LegacyEditRedirect.tsx index 497a7f6b7..bbd089f95 100644 --- a/src/routes/LegacyEditRedirect.tsx +++ b/src/routing/LegacyEditRedirect.tsx @@ -1,8 +1,7 @@ import { useNavigate, useParams } from 'react-router-dom-v5-compat'; -import { ROUTES } from '../types'; - -import { generateRoutePath } from './utils'; +import { ROUTES } from 'routing/types'; +import { generateRoutePath } from 'routing/utils'; interface LegacyEditRedirectProps { entity: 'check' | 'probe'; diff --git a/src/routing/UninitialisedRouter.test.tsx b/src/routing/UninitialisedRouter.test.tsx new file mode 100644 index 000000000..e388a325a --- /dev/null +++ b/src/routing/UninitialisedRouter.test.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { screen } from '@testing-library/react'; +import { type CustomRenderOptions, render } from 'test/render'; + +import { PLUGIN_URL_PATH } from 'routing/constants'; +import { ROUTES } from 'routing/types'; +import { UninitialisedRouter } from 'routing/UninitialisedRouter'; +import { getRoute } from 'routing/utils'; + +function renderUninitialisedRouting(options?: CustomRenderOptions) { + render(, options); +} + +const notaRoute = `${PLUGIN_URL_PATH}/404`; + +describe('Renders specific welcome pages when app is not initializd', () => { + test(`Route Home`, async () => { + renderUninitialisedRouting({ path: getRoute(ROUTES.Home) }); + const text = await screen.findByText('Up and running in seconds, no instrumentation required'); + expect(text).toBeInTheDocument(); + }); + + test(`Route Probes`, async () => { + renderUninitialisedRouting({ path: getRoute(ROUTES.Probes) }); + const text = await screen.findByText( + 'Click the See Probes button to initialize the plugin and see a list of public probes', + { exact: false } + ); + expect(text).toBeInTheDocument(); + }); + + test(`Route Alerts`, async () => { + renderUninitialisedRouting({ path: getRoute(ROUTES.Alerts) }); + const text = await screen.findByText( + 'Click the See Alerting button to initialize the plugin and see a list of default alerts', + { exact: false } + ); + expect(text).toBeInTheDocument(); + }); + test(`Route Checks`, async () => { + renderUninitialisedRouting({ path: getRoute(ROUTES.Checks) }); + const text = await screen.findByText('Click the Create a Check button to initialize the plugin and create checks', { + exact: false, + }); + expect(text).toBeInTheDocument(); + }); + + test(`Route Config`, async () => { + renderUninitialisedRouting({ path: getRoute(ROUTES.Config) }); + + const text = await screen.findByText('Synthetic Monitoring is not yet initialized'); + expect(text).toBeInTheDocument(); + }); + + test('Non-existent route (404)', async () => { + renderUninitialisedRouting({ path: notaRoute }); + const text = await screen.findByText('Up and running in seconds, no instrumentation required'); + expect(text).toBeInTheDocument(); + }); +}); diff --git a/src/routing/UninitialisedRouter.tsx b/src/routing/UninitialisedRouter.tsx new file mode 100644 index 000000000..198dc779c --- /dev/null +++ b/src/routing/UninitialisedRouter.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { Navigate, Route, Routes } from 'react-router-dom-v5-compat'; + +import { ROUTES } from 'routing/types'; +import { useMeta } from 'hooks/useMeta'; +import { AlertingWelcomePage } from 'page/AlertingWelcomePage'; +import { ChecksWelcomePage } from 'page/ChecksWelcomePage'; +import { ConfigPageLayout } from 'page/ConfigPageLayout'; +import { UninitializedTab } from 'page/ConfigPageLayout/tabs/UninitializedTab'; +import { ProbesWelcomePage } from 'page/ProbesWelcomePage'; +import { UnprovisionedSetup } from 'page/UnprovisionedSetup'; +import { WelcomePage } from 'page/WelcomePage'; + +export const UninitialisedRouter = () => { + const meta = useMeta(); + const provisioned = Boolean(meta.jsonData?.metrics?.grafanaName); + + // todo: is this the correct check for provisioning? + // todo: is this state even possible in Grafana v11? + if (!provisioned) { + return ; + } + + return ( + + } /> + } /> + } /> + } /> + } /> + + } /> + } /> + + + {/* TODO: Create 404 instead of navigating to home(?) */} + } /> + + ); +}; diff --git a/src/components/Routing.consts.ts b/src/routing/constants.ts similarity index 100% rename from src/components/Routing.consts.ts rename to src/routing/constants.ts diff --git a/src/routing/types.ts b/src/routing/types.ts new file mode 100644 index 000000000..b45e153e6 --- /dev/null +++ b/src/routing/types.ts @@ -0,0 +1,16 @@ +export enum ROUTES { + Alerts = 'alerts', + CheckDashboard = 'checks/:id', + Checks = 'checks', + ChooseCheckGroup = 'checks/choose-type', + Config = 'config', // config (index) + EditCheck = 'checks/:id/edit', + ViewProbe = 'probes/:id', + EditProbe = 'probes/:id/edit', + Home = 'home', + NewCheck = 'checks/new', + NewProbe = 'probes/new', + Probes = 'probes', + Redirect = 'redirect', + Scene = 'scene', +} diff --git a/src/routes/utils.ts b/src/routing/utils.ts similarity index 82% rename from src/routes/utils.ts rename to src/routing/utils.ts index 52bd3f83f..e0cbe6cc2 100644 --- a/src/routes/utils.ts +++ b/src/routing/utils.ts @@ -1,9 +1,10 @@ import { generatePath } from 'react-router-dom-v5-compat'; import { PathParam } from '@remix-run/router/utils'; -import { CheckType, CheckTypeGroup, ROUTES } from '../types'; +import { CheckType, CheckTypeGroup } from 'types'; +import { PLUGIN_URL_PATH } from 'routing/constants'; +import { ROUTES } from 'routing/types'; import { CHECK_TYPE_OPTIONS } from 'hooks/useCheckTypeOptions'; -import { getRoute } from 'components/Routing.utils'; function checkTypeDirectFilter({ value, group }: { value: CheckType; group: CheckTypeGroup }) { return (group as string) !== (value as string); @@ -34,3 +35,7 @@ export function generateRoutePath( // Important: this will throw if a route requires a param but the params object doesn't hold the param key/value return `${generatePath(getRoute(route), params)}`; } + +export function getRoute(route: ROUTES) { + return `${PLUGIN_URL_PATH}${route}`; +} diff --git a/src/scenes/Common/editButton.tsx b/src/scenes/Common/editButton.tsx index b76487479..f78a099fe 100644 --- a/src/scenes/Common/editButton.tsx +++ b/src/scenes/Common/editButton.tsx @@ -1,9 +1,10 @@ import React from 'react'; import { SceneReactObject, SceneVariable, VariableValue } from '@grafana/scenes'; import { LinkButton } from '@grafana/ui'; -import { generateRoutePath } from 'routes/utils'; -import { Check, ROUTES } from 'types'; +import { Check } from 'types'; +import { ROUTES } from 'routing/types'; +import { generateRoutePath } from 'routing/utils'; import { useChecks } from 'data/useChecks'; import { useCanWriteSM } from 'hooks/useDSPermission'; diff --git a/src/scenes/Common/emptyScene.tsx b/src/scenes/Common/emptyScene.tsx index 89b822316..515f938bb 100644 --- a/src/scenes/Common/emptyScene.tsx +++ b/src/scenes/Common/emptyScene.tsx @@ -4,7 +4,8 @@ import { EmbeddedScene, SceneReactObject } from '@grafana/scenes'; import { Button, Card, TextLink, useStyles2 } from '@grafana/ui'; import { css } from '@emotion/css'; -import { CheckType, ROUTES } from 'types'; +import { CheckType } from 'types'; +import { ROUTES } from 'routing/types'; import { useNavigation } from 'hooks/useNavigation'; function getStyles(theme: GrafanaTheme2) { diff --git a/src/routes/test/TestRouteInfo.tsx b/src/test/helpers/TestRouteInfo.tsx similarity index 94% rename from src/routes/test/TestRouteInfo.tsx rename to src/test/helpers/TestRouteInfo.tsx index 4a180e8dc..b4f1addfd 100644 --- a/src/routes/test/TestRouteInfo.tsx +++ b/src/test/helpers/TestRouteInfo.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useLocation } from 'react-router-dom-v5-compat'; -import { DataTestIds } from '../../test/dataTestIds'; +import { DataTestIds } from '../dataTestIds'; /** * TestRouteInfo component. diff --git a/src/test/render.tsx b/src/test/render.tsx index 46c043ba6..191c2cc01 100644 --- a/src/test/render.tsx +++ b/src/test/render.tsx @@ -7,6 +7,7 @@ import { render, type RenderOptions } from '@testing-library/react'; import userEventLib from '@testing-library/user-event'; import { createMemoryHistory, type MemoryHistory } from 'history'; import { SM_META } from 'test/fixtures/meta'; +import { TestRouteInfo } from 'test/helpers/TestRouteInfo'; import { ProvisioningJsonData } from 'types'; import { MetaContextProvider } from 'contexts/MetaContext'; @@ -15,8 +16,6 @@ import { SMDatasourceProvider } from 'contexts/SMDatasourceContext'; import { getQueryClient } from 'data/queryClient'; import { FeatureFlagProvider } from 'components/FeatureFlagProvider'; -import { TestRouteInfo } from '../routes/test/TestRouteInfo'; - export type ComponentWrapperProps = { children: ReactNode; history: MemoryHistory; diff --git a/src/types.ts b/src/types.ts index ec2de16fe..655182584 100644 --- a/src/types.ts +++ b/src/types.ts @@ -675,23 +675,6 @@ export interface UsageValues { dpm: number; } -export enum ROUTES { - Alerts = 'alerts', - CheckDashboard = 'checks/:id', - Checks = 'checks', - ChooseCheckGroup = 'checks/choose-type', - Config = 'config', // config (index) - EditCheck = 'checks/:id/edit', - ViewProbe = 'probes/:id', - EditProbe = 'probes/:id/edit', - Home = 'home', - NewCheck = 'checks/new', - NewProbe = 'probes/new', - Probes = 'probes', - Redirect = 'redirect', - Scene = 'scene', -} - interface Params extends Record {} export interface CheckPageParams extends Params {