From 2cda3e418121e4042e68d1c766c52ba330ae68e0 Mon Sep 17 00:00:00 2001
From: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Date: Thu, 7 May 2026 21:51:45 +0800
Subject: [PATCH] tweaks

---
 .../components/create-instance-modal.tsx      |  41 ++---
 .../deployments/detail/settings-tab.tsx       | 150 +++++++++++-------
 .../deployments/detail/versions-tab.tsx       |  37 +++--
 3 files changed, 130 insertions(+), 98 deletions(-)

diff --git a/web/features/deployments/components/create-instance-modal.tsx b/web/features/deployments/components/create-instance-modal.tsx
index 8966f025ab..8e0853bd52 100644
--- a/web/features/deployments/components/create-instance-modal.tsx
+++ b/web/features/deployments/components/create-instance-modal.tsx
@@ -6,7 +6,7 @@ import { Dialog, DialogCloseButton, DialogContent, DialogDescription, DialogTitl
 import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { toast } from '@langgenius/dify-ui/toast'
 import { useMutation, useQuery } from '@tanstack/react-query'
-import { useRef, useState } from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { AppTypeIcon } from '@/app/components/app/type-selector'
 import AppIcon from '@/app/components/base/app-icon'
@@ -53,8 +53,6 @@ function AppPicker({ apps, isLoading, value, onChange }: AppPickerProps) {
   const { t } = useTranslation('deployments')
   const [open, setOpen] = useState(false)
   const [keywords, setKeywords] = useState('')
-  const triggerRef = useRef<HTMLButtonElement>(null)
-  const [triggerWidth, setTriggerWidth] = useState<number | undefined>(undefined)
 
   const q = keywords.trim().toLowerCase()
   const filtered = q
@@ -62,8 +60,6 @@ function AppPicker({ apps, isLoading, value, onChange }: AppPickerProps) {
     : apps
 
   const handleOpenChange = (next: boolean) => {
-    if (next && triggerRef.current)
-      setTriggerWidth(triggerRef.current.offsetWidth)
     if (!next)
       setKeywords('')
     setOpen(next)
@@ -96,7 +92,6 @@ function AppPicker({ apps, isLoading, value, onChange }: AppPickerProps) {
       <PopoverTrigger
         render={(
           <button
-            ref={triggerRef}
             type="button"
             className={cn(
               'flex h-10 w-full items-center justify-between rounded-lg border-[0.5px] bg-components-input-bg-normal pr-2 pl-2 text-left transition-colors',
@@ -142,8 +137,9 @@ function AppPicker({ apps, isLoading, value, onChange }: AppPickerProps) {
         placement="bottom-start"
         sideOffset={4}
         popupClassName="p-0 overflow-hidden"
+        popupProps={{ style: { width: 'var(--anchor-width, auto)' } }}
       >
-        <div style={triggerWidth ? { width: triggerWidth } : undefined} className="flex flex-col">
+        <div className="flex flex-col">
           <div className="p-2">
             <Input
               showLeftIcon
@@ -230,16 +226,20 @@ function CreateInstanceForm({ onClose }: {
   const apps = (appList?.data ?? []).map(toStudioSourceAppInfo)
 
   const [appId, setAppId] = useState<string>('')
-  const [name, setName] = useState('')
-  const [description, setDescription] = useState('')
 
   const selectedApp = apps.find(a => a.id === appId)
-  const canCreate = Boolean(appId && name.trim() && !createInstance.isPending)
+  const canCreate = Boolean(appId && !createInstance.isPending)
 
-  const handleCreate = async () => {
+  const handleCreate = async (form: HTMLFormElement) => {
     if (!canCreate)
       return
 
+    const formData = new FormData(form)
+    const name = String(formData.get('name') ?? '').trim()
+    const description = String(formData.get('description') ?? '').trim()
+    if (!name)
+      return
+
     try {
       const result = await createInstance.mutateAsync({
         body: {
@@ -259,7 +259,13 @@ function CreateInstanceForm({ onClose }: {
   }
 
   return (
-    <div className="flex flex-col gap-5">
+    <form
+      className="flex flex-col gap-5"
+      onSubmit={(event) => {
+        event.preventDefault()
+        void handleCreate(event.currentTarget)
+      }}
+    >
       <div>
         <DialogTitle className="title-xl-semi-bold text-text-primary">
           {t('createModal.title')}
@@ -285,10 +291,10 @@ function CreateInstanceForm({ onClose }: {
         </label>
         <input
           id="instance-name"
+          name="name"
           type="text"
-          value={name}
           placeholder={selectedApp?.name ?? t('createModal.namePlaceholder')}
-          onChange={e => setName(e.target.value)}
+          required
           className="flex h-8 items-center rounded-lg border-[0.5px] border-components-input-border-active bg-components-input-bg-normal px-3 text-[13px] font-medium text-text-secondary outline-hidden placeholder:text-text-quaternary"
         />
       </div>
@@ -299,9 +305,8 @@ function CreateInstanceForm({ onClose }: {
         </label>
         <textarea
           id="instance-desc"
-          value={description}
+          name="description"
           placeholder={t('createModal.descriptionPlaceholder')}
-          onChange={e => setDescription(e.target.value)}
           className="min-h-[80px] rounded-lg border-[0.5px] border-components-input-border-active bg-components-input-bg-normal px-3 py-2 text-[13px] text-text-secondary outline-hidden placeholder:text-text-quaternary"
         />
       </div>
@@ -310,11 +315,11 @@ function CreateInstanceForm({ onClose }: {
         <Button variant="secondary" onClick={onClose}>
           {t('createModal.cancel')}
         </Button>
-        <Button variant="primary" disabled={!canCreate} onClick={() => void handleCreate()}>
+        <Button type="submit" variant="primary" disabled={!canCreate}>
           {t('createModal.create')}
         </Button>
       </div>
-    </div>
+    </form>
   )
 }
 
diff --git a/web/features/deployments/detail/settings-tab.tsx b/web/features/deployments/detail/settings-tab.tsx
index 1e8050a479..e81aa9fcae 100644
--- a/web/features/deployments/detail/settings-tab.tsx
+++ b/web/features/deployments/detail/settings-tab.tsx
@@ -27,18 +27,98 @@ type SettingsFormProps = {
   onDelete: () => Promise<void>
 }
 
+type DeleteInstanceControlProps = {
+  appName: string
+  settings?: GetAppInstanceSettingsReply
+  hasDeployments: boolean
+  onDelete: () => Promise<void>
+}
+
+function DeleteInstanceControl({
+  appName,
+  settings,
+  hasDeployments,
+  onDelete,
+}: DeleteInstanceControlProps) {
+  const { t } = useTranslation('deployments')
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+  const canDelete = !hasDeployments && Boolean(settings) && settings?.deleteGuard?.canDelete !== false
+
+  const handleDelete = () => {
+    void (async () => {
+      setIsDeleting(true)
+      try {
+        await onDelete()
+        toast.success(t('settings.deleted'))
+      }
+      catch {
+        toast.error(t('settings.deleteFailed'))
+      }
+      finally {
+        setIsDeleting(false)
+        setShowDeleteConfirm(false)
+      }
+    })()
+  }
+
+  return (
+    <>
+      <div className="flex flex-col gap-3 rounded-xl border border-util-colors-red-red-200 bg-util-colors-red-red-50 p-4">
+        <div className="system-sm-semibold text-util-colors-red-red-700">{t('settings.danger')}</div>
+        <div className="system-xs-regular text-util-colors-red-red-600">
+          {t('settings.dangerDesc')}
+        </div>
+        <div className="flex items-center justify-between gap-2">
+          <div className="system-xs-regular text-text-tertiary">
+            {hasDeployments
+              ? t('settings.undeployFirst')
+              : settings?.deleteGuard?.disabledReason || t('settings.safeToDelete')}
+          </div>
+          <Button
+            variant="primary"
+            tone="destructive"
+            disabled={!canDelete || isDeleting}
+            onClick={() => setShowDeleteConfirm(true)}
+          >
+            {t('settings.delete')}
+          </Button>
+        </div>
+      </div>
+
+      <AlertDialog open={showDeleteConfirm} onOpenChange={open => !open && setShowDeleteConfirm(false)}>
+        <AlertDialogContent className="w-[520px]">
+          <div className="flex flex-col gap-3 px-6 pt-6 pb-2">
+            <AlertDialogTitle className="title-2xl-semi-bold text-text-primary">
+              {t('settings.deleteConfirmTitle')}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="system-md-regular text-text-tertiary">
+              {t('settings.deleteConfirmDesc', { name: appName })}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton variant="secondary">
+              {t('createModal.cancel')}
+            </AlertDialogCancelButton>
+            <AlertDialogConfirmButton onClick={handleDelete}>
+              {t('settings.delete')}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}
+
 function SettingsForm({ app, settings, hasDeployments, onSave, onDelete }: SettingsFormProps) {
   const { t } = useTranslation('deployments')
   const appName = app.name ?? app.id ?? ''
   const [name, setName] = useState(settings?.name ?? appName)
   const [description, setDescription] = useState(settings?.description ?? app.description ?? '')
   const [isSaving, setIsSaving] = useState(false)
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
   const initialName = settings?.name ?? appName
   const initialDescription = settings?.description ?? app.description ?? ''
   const canSave = Boolean(name.trim() && (name !== initialName || description !== initialDescription) && !isSaving)
-  const canDelete = !hasDeployments && Boolean(settings) && settings?.deleteGuard?.canDelete !== false
 
   const handleSave = () => {
     if (!canSave)
@@ -61,23 +141,6 @@ function SettingsForm({ app, settings, hasDeployments, onSave, onDelete }: Setti
     })()
   }
 
-  const handleDelete = () => {
-    void (async () => {
-      setIsDeleting(true)
-      try {
-        await onDelete()
-        toast.success(t('settings.deleted'))
-      }
-      catch {
-        toast.error(t('settings.deleteFailed'))
-      }
-      finally {
-        setIsDeleting(false)
-        setShowDeleteConfirm(false)
-      }
-    })()
-  }
-
   return (
     <div className="flex max-w-[640px] flex-col gap-5 p-6">
       <div className="flex flex-col gap-3 rounded-xl border border-components-panel-border bg-components-panel-bg p-4">
@@ -123,47 +186,12 @@ function SettingsForm({ app, settings, hasDeployments, onSave, onDelete }: Setti
         </div>
       </div>
 
-      <div className="flex flex-col gap-3 rounded-xl border border-util-colors-red-red-200 bg-util-colors-red-red-50 p-4">
-        <div className="system-sm-semibold text-util-colors-red-red-700">{t('settings.danger')}</div>
-        <div className="system-xs-regular text-util-colors-red-red-600">
-          {t('settings.dangerDesc')}
-        </div>
-        <div className="flex items-center justify-between gap-2">
-          <div className="system-xs-regular text-text-tertiary">
-            {hasDeployments
-              ? t('settings.undeployFirst')
-              : settings?.deleteGuard?.disabledReason || t('settings.safeToDelete')}
-          </div>
-          <Button
-            variant="primary"
-            tone="destructive"
-            disabled={!canDelete || isDeleting}
-            onClick={() => setShowDeleteConfirm(true)}
-          >
-            {t('settings.delete')}
-          </Button>
-        </div>
-      </div>
-      <AlertDialog open={showDeleteConfirm} onOpenChange={open => !open && setShowDeleteConfirm(false)}>
-        <AlertDialogContent className="w-[520px]">
-          <div className="flex flex-col gap-3 px-6 pt-6 pb-2">
-            <AlertDialogTitle className="title-2xl-semi-bold text-text-primary">
-              {t('settings.deleteConfirmTitle')}
-            </AlertDialogTitle>
-            <AlertDialogDescription className="system-md-regular text-text-tertiary">
-              {t('settings.deleteConfirmDesc', { name: appName })}
-            </AlertDialogDescription>
-          </div>
-          <AlertDialogActions>
-            <AlertDialogCancelButton variant="secondary">
-              {t('createModal.cancel')}
-            </AlertDialogCancelButton>
-            <AlertDialogConfirmButton onClick={handleDelete}>
-              {t('settings.delete')}
-            </AlertDialogConfirmButton>
-          </AlertDialogActions>
-        </AlertDialogContent>
-      </AlertDialog>
+      <DeleteInstanceControl
+        appName={appName}
+        settings={settings}
+        hasDeployments={hasDeployments}
+        onDelete={onDelete}
+      />
     </div>
   )
 }
diff --git a/web/features/deployments/detail/versions-tab.tsx b/web/features/deployments/detail/versions-tab.tsx
index 656f480690..83a68e5ffc 100644
--- a/web/features/deployments/detail/versions-tab.tsx
+++ b/web/features/deployments/detail/versions-tab.tsx
@@ -8,7 +8,6 @@ import { useMutation, useQuery } from '@tanstack/react-query'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import Textarea from '@/app/components/base/textarea'
 import { consoleQuery } from '@/service/client'
 import { DEPLOYMENT_PAGE_SIZE } from '../data'
 import {
@@ -30,13 +29,15 @@ function CreateReleaseControl({ appId, canCreateRelease }: {
   const { t } = useTranslation('deployments')
   const createRelease = useMutation(consoleQuery.enterprise.appDeploy.createRelease.mutationOptions())
   const [isCreating, setIsCreating] = useState(false)
-  const [releaseName, setReleaseName] = useState('')
-  const [releaseDescription, setReleaseDescription] = useState('')
-  const trimmedReleaseName = releaseName.trim()
-  const canSubmitRelease = Boolean(canCreateRelease && trimmedReleaseName && !createRelease.isPending)
 
-  async function handleCreateRelease() {
-    if (!canSubmitRelease)
+  async function handleCreateRelease(form: HTMLFormElement) {
+    if (!canCreateRelease || createRelease.isPending)
+      return
+
+    const formData = new FormData(form)
+    const releaseName = String(formData.get('name') ?? '').trim()
+    const releaseDescription = String(formData.get('description') ?? '').trim()
+    if (!releaseName)
       return
 
     try {
@@ -45,14 +46,13 @@ function CreateReleaseControl({ appId, canCreateRelease }: {
           appInstanceId: appId,
         },
         body: {
-          name: trimmedReleaseName,
-          description: releaseDescription.trim() || undefined,
+          name: releaseName,
+          description: releaseDescription || undefined,
         },
       })
       if (!response.release?.id)
         throw new Error('Create release did not return a release.')
-      setReleaseName('')
-      setReleaseDescription('')
+      form.reset()
       setIsCreating(false)
     }
     catch {
@@ -78,7 +78,7 @@ function CreateReleaseControl({ appId, canCreateRelease }: {
           <form
             onSubmit={(event) => {
               event.preventDefault()
-              void handleCreateRelease()
+              void handleCreateRelease(event.currentTarget)
             }}
           >
             <div className="flex items-start gap-3 border-b border-divider-subtle px-6 py-5 pr-14">
@@ -102,10 +102,10 @@ function CreateReleaseControl({ appId, canCreateRelease }: {
                 </label>
                 <Input
                   id="release-name"
-                  value={releaseName}
-                  onChange={e => setReleaseName(e.target.value)}
+                  name="name"
                   placeholder={t('versions.releaseNamePlaceholder')}
                   maxLength={128}
+                  required
                   autoFocus
                   className="h-9"
                 />
@@ -120,13 +120,12 @@ function CreateReleaseControl({ appId, canCreateRelease }: {
                     {t('versions.optional')}
                   </span>
                 </div>
-                <Textarea
+                <textarea
                   id="release-description"
-                  value={releaseDescription}
-                  onChange={e => setReleaseDescription(e.target.value)}
+                  name="description"
                   placeholder={t('versions.releaseDescriptionPlaceholder')}
                   maxLength={512}
-                  className="min-h-[96px] resize-none"
+                  className="min-h-[96px] w-full resize-none appearance-none rounded-md border border-transparent bg-components-input-bg-normal p-2 system-sm-regular text-components-input-text-filled caret-primary-600 outline-hidden placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
                 />
               </div>
             </div>
@@ -148,7 +147,7 @@ function CreateReleaseControl({ appId, canCreateRelease }: {
                   type="submit"
                   variant="primary"
                   className="min-w-[88px]"
-                  disabled={!canSubmitRelease}
+                  disabled={!canCreateRelease || createRelease.isPending}
                 >
                   {createRelease.isPending ? t('versions.creating') : t('versions.create')}
                 </Button>