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/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={80} right={6} text={'no'}></CategorizeHandle>
+        <CategorizeHandle top={20} right={6} id={'yes'}></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 {
-  useBuildComponentIdSelectOptions,
-  useHandleOperateParameters,
-} from './hooks';
+import { useBuildComponentIdSelectOptions } from '../hooks';
+import { 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 }}
-      wrapperCol={{ span: 16 }}
+      labelCol={{ span: 4 }}
+      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>
         )}