refactor: migrate system settings to new configmap API (#7524)

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.21.x

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

Migrate system settings to new configmap API

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

Fixes #7515 

#### Special notes for your reviewer:

Need to test whether the system setting is working properly

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

```release-note
None
```

ui/console-src/modules/system/settings/tabs/Setting.vue

@@ -1,102 +1,108 @@
 <script lang="ts" setup>
-// core libs
+import HasPermission from "@/components/permission/HasPermission.vue";
-import { computed, inject, ref, toRaw, type Ref } from "vue";
-
-// components
 import StickyBlock from "@/components/sticky-block/StickyBlock.vue";
-import { Toast, VButton } from "@halo-dev/components";
-
-// hooks
 import { useGlobalInfoStore } from "@/stores/global-info";
-import { useSettingFormConvert } from "@console/composables/use-setting-form";
+import type { FormKitSchemaCondition, FormKitSchemaNode } from "@formkit/core";
-import type { ConfigMap, Setting } from "@halo-dev/api-client";
+import type { Setting } from "@halo-dev/api-client";
-import { coreApiClient } from "@halo-dev/api-client";
+import { consoleApiClient } from "@halo-dev/api-client";
+import { Toast, VButton, VLoading } from "@halo-dev/components";
 import { useQuery, useQueryClient } from "@tanstack/vue-query";
+import { computed, inject, ref, toRaw, type Ref } from "vue";
 import { useI18n } from "vue-i18n";
 
-const SYSTEM_CONFIGMAP_NAME = "system";
-
 const { t, locale } = useI18n();
 const queryClient = useQueryClient();
 
 const group = inject<Ref<string>>("activeTab", ref("basic"));
 const setting = inject<Ref<Setting | undefined>>("setting", ref());
-const saving = ref(false);
+const isSubmitting = ref(false);
 
-const { data: configMap } = useQuery<ConfigMap>({
+const { data: configMapGroupData, isLoading } = useQuery({
-  queryKey: ["system-configMap"],
+  queryKey: ["core:system:configMap:group-data", group],
   queryFn: async () => {
-    const { data } = await coreApiClient.configMap.getConfigMap({
+    const { data } =
-      name: SYSTEM_CONFIGMAP_NAME,
+      await consoleApiClient.configMap.system.getSystemConfigByGroup({
+        group: group.value,
       });
-    return data;
+    return data as Record<string, unknown>;
   },
-  enabled: computed(() => !!setting.value),
+  enabled: computed(() => !!group.value),
 });
 
-const { configMapFormData, formSchema, convertToSave } = useSettingFormConvert(
+const formSchema = computed(() => {
-  setting,
+  if (!setting.value) {
-  configMap,
-  group
-);
-
-const handleSaveConfigMap = async () => {
-  saving.value = true;
-
-  const configMapToUpdate = convertToSave();
-
-  if (!configMapToUpdate) {
-    saving.value = false;
     return;
   }
-
+  const { forms } = setting.value.spec;
-  await coreApiClient.configMap.updateConfigMap({
+  return forms.find((item) => item.group === group?.value)?.formSchema as (
-    name: SYSTEM_CONFIGMAP_NAME,
+    | FormKitSchemaCondition
-    configMap: configMapToUpdate,
+    | FormKitSchemaNode
+  )[];
 });
 
-  Toast.success(t("core.common.toast.save_success"));
+const handleSaveConfigMap = async (data: Record<string, unknown>) => {
+  try {
+    isSubmitting.value = true;
+    await consoleApiClient.configMap.system.updateSystemConfigByGroup({
+      group: group.value,
+      body: data,
+    });
+
+    queryClient.invalidateQueries({
+      queryKey: ["core:system:configMap:group-data"],
+    });
 
-  queryClient.invalidateQueries({ queryKey: ["system-configMap"] });
     await useGlobalInfoStore().fetchGlobalInfo();
 
-  const language = configMapFormData.value.basic.language;
+    if (group.value === "basic") {
-  locale.value = language;
+      const language = data.language;
+      locale.value = language as string;
       document.cookie = `language=${language}; path=/; SameSite=Lax; Secure`;
+    }
 
-  saving.value = false;
+    Toast.success(t("core.common.toast.save_success"));
+  } catch (error) {
+    console.error(error);
+    Toast.error(t("core.common.toast.save_failed_and_retry"));
+  } finally {
+    isSubmitting.value = false;
+  }
 };
 </script>
 <template>
   <div class="p-4">
+    <VLoading v-if="isLoading" />
     <FormKit
-      v-if="group && formSchema && configMapFormData?.[group]"
+      v-else-if="group && formSchema && configMapGroupData"
       :id="group"
-      v-model="configMapFormData[group]"
+      :value="configMapGroupData"
       :name="group"
-      :actions="false"
       :preserve="true"
       type="form"
       @submit="handleSaveConfigMap"
     >
       <FormKitSchema
         :schema="toRaw(formSchema)"
-        :data="configMapFormData[group]"
+        :data="toRaw(configMapGroupData)"
       />
     </FormKit>
 
+    <HasPermission
+      v-if="!isLoading"
+      :permissions="['system:configmaps:manage']"
+    >
       <StickyBlock
-      v-permission="['system:configmaps:manage']"
         class="-mx-4 -mb-4 rounded-b-base rounded-t-lg bg-white p-4 pt-5"
         position="bottom"
       >
         <VButton
-        :loading="saving"
+          :loading="isSubmitting"
           type="secondary"
           @click="$formkit.submit(group || '')"
         >
           {{ $t("core.common.buttons.save") }}
         </VButton>
       </StickyBlock>
+    </HasPermission>
   </div>
 </template>