[Feature-654][web] Add task info tab (#655)

Co-authored-by: wenmo <32723967+wenmo@users.noreply.github.com>

dlink-web/src/components/Studio/StudioRightTool/StudioTaskInfo/index.less

+@import '~antd/es/style/themes/default.less';
+
+.form_setting{
+  padding-left: 10px;
+}
+
+.form_item{
+  margin-bottom: 5px;
+}
+:global {
+  .ant-descriptions-small div.ant-typography, .ant-typography p {
+    margin-bottom: 0;
+  }
+}

dlink-web/src/components/Studio/StudioRightTool/StudioTaskInfo/index.tsx

+import {connect} from "umi";
+import {StateType} from "@/pages/DataStudio/model";
+import {
+  Form, Row, Col, Tooltip, Button, Input, Descriptions, Typography
+} from "antd";
+import {MinusSquareOutlined} from "@ant-design/icons";
+import styles from "./index.less";
+import {Scrollbars} from 'react-custom-scrollbars';
+
+const {TextArea} = Input;
+const {Paragraph} = Typography;
+
+const StudioTaskInfo = (props: any) => {
+
+  const {current, form, dispatch, tabs, toolHeight} = props;
+
+  form.setFieldsValue(current.task);
+
+  const onValuesChange = (change: any, all: any) => {
+    let newTabs = tabs;
+    for (let i = 0; i < newTabs.panes.length; i++) {
+      if (newTabs.panes[i].key == newTabs.activeKey) {
+        for (let key in change) {
+          newTabs.panes[i].task[key] = change[key];
+        }
+        break;
+      }
+    }
+
+    dispatch && dispatch({
+      type: "Studio/saveTabs",
+      payload: newTabs,
+    });
+  };
+
+  return (
+    <>
+      <Row>
+        <Col span={24}>
+          <div style={{float: "right"}}>
+            <Tooltip title="最小化">
+              <Button
+                type="text"
+                icon={<MinusSquareOutlined/>}
+              />
+            </Tooltip>
+          </div>
+        </Col>
+      </Row>
+      <Scrollbars style={{height: (toolHeight - 32)}}>
+        <Descriptions bordered size="small" column={1}>
+          <Descriptions.Item label="ID">
+            <Paragraph copyable>{current.task.id}</Paragraph>
+          </Descriptions.Item>
+          <Descriptions.Item label="标题">
+            {current.task.alias}
+          </Descriptions.Item>
+          <Descriptions.Item label="方言">
+            {current.task.dialect}
+          </Descriptions.Item>
+        </Descriptions>
+        <Form
+          form={form}
+          layout="vertical"
+          className={styles.form_setting}
+          onValuesChange={onValuesChange}
+        >
+          <Row>
+            <Col span={24}>
+              <Form.Item
+                label="备注" className={styles.form_item} name="note"
+              >
+                <TextArea rows={4} maxLength={255}/>
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
+      </Scrollbars>
+    </>
+  );
+};
+
+export default connect(({Studio}: { Studio: StateType }) => ({
+  current: Studio.current,
+  tabs: Studio.tabs,
+  toolHeight: Studio.toolHeight,
+}))(StudioTaskInfo);

dlink-web/src/components/Studio/StudioRightTool/index.tsx

-import {Tabs, Empty, Form} from "antd";
-import {SettingOutlined,ScheduleOutlined} from "@ant-design/icons";
+import {Tabs} from "antd";
+import {SettingOutlined, ScheduleOutlined, ContainerOutlined} from "@ant-design/icons";
 import {StateType} from "@/pages/DataStudio/model";
 import {connect} from "umi";
 import StudioConfig from "./StudioConfig";
@@ -10,33 +10,42 @@ import StudioSqlConfig from "./StudioSqlConfig";
 import StudioUDFInfo from "./StudioUDFInfo";
 import StudioJarSetting from "./StudioJarSetting";
 import StudioGuide from "./StudioGuide";
+import StudioTaskInfo from "./StudioTaskInfo";
 import {DIALECT, isSql} from "@/components/Studio/conf";
 
-const { TabPane } = Tabs;
+const {TabPane} = Tabs;
 
 const StudioRightTool = (props: any) => {
 
-  const {current,form,toolHeight} = props;
+  const {current, form, toolHeight} = props;
 
   const renderContent = () => {
-    if(isSql(current.task.dialect)){
+    if (isSql(current.task.dialect)) {
       return renderSqlContent();
     }
-    if(DIALECT.FLINKJAR === current.task.dialect){
+    if (DIALECT.FLINKJAR === current.task.dialect) {
       return renderJarContent();
     }
-    if(DIALECT.FLINKSQLENV === current.task.dialect){
+    if (DIALECT.FLINKSQLENV === current.task.dialect) {
       return renderEnvContent();
     }
-    if(DIALECT.JAVA === current.task.dialect){
+    if (DIALECT.JAVA === current.task.dialect) {
       return renderUDFContent();
     }
     return renderFlinkSqlContent();
   };
 
+  const renderTaskInfoContent = () => {
+    return (
+      <TabPane tab={<span><ContainerOutlined/> 作业信息</span>} key="StudioTaskInfo">
+        <StudioTaskInfo form={form}/>
+      </TabPane>
+    )
+  };
+
   const renderSqlContent = () => {
     return (<>
-      <TabPane tab={<span><ScheduleOutlined /> 执行配置</span>} key="StudioSqlConfig" >
+      <TabPane tab={<span><SettingOutlined/> 执行配置</span>} key="StudioSqlConfig">
         <StudioSqlConfig form={form}/>
       </TabPane>
     </>)
@@ -44,7 +53,7 @@ const StudioRightTool = (props: any) => {
 
   const renderJarContent = () => {
     return (<>
-      <TabPane tab={<span><SettingOutlined /> 作业配置</span>} key="StudioJarSetting" >
+      <TabPane tab={<span><SettingOutlined/> 作业配置</span>} key="StudioJarSetting">
         <StudioJarSetting form={form}/>
       </TabPane>
     </>)
@@ -52,7 +61,7 @@ const StudioRightTool = (props: any) => {
 
   const renderEnvContent = () => {
     return (<>
-      <TabPane tab={<span><SettingOutlined /> 作业配置</span>} key="StudioEnvSetting" >
+      <TabPane tab={<span><SettingOutlined/> 作业配置</span>} key="StudioEnvSetting">
         <StudioEnvSetting form={form}/>
       </TabPane>
     </>)
@@ -60,36 +69,37 @@ const StudioRightTool = (props: any) => {
 
   const renderUDFContent = () => {
     return (<>
-      <TabPane tab={<span><SettingOutlined /> UDF信息</span>} key="StudioUDFInfo" >
+      <TabPane tab={<span><SettingOutlined/> UDF信息</span>} key="StudioUDFInfo">
         <StudioUDFInfo form={form}/>
       </TabPane>
     </>)
   };
 
   const renderFlinkSqlContent = () => {
-    return (<><TabPane tab={<span><SettingOutlined /> 作业配置</span>} key="StudioSetting" >
-      <StudioSetting form={form} />
+    return (<><TabPane tab={<span><SettingOutlined/> 作业配置</span>} key="StudioSetting">
+      <StudioSetting form={form}/>
     </TabPane>
-      <TabPane tab={<span><ScheduleOutlined /> 执行配置</span>} key="StudioConfig" >
+      <TabPane tab={<span><SettingOutlined/> 执行配置</span>} key="StudioConfig">
         <StudioConfig form={form}/>
       </TabPane>
-      <TabPane tab={<span><ScheduleOutlined /> 保存点</span>} key="StudioSavePoint" >
-        <StudioSavePoint />
+      <TabPane tab={<span><ScheduleOutlined/> 保存点</span>} key="StudioSavePoint">
+        <StudioSavePoint/>
       </TabPane>
     </>)
   };
 
   return (
     <>
-      { current?.task?
-    <Tabs defaultActiveKey="1" size="small" tabPosition="right"  style={{ height: toolHeight}}>
+      {current?.task ?
+        <Tabs defaultActiveKey="1" size="small" tabPosition="right" style={{height: toolHeight}}>
           {renderContent()}
-    </Tabs>:<StudioGuide toolHeight={toolHeight} />}
+          {renderTaskInfoContent()}
+        </Tabs> : <StudioGuide toolHeight={toolHeight}/>}
     </>
   );
 };
 
-export default connect(({ Studio }: { Studio: StateType }) => ({
+export default connect(({Studio}: { Studio: StateType }) => ({
   sql: Studio.sql,
   toolHeight: Studio.toolHeight,
   current: Studio.current,