feat: Build options for the component id field of the Switch operator #1739 (#2037)

### What problem does this PR solve?

feat: Build options for the component id field of the Switch operator
#1739

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/assets/svg/switch.svg

@@ -1,6 +1,6 @@
-<svg t="1724034437425" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1567"
+<svg t="1724229849879" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4299"
     width="200" height="200">
     <path
         d="M128 522.666667c17.066667 0 32-14.933333 32-32v-170.666667c0-6.4 4.266667-10.666667 10.666667-10.666667h652.8l-83.2 83.2c-12.8 12.8-12.8 34.133333 0 46.933334 6.4 6.4 14.933333 10.666667 23.466666 10.666666s17.066667-4.266667 23.466667-10.666666l145.066667-145.066667c12.8-12.8 12.8-34.133333 0-46.933333l-145.066667-145.066667c-12.8-12.8-34.133333-12.8-46.933333 0-12.8 12.8-12.8 34.133333 0 46.933333l93.866666 93.866667H170.666667c-40.533333 0-74.666667 34.133333-74.666667 74.666667v170.666666c0 19.2 14.933333 34.133333 32 34.133334zM906.666667 501.333333c-17.066667 0-32 14.933333-32 32v170.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H211.2l83.2-83.2c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333l-93.866667-93.866667h663.466667c40.533333 0 74.666667-34.133333 74.666667-74.666667v-170.666666c0-19.2-12.8-34.133333-32-34.133334z"
-        fill="#666666" p-id="1568"></path>
+        fill="#3b76f4" p-id="4300"></path>
 </svg>

web/src/locales/en.ts

@@ -603,7 +603,7 @@ The above is the content you need to summarize.`,
       yes: 'Yes',
       no: 'No',
       key: 'key',
-      componentId: 'component id',
+      componentId: 'Component ID',
       add: 'Add',
       operation: 'operation',
       run: 'Run',
@@ -637,6 +637,7 @@ The above is the content you need to summarize.`,
       blank: 'Blank',
       createFromNothing: 'Create from nothing',
       addItem: 'Add Item',
+      addSubItem: 'Add Sub Item',
       nameRequiredMsg: 'Name is required',
       nameRepeatedMsg: 'The name cannot be repeated',
       keywordExtract: 'Keyword',
@@ -833,6 +834,8 @@ The above is the content you need to summarize.`,
         and: 'And',
         or: 'Or',
       },
+      operator: 'Operator',
+      value: 'Value',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/locales/zh-traditional.ts

@@ -597,6 +597,7 @@ export default {
       blank: '空',
       createFromNothing: '從無到有',
       addItem: '新增',
+      addSubItem: '新增子項',
       nameRequiredMsg: '名稱不能為空',
       nameRepeatedMsg: '名稱不能重複',
       keywordExtract: '關鍵字',
@@ -791,6 +792,8 @@ export default {
         and: '與',
         or: '或',
       },
+      operator: '操作符',
+      value: '值',
     },
     footer: {
       profile: '“保留所有權利 @ react”',

web/src/locales/zh.ts

@@ -615,6 +615,7 @@ export default {
       blank: '空',
       createFromNothing: '从无到有',
       addItem: '新增',
+      addSubItem: '新增子项',
       nameRequiredMsg: '名称不能为空',
       nameRepeatedMsg: '名称不能重复',
       keywordExtract: '关键词',
@@ -809,6 +810,8 @@ export default {
         and: '与',
         or: '或',
       },
+      operator: '操作符',
+      value: '值',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/pages/flow/canvas/node/relevant-node.tsx

@@ -45,8 +45,8 @@ export function RelevantNode({ id, data, selected }: NodeProps<NodeData>) {
           className={styles.handle}
           id={'c'}
         ></Handle>
-        <CategorizeHandle top={20} right={6} text={'yes'}></CategorizeHandle>
+        <CategorizeHandle top={20} right={6} id={'yes'}></CategorizeHandle>
-        <CategorizeHandle top={80} right={6} text={'no'}></CategorizeHandle>
+        <CategorizeHandle top={80} right={6} id={'no'}></CategorizeHandle>
         <Flex vertical align="center" justify="center" gap={0}>
           <Flex flex={1}>
             <OperatorIcon

web/src/pages/flow/constant.tsx

@@ -97,7 +97,7 @@ export const operatorMap: Record<
     fontSize?: number;
     iconFontSize?: number;
     iconWidth?: number;
-    moreIconColor?: number;
+    moreIconColor?: string;
   }
 > = {
   [Operator.Retrieval]: {

web/src/pages/flow/generate-form/dynamic-parameters.tsx

@@ -4,10 +4,8 @@ import { DeleteOutlined } from '@ant-design/icons';
 import { Button, Flex, Select, Table, TableProps } from 'antd';
 import { IGenerateParameter } from '../interface';
 
-import {
+import { useBuildComponentIdSelectOptions } from '../hooks';
-  useBuildComponentIdSelectOptions,
+import { useHandleOperateParameters } from './hooks';
-  useHandleOperateParameters,
-} from './hooks';
 import styles from './index.less';
 
 interface IProps {

web/src/pages/flow/generate-form/hooks.ts

@@ -1,33 +1,9 @@
 import get from 'lodash/get';
 import { useCallback, useMemo } from 'react';
 import { v4 as uuid } from 'uuid';
-import { Operator } from '../constant';
 import { IGenerateParameter } from '../interface';
 import useGraphStore from '../store';
 
-// exclude nodes with branches
-const ExcludedNodes = [
-  Operator.Categorize,
-  Operator.Relevant,
-  Operator.Begin,
-  Operator.Answer,
-];
-
-export const useBuildComponentIdSelectOptions = (nodeId?: string) => {
-  const nodes = useGraphStore((state) => state.nodes);
-
-  const options = useMemo(() => {
-    return nodes
-      .filter(
-        (x) =>
-          x.id !== nodeId && !ExcludedNodes.some((y) => y === x.data.label),
-      )
-      .map((x) => ({ label: x.data.name, value: x.id }));
-  }, [nodes, nodeId]);
-
-  return options;
-};
-
 export const useHandleOperateParameters = (nodeId: string) => {
   const { getNode, updateNodeForm } = useGraphStore((state) => state);
   const node = getNode(nodeId);

web/src/pages/flow/hooks.ts

@@ -563,3 +563,26 @@ export const useWatchNodeFormDataChange = () => {
     buildSwitchEdgesByFormData,
   ]);
 };
+
+// exclude nodes with branches
+const ExcludedNodes = [
+  Operator.Categorize,
+  Operator.Relevant,
+  Operator.Begin,
+  Operator.Answer,
+];
+
+export const useBuildComponentIdSelectOptions = (nodeId?: string) => {
+  const nodes = useGraphStore((state) => state.nodes);
+
+  const options = useMemo(() => {
+    return nodes
+      .filter(
+        (x) =>
+          x.id !== nodeId && !ExcludedNodes.some((y) => y === x.data.label),
+      )
+      .map((x) => ({ label: x.data.name, value: x.id }));
+  }, [nodes, nodeId]);
+
+  return options;
+};

web/src/pages/flow/switch-form/index.tsx

@@ -9,15 +9,16 @@ import {
   SwitchOperatorOptions,
 } from '../constant';
 import { useBuildFormSelectOptions } from '../form-hooks';
+import { useBuildComponentIdSelectOptions } from '../hooks';
 import { IOperatorForm, ISwitchForm } from '../interface';
 import { getOtherFieldValues } from '../utils';
 
 const subLabelCol = {
-  span: 7,
+  span: 9,
 };
 
 const subWrapperCol = {
-  span: 17,
+  span: 15,
 };
 
 const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => {
@@ -48,10 +49,12 @@ const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => {
     }));
   }, [t]);
 
+  const componentIdOptions = useBuildComponentIdSelectOptions(node?.id);
+
   return (
     <Form
-      labelCol={{ span: 8 }}
+      labelCol={{ span: 4 }}
-      wrapperCol={{ span: 16 }}
+      wrapperCol={{ span: 20 }}
       form={form}
       name="dynamic_form_complex"
       autoComplete="off"
@@ -102,7 +105,7 @@ const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => {
                     ])}
                   />
                 </Form.Item>
-                <Form.Item label="Items">
+                <Form.Item label=" " colon={false}>
                   <Form.List name={[field.name, 'items']}>
                     {(subFields, subOpt) => (
                       <div
@@ -126,31 +129,34 @@ const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => {
                             }
                           >
                             <Form.Item
-                              label={'cpn_id'}
+                              label={t('flow.componentId')}
                               name={[subField.name, 'cpn_id']}
                               labelCol={subLabelCol}
                               wrapperCol={subWrapperCol}
                             >
-                              <Input placeholder="cpn_id" />
+                              <Select
+                                placeholder={t('flow.componentId')}
+                                options={componentIdOptions}
+                              />
                             </Form.Item>
                             <Form.Item
-                              label={'operator'}
+                              label={t('flow.operator')}
                               name={[subField.name, 'operator']}
                               labelCol={subLabelCol}
                               wrapperCol={subWrapperCol}
                             >
                               <Select
-                                placeholder="operator"
+                                placeholder={t('flow.operator')}
                                 options={switchOperatorOptions}
                               />
                             </Form.Item>
                             <Form.Item
-                              label={'value'}
+                              label={t('flow.value')}
                               name={[subField.name, 'value']}
                               labelCol={subLabelCol}
                               wrapperCol={subWrapperCol}
                             >
-                              <Input placeholder="value" />
+                              <Input placeholder={t('flow.value')} />
                             </Form.Item>
                           </Card>
                         ))}
@@ -159,7 +165,7 @@ const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => {
                           onClick={() => subOpt.add()}
                           block
                         >
-                          + Add Sub Item
+                          + {t('flow.addSubItem')}
                         </Button>
                       </div>
                     )}
@@ -169,7 +175,7 @@ const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => {
             ))}
 
             <Button type="dashed" onClick={() => add()} block>
-              + Add Item
+              + {t('flow.addItem')}
             </Button>
           </div>
         )}