fix: bypass unsaved changes prompt when clicking cancel

Author: dennis-tismenko

x-pack/platform/plugins/shared/onechat/public/application/components/agents/edit/agent_form.tsx

@@ -35,6 +35,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 
 import { css } from '@emotion/react';
 import { useUnsavedChangesPrompt } from '@kbn/unsaved-changes-prompt';
+import { defer } from 'lodash';
 import { useAgentEdit } from '../../../hooks/agents/use_agent_edit';
 import { useKibana } from '../../../hooks/use_kibana';
 import { useNavigation } from '../../../hooks/use_navigation';
@@ -125,7 +126,7 @@ export const AgentForm: React.FC<AgentFormProps> = ({ editingAgentId, onDelete }
     mode: 'onBlur',
     resolver: zodResolver(agentFormSchema),
   });
-  const { control, handleSubmit, reset, formState, watch } = formMethods;
+  const { control, handleSubmit, reset, formState, watch, getValues } = formMethods;
   const { errors, isDirty } = formState;
   const hasErrors = Object.keys(errors).length > 0;
 
@@ -143,6 +144,12 @@ export const AgentForm: React.FC<AgentFormProps> = ({ editingAgentId, onDelete }
     }
   }, [agentState, isLoading, reset]);
 
+  const handleCancel = useCallback(() => {
+    // Bypass unsaved changes prompt
+    reset(getValues());
+    defer(() => navigateToOnechatUrl(appPaths.agents.list));
+  }, [navigateToOnechatUrl, reset, getValues]);
+
   const handleSave = useCallback(
     async (
       data: AgentFormData,
@@ -512,12 +519,7 @@ export const AgentForm: React.FC<AgentFormProps> = ({ editingAgentId, onDelete }
       >
         <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              size="s"
-              iconType="cross"
-              color="text"
-              onClick={() => navigateToOnechatUrl(appPaths.agents.list)}
-            >
+            <EuiButtonEmpty size="s" iconType="cross" color="text" onClick={handleCancel}>
               {i18n.translate('xpack.onechat.agents.cancelButtonLabel', {
                 defaultMessage: 'Cancel',
               })}

x-pack/platform/plugins/shared/onechat/public/application/components/tools/tool.tsx

@@ -25,16 +25,18 @@ import type { ToolDefinitionWithSchema } from '@kbn/onechat-common';
 import { isEsqlTool, isIndexSearchTool } from '@kbn/onechat-common/tools';
 import { ToolType } from '@kbn/onechat-common/tools/definition';
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
+import { useUnsavedChangesPrompt } from '@kbn/unsaved-changes-prompt';
+import { defer } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormProvider } from 'react-hook-form';
-import { useUnsavedChangesPrompt } from '@kbn/unsaved-changes-prompt';
 import type {
   CreateToolPayload,
   CreateToolResponse,
   UpdateToolPayload,
   UpdateToolResponse,
 } from '../../../../common/http_api/tools';
 import { useToolForm } from '../../hooks/tools/use_tool_form';
+import { useKibana } from '../../hooks/use_kibana';
 import { useNavigation } from '../../hooks/use_navigation';
 import { useQueryState } from '../../hooks/use_query_state';
 import { appPaths } from '../../utils/app_paths';
@@ -55,7 +57,6 @@ import { ToolTestFlyout } from './execute/test_tools';
 import { ToolEditContextMenu } from './form/components/tool_edit_context_menu';
 import { ToolForm, ToolFormMode } from './form/tool_form';
 import type { ToolFormData } from './form/types/tool_form_types';
-import { useKibana } from '../../hooks/use_kibana';
 
 const BUTTON_IDS = {
   SAVE: 'save',
@@ -108,12 +109,17 @@ export const Tool: React.FC<ToolProps> = ({ mode, tool, isLoading, isSubmitting,
   }, [urlToolType]);
 
   const form = useToolForm(tool, initialToolType);
-  const { reset, formState, watch, handleSubmit } = form;
+  const { reset, formState, watch, handleSubmit, getValues } = form;
   const { errors, isDirty } = formState;
   const [showTestFlyout, setShowTestFlyout] = useState(false);
   const [submittingButtonId, setSubmittingButtonId] = useState<string | undefined>();
   const { services } = useKibana();
-  const { application, overlays, http, appParams } = services;
+  const {
+    application: { navigateToUrl },
+    overlays: { openConfirm },
+    http,
+    appParams: { history },
+  } = services;
 
   const currentToolId = watch('toolId');
 
@@ -126,8 +132,10 @@ export const Tool: React.FC<ToolProps> = ({ mode, tool, isLoading, isSubmitting,
   }, [openTestFlyoutParam, currentToolId, showTestFlyout, setOpenTestFlyoutParam]);
 
   const handleCancel = useCallback(() => {
-    navigateToOnechatUrl(appPaths.tools.list);
-  }, [navigateToOnechatUrl]);
+    // Bypass unsaved changes prompt
+    reset(getValues());
+    defer(() => navigateToOnechatUrl(appPaths.tools.list));
+  }, [navigateToOnechatUrl, reset, getValues]);
 
   const handleSave = useCallback(
     async (
@@ -205,10 +213,10 @@ export const Tool: React.FC<ToolProps> = ({ mode, tool, isLoading, isSubmitting,
   const isViewMode = mode === ToolFormMode.View;
   useUnsavedChangesPrompt({
     hasUnsavedChanges: !isViewMode && isDirty,
-    history: appParams.history,
+    history,
     http,
-    navigateToUrl: application.navigateToUrl,
-    openConfirm: overlays.openConfirm,
+    navigateToUrl,
+    openConfirm,
   });
   const hasErrors = Object.keys(errors).length > 0;