refactor: implement new saga designer (apache#6280)

xingfudeshi · Jan 23, 2024 · e858228 · e858228
1 parent 36e6e41
commit e858228
Show file tree

Hide file tree

Showing 147 changed files with 12,050 additions and 12,190 deletions.
diff --git a/changes/en-us/2.x.md b/changes/en-us/2.x.md
@@ -84,6 +84,9 @@ Add changes here for all PR submitted to the 2.x branch.
 - [[#6157](https://github.com/apache/incubator-seata/pull/6157)] increase common module unit test coverage
 - [[#6250](https://github.com/apache/incubator-seata/pull/6250)] increase seata-core module unit test coverage
 
+### refactor:
+- [[#6280](https://github.com/apache/incubator-seata/pull/6280)] refactor Saga designer using diagram-js
+
 Thanks to these contributors for their code commits. Please report an unintended omission.
 
 <!-- Please make sure your Github ID is in the list below -->

diff --git a/changes/zh-cn/2.x.md b/changes/zh-cn/2.x.md
@@ -82,6 +82,9 @@
 - [[#6157](https://github.com/apache/incubator-seata/pull/6157)] 增加common模块单测覆盖率
 - [[#6250](https://github.com/apache/incubator-seata/pull/6250)] 增加seata-core模块单测覆盖率
 
+### refactor:
+- [[#6280](https://github.com/apache/incubator-seata/pull/6280)] 使用diagram-js重构Saga设计器
+
 非常感谢以下 contributors 的代码贡献。若有无意遗漏，请报告。
 
 <!-- 请确保您的 GitHub ID 在以下列表中 -->

diff --git a/console/pom.xml b/console/pom.xml
@@ -141,7 +141,7 @@
                         </goals>
                         <phase>generate-resources</phase>
                         <configuration>
-                            <nodeVersion>v12.22.12</nodeVersion>
+                            <nodeVersion>v14.21.3</nodeVersion>
                         </configuration>
                     </execution>
                     <execution>
@@ -208,4 +208,4 @@
             </resource>
         </resources>
     </build>
-</project>
+</project>
diff --git a/console/src/main/resources/static/console-fe/build/copyDesigner.js b/console/src/main/resources/static/console-fe/build/copyDesigner.js
@@ -19,12 +19,6 @@ const fs = require('fs');
 const path = require('path');
 const childProcess = require('child_process')
 
-const mkdir = dir => {
-  if (!fs.existsSync(dir)) {
-    fs.mkdirSync(dir);
-  }
-};
-
 // copy seata-saga-statemachine-designer to console
 const designerDir = path.join(__dirname, '../../../../../../../saga/seata-saga-statemachine-designer');
 if (!fs.existsSync(path.join(designerDir, "dist"))) {
@@ -34,18 +28,10 @@ if (!fs.existsSync(path.join(designerDir, "dist"))) {
 
 // copy file
 const designerDestDir = path.join(__dirname,'../public/saga-statemachine-designer');
-const designerHtmlFileName = path.join(designerDestDir, 'designer.html');
-const designerBundleFileName = path.join(designerDestDir, 'dist/bundle.js');
-
-mkdir(path.dirname(designerHtmlFileName));
-mkdir(path.dirname(designerBundleFileName));
-
-fs.createReadStream(path.join(designerDir, 'index.html'))
-.pipe(
-  fs.createWriteStream(designerHtmlFileName)
-  );
-
-fs.createReadStream(path.join(designerDir, 'dist/bundle.js'))
-.pipe(
-  fs.createWriteStream(designerBundleFileName)
-  );
+if (!fs.existsSync(designerDestDir)) {
+  fs.mkdirSync(designerDestDir)
+}
+fs.readdirSync(path.join(designerDir, 'dist')).forEach(file => {
+  fs.copyFileSync(path.join(designerDir, 'dist', file), path.join(designerDestDir, file));
+});
+fs.renameSync(path.join(designerDestDir, 'index.html'), path.join(designerDestDir, 'designer.html'));
diff --git a/console/src/main/resources/static/console-fe/build/copyFile.js b/console/src/main/resources/static/console-fe/build/copyFile.js
@@ -48,18 +48,10 @@ copyList.forEach(_fileName => {
 // copy seata-saga-statemachine-designer from console-fe/public to console resource folder
 const designerDir = path.join(__dirname, '../public/saga-statemachine-designer');
 const designerDestDir = path.join(destDir, 'saga-statemachine-designer');
-const designerHtmlFileName = path.join(designerDestDir, 'designer.html');
-const designerBundleFileName = path.join(designerDestDir, 'dist/bundle.js');
 
-mkdir(path.dirname(designerHtmlFileName));
-mkdir(path.dirname(designerBundleFileName));
-
-fs.createReadStream(path.join(designerDir, 'designer.html'))
-.pipe(
-  fs.createWriteStream(designerHtmlFileName)
-  );
-
-fs.createReadStream(path.join(designerDir, 'dist/bundle.js'))
-.pipe(
-  fs.createWriteStream(designerBundleFileName)
-  );
+if (!fs.existsSync(designerDestDir)) {
+  fs.mkdirSync(designerDestDir)
+}
+fs.readdirSync(designerDir).forEach(file => {
+  fs.copyFileSync(path.join(designerDir, file), path.join(designerDestDir, file));
+});
diff --git a/saga/seata-saga-statemachine-designer/.babelrc b/saga/seata-saga-statemachine-designer/.babelrc
@@ -1,42 +1,20 @@
 {
   "presets": [
+    "@babel/preset-env",
     [
-      "@babel/preset-env",
+      "@babel/preset-react",
       {
-        "modules": false,
-        "useBuiltIns": "usage",
-        "corejs": "core-js@3",
+        "runtime": "automatic"
       }
-    ],
-    "@babel/preset-react"
+    ]
   ],
   "plugins": [
-    "@babel/plugin-transform-runtime",
-    [
-      "@babel/plugin-proposal-class-properties",
-      {
-        "loose": true
-      }
-    ],
-    [
-      "module-resolver",
-      {
-        "alias": {
-          "@common": "./ggeditor/common",
-          "@components": "./ggeditor/components",
-          "@helpers": "./ggeditor/helpers",
-          "@utils": "./ggeditor/utils",
-          "@gg-editor-core": "./ggeditor/gg-editor-core"
-        }
-      }
-    ],
     [
-      "transform-inline-environment-variables",
+      "@babel/plugin-transform-react-jsx",
       {
-        "include": [
-          "GG_EDITOR_VERSION"
-        ]
+        "importSource": "@bpmn-io/properties-panel/preact",
+        "runtime": "automatic"
       }
     ]
   ]
-}
+}
diff --git a/saga/seata-saga-statemachine-designer/.eslintrc.json b/saga/seata-saga-statemachine-designer/.eslintrc.json
@@ -2,7 +2,7 @@
   "env": {
     "browser": true
   },
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "extends": "airbnb",
   "rules": {
     "arrow-body-style": 0,
@@ -21,6 +21,10 @@
     "react/no-multi-comp": 0,
     "react/prefer-stateless-function": 0,
     "react/prop-types": 0,
-    "react/sort-comp": 0
+    "react/sort-comp": 0,
+    "react/no-deprecated": 0,
+    "react/react-in-jsx-scope": 0,
+    "react/jsx-no-bind": 0,
+    "no-underscore-dangle": 0
   }
 }
diff --git a/saga/seata-saga-statemachine-designer/.gitignore b/saga/seata-saga-statemachine-designer/.gitignore
@@ -1,4 +1,5 @@
-es
-cjs
-dist
-node_modules
+/.idea/
+/.vscode/
+
+/node_modules/
+/dist/