fix: update permission in member list caused page crash (#30164)

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

@@ -0,0 +1,91 @@
+import type { Member } from '@/models/common'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { vi } from 'vitest'
+import { ToastContext } from '@/app/components/base/toast'
+import Operation from './index'
+
+const mockUpdateMemberRole = vi.fn()
+const mockDeleteMemberOrCancelInvitation = vi.fn()
+
+vi.mock('@/service/common', () => ({
+  deleteMemberOrCancelInvitation: () => mockDeleteMemberOrCancelInvitation(),
+  updateMemberRole: () => mockUpdateMemberRole(),
+}))
+
+const mockUseProviderContext = vi.fn(() => ({
+  datasetOperatorEnabled: false,
+}))
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => mockUseProviderContext(),
+}))
+
+const defaultMember: Member = {
+  id: 'member-id',
+  name: 'Test Member',
+  email: 'test@example.com',
+  avatar: '',
+  avatar_url: null,
+  status: 'active',
+  role: 'editor',
+  last_login_at: '',
+  last_active_at: '',
+  created_at: '',
+}
+
+const renderOperation = (propsOverride: Partial<Member> = {}, operatorRole = 'owner', onOperate?: () => void) => {
+  const mergedMember = { ...defaultMember, ...propsOverride }
+  return render(
+    <ToastContext.Provider value={{ notify: vi.fn(), close: vi.fn() }}>
+      <Operation member={mergedMember} operatorRole={operatorRole} onOperate={onOperate ?? vi.fn()} />
+    </ToastContext.Provider>,
+  )
+}
+
+describe('Operation', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseProviderContext.mockReturnValue({ datasetOperatorEnabled: false })
+  })
+
+  it('renders the current role label', () => {
+    renderOperation()
+
+    expect(screen.getByText('common.members.editor')).toBeInTheDocument()
+  })
+
+  it('shows dataset operator option when the feature flag is enabled', async () => {
+    mockUseProviderContext.mockReturnValue({ datasetOperatorEnabled: true })
+    renderOperation()
+
+    fireEvent.click(screen.getByText('common.members.editor'))
+
+    expect(await screen.findByText('common.members.datasetOperator')).toBeInTheDocument()
+  })
+
+  it('calls updateMemberRole and onOperate when selecting another role', async () => {
+    const onOperate = vi.fn()
+    renderOperation({}, 'owner', onOperate)
+
+    fireEvent.click(screen.getByText('common.members.editor'))
+    fireEvent.click(await screen.findByText('common.members.normal'))
+
+    await waitFor(() => {
+      expect(mockUpdateMemberRole).toHaveBeenCalled()
+      expect(onOperate).toHaveBeenCalled()
+    })
+  })
+
+  it('calls deleteMemberOrCancelInvitation when removing the member', async () => {
+    const onOperate = vi.fn()
+    renderOperation({}, 'owner', onOperate)
+
+    fireEvent.click(screen.getByText('common.members.editor'))
+    fireEvent.click(await screen.findByText('common.members.removeFromTeam'))
+
+    await waitFor(() => {
+      expect(mockDeleteMemberOrCancelInvitation).toHaveBeenCalled()
+      expect(onOperate).toHaveBeenCalled()
+    })
+  })
+})

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

@@ -1,10 +1,14 @@
 'use client'
 import type { Member } from '@/models/common'
-import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
-import { Fragment, useMemo } from 'react'
+import { memo, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
 import { ToastContext } from '@/app/components/base/toast'
 import { useProviderContext } from '@/context/provider-context'
 import { deleteMemberOrCancelInvitation, updateMemberRole } from '@/service/common'
@@ -21,6 +25,7 @@ const Operation = ({
   operatorRole,
   onOperate,
 }: IOperationProps) => {
+  const [open, setOpen] = useState(false)
   const { t } = useTranslation()
   const { datasetOperatorEnabled } = useProviderContext()
   const RoleMap = {
@@ -51,6 +56,7 @@ const Operation = ({
   const { notify } = useContext(ToastContext)
   const toHump = (name: string) => name.replace(/_(\w)/g, (all, letter) => letter.toUpperCase())
   const handleDeleteMemberOrCancelInvitation = async () => {
+    setOpen(false)
     try {
       await deleteMemberOrCancelInvitation({ url: `/workspaces/current/members/${member.id}` })
       onOperate()
@@ -61,6 +67,7 @@ const Operation = ({
     }
   }
   const handleUpdateMemberRole = async (role: string) => {
+    setOpen(false)
     try {
       await updateMemberRole({
         url: `/workspaces/current/members/${member.id}/update-role`,
@@ -75,31 +82,24 @@ const Operation = ({
   }
 
   return (
-    <Menu as="div" className="relative h-full w-full">
-      {
-        ({ open }) => (
-          <>
-            <MenuButton className={cn('system-sm-regular group flex h-full w-full cursor-pointer items-center justify-between px-3 text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement="bottom-end"
+      offset={{ mainAxis: 4 }}
+    >
+      <PortalToFollowElemTrigger asChild onClick={() => setOpen(prev => !prev)}>
+        <div className={cn('system-sm-regular group flex h-full w-full cursor-pointer items-center justify-between px-3 text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
           {RoleMap[member.role] || RoleMap.normal}
-              <ChevronDownIcon className={cn('h-4 w-4 group-hover:block', open ? 'block' : 'hidden')} />
-            </MenuButton>
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
-              <MenuItems
-                className={cn('absolute right-0 top-[52px] z-10 origin-top-right rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm')}
-              >
+          <ChevronDownIcon className={cn('h-4 w-4 shrink-0 group-hover:block', open ? 'block' : 'hidden')} />
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className="z-[999]">
+        <div className={cn('inline-flex flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm')}>
           <div className="p-1">
             {
               roleList.map(role => (
-                      <MenuItem key={role}>
-                        <div className="flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover" onClick={() => handleUpdateMemberRole(role)}>
+                <div key={role} className="flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover" onClick={() => handleUpdateMemberRole(role)}>
                   {
                     role === member.role
                       ? <CheckIcon className="mr-1 mt-[2px] h-4 w-4 text-text-accent" />
@@ -110,11 +110,9 @@ const Operation = ({
                     <div className="system-xs-regular whitespace-nowrap text-text-tertiary">{t(`common.members.${toHump(role)}Tip` as any)}</div>
                   </div>
                 </div>
-                      </MenuItem>
               ))
             }
           </div>
-                <MenuItem>
           <div className="border-t border-divider-subtle p-1">
             <div className="flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover" onClick={handleDeleteMemberOrCancelInvitation}>
               <div className="mr-1 mt-[2px] h-4 w-4 text-text-accent" />
@@ -124,14 +122,10 @@ const Operation = ({
               </div>
             </div>
           </div>
-                </MenuItem>
-              </MenuItems>
-            </Transition>
-          </>
-        )
-      }
-    </Menu>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
   )
 }
 
-export default Operation
+export default memo(Operation)