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,6 +169,7 @@ const websiteOfAnonymous = computed(() => {
             comment.comment.spec.content
           }}</pre>
         </VDescriptionItem>
+        <HasPermission :permissions="['system:comments:manage']">
           <VDescriptionItem
             v-if="!comment.comment.spec.approved"
             :label="$t('core.comment.detail_modal.fields.new_reply')"
@@ -178,10 +180,12 @@ const websiteOfAnonymous = computed(() => {
               @update="newReply = $event"
             />
           </VDescriptionItem>
+        </HasPermission>
       </VDescription>
     </div>
     <template #footer>
       <VSpace>
+        <HasPermission :permissions="['system:comments:manage']">
           <VButton
             v-if="!comment.comment.spec.approved"
             type="secondary"
@@ -193,6 +197,7 @@ const websiteOfAnonymous = computed(() => {
                 : $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
               />
+              <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>
+                <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,6 +239,7 @@ const { operationItems } = useOperationItemExtensionPoint<ListedReply>(
                   <IconReplyLine />
                   <span>{{ quoteReply.owner.displayName }}</span>
                 </a><br v-if="quoteReply" />{{ reply?.reply.spec.content }}</pre>
+            <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"
@@ -246,6 +248,7 @@ const { operationItems } = useOperationItemExtensionPoint<ListedReply>(
                   {{ $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,6 +104,7 @@ const handleDelete = async () => {
               class="whitespace-pre-wrap break-words text-sm text-gray-900 line-clamp-4"
               >{{ comment?.comment?.spec.content }}</pre
             >
+            <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"
@@ -117,6 +119,7 @@ const handleDelete = async () => {
                   {{ $t("core.common.buttons.delete") }}
                 </span>
               </div>
+            </HasPermission>
           </div>
         </template>
       </VEntityField>