From f6747327e98d0b72bbb9278a8c3b663eaa92f8c5 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Sun, 1 Sep 2024 22:07:34 +0800
Subject: [PATCH] refactor: add warning alert for H2 database on data
 initialization page (#6564)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.19.0

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

将 H2 数据库使用警告放置在数据初始化页面，之前放在初始化表单页面无法正确判断，因为没有登录，无法调用 /actuator/info 接口获取数据库数据。

<img width="638" alt="image" src="https://github.com/user-attachments/assets/18868104-321a-4146-a893-5babf4573146">

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

#### Special notes for your reviewer:

需要使用此 PR 测试使用 H2 数据库全新安装，观察是否在数据初始化页面有 H2 数据库的使用提示。

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

```release-note
None
```
---
 ui/console-src/views/system/Setup.vue         |  3 -
 .../views/system/SetupInitialData.vue         | 77 ++++++++++++++-----
 ui/src/components/alerts/H2WarningAlert.vue   |  3 +
 ui/src/locales/en.yaml                        |  1 +
 ui/src/locales/zh-CN.yaml                     |  1 +
 ui/src/locales/zh-TW.yaml                     |  1 +
 6 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/ui/console-src/views/system/Setup.vue b/ui/console-src/views/system/Setup.vue
index 41b3e1fa6..8a5f7bb5f 100644
--- a/ui/console-src/views/system/Setup.vue
+++ b/ui/console-src/views/system/Setup.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import H2WarningAlert from "@/components/alerts/H2WarningAlert.vue";
 import LocaleChange from "@/components/common/LocaleChange.vue";
 import { useGlobalInfoStore } from "@/stores/global-info";
 import type { SystemInitializationRequest } from "@halo-dev/api-client";
@@ -51,8 +50,6 @@ const inputClasses = {
     <IconLogo class="mb-8 flex-none" />
 
     <div class="flex w-72 flex-col">
-      <H2WarningAlert class="mb-3" />
-
       <FormKit
         id="setup-form"
         v-model="formState"
diff --git a/ui/console-src/views/system/SetupInitialData.vue b/ui/console-src/views/system/SetupInitialData.vue
index ee8c9fba8..7af6125e2 100644
--- a/ui/console-src/views/system/SetupInitialData.vue
+++ b/ui/console-src/views/system/SetupInitialData.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
+import H2WarningAlert from "@/components/alerts/H2WarningAlert.vue";
 import { useGlobalInfoStore } from "@/stores/global-info";
 import { useUserStore } from "@/stores/user";
+import type { Info } from "@/types";
 import {
   consoleApiClient,
   coreApiClient,
@@ -10,9 +12,10 @@ import {
   type SinglePageRequest,
   type Tag,
 } from "@halo-dev/api-client";
-import { VLoading } from "@halo-dev/components";
-import { useMutation } from "@tanstack/vue-query";
-import { onMounted, ref } from "vue";
+import { VButton, VLoading } from "@halo-dev/components";
+import { useMutation, useQuery } from "@tanstack/vue-query";
+import axios from "axios";
+import { onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import category from "./setup-data/category.json";
 import menuItems from "./setup-data/menu-items.json";
@@ -128,38 +131,72 @@ async function setupInitialData() {
         },
       },
     });
-    processing.value = false;
+
+    // Reload page to fetch plugin's bundle files
+    window.location.reload();
   }
-
-  await globalInfoStore.fetchGlobalInfo();
-
-  // Reload page to fetch plugin's bundle files
-  window.location.reload();
 }
 
 const userStore = useUserStore();
 
+const { data: info } = useQuery<Info>({
+  queryKey: ["system-info"],
+  queryFn: async () => {
+    const { data } = await axios.get<Info>(`/actuator/info`, {
+      withCredentials: true,
+    });
+    return data;
+  },
+  retry: 0,
+});
+
+watch(
+  () => info.value,
+  (value) => {
+    if (!value) {
+      return;
+    }
+    if (!value.database.name.startsWith("H2")) {
+      setupInitialData();
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+
 onMounted(async () => {
   await globalInfoStore.fetchGlobalInfo();
 
-  if (
-    globalInfoStore.globalInfo &&
-    globalInfoStore.globalInfo.dataInitialized === false &&
-    !userStore.isAnonymous
-  ) {
-    setupInitialData();
+  if (userStore.isAnonymous) {
+    window.location.href = "/";
     return;
   }
 
-  router.push({ name: "Dashboard" });
+  if (globalInfoStore.globalInfo?.dataInitialized) {
+    router.push({ name: "Dashboard" });
+    return;
+  }
 });
 </script>
 
 <template>
   <div class="flex h-screen flex-col items-center justify-center">
-    <VLoading />
-    <div v-if="processing" class="text-xs text-gray-600">
-      {{ $t("core.setup.operations.setup_initial_data.loading") }}
-    </div>
+    <template v-if="info?.database.name.startsWith('H2') && !processing">
+      <H2WarningAlert class="max-w-md">
+        <template #actions>
+          <VButton type="secondary" size="sm" @click="setupInitialData()">
+            {{ $t("core.common.buttons.continue") }}
+          </VButton>
+        </template>
+      </H2WarningAlert>
+    </template>
+
+    <template v-if="processing">
+      <VLoading />
+      <div class="text-xs text-gray-600">
+        {{ $t("core.setup.operations.setup_initial_data.loading") }}
+      </div>
+    </template>
   </div>
 </template>
diff --git a/ui/src/components/alerts/H2WarningAlert.vue b/ui/src/components/alerts/H2WarningAlert.vue
index e8c8dedaf..9c41bffb2 100644
--- a/ui/src/components/alerts/H2WarningAlert.vue
+++ b/ui/src/components/alerts/H2WarningAlert.vue
@@ -26,5 +26,8 @@ const { data: info } = useQuery<Info>({
     <template #description>
       {{ $t("core.components.h2_warning_alert.description") }}
     </template>
+    <template #actions>
+      <slot name="actions" />
+    </template>
   </VAlert>
 </template>
diff --git a/ui/src/locales/en.yaml b/ui/src/locales/en.yaml
index 08c63a95f..704f96729 100644
--- a/ui/src/locales/en.yaml
+++ b/ui/src/locales/en.yaml
@@ -1785,6 +1785,7 @@ core:
       revoke: Revoke
       disable: Disable
       enable: Enable
+      continue: Continue
     radio:
       "yes": "Yes"
       "no": "No"
diff --git a/ui/src/locales/zh-CN.yaml b/ui/src/locales/zh-CN.yaml
index b1c6fd93d..d2c08b720 100644
--- a/ui/src/locales/zh-CN.yaml
+++ b/ui/src/locales/zh-CN.yaml
@@ -1694,6 +1694,7 @@ core:
       revoke: 撤销
       disable: 禁用
       enable: 启用
+      continue: 继续
     radio:
       "yes": 是
       "no": 否
diff --git a/ui/src/locales/zh-TW.yaml b/ui/src/locales/zh-TW.yaml
index bdc18ee88..6c658c7f9 100644
--- a/ui/src/locales/zh-TW.yaml
+++ b/ui/src/locales/zh-TW.yaml
@@ -1651,6 +1651,7 @@ core:
       revoke: 撤銷
       disable: 禁用
       enable: 启用
+      continue: 繼續
     radio:
       "yes": 是
       "no": 否