Fix post annotations lost on direct publish

ui/console-src/modules/contents/posts/components/PostSettingModal.vue

@@ -108,22 +108,30 @@ const handlePublishClick = () => {
 // because currently there may be errors caused by changes in version due to asynchronous processing.
 const { mutateAsync: postUpdateMutate } = usePostUpdateMutate();
 
-const handleSave = async () => {
+const syncAnnotations = async () => {
   annotationsFormRef.value?.handleSubmit();
   await nextTick();
 
   const { customAnnotations, annotations, customFormInvalid, specFormInvalid } =
     annotationsFormRef.value || {};
 
   if (customFormInvalid || specFormInvalid) {
-    return;
+    return false;
   }
 
   formState.value.metadata.annotations = {
     ...annotations,
     ...customAnnotations,
   };
 
+  return true;
+};
+
+const handleSave = async () => {
+  if (!(await syncAnnotations())) {
+    return;
+  }
+
   if (props.onlyEmit) {
     emit("saved", formState.value);
     modal.value?.close();
@@ -153,6 +161,10 @@ const handleSave = async () => {
 };
 
 const handlePublish = async () => {
+  if (!(await syncAnnotations())) {
+    return;
+  }
+
   if (props.onlyEmit) {
     emit("published", formState.value);
     modal.value?.close();

ui/console-src/modules/contents/posts/components/__tests__/PostSettingModal.spec.ts

@@ -1,12 +1,104 @@
+/* eslint-disable vue/one-component-per-file -- Test-local stubs keep this regression test isolated. */
+import type { Post } from "@halo-dev/api-client";
 import { utils } from "@halo-dev/ui-shared";
 import messages from "@intlify/unplugin-vue-i18n/messages";
 import { VueQueryPlugin } from "@tanstack/vue-query";
 import { mount } from "@vue/test-utils";
 import { createPinia, setActivePinia } from "pinia";
-import { beforeEach, describe, expect, it } from "vite-plus/test";
+import { beforeEach, describe, expect, it, vi } from "vite-plus/test";
+import { defineComponent, h } from "vue";
 import { createI18n } from "vue-i18n";
 import PostSettingModal from "../PostSettingModal.vue";
 
+const plugins = [
+  VueQueryPlugin,
+  createI18n({
+    legacy: false,
+    locale: "en",
+    messages,
+  }),
+];
+
+function createPost(): Post {
+  return {
+    apiVersion: "content.halo.run/v1alpha1",
+    kind: "Post",
+    metadata: {
+      name: "test-post",
+      annotations: {
+        "content.halo.run/existing": "existing",
+      },
+    },
+    spec: {
+      title: "Test post",
+      slug: "test-post",
+      template: "",
+      cover: "",
+      deleted: false,
+      publish: false,
+      publishTime: undefined,
+      pinned: false,
+      allowComment: true,
+      visible: "PUBLIC",
+      priority: 0,
+      excerpt: {
+        autoGenerate: true,
+        raw: "",
+      },
+      categories: [],
+      tags: [],
+      htmlMetas: [],
+    },
+  };
+}
+
+function createAnnotationsFormStub(handleSubmit: () => void) {
+  return defineComponent({
+    name: "AnnotationsForm",
+    setup(_, { expose }) {
+      expose({
+        handleSubmit,
+        specFormInvalid: false,
+        customFormInvalid: false,
+        annotations: {
+          "content.halo.run/description": "from-setting-form",
+        },
+        customAnnotations: {
+          "custom.halo.run/field": "custom-value",
+        },
+      });
+
+      return () => h("div");
+    },
+  });
+}
+
+const FormKitStub = defineComponent({
+  name: "FormKit",
+  setup(_, { slots }) {
+    return () => h("div", slots.default?.());
+  },
+});
+
+const VModalStub = defineComponent({
+  name: "VModal",
+  emits: ["close"],
+  setup(_, { emit, expose, slots }) {
+    expose({
+      close: () => emit("close"),
+    });
+
+    return () => h("div", [slots.default?.(), slots.footer?.()]);
+  },
+});
+
+const VButtonStub = defineComponent({
+  name: "VButton",
+  setup(_, { attrs, slots }) {
+    return () => h("button", attrs, slots.default?.());
+  },
+});
+
 describe("PostSettingModal", () => {
   beforeEach(() => {
     setActivePinia(createPinia());
@@ -23,17 +115,45 @@ describe("PostSettingModal", () => {
       },
       {
         global: {
-          plugins: [
-            VueQueryPlugin,
-            createI18n({
-              legacy: false,
-              locale: "en",
-              messages,
-            }),
-          ],
+          plugins,
         },
       }
     );
     expect(wrapper).toBeDefined();
   });
+
+  it("merges annotation form state before emitting direct publish", async () => {
+    utils.permission.setUserPermissions([]);
+    const handleSubmit = vi.fn();
+
+    const wrapper = mount(PostSettingModal, {
+      props: {
+        post: createPost(),
+        onlyEmit: true,
+      },
+      global: {
+        plugins,
+        stubs: {
+          AnnotationsForm: createAnnotationsFormStub(handleSubmit),
+          FormKit: FormKitStub,
+          IconRefreshLine: true,
+          VButton: VButtonStub,
+          VModal: VModalStub,
+          VSpace: {
+            template: "<div><slot /></div>",
+          },
+        },
+      },
+    });
+
+    await (wrapper.vm.$.setupState.handlePublish as () => Promise<void>)();
+
+    expect(handleSubmit).toHaveBeenCalledOnce();
+
+    const publishedPost = wrapper.emitted("published")?.[0]?.[0] as Post;
+    expect(publishedPost.metadata.annotations).toEqual({
+      "content.halo.run/description": "from-setting-form",
+      "custom.halo.run/field": "custom-value",
+    });
+  });
 });