Display MySQL user defined error of piped, command, and application

pkg/app/server/grpcapi/grpcapi.go

@@ -101,7 +101,7 @@
 func addCommand(ctx context.Context, store commandstore.Store, cmd *model.Command, logger *zap.Logger) error {
 	if err := store.AddCommand(ctx, cmd); err != nil {
 		logger.Error("failed to create command", zap.Error(err))
-		return status.Error(codes.Internal, "Failed to create command")
+		return gRPCStoreError(err, "create command")
 	}
 	return nil
 }

web/src/components/application-detail-page/application-detail/index.tsx

@@ -22,7 +22,7 @@ import { SplitButton } from "~/components/split-button";
 import { APPLICATION_KIND_TEXT } from "~/constants/application-kind";
 import { PAGE_PATH_DEPLOYMENTS } from "~/constants/path";
 import { UI_TEXT_REFRESH } from "~/constants/ui-text";
-import { useAppDispatch, useAppSelector } from "~/hooks/redux";
+import { unwrapResult, useAppDispatch, useAppSelector } from "~/hooks/redux";
 import {
   Application,
   ApplicationDeploymentReference,
@@ -238,7 +238,9 @@ export const ApplicationDetail: FC<ApplicationDetailProps> = memo(
             applicationId: app.id,
             syncStrategy: syncStrategyByIndex[index],
           })
-        );
+        )
+          .then(unwrapResult)
+          .catch(() => undefined);
       }
     };
 

web/src/components/applications-page/add-application-drawer/index.tsx

@@ -9,7 +9,7 @@ import {
 import { useFormik } from "formik";
 import { FC, memo, useCallback, useState } from "react";
 import { UI_TEXT_CANCEL, UI_TEXT_DISCARD } from "~/constants/ui-text";
-import { useAppDispatch, useAppSelector } from "~/hooks/redux";
+import { unwrapResult, useAppDispatch, useAppSelector } from "~/hooks/redux";
 import { addApplication } from "~/modules/applications";
 import { selectProjectName } from "~/modules/me";
 import {
@@ -42,10 +42,14 @@ export const AddApplicationDrawer: FC<AddApplicationDrawerProps> = memo(
       validationSchema,
       enableReinitialize: true,
       async onSubmit(values) {
-        await dispatch(addApplication(values));
-        onAdded();
-        onClose();
-        formik.resetForm();
+        await dispatch(addApplication(values))
+          .then(unwrapResult)
+          .then(() => {
+            onAdded();
+            onClose();
+            formik.resetForm();
+          })
+          .catch(() => undefined);
       },
     });
 

web/src/components/settings-page/api-key/index.tsx

@@ -99,7 +99,6 @@ export const APIKeyPage: FC = memo(function APIKeyPage() {
       dispatch(generateAPIKey(values))
         .then(unwrapResult)
         .then(() => {
-          console.log("handleSubmit.then");
           dispatch(fetchAPIKeys({ enabled: true }));
           dispatch(
             addToast({ message: GENERATE_API_KEY_SUCCESS, severity: "success" })

web/src/components/settings-page/piped/components/add-piped-dialog/index.tsx

@@ -2,7 +2,7 @@ import { Dialog } from "@material-ui/core";
 import { useFormik } from "formik";
 import { FC, memo, useCallback } from "react";
 import { ADD_PIPED_SUCCESS } from "~/constants/toast-text";
-import { useAppDispatch, useAppSelector } from "~/hooks/redux";
+import { unwrapResult, useAppDispatch, useAppSelector } from "~/hooks/redux";
 import { selectProjectName } from "~/modules/me";
 import { addPiped } from "~/modules/pipeds";
 import { addToast } from "~/modules/toasts";
@@ -23,12 +23,15 @@ export const AddPipedDialog: FC<AddPipedDrawerProps> = memo(
       validationSchema,
       validateOnMount: true,
       async onSubmit(values) {
-        await dispatch(addPiped(values)).then(() => {
-          dispatch(
-            addToast({ message: ADD_PIPED_SUCCESS, severity: "success" })
-          );
-          onClose();
-        });
+        await dispatch(addPiped(values))
+          .then(unwrapResult)
+          .then(() => {
+            dispatch(
+              addToast({ message: ADD_PIPED_SUCCESS, severity: "success" })
+            );
+            onClose();
+          })
+          .catch(() => undefined);
       },
     });