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

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-tools--scesim-editor--container">
       {(() => {
         switch (scesimFileStatus) {
           case TestScenarioFileStatus.EMPTY:

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;

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

@@ -27,6 +27,7 @@ import { Divider } from "@patternfly/react-core/dist/js/components/Divider/";
 import { EmptyState, EmptyStateBody, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState";
 import { HelpIcon } from "@patternfly/react-icons/dist/esm/icons/help-icon";
 import { Icon } from "@patternfly/react-core/dist/js/components/Icon";
+import { Stack, StackItem } from "@patternfly/react-core/dist/js/layouts/Stack";
 import { Text } from "@patternfly/react-core/dist/js/components/Text";
 import { Title } from "@patternfly/react-core/dist/js/components/Title";
 import { Toolbar, ToolbarContent, ToolbarItem } from "@patternfly/react-core/dist/js/components/Toolbar/";
@@ -477,87 +478,93 @@ function TestScenarioDataSelectorPanel() {
   );
 
   return (
-    <>
-      <Text className="kie-scesim-editor-drawer-data-objects--text">
-        {testScenarioType === "DMN"
-          ? i18n.drawer.dataSelector.descriptionDMN
-          : i18n.drawer.dataSelector.descriptionRule}
-        <Tooltip
-          content={
-            testScenarioType === "DMN"
-              ? i18n.drawer.dataSelector.dataObjectsDescriptionDMN
-              : i18n.drawer.dataSelector.dataObjectsDescriptionRule
-          }
-        >
-          <Icon className={"kie-scesim-editor-drawer-data-objects--info-icon"} size="sm" status="info">
-            <HelpIcon />
-          </Icon>
-        </Tooltip>
-      </Text>
+    <Stack>
+      <StackItem>
+        <Text className="kie-scesim-editor-drawer-data-objects--text">
+          {testScenarioType === "DMN"
+            ? i18n.drawer.dataSelector.descriptionDMN
+            : i18n.drawer.dataSelector.descriptionRule}
+          <Tooltip
+            content={
+              testScenarioType === "DMN"
+                ? i18n.drawer.dataSelector.dataObjectsDescriptionDMN
+                : i18n.drawer.dataSelector.dataObjectsDescriptionRule
+            }
+          >
+            <Icon className={"kie-scesim-editor-drawer-data-objects--info-icon"} size="sm" status="info">
+              <HelpIcon />
+            </Icon>
+          </Tooltip>
+        </Text>
+      </StackItem>
       <Divider />
-      <div className={"kie-scesim-editor-drawer-data-objects--selector"}>
-        {treeViewEmptyStatus.enabled ? (
-          <div aria-disabled={true}>
-            <TreeView
-              activeItems={treeViewStatus.activeItems}
-              allExpanded={allExpanded || treeViewStatus.isExpanded}
-              className={
-                dataSelectorStatus !== TestScenarioDataSelectorState.DISABLED
-                  ? undefined
-                  : "kie-scesim-editor-drawer-data-objects--selector-disabled"
-              }
-              data={filteredItems}
-              hasBadges
-              hasSelectableNodes
-              onSelect={onSelectTreeViewItem}
-              toolbar={treeViewSearchToolbar}
-            />
-          </div>
-        ) : (
-          <Bullseye>
-            <EmptyState>
-              <EmptyStateIcon icon={treeViewEmptyStatus.icon} />
-              <Title headingLevel="h4" size="lg">
-                {treeViewEmptyStatus.title}
-              </Title>
-              <EmptyStateBody>{treeViewEmptyStatus.description}</EmptyStateBody>
-            </EmptyState>
-          </Bullseye>
-        )}
-      </div>
+      <StackItem isFilled>
+        <div className={"kie-scesim-editor-drawer-data-objects--selector"}>
+          {treeViewEmptyStatus.enabled ? (
+            <div aria-disabled={true}>
+              <TreeView
+                activeItems={treeViewStatus.activeItems}
+                allExpanded={allExpanded || treeViewStatus.isExpanded}
+                className={
+                  dataSelectorStatus !== TestScenarioDataSelectorState.DISABLED
+                    ? undefined
+                    : "kie-scesim-editor-drawer-data-objects--selector-disabled"
+                }
+                data={filteredItems}
+                hasBadges
+                hasSelectableNodes
+                onSelect={onSelectTreeViewItem}
+                toolbar={treeViewSearchToolbar}
+              />
+            </div>
+          ) : (
+            <Bullseye>
+              <EmptyState>
+                <EmptyStateIcon icon={treeViewEmptyStatus.icon} />
+                <Title headingLevel="h4" size="lg">
+                  {treeViewEmptyStatus.title}
+                </Title>
+                <EmptyStateBody>{treeViewEmptyStatus.description}</EmptyStateBody>
+              </EmptyState>
+            </Bullseye>
+          )}
+        </div>
+      </StackItem>
       <Divider />
-      <div className={"kie-scesim-editor-drawer-data-objects--button-container"}>
-        <Tooltip content={insertDataObjectButtonStatus.message}>
+      <StackItem>
+        <div className={"kie-scesim-editor-drawer-data-objects--button-container"}>
+          <Tooltip content={insertDataObjectButtonStatus.message}>
+            <Button
+              isAriaDisabled={!insertDataObjectButtonStatus.enabled}
+              onClick={onInsertDataObjectClick}
+              variant="primary"
+            >
+              {i18n.drawer.dataSelector.insertDataObject}
+            </Button>
+          </Tooltip>
           <Button
-            isAriaDisabled={!insertDataObjectButtonStatus.enabled}
-            onClick={onInsertDataObjectClick}
-            variant="primary"
+            isDisabled={
+              treeViewStatus.activeItems.length !== 1 || dataSelectorStatus !== TestScenarioDataSelectorState.ENABLED
+            }
+            onClick={onClearSelectionClicked}
+            variant="secondary"
           >
-            {i18n.drawer.dataSelector.insertDataObject}
+            {i18n.drawer.dataSelector.clearSelection}
           </Button>
-        </Tooltip>
-        <Button
-          isDisabled={
-            treeViewStatus.activeItems.length !== 1 || dataSelectorStatus !== TestScenarioDataSelectorState.ENABLED
-          }
-          onClick={onClearSelectionClicked}
-          variant="secondary"
-        >
-          {i18n.drawer.dataSelector.clearSelection}
-        </Button>
-        <Button
-          isDisabled={
-            filteredItems.length < 1 ||
-            treeViewStatus.isExpanded ||
-            dataSelectorStatus !== TestScenarioDataSelectorState.ENABLED
-          }
-          onClick={onAllExpandedToggle}
-          variant="link"
-        >
-          {allExpanded ? i18n.drawer.dataSelector.collapseAll : i18n.drawer.dataSelector.expandAll}
-        </Button>
-      </div>
-    </>
+          <Button
+            isDisabled={
+              filteredItems.length < 1 ||
+              treeViewStatus.isExpanded ||
+              dataSelectorStatus !== TestScenarioDataSelectorState.ENABLED
+            }
+            onClick={onAllExpandedToggle}
+            variant="link"
+          >
+            {allExpanded ? i18n.drawer.dataSelector.collapseAll : i18n.drawer.dataSelector.expandAll}
+          </Button>
+        </div>
+      </StackItem>
+    </Stack>
   );
 }