From cab667c23bbad893b3083d0a90a1b864d3ba4a6f Mon Sep 17 00:00:00 2001
From: LP B <xAt0mZ@users.noreply.github.com>
Date: Fri, 17 Jan 2025 20:33:01 +0100
Subject: [PATCH] fix(app/edge-stack): UI notification on creation error (#325)

---
 app/react-tools/react-query.ts                |  9 +++++++--
 .../edge/edge-stacks/CreateView/useCreate.tsx | 19 +++++++++++++------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/app/react-tools/react-query.ts b/app/react-tools/react-query.ts
index d919bb07b..336b72308 100644
--- a/app/react-tools/react-query.ts
+++ b/app/react-tools/react-query.ts
@@ -10,8 +10,13 @@ import {
 import { notifyError } from '@/portainer/services/notifications';
 
 /**
- * @deprecated use withGlobalError
- * `onError` and other callbacks are not supported on react-query v5
+ * @deprecated for `useQuery` ONLY. Use `withGlobalError`.
+ *
+ * `onError` and other callbacks are not supported on `useQuery` in react-query v5
+ *
+ * Using `withError` is fine for mutations (`useMutation`)
+ *
+ * see https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose
  */
 export function withError(fallbackMessage?: string, title = 'Failure') {
   return {
diff --git a/app/react/edge/edge-stacks/CreateView/useCreate.tsx b/app/react/edge/edge-stacks/CreateView/useCreate.tsx
index bd122a6e2..6103493e3 100644
--- a/app/react/edge/edge-stacks/CreateView/useCreate.tsx
+++ b/app/react/edge/edge-stacks/CreateView/useCreate.tsx
@@ -6,6 +6,7 @@ import { TemplateViewModel } from '@/react/portainer/templates/app-templates/vie
 import { CustomTemplate } from '@/react/portainer/templates/custom-templates/types';
 import { notifySuccess } from '@/portainer/services/notifications';
 import { transformAutoUpdateViewModel } from '@/react/portainer/gitops/AutoUpdateFieldset/utils';
+import { mutationOptions, withError } from '@/react-tools/react-query';
 
 import {
   BasePayload,
@@ -49,12 +50,18 @@ export function useCreate({
       ),
     });
 
-    mutation.mutate(getPayload(method, values), {
-      onSuccess: () => {
-        notifySuccess('Success', 'Edge stack created');
-        router.stateService.go('^');
-      },
-    });
+    mutation.mutate(
+      getPayload(method, values),
+      mutationOptions(
+        {
+          onSuccess: () => {
+            notifySuccess('Success', 'Edge stack created');
+            router.stateService.go('^');
+          },
+        },
+        withError('unable to create edge stack')
+      )
+    );
 
     function getPayload(
       method: 'string' | 'file' | 'git',