From f953201307b9be457d190858c76e7eff4d8bd078 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 22 Sep 2023 16:11:53 +0800
Subject: [PATCH] fix: missing ui permission condition about users (#4619)

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 .../components/permission/HasPermission.vue   | 16 ++++++++
 .../contents/_components/ContributorList.vue  | 39 +++++++++++++++++++
 .../contents/attachments/AttachmentList.vue   | 15 +++++--
 .../modules/contents/comments/CommentList.vue | 10 +++--
 .../contents/pages/DeletedSinglePageList.vue  | 23 +----------
 .../modules/contents/pages/SinglePageList.vue | 10 +++--
 .../pages/components/SinglePageListItem.vue   | 20 +---------
 .../contents/posts/DeletedPostList.vue        | 22 +----------
 .../src/modules/contents/posts/PostList.vue   | 10 +++--
 .../entity-fields/ContributorsField.vue       | 21 ++--------
 console/src/setup/setupComponents.ts          |  2 +
 11 files changed, 95 insertions(+), 93 deletions(-)
 create mode 100644 console/src/components/permission/HasPermission.vue
 create mode 100644 console/src/modules/contents/_components/ContributorList.vue

diff --git a/console/src/components/permission/HasPermission.vue b/console/src/components/permission/HasPermission.vue
new file mode 100644
index 000000000..ee871618b
--- /dev/null
+++ b/console/src/components/permission/HasPermission.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { usePermission } from "@/utils/permission";
+
+withDefaults(
+  defineProps<{
+    permissions: string[];
+  }>(),
+  {}
+);
+
+const { currentUserHasPermission } = usePermission();
+</script>
+
+<template>
+  <slot v-if="currentUserHasPermission(permissions)" />
+</template>
diff --git a/console/src/modules/contents/_components/ContributorList.vue b/console/src/modules/contents/_components/ContributorList.vue
new file mode 100644
index 000000000..67dd02769
--- /dev/null
+++ b/console/src/modules/contents/_components/ContributorList.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { usePermission } from "@/utils/permission";
+import type { Contributor } from "@halo-dev/api-client";
+import { VAvatar } from "@halo-dev/components";
+import { useRouter } from "vue-router";
+
+withDefaults(
+  defineProps<{
+    contributors: Contributor[];
+  }>(),
+  {}
+);
+
+const router = useRouter();
+const { currentUserHasPermission } = usePermission();
+
+function handleRouteToUserDetail(contributor: Contributor) {
+  if (!currentUserHasPermission(["system:users:view"])) {
+    return;
+  }
+  router.push({
+    name: "UserDetail",
+    params: { name: contributor.name },
+  });
+}
+</script>
+
+<template>
+  <VAvatar
+    v-for="(contributor, contributorIndex) in contributors"
+    :key="contributorIndex"
+    v-tooltip="contributor.displayName"
+    size="xs"
+    :src="contributor.avatar"
+    :alt="contributor.displayName"
+    circle
+    @click="handleRouteToUserDetail(contributor)"
+  ></VAvatar>
+</template>
diff --git a/console/src/modules/contents/attachments/AttachmentList.vue b/console/src/modules/contents/attachments/AttachmentList.vue
index 0295226d8..47f2a5f00 100644
--- a/console/src/modules/contents/attachments/AttachmentList.vue
+++ b/console/src/modules/contents/attachments/AttachmentList.vue
@@ -356,10 +356,12 @@ onMounted(() => {
                       }) || []),
                     ]"
                   />
-                  <UserFilterDropdown
-                    v-model="selectedUser"
-                    :label="$t('core.attachment.filters.owner.label')"
-                  />
+                  <HasPermission :permissions="['system:users:view']">
+                    <UserFilterDropdown
+                      v-model="selectedUser"
+                      :label="$t('core.attachment.filters.owner.label')"
+                    />
+                  </HasPermission>
                   <FilterDropdown
                     v-model="selectedSort"
                     :label="$t('core.common.filters.labels.sort')"
@@ -610,6 +612,11 @@ onMounted(() => {
                               },
                             }"
                             class="text-xs text-gray-500"
+                            :class="{
+                              'pointer-events-none': !currentUserHasPermission([
+                                'system:users:view',
+                              ]),
+                            }"
                           >
                             {{ attachment.spec.ownerName }}
                           </RouterLink>
diff --git a/console/src/modules/contents/comments/CommentList.vue b/console/src/modules/contents/comments/CommentList.vue
index 37797c042..80a230110 100644
--- a/console/src/modules/contents/comments/CommentList.vue
+++ b/console/src/modules/contents/comments/CommentList.vue
@@ -283,10 +283,12 @@ const handleApproveInBatch = async () => {
                   },
                 ]"
               />
-              <UserFilterDropdown
-                v-model="selectedUser"
-                :label="$t('core.comment.filters.owner.label')"
-              />
+              <HasPermission :permissions="['system:users:view']">
+                <UserFilterDropdown
+                  v-model="selectedUser"
+                  :label="$t('core.comment.filters.owner.label')"
+                />
+              </HasPermission>
               <FilterDropdown
                 v-model="selectedSort"
                 :label="$t('core.common.filters.labels.sort')"
diff --git a/console/src/modules/contents/pages/DeletedSinglePageList.vue b/console/src/modules/contents/pages/DeletedSinglePageList.vue
index 4cfc8990a..38b361a0b 100644
--- a/console/src/modules/contents/pages/DeletedSinglePageList.vue
+++ b/console/src/modules/contents/pages/DeletedSinglePageList.vue
@@ -9,7 +9,6 @@ import {
   VSpace,
   Dialog,
   VEmpty,
-  VAvatar,
   VEntity,
   VEntityField,
   VPageHeader,
@@ -22,11 +21,11 @@ import { ref, watch } from "vue";
 import type { ListedSinglePage, SinglePage } from "@halo-dev/api-client";
 import { apiClient } from "@/utils/api-client";
 import { formatDatetime } from "@/utils/date";
-import { RouterLink } from "vue-router";
 import cloneDeep from "lodash.clonedeep";
 import { usePermission } from "@/utils/permission";
 import { useQuery } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
+import ContributorList from "../_components/ContributorList.vue";
 
 const { currentUserHasPermission } = usePermission();
 const { t } = useI18n();
@@ -338,25 +337,7 @@ watch(
               <template #end>
                 <VEntityField>
                   <template #description>
-                    <RouterLink
-                      v-for="(
-                        contributor, contributorIndex
-                      ) in singlePage.contributors"
-                      :key="contributorIndex"
-                      :to="{
-                        name: 'UserDetail',
-                        params: { name: contributor.name },
-                      }"
-                      class="flex items-center"
-                    >
-                      <VAvatar
-                        v-tooltip="contributor.displayName"
-                        size="xs"
-                        :src="contributor.avatar"
-                        :alt="contributor.displayName"
-                        circle
-                      ></VAvatar>
-                    </RouterLink>
+                    <ContributorList :contributors="singlePage.contributors" />
                   </template>
                 </VEntityField>
                 <VEntityField v-if="!singlePage?.page?.spec.deleted">
diff --git a/console/src/modules/contents/pages/SinglePageList.vue b/console/src/modules/contents/pages/SinglePageList.vue
index 2566f77f0..80be4af5e 100644
--- a/console/src/modules/contents/pages/SinglePageList.vue
+++ b/console/src/modules/contents/pages/SinglePageList.vue
@@ -379,10 +379,12 @@ watch(selectedPageNames, (newValue) => {
                   },
                 ]"
               />
-              <UserFilterDropdown
-                v-model="selectedContributor"
-                :label="$t('core.page.filters.author.label')"
-              />
+              <HasPermission :permissions="['system:users:view']">
+                <UserFilterDropdown
+                  v-model="selectedContributor"
+                  :label="$t('core.page.filters.author.label')"
+                />
+              </HasPermission>
               <FilterDropdown
                 v-model="selectedSort"
                 :label="$t('core.common.filters.labels.sort')"
diff --git a/console/src/modules/contents/pages/components/SinglePageListItem.vue b/console/src/modules/contents/pages/components/SinglePageListItem.vue
index 8511f94d71..ac4aff6d3 100644
--- a/console/src/modules/contents/pages/components/SinglePageListItem.vue
+++ b/console/src/modules/contents/pages/components/SinglePageListItem.vue
@@ -5,7 +5,6 @@ import {
   IconExternalLinkLine,
   VSpace,
   Dialog,
-  VAvatar,
   VStatusDot,
   VEntity,
   VEntityField,
@@ -25,6 +24,7 @@ import { useMutation, useQueryClient } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
 import { inject } from "vue";
 import type { Ref } from "vue";
+import ContributorList from "../../_components/ContributorList.vue";
 
 const { currentUserHasPermission } = usePermission();
 const { t } = useI18n();
@@ -189,23 +189,7 @@ const handleDelete = async () => {
     <template #end>
       <VEntityField>
         <template #description>
-          <RouterLink
-            v-for="(contributor, contributorIndex) in singlePage.contributors"
-            :key="contributorIndex"
-            :to="{
-              name: 'UserDetail',
-              params: { name: contributor.name },
-            }"
-            class="flex items-center"
-          >
-            <VAvatar
-              v-tooltip="contributor.displayName"
-              size="xs"
-              :src="contributor.avatar"
-              :alt="contributor.displayName"
-              circle
-            ></VAvatar>
-          </RouterLink>
+          <ContributorList :contributors="singlePage.contributors" />
         </template>
       </VEntityField>
       <VEntityField :description="publishStatus">
diff --git a/console/src/modules/contents/posts/DeletedPostList.vue b/console/src/modules/contents/posts/DeletedPostList.vue
index 5aa5a0432..c6e07737f 100644
--- a/console/src/modules/contents/posts/DeletedPostList.vue
+++ b/console/src/modules/contents/posts/DeletedPostList.vue
@@ -10,7 +10,6 @@ import {
   VPageHeader,
   VPagination,
   VSpace,
-  VAvatar,
   VStatusDot,
   VEntity,
   VEntityField,
@@ -27,6 +26,7 @@ import { usePermission } from "@/utils/permission";
 import cloneDeep from "lodash.clonedeep";
 import { useQuery } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
+import ContributorList from "../_components/ContributorList.vue";
 
 const { currentUserHasPermission } = usePermission();
 const { t } = useI18n();
@@ -353,25 +353,7 @@ watch(
               <template #end>
                 <VEntityField>
                   <template #description>
-                    <RouterLink
-                      v-for="(
-                        contributor, contributorIndex
-                      ) in post.contributors"
-                      :key="contributorIndex"
-                      :to="{
-                        name: 'UserDetail',
-                        params: { name: contributor.name },
-                      }"
-                      class="flex items-center"
-                    >
-                      <VAvatar
-                        v-tooltip="contributor.displayName"
-                        size="xs"
-                        :src="contributor.avatar"
-                        :alt="contributor.displayName"
-                        circle
-                      ></VAvatar>
-                    </RouterLink>
+                    <ContributorList :contributors="post.contributors" />
                   </template>
                 </VEntityField>
                 <VEntityField v-if="!post?.post?.spec.deleted">
diff --git a/console/src/modules/contents/posts/PostList.vue b/console/src/modules/contents/posts/PostList.vue
index 9e1285e11..0e622d099 100644
--- a/console/src/modules/contents/posts/PostList.vue
+++ b/console/src/modules/contents/posts/PostList.vue
@@ -393,10 +393,12 @@ watch(selectedPostNames, (newValue) => {
                 v-model="selectedTag"
                 :label="$t('core.post.filters.tag.label')"
               />
-              <UserFilterDropdown
-                v-model="selectedContributor"
-                :label="$t('core.post.filters.author.label')"
-              />
+              <HasPermission :permissions="['system:users:view']">
+                <UserFilterDropdown
+                  v-model="selectedContributor"
+                  :label="$t('core.post.filters.author.label')"
+                />
+              </HasPermission>
               <FilterDropdown
                 v-model="selectedSort"
                 :label="$t('core.common.filters.labels.sort')"
diff --git a/console/src/modules/contents/posts/components/entity-fields/ContributorsField.vue b/console/src/modules/contents/posts/components/entity-fields/ContributorsField.vue
index 88d213c3f..148ce8f9a 100644
--- a/console/src/modules/contents/posts/components/entity-fields/ContributorsField.vue
+++ b/console/src/modules/contents/posts/components/entity-fields/ContributorsField.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { VAvatar, VEntityField } from "@halo-dev/components";
+import { VEntityField } from "@halo-dev/components";
 import type { ListedPost } from "@halo-dev/api-client";
+import ContributorList from "@/modules/contents/_components/ContributorList.vue";
 
 withDefaults(
   defineProps<{
@@ -13,23 +14,7 @@ withDefaults(
 <template>
   <VEntityField>
     <template #description>
-      <RouterLink
-        v-for="(contributor, contributorIndex) in post.contributors"
-        :key="contributorIndex"
-        :to="{
-          name: 'UserDetail',
-          params: { name: contributor.name },
-        }"
-        class="flex items-center"
-      >
-        <VAvatar
-          v-tooltip="contributor.displayName"
-          size="xs"
-          :src="contributor.avatar"
-          :alt="contributor.displayName"
-          circle
-        ></VAvatar>
-      </RouterLink>
+      <ContributorList :contributors="post.contributors" />
     </template>
   </VEntityField>
 </template>
diff --git a/console/src/setup/setupComponents.ts b/console/src/setup/setupComponents.ts
index f36ef4796..c00e3d866 100644
--- a/console/src/setup/setupComponents.ts
+++ b/console/src/setup/setupComponents.ts
@@ -11,6 +11,7 @@ import FilterCleanButton from "@/components/filter/FilterCleanButton.vue";
 import SearchInput from "@/components/input/SearchInput.vue";
 import AnnotationsForm from "@/components/form/AnnotationsForm.vue";
 import AttachmentFileTypeIcon from "@/components/icon/AttachmentFileTypeIcon.vue";
+import HasPermission from "@/components/permission/HasPermission.vue";
 
 export function setupComponents(app: App) {
   app.use(VueGridLayout);
@@ -37,4 +38,5 @@ export function setupComponents(app: App) {
   app.component("SearchInput", SearchInput);
   app.component("AnnotationsForm", AnnotationsForm);
   app.component("AttachmentFileTypeIcon", AttachmentFileTypeIcon);
+  app.component("HasPermission", HasPermission);
 }