dify/web/app/components/workflow/dsl-export-confirm-modal.tsx

'use client'
import type { EnvironmentVariable } from '@/app/components/workflow/types'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import { RiCloseLine, RiLock2Line } from '@remixicon/react'
import { noop } from 'es-toolkit/function'
import * as React from 'react'
import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Checkbox from '@/app/components/base/checkbox'
import { Env } from '@/app/components/base/icons/src/vender/line/others'
import Modal from '@/app/components/base/modal'

export type DSLExportConfirmModalProps = {
  envList: EnvironmentVariable[]
  onConfirm: (state: boolean) => void | Promise<void>
  onClose: () => void
}

const DSLExportConfirmModal = ({
  envList = [],
  onConfirm,
  onClose,
}: DSLExportConfirmModalProps) => {
  const { t } = useTranslation()

  const [exportSecrets, setExportSecrets] = useState<boolean>(false)
  const [isExporting, setIsExporting] = useState(false)

  const submit = useCallback(async () => {
    if (isExporting)
      return

    setIsExporting(true)
    try {
      await onConfirm(exportSecrets)
      onClose()
    }
    finally {
      setIsExporting(false)
    }
  }, [exportSecrets, isExporting, onClose, onConfirm])

  return (
    <Modal
      isShow={true}
      onClose={noop}
      className={cn('w-[480px] max-w-[480px]')}
    >
      <div className="relative pb-6 title-2xl-semi-bold text-text-primary">{t('env.export.title', { ns: 'workflow' })}</div>
      <div
        className={cn('absolute top-4 right-4 p-2', !isExporting && 'cursor-pointer')}
        onClick={() => !isExporting && onClose()}
      >
        <RiCloseLine className="h-4 w-4 text-text-tertiary" />
      </div>
      <div className="relative">
        <table className="w-full border-separate border-spacing-0 rounded-lg border border-divider-regular shadow-xs">
          <thead className="system-xs-medium-uppercase text-text-tertiary">
            <tr>
              <td width={220} className="h-7 border-r border-b border-divider-regular pl-3">{t('env.export.name', { ns: 'workflow' })}</td>
              <td className="h-7 border-b border-divider-regular pl-3">{t('env.export.value', { ns: 'workflow' })}</td>
            </tr>
          </thead>
          <tbody>
            {envList.map((env, index) => (
              <tr key={env.name}>
                <td className={cn('h-7 border-r pl-3 system-xs-medium', index + 1 !== envList.length && 'border-b')}>
                  <div className="flex w-[200px] items-center gap-1">
                    <Env className="h-4 w-4 shrink-0 text-util-colors-violet-violet-600" />
                    <div className="truncate text-text-primary">{env.name}</div>
                    <div className="shrink-0 text-text-tertiary">{t('env.export.secret', { ns: 'workflow' })}</div>
                    <RiLock2Line className="h-3 w-3 shrink-0 text-text-tertiary" />
                  </div>
                </td>
                <td className={cn('h-7 pl-3', index + 1 !== envList.length && 'border-b')}>
                  <div className="truncate system-xs-regular text-text-secondary">{env.value}</div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="mt-4 flex gap-2">
        <Checkbox
          className="shrink-0"
          checked={exportSecrets}
          disabled={isExporting}
          onCheck={() => setExportSecrets(!exportSecrets)}
        />
        <div
          className={cn('system-sm-medium text-text-primary', !isExporting && 'cursor-pointer')}
          onClick={() => !isExporting && setExportSecrets(!exportSecrets)}
        >
          {t('env.export.checkbox', { ns: 'workflow' })}
        </div>
      </div>
      <div className="flex flex-row-reverse pt-6">
        <Button
          className="ml-2"
          variant="primary"
          loading={isExporting}
          disabled={isExporting}
          onClick={submit}
        >
          {isExporting
            ? t('operation.exporting', { ns: 'common' })
            : exportSecrets
              ? t('env.export.export', { ns: 'workflow' })
              : t('env.export.ignore', { ns: 'workflow' })}
        </Button>
        <Button disabled={isExporting} onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
      </div>
    </Modal>
  )
}

export default DSLExportConfirmModal