Feat: Submit clean data operations form data to the backend. #10427 (#11030)

### What problem does this PR solve?

Feat: Submit clean data operations form data to the backend. #10427

### Type of change


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

web/src/hooks/logic-hooks/use-build-operator-options.tsx

@@ -0,0 +1,45 @@
+import { IconFont } from '@/components/icon-font';
+import { ComparisonOperator, SwitchOperatorOptions } from '@/constants/agent';
+import { cn } from '@/lib/utils';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const LogicalOperatorIcon = function OperatorIcon({
+  icon,
+  value,
+}: Omit<(typeof SwitchOperatorOptions)[0], 'label'>) {
+  if (typeof icon === 'string') {
+    return (
+      <IconFont
+        name={icon}
+        className={cn('size-4', {
+          'rotate-180': value === '>',
+        })}
+      ></IconFont>
+    );
+  }
+  return icon;
+};
+
+export function useBuildSwitchOperatorOptions(
+  subset: ComparisonOperator[] = [],
+) {
+  const { t } = useTranslation();
+
+  const switchOperatorOptions = useMemo(() => {
+    return SwitchOperatorOptions.filter((x) =>
+      subset.some((y) => y === x.value),
+    ).map((x) => ({
+      value: x.value,
+      icon: (
+        <LogicalOperatorIcon
+          icon={x.icon}
+          value={x.value}
+        ></LogicalOperatorIcon>
+      ),
+      label: t(`flow.switchOperatorOptions.${x.label}`),
+    }));
+  }, [t]);
+
+  return switchOperatorOptions;
+}