From 4946e439411fd9524391872e62b9dec24a7c0ad3 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Thu, 16 Jan 2025 17:16:58 +0800
Subject: [PATCH] Feat: Make the category operator form displayed in collapsed
 mode by default #4505 (#4510)

### What problem does this PR solve?

Feat: Make the category operator form displayed in collapsed mode by
default #4505

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 .../categorize-form/dynamic-categorize.tsx    | 143 ++++++++++--------
 .../flow/form/categorize-form/index.less      |   4 +-
 2 files changed, 81 insertions(+), 66 deletions(-)

diff --git a/web/src/pages/flow/form/categorize-form/dynamic-categorize.tsx b/web/src/pages/flow/form/categorize-form/dynamic-categorize.tsx
index ada0b43a1..7d3987971 100644
--- a/web/src/pages/flow/form/categorize-form/dynamic-categorize.tsx
+++ b/web/src/pages/flow/form/categorize-form/dynamic-categorize.tsx
@@ -3,7 +3,7 @@ import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
 import { useUpdateNodeInternals } from '@xyflow/react';
 import {
   Button,
-  Card,
+  Collapse,
   Flex,
   Form,
   FormListFieldData,
@@ -97,13 +97,65 @@ const NameInput = ({
   );
 };
 
-const DynamicCategorize = ({ nodeId }: IProps) => {
-  const updateNodeInternals = useUpdateNodeInternals();
+const FormSet = ({ nodeId, field }: IProps & { field: FormListFieldData }) => {
   const form = Form.useFormInstance();
+  const { t } = useTranslate('flow');
   const buildCategorizeToOptions = useBuildFormSelectOptions(
     Operator.Categorize,
     nodeId,
   );
+
+  return (
+    <section>
+      <Form.Item
+        label={t('categoryName')}
+        name={[field.name, 'name']}
+        validateTrigger={['onChange', 'onBlur']}
+        rules={[
+          {
+            required: true,
+            whitespace: true,
+            message: t('nameMessage'),
+          },
+        ]}
+      >
+        <NameInput
+          otherNames={getOtherFieldValues(form, 'items', field, 'name')}
+          validate={(errors: string[]) =>
+            form.setFields([
+              {
+                name: ['items', field.name, 'name'],
+                errors,
+              },
+            ])
+          }
+        ></NameInput>
+      </Form.Item>
+      <Form.Item label={t('description')} name={[field.name, 'description']}>
+        <Input.TextArea rows={3} />
+      </Form.Item>
+      <Form.Item label={t('examples')} name={[field.name, 'examples']}>
+        <Input.TextArea rows={3} />
+      </Form.Item>
+      <Form.Item label={t('nextStep')} name={[field.name, 'to']}>
+        <Select
+          allowClear
+          options={buildCategorizeToOptions(
+            getOtherFieldValues(form, 'items', field, 'to'),
+          )}
+        />
+      </Form.Item>
+      <Form.Item hidden name={[field.name, 'index']}>
+        <Input />
+      </Form.Item>
+    </section>
+  );
+};
+
+const DynamicCategorize = ({ nodeId }: IProps) => {
+  const updateNodeInternals = useUpdateNodeInternals();
+  const form = Form.useFormInstance();
+
   const { t } = useTranslate('flow');
 
   return (
@@ -122,74 +174,35 @@ const DynamicCategorize = ({ nodeId }: IProps) => {
             });
             if (nodeId) updateNodeInternals(nodeId);
           };
+
           return (
             <Flex gap={18} vertical>
               {fields.map((field) => (
-                <Card
+                <Collapse
                   size="small"
                   key={field.key}
                   className={styles.caseCard}
-                  extra={
-                    <CloseOutlined
-                      onClick={() => {
-                        remove(field.name);
-                      }}
-                    />
-                  }
-                >
-                  <Form.Item
-                    label={t('categoryName')}
-                    name={[field.name, 'name']}
-                    validateTrigger={['onChange', 'onBlur']}
-                    rules={[
-                      {
-                        required: true,
-                        whitespace: true,
-                        message: t('nameMessage'),
-                      },
-                    ]}
-                  >
-                    <NameInput
-                      otherNames={getOtherFieldValues(
-                        form,
-                        'items',
-                        field,
-                        'name',
-                      )}
-                      validate={(errors: string[]) =>
-                        form.setFields([
-                          {
-                            name: ['items', field.name, 'name'],
-                            errors,
-                          },
-                        ])
-                      }
-                    ></NameInput>
-                  </Form.Item>
-                  <Form.Item
-                    label={t('description')}
-                    name={[field.name, 'description']}
-                  >
-                    <Input.TextArea rows={3} />
-                  </Form.Item>
-                  <Form.Item
-                    label={t('examples')}
-                    name={[field.name, 'examples']}
-                  >
-                    <Input.TextArea rows={3} />
-                  </Form.Item>
-                  <Form.Item label={t('nextStep')} name={[field.name, 'to']}>
-                    <Select
-                      allowClear
-                      options={buildCategorizeToOptions(
-                        getOtherFieldValues(form, 'items', field, 'to'),
-                      )}
-                    />
-                  </Form.Item>
-                  <Form.Item hidden name={[field.name, 'index']}>
-                    <Input />
-                  </Form.Item>
-                </Card>
+                  items={[
+                    {
+                      key: field.key,
+                      label: (
+                        <div className="flex justify-between">
+                          <span>
+                            {form.getFieldValue(['items', field.name, 'name'])}
+                          </span>
+                          <CloseOutlined
+                            onClick={() => {
+                              remove(field.name);
+                            }}
+                          />
+                        </div>
+                      ),
+                      children: (
+                        <FormSet nodeId={nodeId} field={field}></FormSet>
+                      ),
+                    },
+                  ]}
+                ></Collapse>
               ))}
 
               <Button
diff --git a/web/src/pages/flow/form/categorize-form/index.less b/web/src/pages/flow/form/categorize-form/index.less
index 95ef3b6c2..6d78e80f9 100644
--- a/web/src/pages/flow/form/categorize-form/index.less
+++ b/web/src/pages/flow/form/categorize-form/index.less
@@ -2,7 +2,9 @@
 @darkBackgroundColor: rgba(150, 150, 150, 0.12);
 
 .caseCard {
-  background-color: @darkBackgroundColor;
+  :global(.ant-collapse-content) {
+    background-color: @darkBackgroundColor;
+  }
 }
 
 .addButton {