chore(slo): prefill slo edit form on update error (elastic#168760)

x-pack/plugins/observability/common/locators/paths.ts

@@ -35,6 +35,8 @@ export const paths = {
     sloCreateWithEncodedForm: (encodedParams: string) =>
       `${OBSERVABILITY_BASE_PATH}${SLO_CREATE_PATH}?_a=${encodedParams}`,
     sloEdit: (sloId: string) => `${OBSERVABILITY_BASE_PATH}${SLOS_PATH}/edit/${encodeURI(sloId)}`,
+    sloEditWithEncodedForm: (sloId: string, encodedParams: string) =>
+      `${OBSERVABILITY_BASE_PATH}${SLOS_PATH}/edit/${encodeURI(sloId)}?_a=${encodedParams}`,
     sloDetails: (sloId: string, instanceId?: string) =>
       !!instanceId
         ? `${OBSERVABILITY_BASE_PATH}${SLOS_PATH}/${encodeURI(sloId)}?instanceId=${encodeURI(

x-pack/plugins/observability/public/hooks/slo/use_create_slo.ts

@@ -69,6 +69,8 @@ export function useCreateSlo() {
             values: { name: slo.name },
           })
         );
+
+        queryClient.invalidateQueries({ queryKey: sloKeys.lists(), exact: false });
       },
       onError: (error, { slo }, context) => {
         if (context?.previousData && context?.queryKey) {

x-pack/plugins/observability/public/hooks/slo/use_update_slo.ts

@@ -9,13 +9,16 @@ import { IHttpFetchError, ResponseErrorBody } from '@kbn/core/public';
 import { i18n } from '@kbn/i18n';
 import type { FindSLOResponse, UpdateSLOInput, UpdateSLOResponse } from '@kbn/slo-schema';
 import { QueryKey, useMutation, useQueryClient } from '@tanstack/react-query';
+import { encode } from '@kbn/rison';
 import { useKibana } from '../../utils/kibana_react';
+import { paths } from '../../../common/locators/paths';
 import { sloKeys } from './query_key_factory';
 
 type ServerError = IHttpFetchError<ResponseErrorBody>;
 
 export function useUpdateSlo() {
   const {
+    application: { navigateToUrl },
     http,
     notifications: { toasts },
   } = useKibana().services;
@@ -25,7 +28,7 @@ export function useUpdateSlo() {
     UpdateSLOResponse,
     ServerError,
     { sloId: string; slo: UpdateSLOInput },
-    { previousData?: FindSLOResponse; queryKey?: QueryKey }
+    { previousData?: FindSLOResponse; queryKey?: QueryKey; sloId: string }
   >(
     ['updateSlo'],
     ({ sloId, slo }) => {
@@ -57,7 +60,7 @@ export function useUpdateSlo() {
           queryClient.setQueryData(queryKey, optimisticUpdate);
         }
 
-        return { previousData, queryKey };
+        return { previousData, queryKey, sloId };
       },
       onSuccess: (_data, { slo: { name } }) => {
         toasts.addSuccess(
@@ -66,21 +69,28 @@ export function useUpdateSlo() {
             values: { name },
           })
         );
+
+        queryClient.invalidateQueries({ queryKey: sloKeys.lists(), exact: false });
       },
-      onError: (error, { slo: { name } }, context) => {
+      onError: (error, { slo }, context) => {
         if (context?.previousData && context?.queryKey) {
           queryClient.setQueryData(context.queryKey, context.previousData);
         }
 
         toasts.addError(new Error(error.body?.message ?? error.message), {
           title: i18n.translate('xpack.observability.slo.update.errorNotification', {
             defaultMessage: 'Something went wrong when updating {name}',
-            values: { name },
+            values: { name: slo.name },
           }),
         });
-      },
-      onSettled: () => {
-        queryClient.invalidateQueries({ queryKey: sloKeys.lists(), exact: false });
+
+        if (context?.sloId) {
+          navigateToUrl(
+            http.basePath.prepend(
+              paths.observability.sloEditWithEncodedForm(context.sloId, encode(slo))
+            )
+          );
+        }
       },
     }
   );

x-pack/plugins/observability/public/pages/slo_edit/components/slo_edit_form.tsx

@@ -15,7 +15,7 @@ import {
   EuiSteps,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import type { SLOWithSummaryResponse } from '@kbn/slo-schema';
+import type { GetSLOResponse } from '@kbn/slo-schema';
 import React, { useCallback, useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { sloFeatureId } from '../../../../common';
@@ -45,7 +45,7 @@ import { SloEditFormIndicatorSection } from './slo_edit_form_indicator_section';
 import { SloEditFormObjectiveSection } from './slo_edit_form_objective_section';
 
 export interface Props {
-  slo: SLOWithSummaryResponse | undefined;
+  slo?: GetSLOResponse;
 }
 
 export const maxWidth = 775;
@@ -63,6 +63,8 @@ export function SloEditForm({ slo }: Props) {
   });
 
   const sloFormValuesFromUrlState = useParseUrlState();
+  const sloFormValuesFromSloResponse = transformSloResponseToCreateSloForm(slo);
+
   const isAddRuleFlyoutOpen = useAddRuleFlyoutState(isEditMode);
   const [isCreateRuleCheckboxChecked, setIsCreateRuleCheckboxChecked] = useState(true);
 
@@ -73,8 +75,8 @@ export function SloEditForm({ slo }: Props) {
   }, [isEditMode, rules, slo]);
 
   const methods = useForm<CreateSLOForm>({
-    defaultValues: Object.assign({}, SLO_EDIT_FORM_DEFAULT_VALUES, sloFormValuesFromUrlState),
-    values: transformSloResponseToCreateSloForm(slo),
+    defaultValues: SLO_EDIT_FORM_DEFAULT_VALUES,
+    values: sloFormValuesFromUrlState ? sloFormValuesFromUrlState : sloFormValuesFromSloResponse,
     mode: 'all',
   });
   const { watch, getFieldState, getValues, formState, trigger } = methods;