From a8a991323e1cf033f61a29e8647d86e311caf0a0 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 18 Sep 2023 21:13:33 +0800
Subject: [PATCH] Add support for delete or revoke a personal access token

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 .../system/users/PersonalAccessTokens.vue     | 35 ++-----
 .../PersonalAccessTokenListItem.vue           | 98 +++++++++++++++++++
 2 files changed, 106 insertions(+), 27 deletions(-)
 create mode 100644 console/src/modules/system/users/components/PersonalAccessTokenListItem.vue

diff --git a/console/src/modules/system/users/PersonalAccessTokens.vue b/console/src/modules/system/users/PersonalAccessTokens.vue
index 37cbad7b2a4..fb30b017261 100644
--- a/console/src/modules/system/users/PersonalAccessTokens.vue
+++ b/console/src/modules/system/users/PersonalAccessTokens.vue
@@ -2,10 +2,7 @@
 import {
   IconAddCircle,
   VButton,
-  VDropdownItem,
   VEmpty,
-  VEntity,
-  VEntityField,
   VLoading,
   VSpace,
 } from "@halo-dev/components";
@@ -13,9 +10,9 @@ import { ref } from "vue";
 import { apiClient } from "@/utils/api-client";
 import type { PersonalAccessToken } from "@halo-dev/api-client";
 import { useQuery } from "@tanstack/vue-query";
-import { formatDatetime, relativeTimeTo } from "@/utils/date";
 import PersonalAccessTokenCreationModal from "./components/PersonalAccessTokenCreationModal.vue";
 import { nextTick } from "vue";
+import PersonalAccessTokenListItem from "./components/PersonalAccessTokenListItem.vue";
 
 const {
   data: pats,
@@ -27,6 +24,12 @@ const {
     const { data } = await apiClient.pat.obtainPats();
     return data;
   },
+  refetchInterval(data) {
+    const deletingTokens = data?.filter(
+      (token) => !!token.metadata.deletionTimestamp
+    );
+    return deletingTokens?.length ? 1000 : false;
+  },
 });
 
 // fixme: Refactor VModal component to simplify the code
@@ -87,29 +90,7 @@ function onCreationModalClose() {
       role="list"
     >
       <li v-for="(token, index) in pats" :key="index">
-        <VEntity>
-          <template #start>
-            <VEntityField
-              :title="token.metadata.name"
-              :description="token.spec?.description"
-            ></VEntityField>
-          </template>
-          <template #end>
-            <VEntityField>
-              <template #description>
-                <span class="truncate text-xs tabular-nums text-gray-500">
-                  {{ relativeTimeTo(token.spec?.expiresAt) }}
-                </span>
-              </template>
-            </VEntityField>
-            <VEntityField
-              :description="formatDatetime(token.metadata.creationTimestamp)"
-            ></VEntityField>
-          </template>
-          <template #dropdownItems>
-            <VDropdownItem type="danger">删除</VDropdownItem>
-          </template>
-        </VEntity>
+        <PersonalAccessTokenListItem :token="token" />
       </li>
     </ul>
   </Transition>
diff --git a/console/src/modules/system/users/components/PersonalAccessTokenListItem.vue b/console/src/modules/system/users/components/PersonalAccessTokenListItem.vue
new file mode 100644
index 00000000000..d3033d1b048
--- /dev/null
+++ b/console/src/modules/system/users/components/PersonalAccessTokenListItem.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import { apiClient } from "@/utils/api-client";
+import { formatDatetime, relativeTimeTo } from "@/utils/date";
+import type { PersonalAccessToken } from "@halo-dev/api-client";
+import {
+  Dialog,
+  Toast,
+  VDropdownDivider,
+  VDropdownItem,
+  VEntity,
+  VEntityField,
+  VStatusDot,
+} from "@halo-dev/components";
+import { useQueryClient } from "@tanstack/vue-query";
+
+const props = withDefaults(
+  defineProps<{
+    token: PersonalAccessToken;
+  }>(),
+  {}
+);
+
+const queryClient = useQueryClient();
+
+function handleDelete() {
+  Dialog.warning({
+    title: "删除个人令牌",
+    description: "确定要删除该个人令牌吗？",
+    async onConfirm() {
+      await apiClient.pat.deletePat({
+        name: props.token.metadata.name,
+      });
+
+      Toast.success("删除成功");
+      queryClient.invalidateQueries({ queryKey: ["personal-access-tokens"] });
+    },
+  });
+}
+
+function handleRevoke() {
+  Dialog.warning({
+    title: "撤销个人令牌",
+    description: "确定要撤销该个人令牌吗？",
+    async onConfirm() {
+      await apiClient.pat.revokePat({
+        name: props.token.metadata.name,
+      });
+
+      Toast.success("撤销成功");
+      queryClient.invalidateQueries({ queryKey: ["personal-access-tokens"] });
+    },
+  });
+}
+</script>
+
+<template>
+  <VEntity>
+    <template #start>
+      <VEntityField
+        :title="token.metadata.name"
+        :description="token.spec?.description"
+      ></VEntityField>
+    </template>
+    <template #end>
+      <VEntityField v-if="token.metadata.deletionTimestamp">
+        <template #description>
+          <VStatusDot
+            v-tooltip="$t('core.common.status.deleting')"
+            state="warning"
+            animate
+          />
+        </template>
+      </VEntityField>
+      <VEntityField>
+        <template #description>
+          <span class="truncate text-xs tabular-nums text-gray-500">
+            {{ relativeTimeTo(token.spec?.expiresAt) }}
+          </span>
+        </template>
+      </VEntityField>
+      <VEntityField
+        :description="formatDatetime(token.metadata.creationTimestamp)"
+      ></VEntityField>
+    </template>
+    <template #dropdownItems>
+      <VDropdownItem
+        v-if="!token.spec?.revoked"
+        type="danger"
+        @click="handleRevoke"
+      >
+        撤销
+      </VDropdownItem>
+      <VDropdownItem v-else @click="handleDelete">恢复</VDropdownItem>
+      <VDropdownDivider />
+      <VDropdownItem type="danger" @click="handleDelete">删除</VDropdownItem>
+    </template>
+  </VEntity>
+</template>