KOGITO-9196 : YaRD editor: Create yard-validation project with model

parser KOGITO-9197 : YaRD editor: Use old dtable validation codes for subsumption KOGITO-9517 : YaRD editor: Use J2CL to generate a JS module Suggestions (cherry picked from commit 751bb8f)
apache · Nov 13, 2023 · cb5da4c · cb5da4c
1 parent a34d0b5
commit cb5da4c
Show file tree

Hide file tree

Showing 75 changed files with 3,923 additions and 196 deletions.
diff --git a/packages/serverless-logic-web-tools/package.json b/packages/serverless-logic-web-tools/package.json
@@ -54,6 +54,7 @@
     "@kie-tools/text-editor": "workspace:*",
     "@kie-tools/yard-editor": "workspace:*",
     "@kie-tools/yard-language-service": "workspace:*",
+    "@kie-tools/yard-validator": "workspace:*",
     "@octokit/plugin-rest-endpoint-methods": "^5.0.1",
     "@octokit/rest": "^18.5.3",
     "@patternfly/patternfly": "^4.224.2",

diff --git a/packages/serverless-logic-web-tools/src/editor/EditorPage.tsx b/packages/serverless-logic-web-tools/src/editor/EditorPage.tsx
@@ -71,7 +71,7 @@ export function EditorPage(props: Props) {
   const queryParams = useQueryParams();
   const alertsDispatch = useGlobalAlertsDispatchContext();
 
-  const notifications = useEditorNotifications({
+  const { notifications, onLazyValidate } = useEditorNotifications({
     webToolsEditor,
     content: lastContent.current,
     fileRelativePath: props.fileRelativePath,
@@ -234,7 +234,11 @@ export function EditorPage(props: Props) {
       resolved={(file) => (
         <>
           <Page>
-            <EditorToolbar workspaceFile={file.workspaceFile} editor={webToolsEditor?.editor} />
+            <EditorToolbar
+              workspaceFile={file.workspaceFile}
+              editor={webToolsEditor?.editor}
+              onValidate={onLazyValidate}
+            />
             <Divider />
             <EditorPageDockDrawer
               ref={editorPageDockRef}

diff --git a/packages/serverless-logic-web-tools/src/editor/EditorToolbar.tsx b/packages/serverless-logic-web-tools/src/editor/EditorToolbar.tsx
@@ -43,6 +43,7 @@ import {
 import { Tooltip } from "@patternfly/react-core/dist/js/components/Tooltip";
 import { Flex, FlexItem } from "@patternfly/react-core/dist/js/layouts/Flex";
 import { AngleLeftIcon } from "@patternfly/react-icons/dist/js/icons/angle-left-icon";
+import { PlayIcon } from "@patternfly/react-icons/dist/js/icons/play-icon";
 import { ArrowCircleUpIcon } from "@patternfly/react-icons/dist/js/icons/arrow-circle-up-icon";
 import { CaretDownIcon } from "@patternfly/react-icons/dist/js/icons/caret-down-icon";
 import { OutlinedHddIcon } from "@patternfly/react-icons/dist/js/icons/outlined-hdd-icon";
@@ -104,6 +105,7 @@ import { ConfirmDeleteModal } from "../table";
 export interface Props {
   editor: EmbeddedEditorRef | undefined;
   workspaceFile: WorkspaceFile;
+  onValidate: () => void;
 }
 
 const showWhenSmall: ToolbarItemProps["visibility"] = {
@@ -938,6 +940,24 @@ If you are, it means that creating this Gist failed and it can safely be deleted
     );
   }, [workspaces, props.workspaceFile, githubAuthInfo, comittingAlert, commitSuccessAlert]);
 
+  const validateDropdownItem = useMemo(() => {
+    return isOfKind("yard", props.workspaceFile.name)
+      ? [
+          <DropdownItem
+            key={"validate-dropdown-item"}
+            icon={<PlayIcon />}
+            onClick={async () => {
+              props.onValidate();
+            }}
+            description={"Run model validation"}
+            ouiaId={"commit-button"}
+          >
+            Validate
+          </DropdownItem>,
+        ]
+      : [];
+  }, [props]);
+
   const pushSuccessAlert = useGlobalAlert(
     useCallback(
       ({ close }) => {
@@ -1724,7 +1744,12 @@ If you are, it means that creating this Gist failed and it can safely be deleted
                       <KebabDropdown
                         id={"kebab-lg"}
                         state={[isLargeKebabOpen, setLargeKebabOpen]}
-                        items={[deleteFileDropdownItem, <Divider key={"divider-0"} />, createSavePointDropdownItem]}
+                        items={[
+                          deleteFileDropdownItem,
+                          <Divider key={"divider-0"} />,
+                          createSavePointDropdownItem,
+                          ...validateDropdownItem,
+                        ]}
                       />
                     </ToolbarItem>
                     <ToolbarItem visibility={showWhenSmall} style={{ marginRight: 0 }}>
@@ -1735,6 +1760,7 @@ If you are, it means that creating this Gist failed and it can safely be deleted
                           deleteFileDropdownItem,
                           <Divider key={"divider-0"} />,
                           createSavePointDropdownItem,
+                          ...validateDropdownItem,
                           <Divider key={"divider-1"} />,
                           ...shareDropdownItems,
                           ...(!canBeDeployed

diff --git a/packages/serverless-logic-web-tools/src/editor/hooks/useEditorNotifications.tsx b/packages/serverless-logic-web-tools/src/editor/hooks/useEditorNotifications.tsx
@@ -33,12 +33,20 @@ interface HookArgs {
 export function useEditorNotifications(args: HookArgs) {
   const { webToolsEditor, content, fileRelativePath } = { ...args };
   const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [lazyNotifications, setLazyNotifications] = useState<Notification[]>([]);
   const editorDispatch = useEditorDispatch();
 
   useEffect(() => {
     editorDispatch.setNotifications(notifications);
   }, [editorDispatch, notifications]);
 
+  const onLazyValidate = useCallback(async () => {
+    if (!webToolsEditor?.editor) {
+      return;
+    }
+    setLazyNotifications(await webToolsEditor.editor.validate());
+  }, [webToolsEditor]);
+
   useCancelableEffect(
     useCallback(
       ({ canceled }) => {
@@ -70,13 +78,13 @@ export function useEditorNotifications(args: HookArgs) {
                   },
                 } as Notification)
             );
-            setNotifications(mappedDiagnostics);
+            setNotifications([...mappedDiagnostics, ...lazyNotifications]);
           })
           .catch((e) => console.error(e));
       },
-      [content, fileRelativePath, webToolsEditor]
+      [content, fileRelativePath, webToolsEditor, lazyNotifications]
     )
   );
 
-  return notifications;
+  return { notifications, onLazyValidate };
 }
diff --git a/packages/serverless-logic-web-tools/webpack.config.ts b/packages/serverless-logic-web-tools/webpack.config.ts
@@ -149,6 +149,10 @@ export default async (env: any, argv: any) => {
                 to: "./dashbuilder-client",
                 globOptions: { ignore: ["**/WEB-INF/**/*"] }, // "**/*.html" omitted because dashbuilder-client/index.html is needed
               },
+              {
+                from: path.resolve(__dirname, "node_modules/@kie-tools/yard-validator/dist/yard-validator-worker.js"),
+                to: "./yard-validator-worker.js",
+              },
             ],
           }),
           new ProvidePlugin({

diff --git a/packages/yard-editor/dev-webapp/webpack.config.js b/packages/yard-editor/dev-webapp/webpack.config.js
@@ -46,6 +46,10 @@ module.exports = (env) =>
             from: path.resolve(__dirname, "./static/envelope/yard-editor-envelope.html"),
             to: "./yard-editor-envelope.html",
           },
+          {
+            from: path.resolve(__dirname, "../node_modules/@kie-tools/yard-validator/dist/yard-validator-worker.js"),
+            to: "./yard-validator-worker.js",
+          },
         ],
       }),
       new MonacoWebpackPlugin({

diff --git a/packages/yard-editor/package.json b/packages/yard-editor/package.json
@@ -38,6 +38,7 @@
     "@kie-tools-core/workspace": "workspace:*",
     "@kie-tools/i18n-common-dictionary": "workspace:*",
     "@kie-tools/yard-language-service": "workspace:*",
+    "@kie-tools/yard-validator": "workspace:*",
     "@patternfly/react-core": "^4.276.6",
     "@patternfly/react-icons": "^4.93.6",
     "@types/js-yaml": "^4.0.5",

diff --git a/packages/yard-editor/src/editor/YardEditorView.tsx b/packages/yard-editor/src/editor/YardEditorView.tsx
@@ -22,13 +22,15 @@ import * as React from "react";
 import { YardEditor } from "./YardEditor";
 import { YardEditorApi, YardEditorChannelApi } from "../api";
 import { Position } from "monaco-editor";
+import { validationPromise } from "@kie-tools/yard-validator/dist/";
 
 export class YardEditorView implements Editor {
   private readonly editorRef: React.RefObject<YardEditorApi>;
   private readonly initArgs: EditorInitArgs;
   public af_isReact = true;
   public af_componentId: "yard-editor";
   public af_componentTitle: "Yard Editor";
+  private path: string;
 
   constructor(
     private readonly envelopeContext: KogitoEditorEnvelopeContextType<YardEditorChannelApi>,
@@ -37,8 +39,8 @@ export class YardEditorView implements Editor {
     this.editorRef = React.createRef<YardEditorApi>();
     this.initArgs = initArgs;
   }
-
   public setContent(path: string, content: string): Promise<void> {
+    this.path = path;
     return this.editorRef.current!.setContent(path, content);
   }
 
@@ -74,7 +76,22 @@ export class YardEditorView implements Editor {
   }
 
   public async validate(): Promise<Notification[]> {
-    return this.editorRef.current!.validate();
+    let result: Notification[] = [];
+    return this.editorRef
+      .current!.getContent()
+      .then((value) => {
+        return validationPromise(value);
+      })
+      .then((value) => {
+        result = result.concat(value);
+        return this.editorRef.current!.validate();
+      })
+      .then((value) => {
+        result = result.concat(value);
+        return new Promise<Notification[]>((resolve) => {
+          resolve(result);
+        });
+      });
   }
 
   public async setTheme(theme: EditorTheme) {