feat: validate the name field of the categorize operator for duplicate names and nulls #918 (#1471)

### What problem does this PR solve?

feat: validate the name field of the categorize operator for duplicate
names and nulls #918

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/locales/en.ts

@@ -596,6 +596,8 @@ The above is the content you need to summarize.`,
       blank: 'Blank',
       createFromNothing: 'Create from nothing',
       addItem: 'Add Item',
+      nameRequiredMsg: 'Name is required',
+      nameRepeatedMsg: 'The name cannot be repeated',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/locales/zh-traditional.ts

@@ -557,6 +557,8 @@ export default {
       blank: '空',
       createFromNothing: '從無到有',
       addItem: '新增',
+      nameRequiredMsg: '名稱不能為空',
+      nameRepeatedMsg: '名稱不能重複',
     },
     footer: {
       profile: '“保留所有權利 @ react”',

web/src/locales/zh.ts

@@ -575,6 +575,8 @@ export default {
       blank: '空',
       createFromNothing: '从无到有',
       addItem: '新增',
+      nameRequiredMsg: '名称不能为空',
+      nameRepeatedMsg: '名称不能重复',
     },
     footer: {
       profile: 'All rights reserved @ React',

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

@@ -46,7 +46,6 @@ export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
           ),
           indexesInUse,
         );
-        console.info('newPositionMap:', newPositionMap);
 
         const nextPostionMap = {
           ...pick(state, intersectionKeys),

web/src/pages/flow/categorize-form/dynamic-categorize.tsx

@@ -1,16 +1,91 @@
 import { useTranslate } from '@/hooks/commonHooks';
 import { CloseOutlined } from '@ant-design/icons';
-import { Button, Card, Form, Input, Select } from 'antd';
+import { Button, Card, Form, FormListFieldData, Input, Select } from 'antd';
+import { FormInstance } from 'antd/lib';
 import { humanId } from 'human-id';
+import trim from 'lodash/trim';
+import {
+  ChangeEventHandler,
+  FocusEventHandler,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 import { useUpdateNodeInternals } from 'reactflow';
 import { Operator } from '../constant';
 import { useBuildFormSelectOptions } from '../form-hooks';
-import { ICategorizeItem } from '../interface';
 
 interface IProps {
   nodeId?: string;
 }
 
+interface INameInputProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  otherNames?: string[];
+  validate(errors: string[]): void;
+}
+
+const getOtherFieldValues = (
+  form: FormInstance,
+  field: FormListFieldData,
+  latestField: string,
+) =>
+  (form.getFieldValue(['items']) ?? [])
+    .map((x: any) => x[latestField])
+    .filter(
+      (x: string) =>
+        x !== form.getFieldValue(['items', field.name, latestField]),
+    );
+
+const NameInput = ({
+  value,
+  onChange,
+  otherNames,
+  validate,
+}: INameInputProps) => {
+  const [name, setName] = useState<string | undefined>();
+  const { t } = useTranslate('flow');
+
+  const handleNameChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      const val = e.target.value;
+      // trigger validation
+      if (otherNames?.some((x) => x === val)) {
+        validate([t('nameRepeatedMsg')]);
+      } else if (trim(val) === '') {
+        validate([t('nameRequiredMsg')]);
+      } else {
+        validate([]);
+      }
+      setName(val);
+    },
+    [otherNames, validate, t],
+  );
+
+  const handleNameBlur: FocusEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      const val = e.target.value;
+      if (otherNames?.every((x) => x !== val) && trim(val) !== '') {
+        onChange?.(val);
+      }
+    },
+    [onChange, otherNames],
+  );
+
+  useEffect(() => {
+    setName(value);
+  }, [value]);
+
+  return (
+    <Input
+      value={name}
+      onChange={handleNameChange}
+      onBlur={handleNameBlur}
+    ></Input>
+  );
+};
+
 const DynamicCategorize = ({ nodeId }: IProps) => {
   const updateNodeInternals = useUpdateNodeInternals();
   const form = Form.useFormInstance();
@@ -45,11 +120,28 @@ const DynamicCategorize = ({ nodeId }: IProps) => {
                   }
                 >
                   <Form.Item
-                    label={t('name')} // TODO: repeatability check
+                    label={t('name')}
                     name={[field.name, 'name']}
-                    rules={[{ required: true, message: t('nameMessage') }]}
+                    validateTrigger={['onChange', 'onBlur']}
+                    rules={[
+                      {
+                        required: true,
+                        whitespace: true,
+                        message: t('nameMessage'),
+                      },
+                    ]}
                   >
-                    <Input />
+                    <NameInput
+                      otherNames={getOtherFieldValues(form, field, 'name')}
+                      validate={(errors: string[]) =>
+                        form.setFields([
+                          {
+                            name: ['items', field.name, 'name'],
+                            errors,
+                          },
+                        ])
+                      }
+                    ></NameInput>
                   </Form.Item>
                   <Form.Item
                     label={t('description')}
@@ -67,13 +159,7 @@ const DynamicCategorize = ({ nodeId }: IProps) => {
                     <Select
                       allowClear
                       options={buildCategorizeToOptions(
-                        (form.getFieldValue(['items']) ?? [])
-                          .map((x: ICategorizeItem) => x.to)
-                          .filter(
-                            (x: string) =>
-                              x !==
-                              form.getFieldValue(['items', field.name, 'to']),
-                          ),
+                        getOtherFieldValues(form, field, 'to'),
                       )}
                     />
                   </Form.Item>

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

@@ -67,7 +67,6 @@ export const useHandleFormValuesChange = ({
 
   const handleValuesChange = useCallback(
     (changedValues: any, values: any) => {
-      console.info(changedValues, values);
       onValuesChange?.(changedValues, {
         ...omit(values, 'items'),
         category_description: buildCategorizeObjectFromList(values.items),
@@ -80,7 +79,6 @@ export const useHandleFormValuesChange = ({
     const items = buildCategorizeListFromObject(
       get(node, 'data.form.category_description', {}),
     );
-    console.info('effect:', items);
     form?.setFieldsValue({
       items,
     });

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

@@ -4,8 +4,13 @@ import useGraphStore from './store';
 
 const ExcludedNodesMap = {
   // exclude some nodes downstream of the classification node
-  [Operator.Categorize]: [Operator.Categorize, Operator.Answer, Operator.Begin],
-  [Operator.Relevant]: [Operator.Begin],
+  [Operator.Categorize]: [
+    Operator.Categorize,
+    Operator.Answer,
+    Operator.Begin,
+    Operator.Relevant,
+  ],
+  [Operator.Relevant]: [Operator.Begin, Operator.Answer, Operator.Relevant],
   [Operator.Generate]: [Operator.Begin],
 };