refactor(web): migrate subscription create modal to dialog (#35721)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

eslint-suppressions.json

@@ -3167,11 +3167,6 @@
       "count": 2
     }
   },
-  "web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-common-modal-state.ts": {
     "erasable-syntax-only/enums": {
       "count": 1

web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx

@@ -1,6 +1,6 @@
+import type * as React from 'react'
 import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import * as React from 'react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { SupportedCreationMethods } from '@/app/components/plugins/types'
 import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
@@ -134,36 +134,6 @@ vi.mock('@langgenius/dify-ui/toast', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/modal/modal', () => ({
-  default: ({
-    children,
-    onClose,
-    onConfirm,
-    title,
-    confirmButtonText,
-    bottomSlot,
-    size,
-    disabled,
-  }: {
-    children: React.ReactNode
-    onClose: () => void
-    onConfirm: () => void
-    title: string
-    confirmButtonText: string
-    bottomSlot?: React.ReactNode
-    size?: string
-    disabled?: boolean
-  }) => (
-    <div data-testid="modal" data-size={size} data-disabled={disabled}>
-      <div data-testid="modal-title">{title}</div>
-      <div data-testid="modal-content">{children}</div>
-      <div data-testid="modal-bottom-slot">{bottomSlot}</div>
-      <button data-testid="modal-confirm" onClick={onConfirm} disabled={disabled}>{confirmButtonText}</button>
-      <button data-testid="modal-close" onClick={onClose}>Close</button>
-    </div>
-  ),
-}))
-
 type MockFormValuesConfig = {
   values: Record<string, unknown>
   isCheckValidated: boolean

web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx

@@ -1,8 +1,15 @@
 'use client'
 import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
+import { Button } from '@langgenius/dify-ui/button'
+import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Dialog,
+  DialogCloseButton,
+  DialogContent,
+  DialogTitle,
+} from '@langgenius/dify-ui/dialog'
 import { useTranslation } from 'react-i18next'
 import { EncryptedBottom } from '@/app/components/base/encrypted-bottom'
-import Modal from '@/app/components/base/modal/modal'
 import { SupportedCreationMethods } from '@/app/components/plugins/types'
 import {
   ConfigurationStepContent,
@@ -48,46 +55,93 @@ export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
   const isApiKeyType = createType === SupportedCreationMethods.APIKEY
   const isVerifyStep = currentStep === ApiKeyStep.Verify
   const isConfigurationStep = currentStep === ApiKeyStep.Configuration
+  const isDisabled = isVerifyingCredentials || isBuilding
+  const modalSize = createType === SupportedCreationMethods.MANUAL ? 'md' : 'sm'
 
   return (
-    <Modal
-      title={t(MODAL_TITLE_KEY_MAP[createType], { ns: 'pluginTrigger' })}
-      confirmButtonText={confirmButtonText}
-      onClose={onClose}
-      onCancel={onClose}
-      onConfirm={handleConfirm}
-      disabled={isVerifyingCredentials || isBuilding}
-      bottomSlot={isVerifyStep ? <EncryptedBottom /> : null}
-      size={createType === SupportedCreationMethods.MANUAL ? 'md' : 'sm'}
-      containerClassName="min-h-[360px]"
-      clickOutsideNotClose
-    >
-      {isApiKeyType && <MultiSteps currentStep={currentStep} />}
+    <Dialog open disablePointerDismissal>
+      <DialogContent
+        backdropProps={{ forceRender: true }}
+        className={cn(
+          'flex max-h-[80%] min-h-[360px] flex-col overflow-hidden p-0 shadow-xs',
+          modalSize === 'md'
+            ? 'w-[640px] max-w-[calc(100vw-2rem)]'
+            : 'w-[480px] max-w-[calc(100vw-2rem)]',
+        )}
+      >
+        <div
+          className="flex min-h-0 flex-1 flex-col"
+          data-testid="modal"
+          data-size={modalSize}
+          data-disabled={isDisabled}
+        >
+          <div className="relative shrink-0 p-6 pr-14 pb-3">
+            <DialogTitle className="title-2xl-semi-bold text-text-primary" data-testid="modal-title">
+              {t(MODAL_TITLE_KEY_MAP[createType], { ns: 'pluginTrigger' })}
+            </DialogTitle>
+            <DialogCloseButton
+              className="top-5 right-5 h-8 w-8 rounded-lg [&>span]:h-5 [&>span]:w-5"
+              data-testid="modal-close"
+              onClick={onClose}
+            />
+          </div>
 
-      {isVerifyStep && (
-        <VerifyStepContent
-          apiKeyCredentialsSchema={apiKeyCredentialsSchema}
-          apiKeyCredentialsFormRef={formRefs.apiKeyCredentialsFormRef}
-          onChange={handleApiKeyCredentialsChange}
-        />
-      )}
+          <div className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
+            {isApiKeyType && <MultiSteps currentStep={currentStep} />}
 
-      {isConfigurationStep && (
-        <ConfigurationStepContent
-          createType={createType}
-          subscriptionBuilder={subscriptionBuilder}
-          subscriptionFormRef={formRefs.subscriptionFormRef}
-          autoCommonParametersSchema={autoCommonParametersSchema}
-          autoCommonParametersFormRef={formRefs.autoCommonParametersFormRef}
-          manualPropertiesSchema={manualPropertiesSchema}
-          manualPropertiesFormRef={formRefs.manualPropertiesFormRef}
-          onManualPropertiesChange={handleManualPropertiesChange}
-          logs={logData?.logs || []}
-          pluginId={detail?.plugin_id || ''}
-          pluginName={detail?.name || ''}
-          provider={detail?.provider || ''}
-        />
-      )}
-    </Modal>
+            {isVerifyStep && (
+              <VerifyStepContent
+                apiKeyCredentialsSchema={apiKeyCredentialsSchema}
+                apiKeyCredentialsFormRef={formRefs.apiKeyCredentialsFormRef}
+                onChange={handleApiKeyCredentialsChange}
+              />
+            )}
+
+            {isConfigurationStep && (
+              <ConfigurationStepContent
+                createType={createType}
+                subscriptionBuilder={subscriptionBuilder}
+                subscriptionFormRef={formRefs.subscriptionFormRef}
+                autoCommonParametersSchema={autoCommonParametersSchema}
+                autoCommonParametersFormRef={formRefs.autoCommonParametersFormRef}
+                manualPropertiesSchema={manualPropertiesSchema}
+                manualPropertiesFormRef={formRefs.manualPropertiesFormRef}
+                onManualPropertiesChange={handleManualPropertiesChange}
+                logs={logData?.logs || []}
+                pluginId={detail?.plugin_id || ''}
+                pluginName={detail?.name || ''}
+                provider={detail?.provider || ''}
+              />
+            )}
+          </div>
+
+          <div className="flex shrink-0 justify-end p-6 pt-5">
+            <div className="flex items-center">
+              <Button
+                disabled={isDisabled}
+                onClick={onClose}
+              >
+                {t('operation.cancel', { ns: 'common' })}
+              </Button>
+              <Button
+                className="ml-2"
+                variant="primary"
+                disabled={isDisabled}
+                data-testid="modal-confirm"
+                onClick={handleConfirm}
+              >
+                {confirmButtonText}
+              </Button>
+            </div>
+          </div>
+
+          {isVerifyStep && (
+            <div className="shrink-0">
+              <EncryptedBottom />
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }