fix: updated navigation after check creation (#701)

src/components/CheckEditor/CheckEditor.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
 import { GrafanaTheme2, OrgRole } from '@grafana/data';
-import { config, locationService } from '@grafana/runtime';
+import { config } from '@grafana/runtime';
 import {
   Alert,
   Button,
@@ -20,6 +20,7 @@ import { Check, CheckFormValues, CheckPageParams, CheckType, ROUTES } from 'type
 import { checkType as getCheckType, hasRole } from 'utils';
 import { validateJob, validateTarget } from 'validation';
 import { useChecks, useCUDChecks } from 'data/useChecks';
+import { useNavigation } from 'hooks/useNavigation';
 import { CheckFormAlert } from 'components/CheckFormAlert';
 import CheckTarget from 'components/CheckTarget';
 import { CheckTestButton } from 'components/CheckTestButton';
@@ -71,7 +72,9 @@ const CheckEditorContent = ({ check }: { check: Check }) => {
   const { updateCheck, createCheck, deleteCheck, error, submitting } = useCUDChecks({ eventInfo: { checkType } });
 
   const isEditor = hasRole(OrgRole.Editor);
-  const onSuccess = () => locationService.getHistory().goBack();
+  const navigate = useNavigation();
+  const navigateBack = () => navigate(ROUTES.Checks);
+  const onSuccess = () => navigateBack();
 
   const onSubmit = (checkValues: CheckFormValues) => {
     const toSubmit = getCheckFromFormValues(checkValues);

src/components/K6CheckCodeEditor.tsx

@@ -2,15 +2,16 @@ import React from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
 import { GrafanaTheme2, OrgRole } from '@grafana/data';
-import { locationService, PluginPage } from '@grafana/runtime';
+import { PluginPage } from '@grafana/runtime';
 import { Alert, Button, Field, Icon, Input, Label, Tooltip, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 
-import { CheckFormValuesScripted, CheckPageParams, CheckType, ScriptedCheck } from 'types';
+import { CheckFormValuesScripted, CheckPageParams, CheckType, ROUTES, ScriptedCheck } from 'types';
 import { isScriptedCheck } from 'utils.types';
 import { hasRole } from 'utils';
 import { validateJob, validateTarget } from 'validation';
 import { useChecks, useCUDChecks } from 'data/useChecks';
+import { useNavigation } from 'hooks/useNavigation';
 
 import { getCheckFromFormValues, getScriptedFormValuesFromCheck } from './CheckEditor/checkFormTransformations';
 import { ProbeOptions } from './CheckEditor/ProbeOptions';
@@ -70,7 +71,9 @@ function K6CheckCodeEditorContent({ check }: { check: ScriptedCheck }) {
   });
   const { handleSubmit, register, control } = formMethods;
   const styles = useStyles2(getStyles);
-  const onSuccess = () => locationService.getHistory().goBack();
+  const navigate = useNavigation();
+  const navigateBack = () => navigate(ROUTES.Checks);
+  const onSuccess = () => navigateBack();
 
   const onSubmit = (checkValues: CheckFormValuesScripted) => {
     const toSubmit = getCheckFromFormValues(checkValues);

src/components/MultiHttp/MultiHttpSettingsForm.tsx

@@ -16,11 +16,12 @@ import {
   VerticalGroup,
 } from '@grafana/ui';
 
-import { CheckFormValuesMultiHttp, CheckPageParams, CheckType, MultiHTTPCheck } from 'types';
+import { CheckFormValuesMultiHttp, CheckPageParams, CheckType, MultiHTTPCheck, ROUTES } from 'types';
 import { isMultiHttpCheck } from 'utils.types';
 import { hasRole } from 'utils';
 import { validateTarget } from 'validation';
 import { useChecks, useCUDChecks } from 'data/useChecks';
+import { useNavigation } from 'hooks/useNavigation';
 import {
   getCheckFromFormValues,
   getMultiHttpFormValuesFromCheck,
@@ -85,7 +86,9 @@ const MultiHttpSettingsFormContent = ({ check }: { check: MultiHTTPCheck }) => {
   });
   const isEditor = hasRole(OrgRole.Editor);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
-  const onSuccess = () => locationService.getHistory().goBack();
+  const navigate = useNavigation();
+  const navigateBack = () => navigate(ROUTES.Checks);
+  const onSuccess = () => navigateBack();
   const onSubmit = (checkValues: CheckFormValuesMultiHttp) => {
     const toSubmit = getCheckFromFormValues(checkValues);