[]Optimize][Web]Optimize flink jar form select (#3972)

Co-authored-by: zackyoungh <zackyoungh@users.noreply.github.com>
DataLinkDC · Nov 27, 2024 · 5c775d7 · 5c775d7
1 parent d64de82
commit 5c775d7
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 40 deletions.
diff --git a/dinky-admin/src/main/java/org/dinky/controller/TaskController.java b/dinky-admin/src/main/java/org/dinky/controller/TaskController.java
@@ -348,6 +348,6 @@ public Result<String> flinkJarFormConvertSql(@RequestBody FlinkJarSqlConvertVO d
                                 .orElse(false)
                                 .toString());
         String executeJarSql = ENGINE.getTemplate("executeJar.sql").render(objectMap);
-        return Result.succeed(dto.getInitSqlStatement() + "\n" + executeJarSql, "");
+        return Result.succeed(Opt.ofNullable(dto.getInitSqlStatement()).orElse("") + "\n" + executeJarSql, "");
     }
 }
diff --git a/dinky-web/src/locales/en-US/pages.ts b/dinky-web/src/locales/en-US/pages.ts
@@ -157,6 +157,7 @@ export default {
   'datastudio.sqlTask.flinkJar.tip':
     'The code editor on the left is the FlinkSql pre-statement, and the current form item is the EXECUTE JAR WITH syntax',
   'datastudio.sqlTask.flinkJar.uri': 'Program path',
+  'datastudio.sqlTask.flinkJar.manualInput': 'Manual input',
   'datastudio.sqlTask.flinkJar.uri.tip': 'Please enter the path to run the program (uri)',
   'datastudio.sqlTask.flinkJar.mainClass': 'Program running class (mainClass)',
   'datastudio.sqlTask.flinkJar.mainClass.tip':

diff --git a/dinky-web/src/locales/zh-CN/pages.ts b/dinky-web/src/locales/zh-CN/pages.ts
@@ -144,6 +144,7 @@ export default {
   'datastudio.project.import.tip': '点击或拖拽文件到此区域上传',
   'datastudio.sqlTask.flinkJar.tip':
     '左边代码编辑器是 FlinkSql 前置语句，当前表单项是 EXECUTE JAR WITH 语法',
+  'datastudio.sqlTask.flinkJar.manualInput': '手动输入',
   'datastudio.sqlTask.flinkJar.uri': '程序路径',
   'datastudio.sqlTask.flinkJar.uri.tip': '请输入运行程序路径（uri）',
   'datastudio.sqlTask.flinkJar.mainClass': '程序运行类（mainClass）',

diff --git a/dinky-web/src/pages/DataStudio/CenterTabContent/SqlTask/index.tsx b/dinky-web/src/pages/DataStudio/CenterTabContent/SqlTask/index.tsx
@@ -46,6 +46,7 @@ import { connect, useModel } from '@umijs/max';
 import CusPanelResizeHandle from '@/pages/DataStudio/components/CusPanelResizeHandle';
 import {
   ProForm,
+  ProFormCheckbox,
   ProFormInstance,
   ProFormSwitch,
   ProFormText,
@@ -93,13 +94,9 @@ import DiffModal from '@/pages/DataStudio/CenterTabContent/SqlTask/DiffModal';
 import TaskConfig from '@/pages/DataStudio/CenterTabContent/SqlTask/TaskConfig';
 import SelectDb from '@/pages/DataStudio/CenterTabContent/RunToolbar/SelectDb';
 import { SseData, Topic } from '@/models/UseWebSocketModel';
-import WarpProFormTreeSelect from '@ant-design/pro-form/es/components/TreeSelect';
 import { ResourceInfo } from '@/types/RegCenter/data';
-import {
-  buildResourceTreeData,
-  buildResourceTreeDataAtTreeForm
-} from '@/pages/RegCenter/Resource/components/FileTree/function';
-import Paragraph from 'antd/es/typography/Paragraph';
+import { buildResourceTreeDataAtTreeForm } from '@/pages/RegCenter/Resource/components/FileTree/function';
+import { ProFormDependency } from '@ant-design/pro-form';
 
 export type FlinkSqlProps = {
   showDesc: boolean;
@@ -912,41 +909,51 @@ export const SqlTask = memo((props: FlinkSqlProps & any) => {
                             }));
                           }}
                         >
-                          {/*<ProFormText*/}
-                          {/*  name={'uri'}*/}
-                          {/*  label={'程序路径'}*/}
-                          {/*  placeholder={'请输入运行程序路径'}*/}
-                          {/*/>*/}
-                          <ProFormTreeSelect
-                            request={async () => {
-                              return buildResourceTreeDataAtTreeForm(
-                                tempData.resourceDataList as ResourceInfo[],
-                                false,
-                                []
+                          <ProFormCheckbox.Group name='manualInput' options={[l('datastudio.sqlTask.flinkJar.manualInput')]} />
+
+                          <ProFormDependency name={['manualInput']}>
+                            {({ manualInput }) => {
+                              return manualInput?.length > 0 ? (
+                                <ProFormText
+                                  name={'uri'}
+                                  label={l('datastudio.sqlTask.flinkJar.uri')}
+                                  placeholder={l('datastudio.sqlTask.flinkJar.uri.tip')}
+                                />
+                              ) : (
+                                <ProFormTreeSelect
+                                  request={async () => {
+                                    return buildResourceTreeDataAtTreeForm(
+                                      tempData.resourceDataList as ResourceInfo[],
+                                      false,
+                                      []
+                                    );
+                                  }}
+                                  normalize={(value) => {
+                                    return value?.value ?? '';
+                                  }}
+                                  name={'uri'}
+                                  label={l('datastudio.sqlTask.flinkJar.uri')}
+                                  placeholder={l('datastudio.sqlTask.flinkJar.uri.tip')}
+                                  fieldProps={{
+                                    suffixIcon: null,
+                                    filterTreeNode: true,
+                                    showSearch: true,
+                                    treeIcon: true,
+                                    popupMatchSelectWidth: false,
+                                    labelInValue: true,
+                                    autoClearSearchValue: true,
+                                    treeLine: true,
+                                    treeDefaultExpandedKeys: ['rs:/'],
+                                    treeNodeLabelProp: 'value',
+                                    fieldNames: {
+                                      label: 'title'
+                                    }
+                                  }}
+                                />
                               );
                             }}
-                            normalize={(value) => {
-                              return value.value;
-                            }}
-                            name={'uri'}
-                            label={l('datastudio.sqlTask.flinkJar.uri')}
-                            placeholder={l('datastudio.sqlTask.flinkJar.uri.tip')}
-                            fieldProps={{
-                              suffixIcon: null,
-                              filterTreeNode: true,
-                              showSearch: true,
-                              treeIcon: true,
-                              popupMatchSelectWidth: false,
-                              labelInValue: true,
-                              autoClearSearchValue: true,
-                              treeLine: true,
-                              treeDefaultExpandedKeys: ['rs:/'],
-                              treeNodeLabelProp: 'value',
-                              fieldNames: {
-                                label: 'title'
-                              }
-                            }}
-                          />
+                          </ProFormDependency>
+
                           <ProFormText
                             name={'mainClass'}
                             label={l('datastudio.sqlTask.flinkJar.mainClass')}
@@ -959,6 +966,7 @@ export const SqlTask = memo((props: FlinkSqlProps & any) => {
                           />
                           <ProFormSwitch
                             name={'allowNonRestoredState'}
+                            layout='vertical'
                             label={l('datastudio.sqlTask.flinkJar.allowNonRestoredState')}
                           />
                         </ProForm>