From 4c11ccfcd13710936379343a213552ec805915e1 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 29 Mar 2023 21:30:14 +0800
Subject: [PATCH] perf: improve the display of user auth providers in user
 details (#3624)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement
/area console
/milestone 2.4.x

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

优化用户详情页面中认证方式的显示逻辑。

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

```release-note
None
```
---
 console/src/modules/system/users/UserDetail.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/console/src/modules/system/users/UserDetail.vue b/console/src/modules/system/users/UserDetail.vue
index 6a88ac30c..0d5518fe5 100644
--- a/console/src/modules/system/users/UserDetail.vue
+++ b/console/src/modules/system/users/UserDetail.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Dialog, IconUserSettings, VButton, VTag } from "@halo-dev/components";
 import type { ComputedRef, Ref } from "vue";
-import { inject } from "vue";
+import { inject, computed } from "vue";
 import { useRouter } from "vue-router";
 import type { DetailedUser, ListedAuthProvider } from "@halo-dev/api-client";
 import { rbacAnnotations } from "@/constants/annotations";
@@ -17,7 +17,7 @@ const isCurrentUser = inject<ComputedRef<boolean>>("isCurrentUser");
 const router = useRouter();
 const { t } = useI18n();
 
-const { data: authProviders } = useQuery<ListedAuthProvider[]>({
+const { data: authProviders, isFetching } = useQuery<ListedAuthProvider[]>({
   queryKey: ["user-auth-providers"],
   queryFn: async () => {
     const { data } = await apiClient.authProvider.listAuthProviders();
@@ -27,6 +27,12 @@ const { data: authProviders } = useQuery<ListedAuthProvider[]>({
   enabled: isCurrentUser,
 });
 
+const availableAuthProviders = computed(() => {
+  return authProviders.value?.filter(
+    (authProvider) => authProvider.enabled && authProvider.supportsBinding
+  );
+});
+
 const handleUnbindAuth = (authProvider: ListedAuthProvider) => {
   Dialog.warning({
     title: t("core.user.detail.operations.unbind.title", {
@@ -149,7 +155,7 @@ const handleBindAuth = (authProvider: ListedAuthProvider) => {
         </dd>
       </div>
       <div
-        v-if="isCurrentUser"
+        v-if="!isFetching && isCurrentUser && availableAuthProviders?.length"
         class="bg-white py-5 px-2 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4"
       >
         <dt class="text-sm font-medium text-gray-900">