dify/web/features/deployments/deployment-actions/edit-dialog.tsx

'use client'

import { Button } from '@langgenius/dify-ui/button'
import {
  Dialog,
  DialogCloseButton,
  DialogContent,
  DialogTitle,
} from '@langgenius/dify-ui/dialog'
import { Field, FieldControl, FieldError, FieldLabel } from '@langgenius/dify-ui/field'
import { Form } from '@langgenius/dify-ui/form'
import { Textarea } from '@langgenius/dify-ui/textarea'
import { toast } from '@langgenius/dify-ui/toast'
import { useMutation } from '@tanstack/react-query'
import { useAtom, useAtomValue, useSetAtom } from 'jotai'
import { useTranslation } from 'react-i18next'
import { consoleQuery } from '@/service/client'
import {
  deploymentActionAppInstanceAtom,
  editDeploymentDialogOpenAtom,
} from './state'

type EditDeploymentFormValues = {
  name: string
  description: string
}

function normalizedEditDeploymentFormValues(value: EditDeploymentFormValues) {
  return {
    name: value.name.trim(),
    description: value.description.trim(),
  }
}

function canSubmitEditDeploymentForm(initialValues: EditDeploymentFormValues, value: EditDeploymentFormValues) {
  const normalizedValues = normalizedEditDeploymentFormValues(value)

  return Boolean(
    normalizedValues.name
    && (
      normalizedValues.name !== initialValues.name
      || normalizedValues.description !== initialValues.description
    ),
  )
}

function EditDeploymentForm() {
  const { t } = useTranslation('deployments')
  const nameLabel = t($ => $['settings.name'])
  const appInstance = useAtomValue(deploymentActionAppInstanceAtom)
  const appInstanceId = appInstance.id
  const initialValues = {
    name: appInstance.displayName,
    description: appInstance.description,
  }
  const setOpen = useSetAtom(editDeploymentDialogOpenAtom)
  const updateInstance = useMutation(consoleQuery.enterprise.appInstanceService.updateAppInstance.mutationOptions())

  function handleClose() {
    if (updateInstance.isPending)
      return

    setOpen(false)
  }

  function handleSubmit(values: EditDeploymentFormValues) {
    if (!canSubmitEditDeploymentForm(initialValues, values))
      return

    const normalizedValues = normalizedEditDeploymentFormValues(values)

    updateInstance.mutate(
      {
        params: {
          appInstanceId,
        },
        body: {
          appInstanceId,
          displayName: normalizedValues.name,
          description: normalizedValues.description,
        },
      },
      {
        onSuccess: () => {
          toast.success(t($ => $['settings.updated']))
          setOpen(false)
        },
        onError: () => {
          toast.error(t($ => $['settings.updateFailed']))
        },
      },
    )
  }

  return (
    <>
      <DialogCloseButton disabled={updateInstance.isPending} />
      <Form<EditDeploymentFormValues> className="flex flex-col gap-4" onFormSubmit={handleSubmit}>
        <Field name="name" className="gap-2">
          <FieldLabel className="system-xs-medium-uppercase text-text-tertiary">
            {nameLabel}
          </FieldLabel>
          <FieldControl
            type="text"
            required
            defaultValue={initialValues.name}
            className="h-8"
          />
          <FieldError match="valueMissing">{t($ => $['errorMsg.fieldRequired'], { ns: 'common', field: nameLabel })}</FieldError>
        </Field>
        <Field name="description" className="gap-2">
          <FieldLabel className="system-xs-medium-uppercase text-text-tertiary">
            {t($ => $['settings.description'])}
          </FieldLabel>
          <Textarea
            defaultValue={initialValues.description}
            className="min-h-24"
          />
        </Field>
        <div className="flex justify-end gap-2 pt-2">
          <Button
            type="button"
            variant="secondary"
            disabled={updateInstance.isPending}
            onClick={handleClose}
          >
            {t($ => $['createModal.cancel'])}
          </Button>
          <Button
            type="submit"
            variant="primary"
            disabled={updateInstance.isPending}
            loading={updateInstance.isPending}
          >
            {t($ => $['settings.save'])}
          </Button>
        </div>
      </Form>
    </>
  )
}

function EditDeploymentDialogContent() {
  const { t } = useTranslation('deployments')
  const appInstance = useAtomValue(deploymentActionAppInstanceAtom)

  return (
    <>
      <div className="border-b border-divider-subtle px-6 py-5">
        <DialogTitle className="title-xl-semi-bold text-text-primary">
          {t($ => $['card.menu.editInfo'])}
        </DialogTitle>
      </div>
      <div className="px-6 py-5">
        <EditDeploymentForm
          key={`${appInstance.id}-${appInstance.displayName}-${appInstance.description}`}
        />
      </div>
    </>
  )
}

export function EditDeploymentDialog() {
  const [open, setOpen] = useAtom(editDeploymentDialogOpenAtom)

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="w-120 max-w-[calc(100vw-32px)] p-0">
        <EditDeploymentDialogContent />
      </DialogContent>
    </Dialog>
  )
}