feat: add attachment policy and group selection component to formkit (#4258)

#### What type of PR is this?

/kind feature
/area console

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

为 formkit 添加一个 `attachmentPolicySelect` 类型的下拉选择框组件，用来供用户选择附件策略。
同时也添加了一个 `attachmentGroupSelect` 类型的下拉选择框组件，用来供用户选择附件分组。

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

Fixes #4247 

#### Special notes for your reviewer:

使用 formkit 组件时将 type 修改为 `attachmentPolicySelect` 或 `attachmentGroupSelect`，查看是否能够展示一个可以选择附件策略或附件分组的组件，

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

```release-note
None
```

console/src/formkit/formkit.config.ts

@@ -17,6 +17,8 @@ import { categorySelect } from "./inputs/category-select";
 import { categoryCheckbox } from "./inputs/category-checkbox";
 import { tagCheckbox } from "./inputs/tag-checkbox";
 import { roleSelect } from "./inputs/role-select";
+import { attachmentPolicySelect } from "./inputs/attachment-policy-select";
+import { attachmentGroupSelect } from "./inputs/attachment-group-select";
 
 import radioAlt from "./plugins/radio-alt";
 import stopImplicitSubmission from "./plugins/stop-implicit-submission";
@@ -49,6 +51,8 @@ const config: DefaultConfigOptions = {
     categoryCheckbox,
     tagCheckbox,
     roleSelect,
+    attachmentPolicySelect,
+    attachmentGroupSelect,
   },
   locales: { zh, en },
   locale: "zh",

console/src/formkit/inputs/attachment-group-select.ts

@@ -0,0 +1,26 @@
+import { apiClient } from "@/utils/api-client";
+import type { FormKitNode, FormKitTypeDefinition } from "@formkit/core";
+import { select, selects, defaultIcon } from "@formkit/inputs";
+
+function optionsHandler(node: FormKitNode) {
+  node.on("created", async () => {
+    const { data } =
+      await apiClient.extension.storage.group.liststorageHaloRunV1alpha1Group({
+        labelSelector: ["!halo.run/hidden"],
+      });
+
+    node.props.options = data.items.map((group) => {
+      return {
+        value: group.metadata.name,
+        label: group.spec.displayName,
+      };
+    });
+  });
+}
+
+export const attachmentGroupSelect: FormKitTypeDefinition = {
+  ...select,
+  props: ["placeholder"],
+  forceTypeProp: "select",
+  features: [optionsHandler, selects, defaultIcon("select", "select")],
+};

console/src/formkit/inputs/attachment-policy-select.ts

@@ -0,0 +1,24 @@
+import { apiClient } from "@/utils/api-client";
+import type { FormKitNode, FormKitTypeDefinition } from "@formkit/core";
+import { select, selects, defaultIcon } from "@formkit/inputs";
+
+function optionsHandler(node: FormKitNode) {
+  node.on("created", async () => {
+    const { data } =
+      await apiClient.extension.storage.policy.liststorageHaloRunV1alpha1Policy();
+
+    node.props.options = data.items.map((policy) => {
+      return {
+        value: policy.metadata.name,
+        label: policy.spec.displayName,
+      };
+    });
+  });
+}
+
+export const attachmentPolicySelect: FormKitTypeDefinition = {
+  ...select,
+  props: ["placeholder"],
+  forceTypeProp: "select",
+  features: [optionsHandler, selects, defaultIcon("select", "select")],
+};