[Feature][Web] Add tag right-click function (#3903)

Signed-off-by: Zzm0809 <934230207@qq.com>
Co-authored-by: Zzm0809 <Zzm0809@users.noreply.github.com>
Co-authored-by: ZackYoung <zackyoungh@163.com>
Co-authored-by: zackyoungh <zackyoungh@users.noreply.github.com>

dinky-web/src/pages/DataStudioNew/CenterTabContent/SqlTask.tsx

@@ -158,7 +158,6 @@ export const SqlTask = memo((props: FlinkSqlProps & any) => {
       updateCenterTab({ ...props.tabData, params: newParams });
 
       setOriginStatementValue(statement);
-
       if (params?.statement && params?.statement !== taskDetail.statement) {
         setDiff([{ key: 'statement', server: taskDetail.statement, cache: params.statement }]);
         setOpenDiffModal(true);
@@ -198,13 +197,7 @@ export const SqlTask = memo((props: FlinkSqlProps & any) => {
     editorInstance.current = editor;
     // @ts-ignore
     editor['id'] = currentState.taskId;
-    editor.onDidChangeCursorPosition((e) => {
-      // props.footContainerCacher.cache.codePosition = [e.position.lineNumber, e.position.column];
-      // dispatch({
-      //   type: STUDIO_MODEL.saveFooterValue,
-      //   payload: { ...props.footContainerCacher.cache }
-      // });
-    });
+    editor.onDidChangeCursorPosition((e) => {});
     registerEditorKeyBindingAndAction(editor);
   };
 
@@ -422,28 +415,28 @@ export const SqlTask = memo((props: FlinkSqlProps & any) => {
       updateAction({
         actionType: DataStudioActionType.TASK_RUN_DEBUG,
         params: {
-          taskId: params.taskId,
-          columns: res.data?.result?.columns ?? [],
-          rowData: res.data?.result?.rowData ?? [],
+          taskId: params.taskId
         }
       });
       setCurrentState((prevState) => {
         return {
           ...prevState,
-          status: res.data.status === 'SUCCESS' ? (res.data.pipeline?'RUNNING':'SUCCESS') : res.data.status
+          status: res.data.status === 'SUCCESS' ? 'RUNNING' : res.data.status
         };
       });
     }
   }, [currentState, updateAction]);
 
   const handleStop = useCallback(async () => {
     const result = await cancelTask('', currentState.taskId, false);
-    setCurrentState((prevState) => {
-      return {
-        ...prevState,
-        status: 'CANCEL'
-      };
-    });
+    if (result.success) {
+      setCurrentState((prevState) => {
+        return {
+          ...prevState,
+          status: 'CANCEL'
+        };
+      });
+    }
   }, [currentState.taskId]);
 
   const handleGotoDevOps = useCallback(async () => {
@@ -753,10 +746,10 @@ export const SqlTask = memo((props: FlinkSqlProps & any) => {
                 <Panel>
                   <CodeEdit
                     monacoRef={editorInstance}
-                    code={currentState.statement}
+                    code={originStatementValue}
                     language={matchLanguage(currentState.dialect)}
                     editorDidMount={editorDidMount}
-                    onChange={debounce(onEditorChange, 500)}
+                    onChange={debounce(onEditorChange, 50)}
                     enableSuggestions={true}
                     options={{
                       readOnlyMessage: {

dinky-web/src/pages/DataStudioNew/ContextMenuSpace.tsx

@@ -0,0 +1,37 @@
+/*
+ *
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+import { Space } from 'antd';
+import React from 'react';
+
+interface ContextMenuSpaceProps {
+  onContextMenu: (e: React.MouseEvent<HTMLElement>) => void;
+  children: React.ReactNode | JSX.Element | string;
+}
+
+export const ContextMenuSpace = (props: ContextMenuSpaceProps) => {
+  const { onContextMenu, children } = props;
+  return (
+    <>
+      <Space onContextMenu={onContextMenu} size={0}>
+        {children}
+      </Space>
+    </>
+  );
+};

dinky-web/src/pages/DataStudioNew/DockLayoutFunction.tsx

@@ -67,7 +67,7 @@ export const createNewPanel = (
       {
         id: route.key,
         content: <></>,
-        title: route.title,
+        title: route.title(),
         group: route.position
       }
     ]