feat(mcp): align feedback on custom server installation (#651)

* feat(mcp): align feedback on custom server installation

* refactor: move the from console.log to log

* refactor: use _ for unused param

Author: samuv

…rvers/components/loading-state-alert.tsx …mponents/secrets/loading-state-alert.tsxrenderer/src/features/registry-servers/components/loading-state-alert.tsx renamed to renderer/src/common/components/secrets/loading-state-alert.tsx renderer/src/features/registry-servers/components/loading-state-alert.tsx renamed to renderer/src/common/components/secrets/loading-state-alert.tsx

@@ -1,11 +1,14 @@
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { useQuery } from '@tanstack/react-query'
+import log from 'electron-log/renderer'
 import { Form } from '@/common/components/ui/form'
 import {
   getFormSchemaRunMcpCommand,
   type FormSchemaRunMcpCommand,
 } from '../lib/form-schema-run-mcp-server-with-command'
-import { useForm } from 'react-hook-form'
-
 import { FormFieldsRunMcpCommand } from './form-fields-run-mcp-command'
+import { getApiV1BetaWorkloadsOptions } from '@/common/api/generated/@tanstack/react-query.gen'
 import {
   Dialog,
   DialogContent,
@@ -18,18 +21,43 @@ import { Button } from '@/common/components/ui/button'
 import { zodV4Resolver } from '@/common/lib/zod-v4-resolver'
 import { FormFieldsArrayCustomEnvVars } from './form-fields-array-custom-env-vars'
 import { FormFieldsArrayCustomSecrets } from './form-fields-array-custom-secrets'
-import { useQuery } from '@tanstack/react-query'
-import { getApiV1BetaWorkloadsOptions } from '@/common/api/generated/@tanstack/react-query.gen'
+import { useRunCustomServer } from '../hooks/use-run-custom-server'
+import { LoadingStateAlert } from '@/common/components/secrets/loading-state-alert'
+import { AlertErrorFormSubmission } from '@/common/components/workloads/alert-error-form-submission'
 
 export function DialogFormRunMcpServerWithCommand({
-  onSubmit,
   isOpen,
   onOpenChange,
 }: {
-  onSubmit: (data: FormSchemaRunMcpCommand) => void
   isOpen: boolean
   onOpenChange: (open: boolean) => void
 }) {
+  const [error, setError] = useState<string | null>(null)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [loadingSecrets, setLoadingSecrets] = useState<{
+    text: string
+    completedCount: number
+    secretsCount: number
+  } | null>(null)
+  const {
+    installServerMutation,
+    checkServerStatus,
+    isErrorSecrets,
+    isPendingSecrets,
+  } = useRunCustomServer({
+    onSecretSuccess: (completedCount, secretsCount) => {
+      setLoadingSecrets((prev) => ({
+        ...prev,
+        text: `Encrypting secrets (${completedCount} of ${secretsCount})...`,
+        completedCount,
+        secretsCount,
+      }))
+    },
+    onSecretError: (error, variables) => {
+      log.error('onSecretError', error, variables)
+    },
+  })
+
   const { data } = useQuery({
     ...getApiV1BetaWorkloadsOptions({ query: { all: true } }),
   })
@@ -44,6 +72,32 @@ export function DialogFormRunMcpServerWithCommand({
     },
   })
 
+  const onSubmitForm = (data: FormSchemaRunMcpCommand) => {
+    setIsSubmitting(true)
+    if (error) {
+      setError(null)
+    }
+
+    installServerMutation(
+      { data },
+      {
+        onSuccess: () => {
+          checkServerStatus(data)
+          onOpenChange(false)
+        },
+        onSettled: (_, error) => {
+          setIsSubmitting(false)
+          if (!error) {
+            form.reset()
+          }
+        },
+        onError: (error) => {
+          setError(typeof error === 'string' ? error : error.message)
+        },
+      }
+    )
+  }
+
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent
@@ -54,31 +108,52 @@ export function DialogFormRunMcpServerWithCommand({
         }}
       >
         <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit((data) => {
-              onSubmit(data)
-              form.reset()
-              onOpenChange(false)
-            })}
-          >
+          <form onSubmit={form.handleSubmit(onSubmitForm)}>
             <DialogHeader className="mb-4 p-6">
               <DialogTitle>Custom MCP server</DialogTitle>
               <DialogDescription>
                 ToolHive allows you to securely run a custom MCP server from a
                 Docker image or a package manager command.
               </DialogDescription>
             </DialogHeader>
-
-            <div
-              className="relative max-h-[65dvh] space-y-4 overflow-y-auto px-6"
-            >
-              <FormFieldsRunMcpCommand form={form} />
-              <FormFieldsArrayCustomSecrets form={form} />
-              <FormFieldsArrayCustomEnvVars form={form} />
-            </div>
+            {isSubmitting && (
+              <LoadingStateAlert
+                isPendingSecrets={isPendingSecrets}
+                loadingSecrets={loadingSecrets}
+              />
+            )}
+            {!isSubmitting && (
+              <div
+                className="relative max-h-[65dvh] space-y-4 overflow-y-auto
+                  px-6"
+              >
+                {error && (
+                  <AlertErrorFormSubmission
+                    error={error}
+                    isErrorSecrets={isErrorSecrets}
+                    onDismiss={() => setError(null)}
+                  />
+                )}
+                <FormFieldsRunMcpCommand form={form} />
+                <FormFieldsArrayCustomSecrets form={form} />
+                <FormFieldsArrayCustomEnvVars form={form} />
+              </div>
+            )}
 
             <DialogFooter className="p-6">
-              <Button type="submit">Install server</Button>
+              <Button
+                type="button"
+                variant="outline"
+                disabled={isSubmitting}
+                onClick={() => {
+                  onOpenChange(false)
+                }}
+              >
+                Cancel
+              </Button>
+              <Button disabled={isSubmitting} type="submit">
+                Install server
+              </Button>
             </DialogFooter>
           </form>
         </Form>