refactor: use generateName instead of uuid to generate metadata.name (h…

…alo-dev/console#688)

#### What type of PR is this?

/kind improvement
/milestone 2.0

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

使用 metadata.generateName 代替 uuid 为 metadata.name 生成值。

Ref halo-dev#2563

#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-console 

测试方式：

1. 需要 `pnpm install`
2. 测试登录以及所有需要创建更新资源的业务模块。

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

```release-note
None
```

package.json

@@ -64,7 +64,6 @@
     "pinia": "^2.0.23",
     "pretty-bytes": "^6.0.0",
     "qs": "^6.11.0",
-    "uuid": "^9.0.0",
     "vue": "^3.2.44",
     "vue-grid-layout": "3.0.0-beta1",
     "vue-router": "^4.1.6",
@@ -84,7 +83,6 @@
     "@types/node": "^18.11.9",
     "@types/qs": "^6.9.7",
     "@types/randomstring": "^1.1.8",
-    "@types/uuid": "^8.3.4",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitejs/plugin-vue-jsx": "^2.1.1",
     "@vitest/ui": "^0.25.1",

src/composables/use-setting-form.ts

@@ -133,14 +133,19 @@ export function useSettingForm(
       });
 
       if (!configMap.value.metadata.creationTimestamp) {
-        await apiClient.extension.configMap.createv1alpha1ConfigMap({
-          configMap: configMap.value,
-        });
+        const { data } =
+          await apiClient.extension.configMap.createv1alpha1ConfigMap({
+            configMap: configMap.value,
+          });
+
+        configMapName.value = data.metadata.name;
       } else {
-        await apiClient.extension.configMap.updatev1alpha1ConfigMap({
-          configMap: configMap.value,
-          name: configMap.value.metadata.name,
-        });
+        const { data } =
+          await apiClient.extension.configMap.updatev1alpha1ConfigMap({
+            configMap: configMap.value,
+            name: configMap.value.metadata.name,
+          });
+        configMapName.value = data.metadata.name;
       }
     } catch (e) {
       console.error("Failed to save configMap", e);

src/modules/contents/attachments/components/AttachmentGroupEditingModal.vue

@@ -2,7 +2,6 @@
 import { VButton, VModal, VSpace } from "@halo-dev/components";
 import SubmitButton from "@/components/button/SubmitButton.vue";
 import type { Group } from "@halo-dev/api-client";
-import { v4 as uuid } from "uuid";
 import { computed, ref, watch } from "vue";
 import cloneDeep from "lodash.clonedeep";
 import { apiClient } from "@/utils/api-client";
@@ -32,7 +31,8 @@ const initialFormState: Group = {
   apiVersion: "storage.halo.run/v1alpha1",
   kind: "Group",
   metadata: {
-    name: uuid(),
+    name: "",
+    generateName: "attachment-group-",
   },
 };
 
@@ -81,7 +81,6 @@ const onVisibleChange = (visible: boolean) => {
 
 const handleResetForm = () => {
   formState.value = cloneDeep(initialFormState);
-  formState.value.metadata.name = uuid();
   reset("attachment-group-form");
 };
 

src/modules/contents/attachments/components/AttachmentPoliciesModal.vue

@@ -10,7 +10,6 @@ import {
 import AttachmentPolicyEditingModal from "./AttachmentPolicyEditingModal.vue";
 import { ref, watch } from "vue";
 import type { Policy, PolicyTemplate } from "@halo-dev/api-client";
-import { v4 as uuid } from "uuid";
 import { formatDatetime } from "@/utils/date";
 import {
   useFetchAttachmentPolicy,
@@ -61,13 +60,14 @@ const handleOpenCreateNewPolicyModal = (policyTemplate: PolicyTemplate) => {
         name: policyTemplate.metadata.name,
       },
       configMapRef: {
-        name: uuid(),
+        name: "",
       },
     },
     apiVersion: "storage.halo.run/v1alpha1",
     kind: "Policy",
     metadata: {
-      name: uuid(),
+      name: "",
+      generateName: "attachment-policy-",
     },
   };
   policyEditingModal.value = true;
@@ -221,6 +221,7 @@ watch(
   </VModal>
 
   <AttachmentPolicyEditingModal
+    v-if="visible"
     v-model:visible="policyEditingModal"
     :policy="selectedPolicy"
     @close="onEditingModalClose"

src/modules/contents/attachments/components/AttachmentPolicyEditingModal.vue

@@ -6,7 +6,6 @@ import cloneDeep from "lodash.clonedeep";
 import { computed, ref, watch, watchEffect } from "vue";
 import { useSettingForm } from "@/composables/use-setting-form";
 import { apiClient } from "@/utils/api-client";
-import { v4 as uuid } from "uuid";
 import {
   reset,
   type FormKitSchemaCondition,
@@ -43,7 +42,8 @@ const initialFormState: Policy = {
   apiVersion: "storage.halo.run/v1alpha1",
   kind: "Policy",
   metadata: {
-    name: uuid(),
+    name: "",
+    generateName: "attachment-policy-",
   },
 };
 
@@ -53,11 +53,22 @@ const policyTemplate = ref<PolicyTemplate | undefined>();
 const settingName = computed(
   () => policyTemplate.value?.spec?.settingRef?.name
 );
-const configMapName = computed(() => formState.value.spec.configMapRef?.name);
+
+const configMapName = computed({
+  get() {
+    return formState.value.spec.configMapRef?.name;
+  },
+  set(value) {
+    formState.value.spec.configMapRef = {
+      name: value as string,
+    };
+  },
+});
 
 const {
   setting,
   configMapFormData,
+  configMap,
   saving,
   handleFetchConfigMap,
   handleFetchSettings,
@@ -102,6 +113,11 @@ const handleSave = async () => {
   try {
     saving.value = true;
 
+    if (!isUpdateMode.value) {
+      configMap.value.metadata.name = "";
+      configMap.value.metadata.generateName = "configMap-";
+    }
+
     await handleSaveConfigMap();
 
     if (isUpdateMode.value) {
@@ -112,6 +128,9 @@ const handleSave = async () => {
         }
       );
     } else {
+      formState.value.spec.configMapRef = {
+        name: configMap.value.metadata.name,
+      };
       await apiClient.extension.storage.policy.createstorageHaloRunV1alpha1Policy(
         {
           policy: formState.value,
@@ -129,7 +148,6 @@ const handleSave = async () => {
 
 const handleResetForm = () => {
   formState.value = cloneDeep(initialFormState);
-  formState.value.metadata.name = uuid();
   reset("attachment-policy-form");
 };
 

src/modules/contents/attachments/components/AttachmentUploadModal.vue

@@ -8,7 +8,6 @@ import {
   useFetchAttachmentPolicyTemplate,
 } from "../composables/use-attachment-policy";
 import AttachmentPolicyEditingModal from "./AttachmentPolicyEditingModal.vue";
-import { v4 as uuid } from "uuid";
 
 const props = withDefaults(
   defineProps<{
@@ -33,6 +32,7 @@ const { policyTemplates, handleFetchPolicyTemplates } =
   useFetchAttachmentPolicyTemplate();
 
 const selectedPolicy = ref<Policy>();
+const policyToCreate = ref<Policy>();
 const uploadVisible = ref(false);
 const policyEditingModal = ref(false);
 
@@ -50,28 +50,29 @@ watchEffect(() => {
 });
 
 const handleOpenCreateNewPolicyModal = (policyTemplate: PolicyTemplate) => {
-  selectedPolicy.value = {
+  policyToCreate.value = {
     spec: {
       displayName: "",
       templateRef: {
         name: policyTemplate.metadata.name,
       },
       configMapRef: {
-        name: uuid(),
+        name: "",
       },
     },
     apiVersion: "storage.halo.run/v1alpha1",
     kind: "Policy",
     metadata: {
-      name: uuid(),
+      name: "",
+      generateName: "attachment-policy-",
     },
   };
   policyEditingModal.value = true;
 };
 
 const onEditingModalClose = async () => {
   await handleFetchPolicies();
-  selectedPolicy.value = policies.value[0];
+  policyToCreate.value = policies.value[0];
 };
 
 const onVisibleChange = (visible: boolean) => {
@@ -181,8 +182,9 @@ watch(
   </VModal>
 
   <AttachmentPolicyEditingModal
+    v-if="visible"
     v-model:visible="policyEditingModal"
-    :policy="selectedPolicy"
+    :policy="policyToCreate"
     @close="onEditingModalClose"
   />
 </template>

src/modules/contents/pages/SinglePageEditor.vue

@@ -12,12 +12,12 @@ import DefaultEditor from "@/components/editor/DefaultEditor.vue";
 import SinglePageSettingModal from "./components/SinglePageSettingModal.vue";
 import PostPreviewModal from "../posts/components/PostPreviewModal.vue";
 import type { SinglePage, SinglePageRequest } from "@halo-dev/api-client";
-import { v4 as uuid } from "uuid";
 import { computed, onMounted, ref } from "vue";
 import { apiClient } from "@/utils/api-client";
 import { useRouteQuery } from "@vueuse/router";
 import cloneDeep from "lodash.clonedeep";
 import { useRouter } from "vue-router";
+import { randomUUID } from "@/utils/id";
 
 const router = useRouter();
 
@@ -45,7 +45,7 @@ const initialFormState: SinglePageRequest = {
     apiVersion: "content.halo.run/v1alpha1",
     kind: "SinglePage",
     metadata: {
-      name: uuid(),
+      name: randomUUID(),
     },
   },
   content: {
@@ -79,7 +79,7 @@ const handleSave = async () => {
       formState.value.page.spec.title = "无标题页面";
     }
     if (!formState.value.page.spec.slug) {
-      formState.value.page.spec.slug = uuid();
+      formState.value.page.spec.slug = new Date().getTime().toString();
     }
 
     if (isUpdateMode.value) {

src/modules/contents/pages/components/SinglePageSettingModal.vue

@@ -4,9 +4,9 @@ import { computed, ref, watchEffect } from "vue";
 import type { SinglePage } from "@halo-dev/api-client";
 import cloneDeep from "lodash.clonedeep";
 import { apiClient } from "@/utils/api-client";
-import { v4 as uuid } from "uuid";
 import { useThemeCustomTemplates } from "@/modules/interface/themes/composables/use-theme";
 import { singlePageLabels } from "@/constants/labels";
+import { randomUUID } from "@/utils/id";
 
 const initialFormState: SinglePage = {
   spec: {
@@ -31,7 +31,7 @@ const initialFormState: SinglePage = {
   apiVersion: "content.halo.run/v1alpha1",
   kind: "SinglePage",
   metadata: {
-    name: uuid(),
+    name: randomUUID(),
   },
 };
 

src/modules/contents/posts/PostEditor.vue

@@ -16,8 +16,8 @@ import { computed, onMounted, ref } from "vue";
 import cloneDeep from "lodash.clonedeep";
 import { apiClient } from "@/utils/api-client";
 import { useRouteQuery } from "@vueuse/router";
-import { v4 as uuid } from "uuid";
 import { useRouter } from "vue-router";
+import { randomUUID } from "@/utils/id";
 
 const router = useRouter();
 
@@ -47,7 +47,7 @@ const initialFormState: PostRequest = {
     apiVersion: "content.halo.run/v1alpha1",
     kind: "Post",
     metadata: {
-      name: uuid(),
+      name: randomUUID(),
     },
   },
   content: {
@@ -80,7 +80,7 @@ const handleSave = async () => {
     }
 
     if (!formState.value.post.spec.slug) {
-      formState.value.post.spec.slug = uuid();
+      formState.value.post.spec.slug = new Date().getTime().toString();
     }
 
     if (isUpdateMode.value) {

src/modules/contents/posts/categories/components/CategoryEditingModal.vue

@@ -14,7 +14,6 @@ import type { Category } from "@halo-dev/api-client";
 import cloneDeep from "lodash.clonedeep";
 import { reset } from "@formkit/core";
 import { setFocus } from "@/formkit/utils/focus";
-import { v4 as uuid } from "uuid";
 import { useThemeCustomTemplates } from "@/modules/interface/themes/composables/use-theme";
 
 const props = withDefaults(
@@ -47,7 +46,8 @@ const initialFormState: Category = {
   apiVersion: "content.halo.run/v1alpha1",
   kind: "Category",
   metadata: {
-    name: uuid(),
+    name: "",
+    generateName: "category-",
   },
 };
 
@@ -92,7 +92,6 @@ const onVisibleChange = (visible: boolean) => {
 
 const handleResetForm = () => {
   formState.value = cloneDeep(initialFormState);
-  formState.value.metadata.name = uuid();
   reset("category-form");
 };