From b560693565db6d84ac46baae3553b94e52045cab Mon Sep 17 00:00:00 2001
From: Aralhi <xiaoping0501@gmail.com>
Date: Thu, 1 Feb 2024 01:02:11 +0800
Subject: [PATCH] feat: add description

---
 web/app/i18n.ts                   |  4 ++++
 web/components/flow/flow-card.tsx |  3 ++-
 web/pages/flow/canvas/index.tsx   | 26 +++++++++++++++++++++++---
 web/types/flow.ts                 |  3 +++
 4 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/web/app/i18n.ts b/web/app/i18n.ts
index 359857800..11e392a23 100644
--- a/web/app/i18n.ts
+++ b/web/app/i18n.ts
@@ -189,7 +189,9 @@ const en = {
   connect_warning: 'Nodes cannot be connected',
   flow_modal_title: 'Save Flow',
   flow_name: 'Flow Name',
+  flow_description: 'Flow Description',
   flow_name_required: 'Please enter the flow name',
+  flow_description_required: 'Please enter the flow description',
   save_flow_success: 'Save flow success',
   delete_flow_confirm: 'Are you sure you want to delete this flow?',
   related_nodes: 'Related Nodes',
@@ -388,7 +390,9 @@ const zh: Resources['translation'] = {
   connect_warning: '节点无法连接',
   flow_modal_title: '保存工作流',
   flow_name: '工作流名称',
+  flow_description: '工作流描述',
   flow_name_required: '请输入工作流名称',
+  flow_description_required: '请输入工作流描述',
   save_flow_success: '保存工作流成功',
   delete_flow_confirm: '确定删除该工作流吗？',
   related_nodes: '关联节点',
diff --git a/web/components/flow/flow-card.tsx b/web/components/flow/flow-card.tsx
index c31428a71..24387b940 100644
--- a/web/components/flow/flow-card.tsx
+++ b/web/components/flow/flow-card.tsx
@@ -23,10 +23,11 @@ const FlowCard: React.FC<FlowCardProps> = ({ flow, deleteCallback }) => {
   return (
     <>
       <Link href={`/flow/canvas?id=${flow.uid}`}>
-        <div className="relative flex flex-col p-4 w-72 h-32 rounded justify-between cursor-pointer text-black bg-white shadow-[0_8px_16px_-10px_rgba(100,100,100,.08)] hover:shadow-[0_14px_20px_-10px_rgba(100,100,100,.15)] dark:bg-[#232734] dark:text-white dark:hover:border-white transition-[transfrom_shadow] duration-300 hover:-translate-y-1">
+        <div className="relative flex flex-col p-4 w-96 h-44 rounded justify-between cursor-pointer text-black bg-white shadow-[0_8px_16px_-10px_rgba(100,100,100,.08)] hover:shadow-[0_14px_20px_-10px_rgba(100,100,100,.15)] dark:bg-[#232734] dark:text-white dark:hover:border-white transition-[transfrom_shadow] duration-300 hover:-translate-y-1">
           <div className="flex items-center">
             <div className="flex flex-col">
               <h2 className="text-lg font-semibold">{flow.name}</h2>
+              <h3 className="text-stone-500 text-sm line-clamp-2">{flow.description}</h3>
             </div>
           </div>
           <DeleteFilled
diff --git a/web/pages/flow/canvas/index.tsx b/web/pages/flow/canvas/index.tsx
index 491e1334f..919af8ef8 100644
--- a/web/pages/flow/canvas/index.tsx
+++ b/web/pages/flow/canvas/index.tsx
@@ -3,6 +3,7 @@ import MuiLoading from '@/components/common/loading';
 import AddNodes from '@/components/flow/add-nodes';
 import ButtonEdge from '@/components/flow/button-edge';
 import CanvasNode from '@/components/flow/canvas-node';
+import RequiredIcon from '@/components/flow/required-icon';
 import { IFlowData } from '@/types/flow';
 import { getUniqueNodeId, mapHumpToUnderline, mapUnderlineToHump } from '@/utils/flow';
 import { SaveOutlined } from '@ant-design/icons';
@@ -13,6 +14,8 @@ import { useTranslation } from 'react-i18next';
 import ReactFlow, { Background, Connection, Controls, ReactFlowProvider, addEdge, useEdgesState, useNodesState, useReactFlow, Node } from 'reactflow';
 import 'reactflow/dist/style.css';
 
+const { TextArea } = Input;
+
 interface Props {
   // Define your component props here
 }
@@ -32,6 +35,7 @@ const Canvas: React.FC<Props> = () => {
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
 
   async function getFlowData() {
     setLoading(true);
@@ -39,6 +43,7 @@ const Canvas: React.FC<Props> = () => {
     if (data) {
       const flowData = mapUnderlineToHump(data.flow_data);
       setName(data.name);
+      setDescription(data.description);
       setNodes(flowData.nodes.map((node) => ({ ...node, type: 'customNode' })));
       setEdges(flowData.edges.map((edge) => ({ ...edge, type: 'buttonedge' })));
     }
@@ -134,7 +139,7 @@ const Canvas: React.FC<Props> = () => {
   async function handleSaveFlow() {
     const reactFlowObject = mapHumpToUnderline(reactFlow.toObject() as IFlowData);
     if (id) {
-      const [, , res] = await apiInterceptors(updateFlowById(id, { name, uid: id, flow_data: reactFlowObject }));
+      const [, , res] = await apiInterceptors(updateFlowById(id, { name, description, uid: id, flow_data: reactFlowObject }));
       if (res?.success) {
         messageApi.success(t('save_flow_success'));
       } else if (res?.err_msg) {
@@ -143,8 +148,10 @@ const Canvas: React.FC<Props> = () => {
     } else {
       if (!name) {
         return messageApi.warning(t('flow_name_required'));
+      } else if (!description) {
+        return messageApi.warning(t('flow_description_required'));
       }
-      const [_, res] = await apiInterceptors(addFlow({ name, flow_data: reactFlowObject }));
+      const [_, res] = await apiInterceptors(addFlow({ name, description, flow_data: reactFlowObject }));
       if (res?.uid) {
         messageApi.success(t('save_flow_success'));
         const history = window.history;
@@ -193,12 +200,25 @@ const Canvas: React.FC<Props> = () => {
         }}
       >
         <>
-          <p>{t('flow_name')}</p>
+          <p>
+            {t('flow_name')}
+            <RequiredIcon />
+          </p>
           <Input
             onChange={(e) => {
               setName(e.target.value);
             }}
           />
+          <p className="mt-4">
+            {t('flow_description')}
+            <RequiredIcon />
+          </p>
+          <TextArea
+            rows={3}
+            onChange={(e) => {
+              setDescription(e.target.value);
+            }}
+          />
         </>
       </Modal>
       {contextHolder}
diff --git a/web/types/flow.ts b/web/types/flow.ts
index c3259fc86..8ac3a8f92 100644
--- a/web/types/flow.ts
+++ b/web/types/flow.ts
@@ -2,6 +2,7 @@ import { Node } from 'reactflow';
 
 export type IFlowUpdateParam = {
   name: string;
+  description: string;
   uid?: string;
   flow_data: IFlowData;
 };
@@ -9,6 +10,7 @@ export type IFlowUpdateParam = {
 export type IFlow = {
   uid: string;
   name: string;
+  description: string;
   flow_data: IFlowData;
 };
 
@@ -65,6 +67,7 @@ export type IFlowNode = Node & {
   name: string;
   description: string;
   category: string;
+  category_label: string;
   flow_type: 'resource' | 'operator';
   icon?: string;
   documentation_url?: null;