fix(wren-ui): Fix calculated field modal title when edit mode (#206)

wren-ui/src/components/modals/CalculatedFieldModal.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { Modal, Form, Input, Typography, Button } from 'antd';
 import LinkOutlined from '@ant-design/icons/LinkOutlined';
-import { omit } from 'lodash';
+import { FORM_MODE } from '@/utils/enum';
 import { ERROR_TEXTS } from '@/utils/error';
 import { DiagramModel } from '@/utils/data/type';
 import { ModalAction } from '@/hooks/useModalAction';
@@ -38,7 +38,17 @@ type Props = ModalAction<
 };
 
 export default function AddCalculatedFieldModal(props: Props) {
-  const { visible, loading, onSubmit, onClose, defaultValue } = props;
+  const {
+    visible,
+    loading,
+    onSubmit,
+    onClose,
+    defaultValue,
+    payload,
+    formMode,
+  } = props;
+
+  const isEditMode = formMode === FORM_MODE.EDIT;
 
   const [form] = Form.useForm();
   const expression = Form.useWatch('expression', form);
@@ -46,11 +56,8 @@ export default function AddCalculatedFieldModal(props: Props) {
 
   const expressionOptions = useExpressionFieldOptions();
 
-  const models = useMemo(() => defaultValue?.payload?.models, [defaultValue]);
-  const sourceModel = useMemo(
-    () => defaultValue?.payload?.sourceModel,
-    [defaultValue],
-  );
+  const models = useMemo(() => payload?.models, [payload]);
+  const sourceModel = useMemo(() => payload?.sourceModel, [payload]);
 
   const [validateCalculatedField] = useValidateCalculatedFieldMutation();
   const validateCalculatedFieldName = useCallback(
@@ -69,7 +76,7 @@ export default function AddCalculatedFieldModal(props: Props) {
 
   useEffect(() => {
     if (!visible) return;
-    form.setFieldsValue(omit(defaultValue || {}, ['payload']));
+    form.setFieldsValue(defaultValue || {});
   }, [form, defaultValue, visible]);
 
   const fetchOptions = useCallback(
@@ -112,7 +119,7 @@ export default function AddCalculatedFieldModal(props: Props) {
 
   return (
     <Modal
-      title="Add calculated field"
+      title={`${isEditMode ? 'Update' : 'Add'} calculated field`}
       width={750}
       visible={visible}
       onCancel={onClose}

wren-ui/src/hooks/useModalAction.tsx

@@ -7,14 +7,17 @@ export interface ModalAction<TData = any, SData = any> {
   onSubmit?: (values: SData) => Promise<void>;
   formMode?: FORM_MODE;
   defaultValue?: TData;
+  payload?: Record<string, any>;
 }
 
 export default function useModalAction() {
   const [visible, setVisible] = useState(false);
   const [formMode, setFormMode] = useState(FORM_MODE.CREATE);
+  const [payload, setPayload] = useState(null);
   const [defaultValue, setDefaultValue] = useState(null);
 
-  const openModal = (value?: any) => {
+  const openModal = (value?: any, payload?: any) => {
+    payload && setPayload(payload);
     value && setDefaultValue(value);
     value && setFormMode(FORM_MODE.EDIT);
     setVisible(true);
@@ -22,6 +25,7 @@ export default function useModalAction() {
 
   const closeModal = () => {
     setVisible(false);
+    setPayload(null);
     setDefaultValue(null);
     setFormMode(FORM_MODE.CREATE);
   };
@@ -31,6 +35,7 @@ export default function useModalAction() {
       visible,
       formMode,
       defaultValue,
+      payload,
     },
     openModal,
     closeModal,

wren-ui/src/pages/modeling.tsx

@@ -280,11 +280,9 @@ export default function Modeling() {
     const { targetNodeType, data } = payload;
     switch (targetNodeType) {
       case NODE_TYPE.CALCULATED_FIELD:
-        calculatedFieldModal.openModal({
-          payload: {
-            models: diagramData.models,
-            sourceModel: data,
-          },
+        calculatedFieldModal.openModal(null, {
+          models: diagramData.models,
+          sourceModel: data,
         });
         break;
       case NODE_TYPE.RELATION:

wren-ui/src/utils/modelingHelper.ts

@@ -4,7 +4,7 @@ import { getFieldValue } from '@/components/selectors/lineageSelector/FieldSelec
 
 export const editCalculatedField = (
   payload: { diagramData: Diagram; data: any },
-  openCalculatedFieldModal: (defaultValue: any) => void,
+  openCalculatedFieldModal: (defaultValue: any, payload: any) => void,
 ) => {
   const { diagramData, data } = payload;
   const sourceModel = diagramData.models.find(
@@ -22,16 +22,18 @@ export const editCalculatedField = (
   if (isSourceModelField) {
     const field = getField(sourceModel, data.lineage[0]);
     openCalculatedFieldModal &&
-      openCalculatedFieldModal({
-        columnId: data.columnId,
-        name: data.referenceName,
-        expression: data.aggregation,
-        lineage: [getFieldValue(field)],
-        payload: {
+      openCalculatedFieldModal(
+        {
+          columnId: data.columnId,
+          name: data.referenceName,
+          expression: data.aggregation,
+          lineage: [getFieldValue(field)],
+        },
+        {
           models: diagramData.models,
           sourceModel,
         },
-      });
+      );
     return;
   }
 
@@ -54,14 +56,16 @@ export const editCalculatedField = (
   const field = getField(lastModel, lastColumnId);
 
   openCalculatedFieldModal &&
-    openCalculatedFieldModal({
-      columnId: data.columnId,
-      name: data.referenceName,
-      expression: data.aggregation,
-      lineage: [...relations, field].map(getFieldValue),
-      payload: {
+    openCalculatedFieldModal(
+      {
+        columnId: data.columnId,
+        name: data.referenceName,
+        expression: data.aggregation,
+        lineage: [...relations, field].map(getFieldValue),
+      },
+      {
         models: diagramData.models,
         sourceModel,
       },
-    });
+    );
 };