refactor: consolidate DialogWrapper component usage and improve prop handling across input fields

web/app/components/rag-pipeline/components/input-field/dialog-wrapper.tsx

@@ -1,47 +1,58 @@
-import { Fragment, useCallback } from 'react'
+import { useCallback } from 'react'
 import type { ReactNode } from 'react'
 import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
 import cn from '@/utils/classnames'
 
 type DialogWrapperProps = {
+  dialogClassName?: string
   className?: string
   panelWrapperClassName?: string
+  outerWrapperClassName?: string
   children: ReactNode
   show: boolean
   onClose?: () => void
 }
 
 const DialogWrapper = ({
+  dialogClassName,
   className,
   panelWrapperClassName,
+  outerWrapperClassName,
   children,
   show,
   onClose,
 }: DialogWrapperProps) => {
   const close = useCallback(() => onClose?.(), [onClose])
   return (
-    <Transition appear show={show} as={Fragment}>
+    <Transition appear show={show}>
-      <Dialog as='div' className='relative z-[1000000]' onClose={close}>
+      <Dialog
+        as='div'
+        className={cn('relative z-40', dialogClassName)}
+        onClose={close}
+      >
         <TransitionChild>
-          <div className={cn(
+          <div
-            'fixed inset-0 bg-black/25',
+            className={cn(
-            'data-[closed]:opacity-0',
+              'fixed inset-0 bg-black/25',
-            'data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
+              'data-[closed]:opacity-0',
-            'data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
+              'data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
-          )} />
+              'data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
+            )}
+          />
         </TransitionChild>
 
-        <div className='fixed inset-0'>
+        <div className={cn('fixed inset-0', outerWrapperClassName)}>
           <div className={cn('flex min-h-full flex-col items-end justify-center pb-1 pt-[116px]', panelWrapperClassName)}>
             <TransitionChild>
-              <DialogPanel className={cn(
+              <DialogPanel
-                'relative flex w-[420px] grow flex-col overflow-hidden border-components-panel-border bg-components-panel-bg-alt p-0 shadow-xl shadow-shadow-shadow-5 transition-all',
+                className={cn(
-                'rounded-l-2xl border-y-[0.5px] border-l-[0.5px]',
+                  'relative flex w-[420px] flex-col overflow-hidden border-components-panel-border bg-components-panel-bg-alt p-0 shadow-xl shadow-shadow-shadow-5 transition-all',
-                'data-[closed]:scale-95  data-[closed]:opacity-0',
+                  'data-[closed]:scale-95  data-[closed]:opacity-0',
-                'data-[enter]:scale-100 data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
+                  'data-[enter]:scale-100 data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
-                'data-[leave]:scale-95 data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
+                  'data-[leave]:scale-95 data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
-                className,
+                  className,
-              )}>
+                )}
+              >
                 {children}
               </DialogPanel>
             </TransitionChild>

web/app/components/rag-pipeline/components/input-field/editor/dialog-wrapper.tsx

@@ -1,54 +0,0 @@
-import { Fragment, useCallback } from 'react'
-import type { ReactNode } from 'react'
-import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
-import cn from '@/utils/classnames'
-
-type DialogWrapperProps = {
-  className?: string
-  panelWrapperClassName?: string
-  children: ReactNode
-  show: boolean
-  onClose?: () => void
-}
-
-const DialogWrapper = ({
-  className,
-  panelWrapperClassName,
-  children,
-  show,
-  onClose,
-}: DialogWrapperProps) => {
-  const close = useCallback(() => onClose?.(), [onClose])
-  return (
-    <Transition appear show={show} as={Fragment}>
-      <Dialog as='div' className='relative z-[1000001]' onClose={close}>
-        <TransitionChild>
-          <div className={cn(
-            'fixed inset-0 bg-black/25',
-            'data-[closed]:opacity-0',
-            'data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
-            'data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
-          )} />
-        </TransitionChild>
-
-        <div className='fixed inset-0 overflow-y-auto'>
-          <div className={cn('flex min-h-full flex-col items-end justify-start pb-1 pt-[116px]', panelWrapperClassName)}>
-            <TransitionChild>
-              <DialogPanel className={cn(
-                'relative flex w-[400px] flex-col overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0 shadow-xl shadow-shadow-shadow-9 transition-all',
-                'data-[closed]:scale-95 data-[closed]:opacity-0',
-                'data-[enter]:scale-100 data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
-                'data-[leave]:scale-95 data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
-                className,
-              )}>
-                {children}
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </Transition >
-  )
-}
-
-export default DialogWrapper

web/app/components/rag-pipeline/components/input-field/editor/index.tsx

@@ -1,5 +1,5 @@
 import { RiCloseLine } from '@remixicon/react'
-import DialogWrapper from './dialog-wrapper'
+import DialogWrapper from '../dialog-wrapper'
 import InputFieldForm from './form'
 import { convertFormDataToINputField, convertToInputFieldFormData } from './utils'
 import { useCallback } from 'react'
@@ -33,7 +33,9 @@ const InputFieldEditor = ({
     <DialogWrapper
       show={show}
       onClose={onClose}
-      panelWrapperClassName='pr-[424px]'
+      outerWrapperClassName='overflow-y-auto'
+      panelWrapperClassName='pr-[424px] justify-start'
+      className='w-[400px] rounded-2xl border-[0.5px] bg-components-panel-bg shadow-shadow-shadow-9'
     >
       <div className='system-xl-semibold flex items-center pb-1 pl-4 pr-11 pt-3.5 text-text-primary'>
         {initialData ? t('datasetPipeline.inputFieldPanel.editInputField') : t('datasetPipeline.inputFieldPanel.addInputField')}

web/app/components/rag-pipeline/components/input-field/index.tsx

@@ -94,6 +94,7 @@ const InputFieldDialog = ({
       <DialogWrapper
         show={!!showInputFieldDialog}
         onClose={closePanel}
+        className='grow rounded-l-2xl border-y-[0.5px] border-l-[0.5px]'
       >
         <div className='flex grow flex-col'>
           <div className='flex items-center p-4 pb-0'>

web/app/components/rag-pipeline/components/input-field/preview/dialog-wrapper.tsx

@@ -1,54 +0,0 @@
-import { Fragment, useCallback } from 'react'
-import type { ReactNode } from 'react'
-import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
-import cn from '@/utils/classnames'
-
-type DialogWrapperProps = {
-  className?: string
-  panelWrapperClassName?: string
-  children: ReactNode
-  show: boolean
-  onClose?: () => void
-}
-
-const DialogWrapper = ({
-  className,
-  panelWrapperClassName,
-  children,
-  show,
-  onClose,
-}: DialogWrapperProps) => {
-  const close = useCallback(() => onClose?.(), [onClose])
-  return (
-    <Transition appear show={show} as={Fragment}>
-      <Dialog as='div' className='relative z-[1000001]' onClose={close}>
-        <TransitionChild>
-          <div className={cn(
-            'fixed inset-0 bg-black/25',
-            'data-[closed]:opacity-0',
-            'data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
-            'data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
-          )} />
-        </TransitionChild>
-
-        <div className='fixed inset-0'>
-          <div className={cn('flex min-h-full flex-col items-end justify-start pb-1 pt-[116px]', panelWrapperClassName)}>
-            <TransitionChild>
-              <DialogPanel className={cn(
-                'relative flex w-[480px] grow flex-col overflow-hidden rounded-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border bg-components-panel-bg p-0 shadow-xl shadow-shadow-shadow-5 transition-all',
-                'data-[closed]:scale-95 data-[closed]:opacity-0',
-                'data-[enter]:scale-100 data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
-                'data-[leave]:scale-95 data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
-                className,
-              )}>
-                {children}
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </Transition >
-  )
-}
-
-export default DialogWrapper

web/app/components/rag-pipeline/components/input-field/preview/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { RiCloseLine } from '@remixicon/react'
-import DialogWrapper from './dialog-wrapper'
+import DialogWrapper from '../dialog-wrapper'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import DataSource from './data-source'
@@ -24,7 +24,8 @@ const PreviewPanel = ({
     <DialogWrapper
       show={show}
       onClose={onClose}
-      panelWrapperClassName='pr-[424px]'
+      panelWrapperClassName='pr-[424px] justify-start'
+      className='w-[480px] grow rounded-2xl border-[0.5px] bg-components-panel-bg'
     >
       <div className='flex items-center gap-x-2 px-4 pt-1'>
         <div className='grow py-1'>