dify/web/features/deployments/components/deploy-drawer.tsx

'use client'

import type { FC } from 'react'
import { Dialog, DialogCloseButton, DialogContent } from '@langgenius/dify-ui/dialog'
import { useQuery } from '@tanstack/react-query'
import { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { deploymentAppDataQueryOptions } from '../data'
import { useDeploymentsStore } from '../store'
import { DeployForm } from './deploy-drawer/form'

const DeployDrawer: FC = () => {
  const { t } = useTranslation('deployments')
  const drawer = useDeploymentsStore(state => state.deployDrawer)
  const drawerAppId = drawer.appId
  const storedAppData = useDeploymentsStore(state => drawerAppId ? state.appData[drawerAppId] : undefined)
  const applyAppData = useDeploymentsStore(state => state.applyAppData)
  const closeDeployDrawer = useDeploymentsStore(state => state.closeDeployDrawer)
  const startDeploy = useDeploymentsStore(state => state.startDeploy)

  const open = drawer.open
  const appDataQuery = useQuery({
    ...deploymentAppDataQueryOptions(drawerAppId ?? ''),
    enabled: open && Boolean(drawerAppId) && !storedAppData,
  })
  useEffect(() => {
    if (appDataQuery.data)
      applyAppData(appDataQuery.data)
  }, [appDataQuery.data, applyAppData])

  const appData = storedAppData ?? (appDataQuery.data?.appId === drawerAppId ? appDataQuery.data : undefined)
  const environments = appData?.candidates.environmentOptions ?? []
  const releases = appData?.candidates.releases ?? []
  const defaultReleaseId = appData?.candidates.defaultReleaseId
  const formKey = `${drawer.appId ?? 'none'}-${drawer.environmentId ?? 'any'}-${drawer.releaseId ?? 'new'}-${open ? '1' : '0'}`

  return (
    <Dialog
      open={open}
      onOpenChange={next => !next && closeDeployDrawer()}
    >
      <DialogContent className="w-[560px] max-w-[90vw]">
        <DialogCloseButton />
        {!drawerAppId
          ? <div className="p-4 text-text-tertiary">{t('deployDrawer.notFound')}</div>
          : !appData
              ? (
                  <div className="flex items-center gap-2 p-4 system-sm-regular text-text-tertiary">
                    <span className="h-4 w-4 animate-spin rounded-full border-2 border-components-panel-border border-t-transparent" />
                    {t('createModal.loadingApps')}
                  </div>
                )
              : (
                  <DeployForm
                    key={formKey}
                    appId={drawerAppId}
                    environments={environments}
                    releases={releases}
                    defaultReleaseId={defaultReleaseId}
                    lockedEnvId={drawer.environmentId}
                    presetReleaseId={drawer.releaseId}
                    onCancel={closeDeployDrawer}
                    onSubmit={({ environmentId, releaseId, releaseNote, bindings }) =>
                      startDeploy({
                        appId: drawerAppId,
                        environmentId,
                        releaseId,
                        releaseNote,
                        bindings,
                      })}
                  />
                )}
      </DialogContent>
    </Dialog>
  )
}

export default DeployDrawer