refactor(web): migrate members settings overlays to base ui primitives

web/app/components/header/account-setting/members-page/edit-workspace-modal/index.spec.tsx

@@ -1,6 +1,6 @@
 import type { AppContextValue } from '@/context/app-context'
 import type { ICurrentWorkspace } from '@/models/common'
-import { render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { vi } from 'vitest'
 import { ToastContext } from '@/app/components/base/toast/context'
@@ -40,6 +40,12 @@ describe('EditWorkspaceModal', () => {
     expect(await screen.findByDisplayValue('Test Workspace')).toBeInTheDocument()
   })
 
+  it('should render on the base/ui overlay layer', async () => {
+    renderModal()
+
+    expect(await screen.findByRole('dialog')).toHaveClass('z-[1002]')
+  })
+
   it('should let user edit workspace name', async () => {
     const user = userEvent.setup()
 
@@ -133,4 +139,14 @@ describe('EditWorkspaceModal', () => {
     await user.click(screen.getByTestId('edit-workspace-cancel'))
     expect(mockOnCancel).toHaveBeenCalled()
   })
+
+  it('should call onCancel when Escape key is pressed', async () => {
+    renderModal()
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+
+    await waitFor(() => {
+      expect(mockOnCancel).toHaveBeenCalled()
+    })
+  })
 })

web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx

@@ -1,16 +1,13 @@
 'use client'
-import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
-import Modal from '@/app/components/base/modal'
 import { ToastContext } from '@/app/components/base/toast/context'
+import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
 import { useAppContext } from '@/context/app-context'
 import { updateWorkspaceInfo } from '@/service/common'
-import { cn } from '@/utils/classnames'
-import s from './index.module.css'
 
 type IEditWorkspaceModalProps = {
   onCancel: () => void
@@ -40,8 +37,17 @@ const EditWorkspaceModal = ({
   }
 
   return (
-    <div className={cn(s.wrap)}>
-      <Modal overflowVisible isShow onClose={noop} className={cn(s.modal)}>
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onCancel()
+      }}
+    >
+      <DialogContent
+        backdropProps={{ forceRender: true }}
+        className="overflow-visible"
+      >
         <div className="mb-2 flex justify-between">
           <div className="text-xl font-semibold text-text-primary" data-testid="edit-workspace-title">{t('account.editWorkspaceInfo', { ns: 'common' })}</div>
           <div className="i-ri-close-line h-4 w-4 cursor-pointer text-text-tertiary" data-testid="edit-workspace-close" onClick={onCancel} />
@@ -84,8 +90,8 @@ const EditWorkspaceModal = ({
           </div>
 
         </div>
-      </Modal>
-    </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 export default EditWorkspaceModal

web/app/components/header/account-setting/members-page/index.tsx

@@ -3,7 +3,7 @@ import type { InvitationResult } from '@/models/common'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Avatar } from '@/app/components/base/avatar'
-import Tooltip from '@/app/components/base/tooltip'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { NUM_INFINITE } from '@/app/components/billing/config'
 import { Plan } from '@/app/components/billing/type'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
@@ -59,20 +59,25 @@ const MembersPage = () => {
               <span>{currentWorkspace?.name}</span>
               {isCurrentWorkspaceOwner && (
                 <span>
-                  <Tooltip
-                    popupContent={t('account.editWorkspaceInfo', { ns: 'common' })}
-                  >
-                    <div
-                      className="cursor-pointer rounded-md p-1 hover:bg-black/5"
-                      onClick={() => {
-                        setEditWorkspaceModalVisible(true)
-                      }}
-                    >
-                      <div
-                        data-testid="edit-workspace-pencil"
-                        className="i-ri-pencil-line h-4 w-4 text-text-tertiary"
-                      />
-                    </div>
+                  <Tooltip>
+                    <TooltipTrigger
+                      render={(
+                        <div
+                          className="cursor-pointer rounded-md p-1 hover:bg-black/5"
+                          onClick={() => {
+                            setEditWorkspaceModalVisible(true)
+                          }}
+                        >
+                          <div
+                            data-testid="edit-workspace-pencil"
+                            className="i-ri-pencil-line h-4 w-4 text-text-tertiary"
+                          />
+                        </div>
+                      )}
+                    />
+                    <TooltipContent>
+                      {t('account.editWorkspaceInfo', { ns: 'common' })}
+                    </TooltipContent>
                   </Tooltip>
                 </span>
               )}

web/eslint-suppressions.json

@@ -4423,16 +4423,6 @@
       "count": 2
     }
   },
-  "app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "app/components/header/account-setting/members-page/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/header/account-setting/members-page/invite-modal/index.tsx": {
     "no-restricted-imports": {
       "count": 1