Merge pull request #8 from easyops-cn/jojiang/workflow

feat(): condition support group
easyops-cn · Aug 1, 2023 · 4d2073f · 4d2073f
2 parents 14c84ce + a6f40f0
commit 4d2073f
Show file tree

Hide file tree

Showing 6 changed files with 473 additions and 22 deletions.
diff --git a/bricks/next-builder/src/interface.ts b/bricks/next-builder/src/interface.ts
@@ -18,6 +18,8 @@ export interface TypeFieldItem {
   model?: "multiple" | "tags";
   placeholder?: string;
   regex?: string;
+  groupId?: string;
+  groupLabel?: string;
 }
 
 interface WorkflowDataChildrenOption {
@@ -98,3 +100,9 @@ export interface ComparatorOption {
   id: string;
   name: string;
 }
+
+export interface TypeFieldGroup {
+  groupId: string;
+  groupLabel: string;
+  children?: Partial<TypeFieldItem>[];
+}
diff --git a/...-builder/src/shared/components/workflow-condition-field/WorkflowConditionField.module.css b/...-builder/src/shared/components/workflow-condition-field/WorkflowConditionField.module.css
@@ -1,7 +1,7 @@
 .dropdownMenu {
   padding: 10px;
   max-width: 250px;
-  max-height: 500px;
+  max-height: 400px;
   overflow-y: auto;
   li {
     overflow: hidden;

diff --git a/...xt-builder/src/shared/components/workflow-condition-field/WorkflowConditionField.spec.tsx b/...xt-builder/src/shared/components/workflow-condition-field/WorkflowConditionField.spec.tsx
@@ -234,7 +234,6 @@ describe("WorkflowConditionField", () => {
     fireEvent.click(screen.getByText("next-builder:DYNAMIC_VALUE"));
 
     fireEvent.click(screen.getByText("next-builder:FIXED_VALUE"));
-    screen.debug();
     expect(mockChange.mock.calls[0][0]).toEqual({
       comparator: "$eq",
       fieldKey: "name",
@@ -285,4 +284,51 @@ describe("FieldDropdownButton", () => {
 
     expect(mockClick.mock.calls[0][0]).toEqual("name");
   });
+
+  it("should work with group", () => {
+    const options = [
+      {
+        id: "name",
+        name: "名称",
+        groupLabel: "开始",
+        groupId: "start",
+      },
+      {
+        id: "age",
+        name: "年龄",
+        groupLabel: "开始",
+        groupId: "start",
+      },
+      {
+        id: "id",
+        name: "id",
+        groupLabel: "基本",
+        groupId: "basic",
+      },
+      {
+        id: "data",
+        name: "数据",
+        groupLabel: "基本",
+        groupId: "basic",
+      },
+    ];
+
+    const mockClick = jest.fn();
+
+    render(
+      <FieldDropdownButton options={options} onClick={mockClick}>
+        条件
+      </FieldDropdownButton>
+    );
+
+    fireEvent.click(screen.getByText("条件"));
+
+    fireEvent.change(screen.getByRole("textbox"), {
+      target: { value: "name" },
+    });
+
+    screen.debug();
+
+    expect(screen.getByText("开始")).toBeInTheDocument();
+  });
 });
diff --git a/...ks/next-builder/src/shared/components/workflow-condition-field/WorkflowConditionField.tsx b/...ks/next-builder/src/shared/components/workflow-condition-field/WorkflowConditionField.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo, useState, useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { NS_NEXT_BUILDER, K } from "../../../i18n/constants";
-import { Select, Menu, Input, Dropdown, Button } from "antd";
+import { Menu, Input, Dropdown, Button } from "antd";
 import { DownOutlined, DeleteOutlined } from "@ant-design/icons";
 import { WorkflowDataField } from "../workflow-data-field/WorkflowDataField";
 import { ValueTypeField } from "../value-type-field/ValueTypeField";
@@ -12,7 +12,9 @@ import {
   ComparatorOption,
   WorkflowDataItem,
   WorkFLowValueType,
+  TypeFieldGroup,
 } from "../../../interface";
+import { processFieldGroup, filterFieldOptions } from "./processor";
 import styles from "./WorkflowConditionField.module.css";
 
 interface WorkflowConditionFieldProps {
@@ -109,7 +111,9 @@ export function WorkflowConditionField(
           </FieldDropdownButton>
         )}
 
-        <span>{field.name}</span>
+        <span>
+          {field.groupLabel ? `${field.groupLabel}.${field.name}` : field.name}
+        </span>
         <FieldDropdownButton
           options={comparatorMap[field.originType]}
           onClick={(id) => handleComparatorChange(id)}
@@ -156,8 +160,9 @@ export function WorkflowConditionField(
   );
 }
 
+type FieldDropdownOption = Partial<TypeFieldItem>;
 interface FieldDropdownButtonProps {
-  options: Partial<TypeFieldItem>[];
+  options: FieldDropdownOption[];
   onClick?: (id: string) => void;
   children?: React.ReactNode;
   hiddenSearch?: boolean;
@@ -176,17 +181,8 @@ export function FieldDropdownButton(
     (e: React.ChangeEvent<HTMLInputElement>): void => {
       const v = e.target.value;
       setQ(v);
-      if (!v) {
-        setFilterOptions(options);
-      } else {
-        const filter = options.filter(
-          (item) =>
-            item.name?.toLowerCase().includes(v.toLowerCase()) ||
-            item.id?.toLowerCase().includes(v.toLowerCase())
-        );
-
-        setFilterOptions(filter);
-      }
+      const filter = filterFieldOptions(options, v);
+      setFilterOptions(filter);
     },
     [options]
   );
@@ -206,6 +202,17 @@ export function FieldDropdownButton(
     }
   }, [visible, options]);
 
+  const getMenuItem = useCallback(
+    (item: FieldDropdownOption) => {
+      return (
+        <Menu.Item key={item.id} onClick={() => handleItemClick(item.id)}>
+          {item.name}
+        </Menu.Item>
+      );
+    },
+    [handleItemClick]
+  );
+
   const menu = useMemo(
     () => (
       <Menu className={styles.dropdownMenu}>
@@ -216,14 +223,20 @@ export function FieldDropdownButton(
           onChange={handleChange}
           placeholder={t(K.SEARCH_FIELD)}
         />
-        {filterOptions?.map((item) => (
-          <Menu.Item key={item.id} onClick={() => handleItemClick(item.id)}>
-            {item.name}
-          </Menu.Item>
-        ))}
+        {processFieldGroup(filterOptions)?.map((item, index) =>
+          item.groupId ? (
+            <Menu.ItemGroup title={item.groupLabel} key={index}>
+              {(item as TypeFieldGroup).children?.map((child) =>
+                getMenuItem(child)
+              )}
+            </Menu.ItemGroup>
+          ) : (
+            getMenuItem(item)
+          )
+        )}
       </Menu>
     ),
-    [filterOptions, handleChange, handleItemClick, q, hiddenSearch, t]
+    [filterOptions, getMenuItem, handleChange, hiddenSearch, q, t]
   );
 
   return (