feat: improve permission control for comment management (#7521)

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.21.x

#### What this PR does / why we need it:

Improve permission control for comment management.

#### Does this PR introduce a user-facing change?

```release-note
None
```

ui/console-src/modules/contents/comments/components/CommentDetailModal.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import HasPermission from "@/components/permission/HasPermission.vue";
 import { formatDatetime, relativeTimeTo } from "@/utils/date";
 import {
   consoleApiClient,
@@ -168,31 +169,35 @@ const websiteOfAnonymous = computed(() => {
             comment.comment.spec.content
           }}</pre>
         </VDescriptionItem>
-        <VDescriptionItem
-          v-if="!comment.comment.spec.approved"
-          :label="$t('core.comment.detail_modal.fields.new_reply')"
-        >
-          <ReplyFormItems
-            :required="false"
-            :auto-focus="false"
-            @update="newReply = $event"
-          />
-        </VDescriptionItem>
+        <HasPermission :permissions="['system:comments:manage']">
+          <VDescriptionItem
+            v-if="!comment.comment.spec.approved"
+            :label="$t('core.comment.detail_modal.fields.new_reply')"
+          >
+            <ReplyFormItems
+              :required="false"
+              :auto-focus="false"
+              @update="newReply = $event"
+            />
+          </VDescriptionItem>
+        </HasPermission>
       </VDescription>
     </div>
     <template #footer>
       <VSpace>
-        <VButton
-          v-if="!comment.comment.spec.approved"
-          type="secondary"
-          @click="handleApprove"
-        >
-          {{
-            newReply
-              ? $t("core.comment.operations.reply_and_approve.button")
-              : $t("core.comment.operations.approve.button")
-          }}
-        </VButton>
+        <HasPermission :permissions="['system:comments:manage']">
+          <VButton
+            v-if="!comment.comment.spec.approved"
+            type="secondary"
+            @click="handleApprove"
+          >
+            {{
+              newReply
+                ? $t("core.comment.operations.reply_and_approve.button")
+                : $t("core.comment.operations.approve.button")
+            }}
+          </VButton>
+        </HasPermission>
         <VButton @click="modal?.close()">
           {{ $t("core.common.buttons.close") }}
         </VButton>

ui/console-src/modules/contents/comments/components/CommentListItem.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import EntityDropdownItems from "@/components/entity/EntityDropdownItems.vue";
+import HasPermission from "@/components/permission/HasPermission.vue";
 import { formatDatetime, relativeTimeTo } from "@/utils/date";
 import { usePermission } from "@/utils/permission";
 import { useOperationItemExtensionPoint } from "@console/composables/use-operation-extension-points";
@@ -325,12 +326,14 @@ const { operationItems } = useOperationItemExtensionPoint<ListedComment>(
                 state="success"
                 animate
               />
-              <span
-                class="select-none cursor-pointer text-gray-700 hover:text-gray-900"
-                @click="replyModal = true"
-              >
-                {{ $t("core.comment.operations.reply.button") }}
-              </span>
+              <HasPermission :permissions="['system:comments:manage']">
+                <span
+                  class="select-none cursor-pointer text-gray-700 hover:text-gray-900"
+                  @click="replyModal = true"
+                >
+                  {{ $t("core.comment.operations.reply.button") }}
+                </span>
+              </HasPermission>
             </div>
           </div>
         </template>
@@ -380,12 +383,14 @@ const { operationItems } = useOperationItemExtensionPoint<ListedComment>(
                 <VButton @click="refetch()">
                   {{ $t("core.common.buttons.refresh") }}
                 </VButton>
-                <VButton type="secondary" @click="replyModal = true">
-                  <template #icon>
-                    <IconAddCircle />
-                  </template>
-                  {{ $t("core.comment.reply_empty.new") }}
-                </VButton>
+                <HasPermission :permissions="['system:comments:manage']">
+                  <VButton type="secondary" @click="replyModal = true">
+                    <template #icon>
+                      <IconAddCircle />
+                    </template>
+                    {{ $t("core.comment.reply_empty.new") }}
+                  </VButton>
+                </HasPermission>
               </VSpace>
             </template>
           </VEmpty>

ui/console-src/modules/contents/comments/components/ReplyListItem.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import EntityDropdownItems from "@/components/entity/EntityDropdownItems.vue";
+import HasPermission from "@/components/permission/HasPermission.vue";
 import { formatDatetime, relativeTimeTo } from "@/utils/date";
 import { usePermission } from "@/utils/permission";
 import { useOperationItemExtensionPoint } from "@console/composables/use-operation-extension-points";
@@ -238,14 +239,16 @@ const { operationItems } = useOperationItemExtensionPoint<ListedReply>(
                   <IconReplyLine />
                   <span>{{ quoteReply.owner.displayName }}</span>
                 </a><br v-if="quoteReply" />{{ reply?.reply.spec.content }}</pre>
-            <div class="flex items-center gap-3 text-xs">
-              <span
-                class="select-none cursor-pointer text-gray-700 hover:text-gray-900"
-                @click="replyModal = true"
-              >
-                {{ $t("core.comment.operations.reply.button") }}
-              </span>
-            </div>
+            <HasPermission :permissions="['system:comments:manage']">
+              <div class="flex items-center gap-3 text-xs">
+                <span
+                  class="select-none cursor-pointer text-gray-700 hover:text-gray-900"
+                  @click="replyModal = true"
+                >
+                  {{ $t("core.comment.operations.reply.button") }}
+                </span>
+              </div>
+            </HasPermission>
           </div>
         </template>
       </VEntityField>

ui/console-src/modules/dashboard/widgets/index.ts

@@ -108,6 +108,7 @@ export const internalWidgetDefinitions: DashboardWidgetDefinition[] = [
       minH: 6,
       minW: 3,
     },
+    permissions: ["system:comments:view"],
   },
   {
     id: "core:user:stats",

ui/console-src/modules/dashboard/widgets/presets/comments/CommentItem.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import HasPermission from "@/components/permission/HasPermission.vue";
 import { formatDatetime, relativeTimeTo } from "@/utils/date";
 import CommentDetailModal from "@console/modules/contents/comments/components/CommentDetailModal.vue";
 import OwnerButton from "@console/modules/contents/comments/components/OwnerButton.vue";
@@ -103,20 +104,22 @@ const handleDelete = async () => {
               class="whitespace-pre-wrap break-words text-sm text-gray-900 line-clamp-4"
               >{{ comment?.comment?.spec.content }}</pre
             >
-            <div class="flex items-center gap-3 text-xs">
-              <span
-                class="select-none cursor-pointer text-gray-700 hover:text-gray-900"
-                @click="detailModalVisible = true"
-              >
-                {{ $t("core.comment.operations.review.button") }}
-              </span>
-              <span
-                class="select-none cursor-pointer text-gray-700 hover:text-red-600"
-                @click="handleDelete"
-              >
-                {{ $t("core.common.buttons.delete") }}
-              </span>
-            </div>
+            <HasPermission :permissions="['system:comments:manage']">
+              <div class="flex items-center gap-3 text-xs">
+                <span
+                  class="select-none cursor-pointer text-gray-700 hover:text-gray-900"
+                  @click="detailModalVisible = true"
+                >
+                  {{ $t("core.comment.operations.review.button") }}
+                </span>
+                <span
+                  class="select-none cursor-pointer text-gray-700 hover:text-red-600"
+                  @click="handleDelete"
+                >
+                  {{ $t("core.common.buttons.delete") }}
+                </span>
+              </div>
+            </HasPermission>
           </div>
         </template>
       </VEntityField>