kie-issues#1060: Create Sonataflow management console webapp

.gitignore

@@ -56,6 +56,9 @@ package-lock.json
 ## runtime-tools-management-console-webapp
 !packages/runtime-tools-management-console-webapp/build
 
+## sonataflow-management-console-webapp
+!packages/sonataflow-management-console-webapp/build
+
 ## vscode-*
 **/.vscode-test/
 **/.vscode-test-web/

packages/runtime-tools-swf-enveloped-components/src/__tests__/components/validateCloudEventRequest.test.ts

@@ -31,6 +31,7 @@ describe("validateCloudEventRequest tests", () => {
         source: "any",
         extensions: {},
       },
+      serviceUrl: "http://localhost:8090/",
     });
 
     expect(validation.isValid()).toBeTruthy();
@@ -46,6 +47,7 @@ describe("validateCloudEventRequest tests", () => {
         source: "any",
         extensions: {},
       },
+      serviceUrl: "http://localhost:8090/",
     });
 
     expect(validation.isValid()).toBeFalsy();
@@ -64,6 +66,7 @@ describe("validateCloudEventRequest tests", () => {
         source: "any",
         extensions: {},
       },
+      serviceUrl: "http://localhost:8090/",
     });
 
     expect(validation.isValid()).toBeFalsy();
@@ -82,6 +85,7 @@ describe("validateCloudEventRequest tests", () => {
         source: "any",
         extensions: {},
       },
+      serviceUrl: "http://localhost:8090/",
     };
 
     let validation = validateCloudEventRequest(eventRequest);

packages/runtime-tools-swf-enveloped-components/src/cloudEventForm/api/CloudEventFormEnvelopeApi.ts

@@ -34,4 +34,5 @@ export type CloudEventFormDefaultValues = {
 export type CloudEventFormInitArgs = {
   isNewInstanceEvent: boolean;
   defaultValues?: CloudEventFormDefaultValues;
+  serviceUrl: string;
 };

packages/runtime-tools-swf-enveloped-components/src/cloudEventForm/embedded/EmbeddedCloudEventForm.tsx

@@ -32,7 +32,9 @@ export interface EmbeddedCloudEventFormProps {
   defaultValues?: {
     cloudEventSource?: string;
     instanceId?: string;
+    definitionName?: string;
   };
+  serviceUrl: string;
 }
 
 export const EmbeddedCloudEventForm = React.forwardRef(
@@ -66,6 +68,7 @@ export const EmbeddedCloudEventForm = React.forwardRef(
           {
             isNewInstanceEvent: props.isNewInstanceEvent ?? true,
             defaultValues: props.defaultValues,
+            serviceUrl: props.serviceUrl,
           }
         );
       },

packages/runtime-tools-swf-enveloped-components/src/cloudEventForm/envelope/CloudEventFormEnvelopeView.tsx

@@ -41,6 +41,7 @@ export const CloudEventFormEnvelopeView = React.forwardRef<CloudEventFormEnvelop
     const [isEnvelopeConnectedToChannel, setEnvelopeConnectedToChannel] = useState<boolean>(false);
     const [isNewInstanceEvent, setIsNewInstanceEvent] = useState<boolean>(false);
     const [defaultValues, setDefaultValues] = useState<CloudEventFormDefaultValues>();
+    const [serviceUrl, setServiceUrl] = useState<string>("");
 
     useImperativeHandle(
       forwardedRef,
@@ -49,6 +50,7 @@ export const CloudEventFormEnvelopeView = React.forwardRef<CloudEventFormEnvelop
           setEnvelopeConnectedToChannel(true);
           setIsNewInstanceEvent(args.isNewInstanceEvent);
           setDefaultValues(args.defaultValues);
+          setServiceUrl(args.serviceUrl);
         },
       }),
       []
@@ -78,7 +80,12 @@ export const CloudEventFormEnvelopeView = React.forwardRef<CloudEventFormEnvelop
     return (
       <Card>
         <CardBody>
-          <CloudEventForm driver={driver} isNewInstanceEvent={isNewInstanceEvent} defaultValues={defaultValues} />
+          <CloudEventForm
+            driver={driver}
+            serviceUrl={serviceUrl}
+            isNewInstanceEvent={isNewInstanceEvent}
+            defaultValues={defaultValues}
+          />
         </CardBody>
       </Card>
     );

packages/runtime-tools-swf-enveloped-components/src/cloudEventForm/envelope/components/CloudEventForm/CloudEventForm.tsx

@@ -47,12 +47,14 @@ import {
 
 export interface CloudEventFormProps {
   driver: CloudEventFormDriver;
+  serviceUrl: string;
   isNewInstanceEvent?: boolean;
   defaultValues?: CloudEventFormDefaultValues;
 }
 
 export const CloudEventForm: React.FC<CloudEventFormProps & OUIAProps> = ({
   driver,
+  serviceUrl,
   isNewInstanceEvent,
   defaultValues,
   ouiaId,
@@ -124,6 +126,7 @@ export const CloudEventForm: React.FC<CloudEventFormProps & OUIAProps> = ({
         source: eventSource,
         extensions,
       },
+      serviceUrl: serviceUrl,
     };
 
     const validations = validateCloudEventRequest(eventRequest);

packages/runtime-tools-swf-enveloped-components/src/workflowDefinitions/api/WorkflowDefinitionListChannelApi.ts

@@ -27,5 +27,5 @@ export interface WorkflowDefinitionListChannelApi {
   workflowDefinitionList__setWorkflowDefinitionFilter(filter: string[]): Promise<void>;
   workflowDefinitionList__getWorkflowDefinitionFilter(): Promise<string[]>;
   workflowDefinitionList__openWorkflowForm(workflowDefinition: WorkflowDefinition): Promise<void>;
-  workflowDefinitionsList__openTriggerCloudEvent(): void;
+  workflowDefinitionsList__openTriggerCloudEvent(workflowDefinition: WorkflowDefinition): Promise<void>;
 }

packages/runtime-tools-swf-enveloped-components/src/workflowDefinitions/api/WorkflowDefinitionListDriver.ts

@@ -27,5 +27,5 @@ export interface WorkflowDefinitionListDriver {
   setWorkflowDefinitionFilter(filter: string[]): Promise<void>;
   getWorkflowDefinitionFilter(): Promise<string[]>;
   openWorkflowForm(workflowDefinition: WorkflowDefinition): Promise<void>;
-  openTriggerCloudEvent(): void;
+  openTriggerCloudEvent(workflowDefinition: WorkflowDefinition): Promise<void>;
 }

packages/runtime-tools-swf-enveloped-components/src/workflowDefinitions/embedded/WorkflowDefinitionListChannelApiImpl.ts

@@ -40,7 +40,7 @@ export class WorkflowDefinitionListChannelApiImpl implements WorkflowDefinitionL
     return this.driver.getWorkflowDefinitionsQuery();
   }
 
-  workflowDefinitionsList__openTriggerCloudEvent(): void {
-    this.driver.openTriggerCloudEvent();
+  workflowDefinitionsList__openTriggerCloudEvent(workflowDefinition: WorkflowDefinition): Promise<void> {
+    return this.driver.openTriggerCloudEvent(workflowDefinition);
   }
 }

packages/runtime-tools-swf-enveloped-components/src/workflowDefinitions/envelope/WorkflowDefinitionListEnvelopeViewDriver.ts

@@ -40,7 +40,7 @@ export default class WorkflowDefinitionListEnvelopeViewDriver implements Workflo
     return this.channelApi.requests.workflowDefinitionList__getWorkflowDefinitionsQuery();
   }
 
-  openTriggerCloudEvent(): void {
-    this.channelApi.notifications.workflowDefinitionsList__openTriggerCloudEvent.send();
+  openTriggerCloudEvent(workflowDefinition: WorkflowDefinition): Promise<void> {
+    return this.channelApi.requests.workflowDefinitionsList__openTriggerCloudEvent(workflowDefinition);
   }
 }

packages/runtime-tools-swf-enveloped-components/src/workflowDefinitions/envelope/components/WorkflowDefinitionList/WorkflowDefinitionList.tsx

@@ -70,19 +70,20 @@ const WorkflowDefinitionList: React.FC<WorkflowDefinitionListProps & OUIAProps>
   const columns: DataTableColumn[] = [
     getColumn("workflowName", `Workflow Name`),
     getColumn("endpoint", "Endpoint"),
-    getActionColumn((workflowDefinition) => {
-      driver.openWorkflowForm(workflowDefinition);
-    }),
+    getActionColumn(
+      (workflowDefinition) => {
+        driver.openWorkflowForm(workflowDefinition);
+      },
+      (workflowDefinition) => {
+        driver.openTriggerCloudEvent(workflowDefinition);
+      }
+    ),
   ];
 
   const applyFilter = async (): Promise<void> => {
     await driver.setWorkflowDefinitionFilter(filterWorkflowNames);
   };
 
-  const onOpenTriggerCloudEvent = useCallback(() => {
-    driver.openTriggerCloudEvent();
-  }, []);
-
   const filterWorkflowDefinition = (): WorkflowDefinition[] => {
     if (filterWorkflowNames.length === 0) {
       return workflowDefinitionList;

packages/runtime-tools-swf-enveloped-components/src/workflowDefinitions/envelope/components/utils/WorkflowDefinitionListUtils.tsx

@@ -20,9 +20,11 @@
 import React from "react";
 import { DataTableColumn } from "@kie-tools/runtime-tools-components/dist/components/DataTable";
 import { PlayIcon } from "@patternfly/react-icons/dist/js/icons/play-icon";
+import { SitemapIcon } from "@patternfly/react-icons/dist/js/icons/sitemap-icon";
 import { Tooltip } from "@patternfly/react-core/dist/js/components/Tooltip";
 import { Button } from "@patternfly/react-core/dist/js/components/Button";
 import { WorkflowDefinition } from "@kie-tools/runtime-tools-swf-gateway-api/dist/types";
+
 export const getColumn = (columnPath: string, columnLabel: string): DataTableColumn => {
   return {
     label: columnLabel,
@@ -31,16 +33,26 @@ export const getColumn = (columnPath: string, columnLabel: string): DataTableCol
   };
 };
 
-export const getActionColumn = (startWorkflow: (workflowDefinition: WorkflowDefinition) => void): DataTableColumn => {
+export const getActionColumn = (
+  startWorkflow: (workflowDefinition: WorkflowDefinition) => void,
+  triggerCloudEvent: (workflowDefinition: WorkflowDefinition) => void
+): DataTableColumn => {
   return {
     label: "Actions",
     path: "actions",
     bodyCellTransformer: (value: any, rowData: WorkflowDefinition) => (
-      <Tooltip content={`Start new workflow`}>
-        <Button onClick={() => startWorkflow(rowData)} variant="link">
-          <PlayIcon />
-        </Button>
-      </Tooltip>
+      <>
+        <Tooltip content={`Start new workflow`}>
+          <Button onClick={() => startWorkflow(rowData)} variant="link">
+            <PlayIcon />
+          </Button>
+        </Tooltip>
+        <Tooltip content={`Trigger cloud event`}>
+          <Button onClick={() => triggerCloudEvent(rowData)} variant="link">
+            <SitemapIcon />
+          </Button>
+        </Tooltip>
+      </>
     ),
   };
 };

packages/runtime-tools-swf-gateway-api/src/__tests__/apis/apis.test.tsx

@@ -140,11 +140,11 @@ describe("swf custom form tests", () => {
   });
 });
 
-describe("triiger cloud events serction", () => {
+describe("trigger cloud events section", () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
-  it("trigger cloud event start - with businesskey", async () => {
+  it("trigger cloud event start - with business key", async () => {
     mockedAxios.request.mockResolvedValue("success");
     const event = {
       method: CloudEventMethod.POST,
@@ -157,6 +157,7 @@ describe("triiger cloud events serction", () => {
           kogitobusinesskey: "1234",
         },
       },
+      serviceUrl: "http://localhost:8090/",
     };
     const response = await triggerStartCloudEvent(event, "http://localhost:8080/");
 
@@ -167,14 +168,10 @@ describe("triiger cloud events serction", () => {
 
     expect(request.url).toBe("http://localhost:8080/endpoint");
     expect(request.method).toBe("POST");
-    expect(request.data).toHaveProperty("specversion", "1.0");
-    expect(request.data).toHaveProperty("type", "eventType");
-    expect(request.data).toHaveProperty("source", "eventSource");
-    expect(request.data).toHaveProperty(KOGITO_BUSINESS_KEY, "1234");
-    expect(request.data).toHaveProperty("data", JSON.parse(event.data));
+    expect(request).toHaveProperty("data", JSON.parse(event.data));
   });
 
-  it("trigger cloud event start - without businesskey", async () => {
+  it("trigger cloud event start - without business key", async () => {
     mockedAxios.request.mockResolvedValue("success");
     const event = {
       method: CloudEventMethod.POST,
@@ -185,6 +182,7 @@ describe("triiger cloud events serction", () => {
         source: "eventSource",
         extensions: {},
       },
+      serviceUrl: "http://localhost:8090/",
     };
     const response = await triggerStartCloudEvent(event, "http://localhost:8080/");
 
@@ -195,7 +193,7 @@ describe("triiger cloud events serction", () => {
 
     expect(request.url).toBe("http://localhost:8080/endpoint");
     expect(request.method).toBe("POST");
-    expect(request.data).toHaveProperty(KOGITO_BUSINESS_KEY, response);
+    expect(request).toHaveProperty("data", JSON.parse(event.data));
   });
 
   it("trigger cloud event - with instanceId", async () => {
@@ -211,6 +209,7 @@ describe("triiger cloud events serction", () => {
           kogitoprocrefid: "1234",
         },
       },
+      serviceUrl: "http://localhost:8090/",
     };
     const response = await triggerCloudEvent(event, "http://localhost:8080/");
 
@@ -221,8 +220,7 @@ describe("triiger cloud events serction", () => {
 
     expect(request.url).toBe("http://localhost:8080/endpoint");
     expect(request.method).toBe("POST");
-    expect(request.data).toHaveProperty(KOGITO_PROCESS_REFERENCE_ID, "1234");
-    expect(request.data).not.toHaveProperty(KOGITO_BUSINESS_KEY);
+    expect(request).toHaveProperty("data", JSON.parse(event.data));
   });
 
   it("trigger cloud event - without instanceId", async () => {
@@ -236,6 +234,7 @@ describe("triiger cloud events serction", () => {
         source: "eventSource",
         extensions: {},
       },
+      serviceUrl: "http://localhost:8090/",
     };
     const response = await triggerCloudEvent(event, "http://localhost:8080/");
 
@@ -246,8 +245,7 @@ describe("triiger cloud events serction", () => {
 
     expect(request.url).toBe("http://localhost:8080/endpoint");
     expect(request.method).toBe("POST");
-    expect(request.data).not.toHaveProperty(KOGITO_PROCESS_REFERENCE_ID);
-    expect(request.data).not.toHaveProperty(KOGITO_BUSINESS_KEY);
+    expect(request).toHaveProperty("data", JSON.parse(event.data));
   });
 
   it("trigger cloud event - using PUT", async () => {
@@ -263,6 +261,7 @@ describe("triiger cloud events serction", () => {
           kogitoprocrefid: "1234",
         },
       },
+      serviceUrl: "http://localhost:8090/",
     };
     const response = await triggerCloudEvent(event, "http://localhost:8080/");
 
@@ -273,5 +272,6 @@ describe("triiger cloud events serction", () => {
 
     expect(request.url).toBe("http://localhost:8080/endpoint");
     expect(request.method).toBe("PUT");
+    expect(request).toHaveProperty("data", JSON.parse(event.data));
   });
 });