[master] fix: role and member users issues in clusters / workspaces /…

… projects (#4330) * feat: add useFetchMembersList in user store Signed-off-by: donniean <[email protected]> * feat: add useFetchMembersList in user store Signed-off-by: donniean <[email protected]> * refactor: packages/shared/src/components/Roles/AuthorizedUsers/index.tsx Signed-off-by: donniean <[email protected]> * refactor: packages/shared/src/components/Roles/AuthorizedUsers/index.tsx Signed-off-by: donniean <[email protected]> * fix: fix Members users data in clusters / workspaces / projects --------- Signed-off-by: donniean <[email protected]> Co-authored-by: donniean <[email protected]>
kubesphere · Nov 1, 2024 · c41a4f1 · c41a4f1
1 parent 79778f4
commit c41a4f1
Show file tree

Hide file tree

Showing 7 changed files with 224 additions and 126 deletions.
diff --git a/packages/console/src/pages/clusters/containers/ClusterSetting/Members/index.tsx b/packages/console/src/pages/clusters/containers/ClusterSetting/Members/index.tsx
@@ -5,9 +5,8 @@
 
 import React, { useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
+import type { ListPageProps, Column, FormattedUser, FormattedRole } from '@ks-console/shared';
 import {
-  Column,
-  FormattedUser,
   formatTime,
   hasPermission,
   StatusIndicator,
@@ -18,7 +17,6 @@ import {
   MemberModifyModal,
   InviteMemberPayload,
   EditMemberRoleValue,
-  FormattedRole,
   useActionMenu,
   ListPage,
   useCommonActions,
@@ -51,7 +49,7 @@ function Members() {
 
   const { isOpen: isCreateOpen, open: openCreate, close: closeCreate } = useDisclosure(false);
   const { isOpen: isEditOpen, open: openEdit, close: closeEdit } = useDisclosure(false);
-  const { data: allUserList } = useAllUserListQuery();
+  const { data: allUserList, refetch: refetchAllUserList } = useAllUserListQuery();
 
   const { del } = useCommonActions({
     store: userStore,
@@ -78,14 +76,17 @@ function Members() {
     action: 'view',
   });
 
-  const { data: roles = [] } = useQuery<FormattedRole[]>(['clusterroles'], async () => {
-    const res = await fetchList({
-      ...params,
-      limit: -1,
-      annotation: 'kubesphere.io/creator',
-    } as any);
-    return res.data;
-  });
+  const { data: roles = [], refetch: refetchRoles } = useQuery<FormattedRole[]>(
+    ['clusterroles'],
+    async () => {
+      const res = await fetchList({
+        ...params,
+        limit: -1,
+        annotation: 'kubesphere.io/creator',
+      } as any);
+      return res.data;
+    },
+  );
 
   const { mutate: mutateEditUser, isLoading: isEditLoading } = useEditUserMutation(
     {
@@ -254,7 +255,7 @@ function Members() {
     description: t('INVITE_CLUSTER_MEMBER_DESC'),
   };
 
-  const table = {
+  const table: { ref: typeof tableRef } & ListPageProps['table'] = {
     ref: tableRef,
     columns: columns,
     tableName: 'members',
@@ -264,6 +265,10 @@ function Members() {
     disableRowSelect: (row: any) => isCurrentUser(row),
     toolbarRight: renderTableAction({}),
     serverDataFormat: serverDataFormatter,
+    onRefresh: () => {
+      refetchAllUserList();
+      refetchRoles();
+    },
   };
 
   return (

diff --git a/packages/console/src/pages/projects/containers/Members/index.tsx b/packages/console/src/pages/projects/containers/Members/index.tsx
@@ -5,9 +5,8 @@
 
 import React, { useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
+import type { ListPageProps, Column, FormattedUser, FormattedRole } from '@ks-console/shared';
 import {
-  Column,
-  FormattedUser,
   formatTime,
   hasPermission,
   StatusIndicator,
@@ -18,7 +17,6 @@ import {
   MemberModifyModal,
   InviteMemberPayload,
   EditMemberRoleValue,
-  FormattedRole,
   useActionMenu,
   ListPage,
   useCommonActions,
@@ -45,7 +43,7 @@ function Members() {
   const params: Record<string, any> = useParams();
   const [editUser, setEditUser] = useState<FormattedUser>();
   const [rolesMap, setRolesMap] = useState<Record<string, string>>({});
-  const { data: allUserList } = useAllUserListQuery();
+  const { data: allUserList, refetch: refetchAllUserList } = useAllUserListQuery();
 
   const { isOpen: isCreateOpen, open: openCreate, close: closeCreate } = useDisclosure(false);
   const { isOpen: isEditOpen, open: openEdit, close: closeEdit } = useDisclosure(false);
@@ -63,19 +61,22 @@ function Members() {
     action: 'view',
   });
 
-  const { data: roles = [] } = useQuery<FormattedRole[]>(['memberRoles'], async () => {
-    const res = await fetchList({
-      ...params,
-      limit: -1,
-      annotation: 'kubesphere.io/creator',
-    } as any);
-    const maps: Record<string, string> = {};
-    res.data.forEach((item: any) => {
-      maps[item.name] = item.aliasName ? `${item.aliasName}（${item.name}）` : item.name;
-    });
-    setRolesMap(maps);
-    return res.data;
-  });
+  const { data: roles = [], refetch: refetchRoles } = useQuery<FormattedRole[]>(
+    ['memberRoles'],
+    async () => {
+      const res = await fetchList({
+        ...params,
+        limit: -1,
+        annotation: 'kubesphere.io/creator',
+      } as any);
+      const maps: Record<string, string> = {};
+      res.data.forEach((item: any) => {
+        maps[item.name] = item.aliasName ? `${item.aliasName}（${item.name}）` : item.name;
+      });
+      setRolesMap(maps);
+      return res.data;
+    },
+  );
 
   const { mutate: mutateEditUser, isLoading: isEditLoading } = useEditUserMutation(
     {
@@ -239,9 +240,9 @@ function Members() {
     description: t('PROJECT_MEMBER_DESC'),
   };
 
-  const table = {
-    url: getResourceUrl(params),
+  const table: { ref: typeof tableRef } & ListPageProps['table'] = {
     ref: tableRef,
+    url: getResourceUrl(params),
     columns: columns,
     tableName: 'members',
     rowKey: 'name',
@@ -250,6 +251,10 @@ function Members() {
     disableRowSelect: (row: any) => isCurrentUser(row),
     toolbarRight: renderTableAction({}),
     serverDataFormat: serverDataFormatter,
+    onRefresh: () => {
+      refetchAllUserList();
+      refetchRoles();
+    },
   };
 
   return (

diff --git a/packages/console/src/pages/workspaces/containers/Members/index.tsx b/packages/console/src/pages/workspaces/containers/Members/index.tsx
@@ -5,9 +5,8 @@
 
 import React, { useRef, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
+import type { ListPageProps, Column, FormattedUser, FormattedRole } from '@ks-console/shared';
 import {
-  Column,
-  FormattedUser,
   formatTime,
   hasPermission,
   StatusIndicator,
@@ -18,7 +17,6 @@ import {
   MemberModifyModal,
   InviteMemberPayload,
   EditMemberRoleValue,
-  FormattedRole,
   useActionMenu,
   ListPage,
   useCommonActions,
@@ -45,7 +43,7 @@ function Members() {
   const params: Record<string, any> = useParams();
   const [editUser, setEditUser] = useState<FormattedUser>();
   const [rolesMap, setRolesMap] = useState<Record<string, string>>({});
-  const { data: allUserList } = useAllUserListQuery();
+  const { data: allUserList, refetch: refetchAllUserList } = useAllUserListQuery();
 
   const { isOpen: isCreateOpen, open: openCreate, close: closeCreate } = useDisclosure(false);
   const { isOpen: isEditOpen, open: openEdit, close: closeEdit } = useDisclosure(false);
@@ -63,19 +61,22 @@ function Members() {
     action: 'view',
   });
 
-  const { data: roles = [] } = useQuery<FormattedRole[]>(['memberRoles'], async () => {
-    const res = await fetchList({
-      ...params,
-      limit: -1,
-      annotation: 'kubesphere.io/creator',
-    } as any);
-    const maps: Record<string, string> = {};
-    res.data.forEach((item: any) => {
-      maps[item.name] = item.aliasName ? `${item.aliasName}（${item.name}）` : item.name;
-    });
-    setRolesMap(maps);
-    return res.data;
-  });
+  const { data: roles = [], refetch: refetchRoles } = useQuery<FormattedRole[]>(
+    ['memberRoles'],
+    async () => {
+      const res = await fetchList({
+        ...params,
+        limit: -1,
+        annotation: 'kubesphere.io/creator',
+      } as any);
+      const maps: Record<string, string> = {};
+      res.data.forEach((item: any) => {
+        maps[item.name] = item.aliasName ? `${item.aliasName}（${item.name}）` : item.name;
+      });
+      setRolesMap(maps);
+      return res.data;
+    },
+  );
 
   const { mutate: mutateEditUser, isLoading: isEditLoading } = useEditUserMutation(
     {
@@ -239,9 +240,9 @@ function Members() {
     description: t('WORKSPACE_MEMBER_DESC'),
   };
 
-  const table = {
-    url: getResourceUrl(params),
+  const table: { ref: typeof tableRef } & ListPageProps['table'] = {
     ref: tableRef,
+    url: getResourceUrl(params),
     columns: columns,
     tableName: 'members',
     rowKey: 'name',
@@ -250,6 +251,10 @@ function Members() {
     disableRowSelect: (row: any) => isCurrentUser(row),
     toolbarRight: renderTableAction({}),
     serverDataFormat: serverDataFormatter,
+    onRefresh: () => {
+      refetchAllUserList();
+      refetchRoles();
+    },
   };
 
   return (