Refine role info in sidebar

halo-dev · Nov 22, 2024 · 2c7219c · 2c7219c
1 parent a8ecf52
commit 2c7219c
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 15 deletions.
diff --git a/ui/console-src/layouts/BasicLayout.vue b/ui/console-src/layouts/BasicLayout.vue
@@ -9,11 +9,13 @@ import { coreMenuGroups } from "@console/router/constant";
 import {
   Dialog,
   IconAccountCircleLine,
+  IconArrowDownLine,
   IconLogoutCircleRLine,
   IconMore,
   IconSearch,
-  IconUserSettings,
+  IconShieldUser,
   VAvatar,
+  VDropdown,
   VTag,
 } from "@halo-dev/components";
 import { useEventListener } from "@vueuse/core";
@@ -152,17 +154,52 @@ onMounted(() => {
             >
               {{ currentUser?.spec.displayName }}
             </div>
-            <div v-if="currentRoles?.[0]" class="flex">
-              <VTag>
+            <div v-if="currentRoles?.length" class="flex mt-1">
+              <VTag v-if="currentRoles.length === 1">
                 <template #leftIcon>
-                  <IconUserSettings />
+                  <IconShieldUser />
                 </template>
                 {{
                   currentRoles[0].metadata.annotations?.[
                     rbacAnnotations.DISPLAY_NAME
                   ] || currentRoles[0].metadata.name
                 }}
               </VTag>
+              <VDropdown v-else>
+                <div class="flex gap-1">
+                  <VTag>
+                    <template #leftIcon>
+                      <IconShieldUser />
+                    </template>
+                    {{ $t("core.sidebar.profile.aggregate_role") }}
+                  </VTag>
+                  <IconArrowDownLine />
+                </div>
+                <template #popper>
+                  <div class="p-1">
+                    <h2
+                      class="text-gray-600 text-sm font-semibold border-b border-gray-100 pb-1.5"
+                    >
+                      {{ $t("core.sidebar.profile.aggregate_role") }}
+                    </h2>
+                    <div class="flex gap-2 flex-wrap mt-2">
+                      <VTag
+                        v-for="role in currentRoles"
+                        :key="role.metadata.name"
+                      >
+                        <template #leftIcon>
+                          <IconShieldUser />
+                        </template>
+                        {{
+                          role.metadata.annotations?.[
+                            rbacAnnotations.DISPLAY_NAME
+                          ] || role.metadata.name
+                        }}
+                      </VTag>
+                    </div>
+                  </div>
+                </template>
+              </VDropdown>
             </div>
           </div>
 
@@ -299,6 +336,7 @@ onMounted(() => {
 
   .profile-placeholder {
     height: 70px;
+    flex: none;
 
     .current-profile {
       height: 70px;

diff --git a/ui/console-src/modules/system/users/UserDetail.vue b/ui/console-src/modules/system/users/UserDetail.vue
@@ -101,7 +101,7 @@ const tabbarItems = computed(() => {
     }));
 });
 
-const handleDelete = async (userToDelete: User) => {
+const handleDelete = async (user: User) => {
   Dialog.warning({
     title: t("core.user.operations.delete.title"),
     description: t("core.common.dialog.descriptions.cannot_be_recovered"),
@@ -111,7 +111,7 @@ const handleDelete = async (userToDelete: User) => {
     onConfirm: async () => {
       try {
         await coreApiClient.user.deleteUser({
-          name: userToDelete.metadata.name,
+          name: user.metadata.name,
         });
         Toast.success(t("core.common.toast.delete_success"));
         router.push({ name: "Users" });
@@ -189,11 +189,17 @@ function onGrantPermissionModalClose() {
               <VDropdownItem @click="passwordChangeModal = true">
                 {{ $t("core.user.detail.actions.change_password.title") }}
               </VDropdownItem>
-              <VDropdownItem @click="grantPermissionModal = true">
+              <VDropdownItem
+                v-if="currentUser?.metadata.name !== user?.user.metadata.name"
+                @click="grantPermissionModal = true"
+              >
                 {{ $t("core.user.detail.actions.grant_permission.title") }}
               </VDropdownItem>
               <VDropdownItem
-                v-if="user?.user"
+                v-if="
+                  user &&
+                  currentUser?.metadata.name !== user?.user.metadata.name
+                "
                 type="danger"
                 @click="handleDelete(user.user)"
               >

diff --git a/ui/console-src/modules/system/users/UserList.vue b/ui/console-src/modules/system/users/UserList.vue
@@ -11,7 +11,7 @@ import {
   IconAddCircle,
   IconLockPasswordLine,
   IconRefreshLine,
-  IconUserFollow,
+  IconShieldUser,
   IconUserSettings,
   Toast,
   VAvatar,
@@ -288,7 +288,7 @@ function onGrantPermissionModalClose() {
           type="default"
         >
           <template #icon>
-            <IconUserFollow class="h-full w-full" />
+            <IconShieldUser class="h-full w-full" />
           </template>
           {{ $t("core.user.actions.roles") }}
         </VButton>
@@ -474,6 +474,9 @@ function onGrantPermissionModalClose() {
                         v-for="role in user.roles"
                         :key="role.metadata.name"
                       >
+                        <template #leftIcon>
+                          <IconShieldUser />
+                        </template>
                         {{
                           role.metadata.annotations?.[
                             rbacAnnotations.DISPLAY_NAME

diff --git a/ui/console-src/router/guards/permission.ts b/ui/console-src/router/guards/permission.ts
@@ -1,4 +1,5 @@
 import { rbacAnnotations } from "@/constants/annotations";
+import { SUPER_ROLE_NAME } from "@/constants/constants";
 import { useRoleStore } from "@/stores/role";
 import { useUserStore } from "@/stores/user";
 import { hasPermission } from "@/utils/permission";
@@ -24,6 +25,10 @@ export function setupPermissionGuard(router: Router) {
 }
 
 function isConsoleAccessDisallowed(currentRoles?: Role[]): boolean {
+  if (currentRoles?.some((role) => role.metadata.name === SUPER_ROLE_NAME)) {
+    return false;
+  }
+
   return (
     currentRoles?.some(
       (role) =>

diff --git a/ui/src/locales/en.yaml b/ui/src/locales/en.yaml
@@ -33,6 +33,8 @@ core:
         tooltip: Profile
       visit_homepage:
         title: Visit homepage
+    profile:
+      aggregate_role: Aggregate Role
   uc_sidebar:
     menu:
       items:
@@ -42,6 +44,8 @@ core:
     operations:
       console:
         tooltip: Console
+    profile:
+      aggregate_role: Aggregate Role
   dashboard:
     title: Dashboard
     actions:

diff --git a/ui/src/locales/zh-CN.yaml b/ui/src/locales/zh-CN.yaml
@@ -31,6 +31,8 @@ core:
         tooltip: 个人中心
       visit_homepage:
         title: 访问首页
+    profile:
+      aggregate_role: 聚合角色
   uc_sidebar:
     menu:
       items:
@@ -40,6 +42,8 @@ core:
     operations:
       console:
         tooltip: 管理控制台
+    profile:
+      aggregate_role: 聚合角色
   dashboard:
     title: 仪表板
     actions:

diff --git a/ui/src/locales/zh-TW.yaml b/ui/src/locales/zh-TW.yaml
@@ -31,6 +31,8 @@ core:
         tooltip: 個人中心
       visit_homepage:
         title: 訪問首頁
+    profile:
+      aggregate_role: 聚合角色
   uc_sidebar:
     menu:
       items:
@@ -40,6 +42,8 @@ core:
     operations:
       console:
         tooltip: 管理控制台
+    profile:
+      aggregate_role: 聚合角色
   dashboard:
     title: 儀表板
     actions:

diff --git a/ui/uc-src/layouts/BasicLayout.vue b/ui/uc-src/layouts/BasicLayout.vue
@@ -2,15 +2,18 @@
 import { RoutesMenu } from "@/components/menu/RoutesMenu";
 import { useRouteMenuGenerator } from "@/composables/use-route-menu-generator";
 import { rbacAnnotations } from "@/constants/annotations";
+import { SUPER_ROLE_NAME } from "@/constants/constants";
 import { useUserStore } from "@/stores/user";
 import { coreMenuGroups } from "@console/router/constant";
 import {
   Dialog,
+  IconArrowDownLine,
   IconLogoutCircleRLine,
   IconMore,
   IconSettings3Line,
-  IconUserSettings,
+  IconShieldUser,
   VAvatar,
+  VDropdown,
   VTag,
 } from "@halo-dev/components";
 import {
@@ -86,6 +89,12 @@ onMounted(() => {
 });
 
 const disallowAccessConsole = computed(() => {
+  if (
+    currentRoles?.value?.some((role) => role.metadata.name === SUPER_ROLE_NAME)
+  ) {
+    return false;
+  }
+
   const hasDisallowAccessConsoleRole = currentRoles?.value?.some((role) => {
     return (
       role.metadata.annotations?.[rbacAnnotations.DISALLOW_ACCESS_CONSOLE] ===
@@ -121,25 +130,60 @@ const disallowAccessConsole = computed(() => {
             <VAvatar
               :src="currentUser?.spec.avatar"
               :alt="currentUser?.spec.displayName"
-              size="md"
+              size="sm"
               circle
             ></VAvatar>
           </div>
           <div class="profile-name">
             <div class="flex text-sm font-medium">
               {{ currentUser?.spec.displayName }}
             </div>
-            <div v-if="currentRoles?.[0]" class="flex">
-              <VTag>
+            <div v-if="currentRoles?.length" class="flex mt-1">
+              <VTag v-if="currentRoles.length === 1">
                 <template #leftIcon>
-                  <IconUserSettings />
+                  <IconShieldUser />
                 </template>
                 {{
                   currentRoles[0].metadata.annotations?.[
                     rbacAnnotations.DISPLAY_NAME
                   ] || currentRoles[0].metadata.name
                 }}
               </VTag>
+              <VDropdown v-else>
+                <div class="flex gap-1">
+                  <VTag>
+                    <template #leftIcon>
+                      <IconShieldUser />
+                    </template>
+                    {{ $t("core.uc_sidebar.profile.aggregate_role") }}
+                  </VTag>
+                  <IconArrowDownLine />
+                </div>
+                <template #popper>
+                  <div class="p-1">
+                    <h2
+                      class="text-gray-600 text-sm font-semibold border-b border-gray-100 pb-1.5"
+                    >
+                      {{ $t("core.uc_sidebar.profile.aggregate_role") }}
+                    </h2>
+                    <div class="flex gap-2 flex-wrap mt-2">
+                      <VTag
+                        v-for="role in currentRoles"
+                        :key="role.metadata.name"
+                      >
+                        <template #leftIcon>
+                          <IconShieldUser />
+                        </template>
+                        {{
+                          role.metadata.annotations?.[
+                            rbacAnnotations.DISPLAY_NAME
+                          ] || role.metadata.name
+                        }}
+                      </VTag>
+                    </div>
+                  </div>
+                </template>
+              </VDropdown>
             </div>
           </div>
           <div class="flex items-center gap-1">
@@ -276,6 +320,7 @@ const disallowAccessConsole = computed(() => {
 
   .profile-placeholder {
     height: 70px;
+    flex: none;
 
     .current-profile {
       height: 70px;

diff --git a/ui/uc-src/modules/profile/tabs/Detail.vue b/ui/uc-src/modules/profile/tabs/Detail.vue
@@ -5,6 +5,7 @@ import type { DetailedUser, ListedAuthProvider } from "@halo-dev/api-client";
 import { consoleApiClient } from "@halo-dev/api-client";
 import {
   Dialog,
+  IconShieldUser,
   VAlert,
   VButton,
   VDescription,
@@ -135,6 +136,9 @@ const emailVerifyModal = ref(false);
       >
         <VSpace>
           <VTag v-for="role in user?.roles" :key="role.metadata.name">
+            <template #leftIcon>
+              <IconShieldUser />
+            </template>
             {{
               role.metadata.annotations?.[rbacAnnotations.DISPLAY_NAME] ||
               role.metadata.name