From 927e45b4eb3e5b1861f83774e13c737b15abfec5 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 25 Sep 2023 23:22:14 +0800
Subject: [PATCH] fix: plugin self tab extension point not working when no
 setting definition (#4659)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area console
/kind bug
/milestone 2.10.x

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

修复当插件没有设置表单定义时，详情选项卡扩展点不生效的问题。

<img width="1061" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/01abc565-a55e-40d5-9d2b-41a7eab2d9b5">

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/4633

#### Special notes for your reviewer:

可以通过以下插件进行测试：

1. [plugin-migrate-1.2.0-SNAPSHOT.jar.zip](https://github.com/halo-dev/halo/files/12713261/plugin-migrate-1.2.0-SNAPSHOT.jar.zip)
2. https://github.com/halo-dev/plugin-app-store/releases/tag/v1.0.0-alpha.4
3. https://github.com/halo-dev/plugin-s3

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

```release-note
None
```
---
 .../modules/system/plugins/PluginDetail.vue   | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/console/src/modules/system/plugins/PluginDetail.vue b/console/src/modules/system/plugins/PluginDetail.vue
index 7bb4a6bdae..1f321e05ec 100644
--- a/console/src/modules/system/plugins/PluginDetail.vue
+++ b/console/src/modules/system/plugins/PluginDetail.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 // core libs
-import { provide, ref, computed, onMounted } from "vue";
+import { provide, ref, computed } from "vue";
 import { useRoute } from "vue-router";
 import { apiClient } from "@/utils/api-client";
 
@@ -50,6 +50,11 @@ const { data: plugin } = useQuery({
       });
     return data;
   },
+  onSuccess(data) {
+    if (!data.spec.settingName) {
+      tabs.value = [...initialTabs.value, ...getTabsFromExtensions()];
+    }
+  },
 });
 
 provide<Ref<Plugin | undefined>>("plugin", plugin);
@@ -74,6 +79,7 @@ const { data: setting } = useQuery({
       const { forms } = data.spec;
       tabs.value = [
         ...initialTabs.value,
+        ...getTabsFromExtensions(),
         ...forms.map((item: SettingForm) => {
           return {
             id: item.group,
@@ -88,29 +94,29 @@ const { data: setting } = useQuery({
 
 provide<Ref<Setting | undefined>>("setting", setting);
 
-onMounted(() => {
+function getTabsFromExtensions(): PluginTab[] {
   const { pluginModuleMap } = usePluginModuleStore();
 
   const currentPluginModule = pluginModuleMap[route.params.name as string];
 
   if (!currentPluginModule) {
-    return;
+    return [];
   }
 
   const { extensionPoints } = currentPluginModule;
 
   if (!extensionPoints?.["plugin:self:tabs:create"]) {
-    return;
+    return [];
   }
 
-  const extraTabs = extensionPoints["plugin:self:tabs:create"]() as PluginTab[];
+  const pluginTabs = extensionPoints[
+    "plugin:self:tabs:create"
+  ]() as PluginTab[];
 
-  extraTabs.forEach((tab) => {
-    if (currentUserHasPermission(tab.permissions)) {
-      initialTabs.value.push(tab);
-    }
+  return pluginTabs.filter((tab) => {
+    return currentUserHasPermission(tab.permissions);
   });
-});
+}
 </script>
 <template>
   <VPageHeader :title="plugin?.spec?.displayName">