From 7e0a3ee8fc838ce99413a441d4cec1d53e2dbb10 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Tue, 12 May 2026 17:59:32 +0800
Subject: [PATCH] feat: update role management to use RoleListRequest for
 improved pagination and owner inclusion

---
 .../account-setting/permissions-page/hooks.ts |  4 +--
 .../permissions-page/index.tsx                |  6 +++-
 .../permissions-page/role-list/row-menu.tsx   | 29 ++++++++++++++-----
 web/models/access-control.ts                  |  5 ++++
 .../access-control/use-workspace-roles.ts     |  4 +--
 5 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/web/app/components/header/account-setting/permissions-page/hooks.ts b/web/app/components/header/account-setting/permissions-page/hooks.ts
index 7aceefda2c..ef8264769a 100644
--- a/web/app/components/header/account-setting/permissions-page/hooks.ts
+++ b/web/app/components/header/account-setting/permissions-page/hooks.ts
@@ -1,8 +1,8 @@
-import type { PaginationParameters } from '@/models/access-control'
+import type { RoleListRequest } from '@/models/access-control'
 import { useWorkspaceRoleList } from '@/service/access-control/use-workspace-roles'
 import { formatRoleGroups } from './helpers'
 
-export const useRoleGroups = (params?: PaginationParameters) => {
+export const useRoleGroups = (params: RoleListRequest) => {
   const { data: roleList, isLoading } = useWorkspaceRoleList(params)
 
   const roleGroups = formatRoleGroups(roleList)
diff --git a/web/app/components/header/account-setting/permissions-page/index.tsx b/web/app/components/header/account-setting/permissions-page/index.tsx
index 9793b5f4ca..0d8a767753 100644
--- a/web/app/components/header/account-setting/permissions-page/index.tsx
+++ b/web/app/components/header/account-setting/permissions-page/index.tsx
@@ -18,7 +18,11 @@ type ModalState = {
 const PermissionsPage = () => {
   const [modalState, setModalState] = useState<ModalState>(null)
 
-  const { roleGroups } = useRoleGroups()
+  const { roleGroups } = useRoleGroups({
+    page: 1,
+    limit: 20,
+    include_owner: 1,
+  })
 
   const { mutateAsync: createWorkspaceRole } = useCreateWorkspaceRole()
   const { mutateAsync: updateWorkspaceRole } = useUpdateWorkspaceRole()
diff --git a/web/app/components/header/account-setting/permissions-page/role-list/row-menu.tsx b/web/app/components/header/account-setting/permissions-page/role-list/row-menu.tsx
index 2629a07d24..c35d20119f 100644
--- a/web/app/components/header/account-setting/permissions-page/role-list/row-menu.tsx
+++ b/web/app/components/header/account-setting/permissions-page/role-list/row-menu.tsx
@@ -53,6 +53,11 @@ const RowMenu = ({
     })
   }, [deleteRole, role.id])
 
+  const hasViewAction = roleCategory === 'global_system_default' && role.role_tag === 'owner'
+  const hasEditAction = roleCategory === 'global_custom' || (roleCategory === 'global_system_default' && role.role_tag !== 'owner')
+  const hasDuplicateAction = roleCategory === 'global_custom'
+  const hasDeleteAction = roleCategory === 'global_custom'
+
   return (
     <DropdownMenu open={open} onOpenChange={setOpen}>
       <DropdownMenuTrigger render={<ActionButton size="l" className={open ? 'bg-state-base-hover' : ''} aria-label="More actions" />}>
@@ -60,21 +65,29 @@ const RowMenu = ({
       </DropdownMenuTrigger>
       <DropdownMenuContent placement="bottom-end" sideOffset={4} popupClassName="min-w-[160px]">
         {
-          roleCategory === 'global_system_default' && (
+          hasViewAction && (
             <DropdownMenuItem className="system-sm-semibold text-text-secondary" onClick={handleView}>
               View
             </DropdownMenuItem>
           )
         }
         {
-          roleCategory === 'global_custom' && (
+          hasEditAction && (
+            <DropdownMenuItem className="system-sm-semibold text-text-secondary" onClick={handleEdit}>
+              Edit
+            </DropdownMenuItem>
+          )
+        }
+        {
+          hasDuplicateAction && (
+            <DropdownMenuItem className="system-sm-semibold text-text-secondary" onClick={handleDuplicate}>
+              Duplicate
+            </DropdownMenuItem>
+          )
+        }
+        {
+          hasDeleteAction && (
             <>
-              <DropdownMenuItem className="system-sm-semibold text-text-secondary" onClick={handleEdit}>
-                Edit
-              </DropdownMenuItem>
-              <DropdownMenuItem className="system-sm-semibold text-text-secondary" onClick={handleDuplicate}>
-                Duplicate
-              </DropdownMenuItem>
               <DropdownMenuSeparator />
               <DropdownMenuItem variant="destructive" className="system-sm-semibold" onClick={handleDelete}>
                 Delete
diff --git a/web/models/access-control.ts b/web/models/access-control.ts
index 3a63555f5b..a21443bb02 100644
--- a/web/models/access-control.ts
+++ b/web/models/access-control.ts
@@ -64,6 +64,7 @@ export type Role = {
   description: string
   is_builtin: boolean
   permission_keys: PermissionKey[]
+  role_tag: 'owner' | '' // Used for identifying the unique owner role, which has some special handlings
 }
 
 export type Pagination = {
@@ -79,6 +80,10 @@ export type PaginationParameters = {
   reverse?: boolean
 }
 
+export type RoleListRequest = PaginationParameters & {
+  include_owner?: number
+}
+
 export type RoleListResponse = {
   data: Role[]
   pagination: Pagination
diff --git a/web/service/access-control/use-workspace-roles.ts b/web/service/access-control/use-workspace-roles.ts
index 683b2a9ce6..c9486b683f 100644
--- a/web/service/access-control/use-workspace-roles.ts
+++ b/web/service/access-control/use-workspace-roles.ts
@@ -1,7 +1,7 @@
 import type {
   CreateRoleRequest,
-  PaginationParameters,
   Role,
+  RoleListRequest,
   RoleListResponse,
 } from '@/models/access-control'
 import type { CommonResponse } from '@/models/common'
@@ -10,7 +10,7 @@ import { del, get, post, put } from '../base'
 
 const NAME_SPACE = 'rbac-role-management'
 
-export const useWorkspaceRoleList = (params?: PaginationParameters) => {
+export const useWorkspaceRoleList = (params: RoleListRequest) => {
   return useQuery({
     queryKey: [NAME_SPACE, 'workspace-role-list', params],
     queryFn: () => get<RoleListResponse>('/workspaces/current/rbac/roles', { params }),