KOGITO-6554: Serverless Workflow Editor PoC (Milestone 0) (apache#781)

* Serverless workflow editor * Serverless workflow editor * Serverless workflow editor * Serverless workflow editor * Serverless workflow editor * Added drawer to serverless workflow editor. * Improved package.json * Updated to @severlessworkflow/sdk-typescript 3.0.0 + patch * Downgraded to @severlessworkflow/sdk-typescript 1.0.0 (0.6 spec) + diagram code * No hoisting serveless-workflow-editor mermaid dependency tree * Fixed mermaid * Fixed tsconfig * Fixed monaco issues (apache#13) * - Added webpack config - Added MonacoEditor.tsx * - Moved editor to memo instead of state * Added new file option and samples to editor header + fixed SVG save * - Added autocomplete apis (apache#14) * - Adding new CompletionHelper for functions * - removed autocomplete support * Fixed mermaidState undefined check * Serverless workflow editor * Revert dashbuilder package.json change * - YAML support (apache#16) * Fixes after merge with main * Fixes after merge with main * Removed it tests from build:prod for now * Serverless workflow editor (apache#18) * - Added Language parser + AST - Upgraded specification version to 0.8 * - fixed extension webpack.config.js * - cleanup * Silently generate SVG for all serverless workflow files saving. * Adjusts after project name change. * Adjusts after project name change. * Adjust package.json. * Adjusting examples. * Updated yarn.lock * Fixed examples build * Updated yarn.lock * Fixed chrome-extension envelope locator * Fixed desktop tests * Updated yarn.lock * Fix layout of dev-webapp * Changed SW extension configuration to one parameter for all extensions. * Updated Github actions to include the SW VSCode extension where appropriate. Co-authored-by: Pere Fernández <[email protected]> Co-authored-by: Pere Fernàndez <[email protected]> Co-authored-by: Tiago Bento <[email protected]>
handreyrc · Mar 16, 2022 · b72fd0f · b72fd0f
1 parent 7de93f0
commit b72fd0f
Show file tree

Hide file tree

Showing 112 changed files with 6,338 additions and 331 deletions.
diff --git a/.github/workflows/publish_daily_dev_version.yml b/.github/workflows/publish_daily_dev_version.yml
@@ -178,6 +178,13 @@ jobs:
           deployment_envvars_file_path: ./deployment.env
           deployment_icon: "js"
 
+      - name: "Upload Serverless Workflow VS Code Extension (Ubuntu only)"
+        if: matrix.os == 'ubuntu-latest'
+        uses: actions/upload-artifact@v1
+        with:
+          name: vscode-extension-serverless-workflow-editor
+          path: kie-tools/packages/vscode-extension-serverless-workflow-editor/dist/vscode_extension_serverless_workflow_editor_${{ steps.version.outputs.version }}.vsix
+
       - name: "Upload VS Code Extension (dev) (Ubuntu only)"
         if: matrix.os == 'ubuntu-latest'
         uses: actions/upload-artifact@v1

diff --git a/.github/workflows/release_build.yml b/.github/workflows/release_build.yml
@@ -593,7 +593,7 @@ jobs:
 
       - name: "Build"
         run: |
-          lerna run build:prod --scope=vscode-extension-pack-kogito-kie-editors --scope=vscode-extension-backend --include-dependencies --stream
+          lerna run build:prod --scope=vscode-extension-pack-kogito-kie-editors --scope=vscode-extension-backend --scope=vscode-extension-serverless-workflow-editor --include-dependencies --stream
 
       - name: "Upload VS Code Extension (dev) (Ubuntu only)"
         if: ${{ !inputs.dry_run }}
@@ -617,6 +617,17 @@ jobs:
           asset_name: vscode_extension_backend_dev_${{ inputs.tag }}.vsix
           asset_content_type: application/zip
 
+      - name: "Upload Serverless Workflow VS Code Extension (dev) (Ubuntu only)"
+        if: ${{ !inputs.dry_run }}
+        uses: actions/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.gh_token }}
+        with:
+          upload_url: ${{ inputs.upload_asset_url }}
+          asset_path: ./packages/vscode-extension-serverless-workflow-editor/dist/vscode_extension_serverless_workflow_editor_${{ inputs.tag }}.vsix
+          asset_name: vscode_extension_dev_${{ inputs.tag }}.vsix
+          asset_content_type: application/zip
+
   vscode_extensions_prod:
     if: ${{ needs.extract_runners.outputs.vscode_extensions_prod == 'true' }}
     runs-on: ubuntu-latest
@@ -646,7 +657,8 @@ jobs:
             --scope=vscode-extension-dmn-editor \
             --scope=vscode-extension-pmml-editor \
             --scope=vscode-extension-kogito-bundle \
-            --scope=vscode-extension-red-hat-business-automation-bundle
+            --scope=vscode-extension-red-hat-business-automation-bundle\
+            --scope=vscode-extension-serverless-workflow-editor
 
       - name: "Upload VS Code Extension - BPMN Editor (prod)"
         if: ${{ !inputs.dry_run }}
@@ -703,6 +715,17 @@ jobs:
           asset_name: vscode_extension_red_hat_business_automation_bundle_${{ inputs.tag }}.vsix
           asset_content_type: application/zip
 
+      - name: "Upload VS Code Extension - Serverless Workflow Editor (prod)"
+        if: ${{ !inputs.dry_run }}
+        uses: actions/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.gh_token }}
+        with:
+          upload_url: ${{ inputs.upload_asset_url }}
+          asset_path: ./packages/vscode-extension-serverless-workflow-editor/dist/vscode_extension_serverless_workflow_editor_${{ inputs.tag }}.vsix
+          asset_name: vscode_extension_serverless_workflow_editor_${{ inputs.tag }}.vsix
+          asset_content_type: application/zip
+
   desktop:
     if: ${{ needs.extract_runners.outputs.desktop == 'true' }}
     runs-on: ${{ matrix.os }}

diff --git a/.github/workflows/staging_build.yml b/.github/workflows/staging_build.yml
@@ -333,6 +333,17 @@ jobs:
           asset_name: STAGING__vscode_extension_pmml_editor_${{ inputs.tag }}.vsix
           asset_content_type: application/zip
 
+      - name: "STAGING: Upload VS Code Extension - Serverless Workflow Editor (prod) (Ubuntu only)"
+        if: ${{ matrix.os == 'ubuntu-latest' && !inputs.dry_run }}
+        uses: actions/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.gh_token }}
+        with:
+          upload_url: ${{ inputs.upload_asset_url }}
+          asset_path: ${{ github.workspace }}/kie-tools/packages/vscode-extension-serverless-workflow-editor/dist/vscode_extension_serverless_workflow_editor_${{ inputs.tag }}.vsix
+          asset_name: STAGING__vscode_extension_serverless_workflow_editor_${{ inputs.tag }}.vsix
+          asset_content_type: application/zip
+
       - name: "STAGING: Upload Chrome Extension (Ubuntu only)"
         if: ${{ matrix.os == 'ubuntu-latest' && !inputs.dry_run }}
         uses: actions/[email protected]

diff --git a/examples/base64png-editor-chrome-extension/src/contentscript.ts b/examples/base64png-editor-chrome-extension/src/contentscript.ts
@@ -15,6 +15,7 @@
  */
 
 import { startExtension } from "@kie-tools-core/chrome-extension";
+import { EditorEnvelopeLocator, EnvelopeMapping } from "@kie-tools-core/editor/dist/api";
 
 const resourcesPathPrefix = process.env["WEBPACK_REPLACE__targetOrigin"];
 
@@ -31,16 +32,12 @@ startExtension({
   name: "Kogito Base64 PNG React Editor",
   extensionIconUrl: chrome.extension.getURL("/resources/kie_icon_rgb_fullcolor_default.svg"),
   githubAuthTokenCookieName: "github-oauth-token-base64-editors",
-  editorEnvelopeLocator: {
-    targetOrigin: window.location.origin,
-    mapping: new Map([
-      [
-        "base64png",
-        {
-          resourcesPathPrefix: `${resourcesPathPrefix}/dist/`,
-          envelopePath: `${resourcesPathPrefix}/dist/envelope/index.html`,
-        },
-      ],
-    ]),
-  },
+  editorEnvelopeLocator: new EditorEnvelopeLocator(window.location.origin, [
+    new EnvelopeMapping(
+      "base64png",
+      "**/*.base64png",
+      `${resourcesPathPrefix}/dist/`,
+      `${resourcesPathPrefix}/dist/envelope/index.html`
+    ),
+  ]),
 });
diff --git a/examples/base64png-editor-vscode-extension/src/extension.ts b/examples/base64png-editor-vscode-extension/src/extension.ts
@@ -21,6 +21,7 @@ import { I18n } from "@kie-tools-core/i18n/dist/core";
 import { backendI18nDefaults, backendI18nDictionaries } from "@kie-tools-core/backend/dist/i18n";
 import * as path from "path";
 import * as fs from "fs";
+import { EditorEnvelopeLocator, EnvelopeMapping } from "@kie-tools-core/editor/dist/api";
 
 let backendProxy: VsCodeBackendProxy;
 
@@ -46,18 +47,9 @@ export function activate(context: vscode.ExtensionContext) {
     viewType: "kieKogitoWebviewBase64PNGEditor",
     generateSvgCommandId: "extension.kogito.getPreviewSvg",
     silentlyGenerateSvgCommandId: "",
-    editorEnvelopeLocator: {
-      targetOrigin: "vscode",
-      mapping: new Map([
-        [
-          "base64png",
-          {
-            resourcesPathPrefix: `dist/`,
-            envelopePath: `dist/envelope/index.js`,
-          },
-        ],
-      ]),
-    },
+    editorEnvelopeLocator: new EditorEnvelopeLocator("vscode", [
+      new EnvelopeMapping("base64png", "**/*.base64png", `dist/`, `dist/envelope/index.js`),
+    ]),
     backendProxy: backendProxy,
   });
 

diff --git a/examples/webapp/src/Pages/Base64Png/Base64PngPage.tsx b/examples/webapp/src/Pages/Base64Png/Base64PngPage.tsx
@@ -16,7 +16,7 @@
 
 import { ChannelType } from "@kie-tools-core/editor/dist/api";
 import * as React from "react";
-import { EditorEnvelopeLocator } from "@kie-tools-core/editor/dist/api";
+import { EditorEnvelopeLocator, EnvelopeMapping } from "@kie-tools-core/editor/dist/api";
 import { useMemo, useState } from "react";
 import { Page } from "@patternfly/react-core";
 import { EmbeddedEditor } from "@kie-tools-core/editor/dist/embedded";
@@ -42,20 +42,13 @@ export function Base64PngPage() {
   /**
    * The editor envelope locator informs the EmbeddedEditor what file extension the Editor can open, and it maps to the respective envelope path and the Editor resources (like CSS, icons, etc).
    */
-  const editorEnvelopeLocator: EditorEnvelopeLocator = useMemo(() => {
-    return {
-      targetOrigin: window.location.origin,
-      mapping: new Map([
-        [
-          "base64png",
-          {
-            resourcesPathPrefix: `envelope/`,
-            envelopePath: `envelope/base64-editor.html`,
-          },
-        ],
+  const editorEnvelopeLocator: EditorEnvelopeLocator = useMemo(
+    () =>
+      new EditorEnvelopeLocator(window.location.origin, [
+        new EnvelopeMapping("base64png", "**/*.base64png", `envelope/`, `envelope/base64-editor.html`),
       ]),
-    };
-  }, [file]);
+    [file]
+  );
 
   return (
     <Page>

diff --git a/examples/webapp/src/Pages/KogitoEditors/BpmnPage.tsx b/examples/webapp/src/Pages/KogitoEditors/BpmnPage.tsx
@@ -16,7 +16,7 @@
 
 import { ChannelType } from "@kie-tools-core/editor/dist/api";
 import * as React from "react";
-import { EditorEnvelopeLocator } from "@kie-tools-core/editor/dist/api";
+import { EditorEnvelopeLocator, EnvelopeMapping } from "@kie-tools-core/editor/dist/api";
 import { useMemo, useState } from "react";
 import { Page } from "@patternfly/react-core";
 import { EmbeddedEditor, useEditorRef } from "@kie-tools-core/editor/dist/embedded";
@@ -48,25 +48,20 @@ export function BpmnPage() {
    * On this example, we're using the envelope located on the bpmn.new page.
    */
   const editorEnvelopeLocator: EditorEnvelopeLocator = useMemo(() => {
-    return {
-      targetOrigin: window.location.origin,
-      mapping: new Map([
-        [
-          "bpmn",
-          {
-            resourcesPathPrefix: "https://kiegroup.github.io/kogito-online/editors/latest/bpmn",
-            envelopePath: "https://kiegroup.github.io/kogito-online/bpmn-envelope.html",
-          },
-        ],
-        [
-          "bpmn2",
-          {
-            resourcesPathPrefix: "https://kiegroup.github.io/kogito-online/editors/latest/bpmn",
-            envelopePath: "https://kiegroup.github.io/kogito-online/bpmn-envelope.html",
-          },
-        ],
-      ]),
-    };
+    return new EditorEnvelopeLocator(window.location.origin, [
+      new EnvelopeMapping(
+        "bpmn",
+        "**/*.bpmn",
+        "https://kiegroup.github.io/kogito-online/editors/latest/bpmn",
+        "https://kiegroup.github.io/kogito-online/bpmn-envelope.html"
+      ),
+      new EnvelopeMapping(
+        "bpmn",
+        "**/*.bpmn2",
+        "https://kiegroup.github.io/kogito-online/editors/latest/bpmn",
+        "https://kiegroup.github.io/kogito-online/bpmn-envelope.html"
+      ),
+    ]);
   }, []);
 
   return (

diff --git a/examples/webapp/src/Pages/KogitoEditors/DmnPage.tsx b/examples/webapp/src/Pages/KogitoEditors/DmnPage.tsx
@@ -16,7 +16,7 @@
 
 import { ChannelType } from "@kie-tools-core/editor/dist/api";
 import * as React from "react";
-import { EditorEnvelopeLocator } from "@kie-tools-core/editor/dist/api";
+import { EditorEnvelopeLocator, EnvelopeMapping } from "@kie-tools-core/editor/dist/api";
 import { useMemo, useState } from "react";
 import { Page } from "@patternfly/react-core";
 import { EmbeddedEditor, useEditorRef } from "@kie-tools-core/editor/dist/embedded";
@@ -45,18 +45,9 @@ export function DmnPage() {
    * On this example, we're using a local envelope. To do this, it's necessary to copy the files from the @kie-tools/kie-bc-editors-unpacked on the webpack.config
    */
   const editorEnvelopeLocator: EditorEnvelopeLocator = useMemo(() => {
-    return {
-      targetOrigin: window.location.origin,
-      mapping: new Map([
-        [
-          "dmn",
-          {
-            resourcesPathPrefix: "../dmn-editor/dmn/",
-            envelopePath: "envelope/dmn-editor.html",
-          },
-        ],
-      ]),
-    };
+    return new EditorEnvelopeLocator(window.location.origin, [
+      new EnvelopeMapping("dmn", "**/*.dmn", "../dmn-editor/dmn/", "envelope/dmn-editor.html"),
+    ]);
   }, []);
 
   return (

diff --git a/examples/webapp/src/Pages/KogitoEditors/Sidebar.tsx b/examples/webapp/src/Pages/KogitoEditors/Sidebar.tsx
@@ -108,11 +108,7 @@ export function Sidebar(props: Props) {
     }
 
     const currentFile = inputRef.current!.files![0];
-    const fileExtension = extractFileExtension(currentFile.name);
-    if (
-      !fileExtension ||
-      ![...props.editorEnvelopeLocator.mapping.keys()].find((element) => element === fileExtension)
-    ) {
+    if (!props.editorEnvelopeLocator.hasMappingFor(currentFile.name)) {
       return;
     }
 

diff --git a/package.json b/package.json
@@ -3,10 +3,19 @@
   "version": "0.0.0",
   "license": "Apache-2.0",
   "private": true,
-  "workspaces": [
-    "packages/*",
-    "examples/*"
-  ],
+  "workspaces": {
+    "packages": [
+      "packages/*",
+      "examples/*"
+    ],
+    "nohoist": [
+      "@kogito-tooling/serverless-workflow-editor",
+      "@kogito-tooling/serverless-workflow-editor/mermaid",
+      "@kogito-tooling/serverless-workflow-editor/mermaid/**",
+      "@kogito-tooling/serverless-workflow-editor/@types/mermaid",
+      "@kogito-tooling/serverless-workflow-editor/@types/mermaid/**"
+    ]
+  },
   "scripts": {
     "bootstrap": "yarn",
     "env:print": "build-env --print-env",
@@ -23,6 +32,8 @@
     "@babel/core": "^7.16.0",
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
+    "@kie/npm-treatment-tool": "^1.1.1",
+    "@severlessworkflow/sdk-typescript": "^1.0.0",
     "@simbathesailor/use-what-changed": "^2.0.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^11.2.6",
@@ -45,6 +56,7 @@
     "@types/semver": "^7.3.6",
     "@types/simpl-schema": "^1.12.0",
     "@types/sinon": "^10.0.2",
+    "@types/svg-pan-zoom": "^3.4.0",
     "@types/underscore": "^1.11.2",
     "@types/vscode": "^1.56.0",
     "@typescript-eslint/eslint-plugin": "^4.24.0",
@@ -113,6 +125,7 @@
     "start-server-and-test": "^1.12.1",
     "stream": "^0.0.2",
     "style-loader": "^2.0.0",
+    "svg-pan-zoom": "^3.6.1",
     "symlink-dir": "^5.0.1",
     "ts-jest": "^26.5.6",
     "ts-loader": "^9.1.2",

diff --git a/packages/build-env/graph.dot b/packages/build-env/graph.dot
@@ -57,6 +57,7 @@ digraph G {
   "@kie-tools/online-editor" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
   "@kie-tools-core/workspace" [ color = "purple", fontcolor = "purple", style = "rounded" ];
   "@kie-tools/pmml-editor" [ color = "blue", fontcolor = "blue", style = "rounded" ];
+  "@kie-tools/serverless-workflow-editor" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "@kie-tools/unitables" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "@kie-tools-core/run-script-if" [ color = "purple", fontcolor = "purple", style = "rounded" ];
   "@kie-tools/stunner-editors-dmn-loader" [ color = "blue", fontcolor = "blue", style = "rounded" ];
@@ -68,6 +69,7 @@ digraph G {
   "vscode-extension-pack-kogito-kie-editors" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
   "vscode-extension-pmml-editor" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "vscode-extension-red-hat-business-automation-bundle" [ color = "blue", fontcolor = "blue", style = "rounded" ];
+  "vscode-extension-serverless-workflow-editor" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "@kie-tools-examples/base64png-editor" -> "@kie-tools-core/editor" [ style = "solid", color = "orange" ];
   "@kie-tools-examples/base64png-editor-chrome-extension" -> "@kie-tools-core/chrome-extension" [ style = "solid", color = "orange" ];
   "@kie-tools-examples/base64png-editor-chrome-extension" -> "@kie-tools-examples/base64png-editor" [ style = "solid", color = "orange" ];
@@ -145,6 +147,7 @@ digraph G {
   "@kie-tools-core/notifications" -> "@kie-tools-core/workspace" [ style = "solid", color = "purple" ];
   "@kie-tools/online-editor" -> "@kie-tools/kie-bc-editors" [ style = "solid", color = "black" ];
   "@kie-tools/online-editor" -> "@kie-tools/pmml-editor" [ style = "solid", color = "black" ];
+  "@kie-tools/online-editor" -> "@kie-tools/serverless-workflow-editor" [ style = "solid", color = "black" ];
   "@kie-tools/online-editor" -> "@kie-tools/unitables" [ style = "solid", color = "black" ];
   "@kie-tools/online-editor" -> "@kie-tools/kie-sandbox-fs" [ style = "solid", color = "black" ];
   "@kie-tools/online-editor" -> "@kie-tools/extended-services" [ style = "dashed", color = "black" ];
@@ -157,6 +160,7 @@ digraph G {
   "@kie-tools/pmml-editor" -> "@kie-tools-core/webpack-base" [ style = "dashed", color = "blue" ];
   "@kie-tools/pmml-editor-marshaller" -> "@kie-tools/build-env" [ style = "dashed", color = "blue" ];
   "@kie-tools-core/run-script-if" -> "@kie-tools/build-env" [ style = "dashed", color = "purple" ];
+  "@kie-tools/serverless-workflow-editor" -> "@kie-tools-core/editor" [ style = "solid", color = "blue" ];
   "@kie-tools/stunner-editors" -> "@kie-tools/stunner-editors-dmn-loader" [ style = "solid", color = "black" ];
   "@kie-tools/stunner-editors-dmn-loader" -> "@kie-tools/boxed-expression-component" [ style = "solid", color = "blue" ];
   "@kie-tools/stunner-editors-dmn-loader" -> "@kie-tools/import-java-classes-component" [ style = "solid", color = "blue" ];
@@ -186,6 +190,8 @@ digraph G {
   "vscode-extension-pmml-editor" -> "@kie-tools-core/vscode-extension" [ style = "solid", color = "blue" ];
   "vscode-extension-pmml-editor" -> "@kie-tools/pmml-editor" [ style = "solid", color = "blue" ];
   "vscode-extension-red-hat-business-automation-bundle" -> "@kie-tools-core/webpack-base" [ style = "dashed", color = "blue" ];
+  "vscode-extension-serverless-workflow-editor" -> "@kie-tools-core/vscode-extension" [ style = "solid", color = "blue" ];
+  "vscode-extension-serverless-workflow-editor" -> "@kie-tools/serverless-workflow-editor" [ style = "solid", color = "blue" ];
   "@kie-tools-core/vscode-java-code-completion" -> "@kie-tools/build-env" [ style = "dashed", color = "purple" ];
   "@kie-tools/vscode-java-code-completion-extension-plugin" -> "@kie-tools/build-env" [ style = "dashed", color = "blue" ];
   "@kie-tools-core/webpack-base" -> "@kie-tools/build-env" [ style = "dashed", color = "black" ];

diff --git a/packages/build-env/index.js b/packages/build-env/index.js
@@ -405,6 +405,12 @@ module.exports = {
     },
   },
 
+  serverlessWorkflowEditor: {
+    dev: {
+      port: 9007,
+    },
+  },
+
   kogitoRuntime: {
     version: getOrDefault(ENV_VARS.KOGITO_RUNTIME_version),
   },