From 01b81f1afca0facf4e1ac3c164de26655cccb28d Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Wed, 19 Jul 2023 19:06:13 +0800
Subject: [PATCH] feat: add attachment policy and group selection component to
 formkit (#4258)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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         |  4 +++
 .../formkit/inputs/attachment-group-select.ts | 26 +++++++++++++++++++
 .../inputs/attachment-policy-select.ts        | 24 +++++++++++++++++
 3 files changed, 54 insertions(+)
 create mode 100644 console/src/formkit/inputs/attachment-group-select.ts
 create mode 100644 console/src/formkit/inputs/attachment-policy-select.ts

diff --git a/console/src/formkit/formkit.config.ts b/console/src/formkit/formkit.config.ts
index b96634922..78b90628b 100644
--- a/console/src/formkit/formkit.config.ts
+++ b/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",
diff --git a/console/src/formkit/inputs/attachment-group-select.ts b/console/src/formkit/inputs/attachment-group-select.ts
new file mode 100644
index 000000000..ffa7eda4b
--- /dev/null
+++ b/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")],
+};
diff --git a/console/src/formkit/inputs/attachment-policy-select.ts b/console/src/formkit/inputs/attachment-policy-select.ts
new file mode 100644
index 000000000..9905962ee
--- /dev/null
+++ b/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")],
+};