refactor(web): rebuild goto anything dialog (#38914)

packages/dify-ui/src/dialog/__tests__/index.spec.tsx

@@ -1,5 +1,13 @@
 import { render } from 'vitest-browser-react'
-import { Dialog, DialogCloseButton, DialogContent, DialogDescription, DialogTitle } from '../index'
+import {
+  createDialogHandle,
+  Dialog,
+  DialogCloseButton,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from '../index'
 
 const asHTMLElement = (element: HTMLElement | SVGElement) => element as HTMLElement
 
@@ -18,6 +26,26 @@ describe('Dialog wrapper', () => {
       await expect.element(screen.getByRole('dialog')).toHaveTextContent('Dialog Title')
       await expect.element(screen.getByRole('dialog')).toHaveTextContent('Dialog Description')
     })
+
+    it('should connect a detached trigger to the dialog', async () => {
+      const handle = createDialogHandle()
+      const screen = await render(
+        <>
+          <DialogTrigger handle={handle}>Open dialog</DialogTrigger>
+          <Dialog handle={handle}>
+            <DialogContent>
+              <DialogTitle>Detached dialog</DialogTitle>
+            </DialogContent>
+          </Dialog>
+        </>,
+      )
+
+      await screen.getByRole('button', { name: 'Open dialog' }).click()
+
+      await expect
+        .element(screen.getByRole('dialog', { name: 'Detached dialog' }))
+        .toBeInTheDocument()
+    })
   })
 
   describe('Props', () => {

packages/dify-ui/src/dialog/index.tsx

@@ -9,6 +9,7 @@ export const DialogTrigger = BaseDialog.Trigger
 export const DialogTitle = BaseDialog.Title
 export const DialogDescription = BaseDialog.Description
 export const DialogPortal = BaseDialog.Portal
+export const createDialogHandle = BaseDialog.createHandle
 
 type DialogBackdropProps = Omit<BaseDialog.Backdrop.Props, 'className'> & {
   className?: string