kie-issues#1552: Test Scenario Editor: Update @kie-tools/dmn-vscode-extension to add the new Test Scenario Editor

packages/dmn-vscode-extension/README.md

@@ -22,7 +22,7 @@
 
 Create and edit DMN and SceSim files.
 
-> NOTE: This extension provides two DMN Editors. The classic one will be removed in future versions. See the details of the new DMN Editor [here](https://github.com/apache/incubator-kie-issues/issues/439).
+> NOTE: This extension provides two sets of DMN and Test Scenario Editors. The classic ones are currently the default choice, but you can switch to the new Editor based on your need. The classic editors will be removed in future versions. See the details of the new DMN Editor [here](https://github.com/apache/incubator-kie-issues/issues/439) and the new Test Scenario Editor [here](https://github.com/apache/incubator-kie-issues/issues/453).
 
 ## Features
 

packages/dmn-vscode-extension/package.json

@@ -30,7 +30,8 @@
     "@kie-tools-core/patternfly-base": "workspace:*",
     "@kie-tools-core/vscode-extension": "workspace:*",
     "@kie-tools/dmn-editor-envelope": "workspace:*",
-    "@kie-tools/kie-bc-editors": "workspace:*"
+    "@kie-tools/kie-bc-editors": "workspace:*",
+    "@kie-tools/scesim-editor-envelope": "workspace:*"
   },
   "devDependencies": {
     "@kie-tools-core/webpack-base": "workspace:*",
@@ -106,7 +107,7 @@
     },
     "customEditors": [
       {
-        "displayName": "KIE DMN/SceSim Editors (classic)",
+        "displayName": "KIE DMN/Test Scenario Editors (classic)",
         "selector": [
           {
             "filenamePattern": "*.{dmn,scesim}"
@@ -115,10 +116,10 @@
         "viewType": "kieKogitoWebviewEditorsDmn"
       },
       {
-        "displayName": "KIE DMN Editor",
+        "displayName": "KIE DMN/Test Scenario Editors",
         "selector": [
           {
-            "filenamePattern": "*.dmn"
+            "filenamePattern": "*.{dmn,scesim}"
           }
         ],
         "viewType": "kieToolsDmnEditor"

packages/dmn-vscode-extension/src/extension/extension.ts

@@ -59,6 +59,12 @@ export function activate(context: vscode.ExtensionContext) {
         resourcesPathPrefix: "",
         envelopeContent: { type: EnvelopeContentType.PATH, path: "dist/webview/NewDmnEditorEnvelopeApp.js" },
       }),
+      new EnvelopeMapping({
+        type: "scesim",
+        filePathGlob: "**/*.scesim",
+        resourcesPathPrefix: "",
+        envelopeContent: { type: EnvelopeContentType.PATH, path: "dist/webview/NewTestScenarioEditorEnvelopeApp.js" },
+      }),
     ]),
   });
 

packages/scesim-editor/stories/dev/DevWebApp.css → packages/dmn-vscode-extension/src/webview/NewTestScenarioEditorEnvelopeApp.ts

@@ -17,9 +17,13 @@
  * under the License.
  */
 
-.section-body {
-  --pf-c-page__main-section--PaddingTop: 0px;
-  --pf-c-page__main-section--PaddingRight: 0px;
-  --pf-c-page__main-section--PaddingBottom: 0px;
-  --pf-c-page__main-section--PaddingLeft: 0px;
-}
+import * as EditorEnvelope from "@kie-tools-core/editor/dist/envelope";
+import { TestScenarioEditorFactory } from "@kie-tools/scesim-editor-envelope/dist/TestScenarioEditorFactory";
+
+declare const acquireVsCodeApi: any;
+
+EditorEnvelope.init({
+  container: document.getElementById("envelope-app")!,
+  bus: acquireVsCodeApi(),
+  editorFactory: new TestScenarioEditorFactory(),
+});

packages/dmn-vscode-extension/webpack.config.js

@@ -69,6 +69,7 @@ module.exports = async (webpackEnv) => [
       "webview/DmnEditorEnvelopeApp": "./src/webview/DmnEditorEnvelopeApp.ts",
       "webview/SceSimEditorEnvelopeApp": "./src/webview/SceSimEditorEnvelopeApp.ts",
       "webview/NewDmnEditorEnvelopeApp": "./src/webview/NewDmnEditorEnvelopeApp.ts",
+      "webview/NewTestScenarioEditorEnvelopeApp": "./src/webview/NewTestScenarioEditorEnvelopeApp.ts",
     },
     module: {
       rules: [...patternflyBase.webpackModuleRules],

packages/scesim-editor-envelope/src/TestScenarioEditorRoot.tsx

@@ -114,7 +114,7 @@ export class TestScenarioEditorRoot extends React.Component<TestScenarioEditorRo
     openFilenormalizedPosixPathRelativeToTheWorkspaceRoot: string,
     content: string
   ): Promise<void> {
-    const marshaller = this.getMarshaller(content || EMPTY_ONE_EIGHT);
+    const marshaller = this.getMarshaller(content);
 
     // Save stack
     let savedStackPointer: SceSimModel[] = [];
@@ -411,7 +411,7 @@ function ExternalModelsManager({
   useEffect(() => {
     let canceled = false;
 
-    if (!thisScesimNormalizedPosixPathRelativeToTheWorkspaceRoot || !targetNamespace) {
+    if (!thisScesimNormalizedPosixPathRelativeToTheWorkspaceRoot) {
       return;
     }
 
@@ -455,7 +455,7 @@ function ExternalModelsManager({
           const ext = __path.extname(resource.normalizedPosixPathRelativeToTheWorkspaceRoot);
           if (ext === ".dmn") {
             const namespace = domParser.getDomDocument(content).documentElement.getAttribute("namespace");
-            if (namespace === targetNamespace) {
+            if (targetNamespace && namespace === targetNamespace) {
               // Check for multiplicity of namespaces on DMN models
               if (externalModelsIndex[namespace]) {
                 console.warn(

packages/scesim-editor/.storybook/preview.tsx

@@ -44,7 +44,11 @@ const preview: Preview = {
   },
 
   // It should be Story() to be possible to use "preview-api" inside stories; (https://github.com/storybookjs/storybook/issues/22132)
-  decorators: [(Story) => <div data-testid="test-scenario-editor">{Story()}</div>],
+  decorators: [
+    (Story) => (
+      <div style={{ position: "absolute", width: "100vw", height: "100vh", top: "0px", left: "0px" }}>{Story()}</div>
+    ),
+  ],
 };
 
 export default preview;

packages/scesim-editor/package.json

@@ -5,9 +5,10 @@
   "license": "Apache-2.0",
   "keywords": [],
   "scripts": {
-    "build:dev": "rimraf dist && tsc -p tsconfig.json",
-    "build:prod": "rimraf dist && pnpm lint && tsc -p tsconfig.json && pnpm test-e2e",
+    "build:dev": "rimraf dist && pnpm copy:css && tsc -p tsconfig.json",
+    "build:prod": "rimraf dist && pnpm copy:css && pnpm lint && tsc -p tsconfig.json && pnpm test-e2e",
     "build:storybook": "rimraf dist-storybook && NODE_ENV=development storybook build -o dist-storybook",
+    "copy:css": "copyfiles -u 1 \"src/**/*.{sass,scss,css}\" dist/",
     "lint": "run-script-if --bool \"$(build-env linters.run)\" --then \"kie-tools--eslint ./src\"",
     "powershell": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command",
     "start": "run-script-os",
@@ -59,6 +60,7 @@
     "@types/react-table": "^7.0.25",
     "@types/uuid": "^8.3.0",
     "copy-webpack-plugin": "^11.0.0",
+    "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "deep-object-diff": "^1.1.9",
     "file-loader": "^6.2.0",

packages/scesim-editor/src/TestScenarioEditor.css

@@ -18,31 +18,32 @@
  */
 
 .kie-scesim-editor--background-table-container {
-  overflow-x: auto;
+  overflow: auto;
 }
 
 .kie-scesim-editor--content {
-  padding-right: 50px;
-  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin-right: 50px;
 }
 
 .kie-scesim-editor--content-alert {
   padding: 15px;
 }
 
 .kie-scesim-editor--content-tabs {
-  padding-top: 15px;
+  height: 100%;
+  padding-top: 10px;
   padding-left: 15px;
 }
 
 .kie-scesim-editor--creation-form {
   margin-top: 50px;
 }
 
-.kie-scesim-editor--grid-container {
-  height: 100%;
-}
-
 .kie-scesim-editor--scenario-table-container {
-  overflow-x: auto;
+  overflow: auto;
 }

packages/scesim-editor/src/TestScenarioEditor.tsx

@@ -39,6 +39,7 @@ import { EmptyState, EmptyStateBody, EmptyStateIcon } from "@patternfly/react-co
 import { Icon } from "@patternfly/react-core/dist/js/components/Icon";
 import { Spinner } from "@patternfly/react-core/dist/js/components/Spinner";
 import { Tabs, Tab, TabTitleIcon, TabTitleText } from "@patternfly/react-core/dist/js/components/Tabs";
+
 import { Title } from "@patternfly/react-core/dist/js/components/Title";
 import { Tooltip } from "@patternfly/react-core/dist/js/components/Tooltip";
 
@@ -395,7 +396,7 @@ export const TestScenarioEditorInternal = ({
   console.trace("[TestScenarioEditorInternal] File Status: " + TestScenarioFileStatus[scesimFileStatus]);
 
   return (
-    <div ref={testScenarioEditorRootElementRef}>
+    <div ref={testScenarioEditorRootElementRef} data-testid="kie-scesim-editor--container">
       {(() => {
         switch (scesimFileStatus) {
           case TestScenarioFileStatus.EMPTY:

packages/scesim-editor/src/creation/TestScenarioCreationPanel.tsx

@@ -68,7 +68,7 @@ function TestScenarioCreationPanel() {
         const settings = state.scesim.model.ScenarioSimulationModel.settings;
         settings.dmnFilePath = assetType === "DMN" ? { __$$text: "./MockedDMNName.dmn" } : undefined;
         settings.dmnName = assetType === "DMN" ? { __$$text: "MockedDMNName.dmn" } : undefined;
-        settings.dmnNamespace = assetType === "DMN" ? { __$$text: "https:\\kiegroup" } : undefined;
+        settings.dmnNamespace = assetType === "DMN" ? { __$$text: "https:\\kie" } : undefined;
         settings.dmoSession = assetType === "RULE" && kieSessionRule ? { __$$text: kieSessionRule } : undefined;
         settings.ruleFlowGroup = assetType === "RULE" && ruleFlowGroup ? { __$$text: ruleFlowGroup } : undefined;
         settings.skipFromBuild = { __$$text: isTestSkipped };

packages/scesim-editor/src/drawer/TestScenarioDrawerDataSelectorPanel.css

@@ -31,12 +31,10 @@
 }
 
 .kie-scesim-editor-drawer-data-objects--selector {
-  height: 500px;
   overflow: scroll;
 }
 
 .kie-scesim-editor-drawer-data-objects--selector-disabled {
-  height: 500px;
   overflow: scroll;
   opacity: 0.25;
   pointer-events: none;