kie-issues#1276: Reuse components and retrieve workflow definitions from data index instead of openapi.json in sonataflow-deployment-webapp

packages/sonataflow-deployment-webapp/src/App.tsx

@@ -24,6 +24,7 @@ import { OpenApiContextProvider } from "./context/OpenApiContextProvider";
 import { RoutesSwitch } from "./navigation/RoutesSwitch";
 import { DeploymentWorkflowListContextProvider } from "./runtimeTools/contexts/DeploymentWorkflowListContextProvider";
 import { DeploymentWorkflowDetailsContextProvider } from "./runtimeTools/contexts/DeploymentWorkflowDetailsContextProvider";
+import { DeploymentWorkflowDefinitionListContextProvider } from "./runtimeTools/contexts/DeploymentWorkflowDefinitionListContextProvider";
 
 export const App = () => (
   <HashRouter>
@@ -32,6 +33,7 @@ export const App = () => (
       [OpenApiContextProvider, {}],
       [DeploymentWorkflowListContextProvider, {}],
       [DeploymentWorkflowDetailsContextProvider, {}],
+      [DeploymentWorkflowDefinitionListContextProvider, {}],
       [RoutesSwitch, {}]
     )}
   </HashRouter>

packages/sonataflow-deployment-webapp/src/navigation/RoutesSwitch.tsx

@@ -26,10 +26,19 @@ import { CloudEventFormPage } from "../pages/Workflows/CloudEventFormPage";
 import { WorkflowFormPage } from "../pages/Workflows/WorkflowFormPage";
 import { routes } from "../routes";
 import { RuntimeToolsRoutesSwitch } from "./RuntimeToolsRoutesSwitch";
+import { RuntimeToolsWorkflowInstances } from "../runtimeTools/pages/RuntimeToolsWorkflowInstances";
+import { RuntimeToolsWorkflowDetails } from "../runtimeTools/pages/RuntimeToolsWorkflowDetails";
+import { RuntimeToolsWorkflowDefinitions } from "../runtimeTools/pages/RuntimeToolsWorkflowDefinitions";
 
 export function RoutesSwitch() {
   return (
     <Switch>
+      <Route path={routes.runtimeTools.workflowInstances.path({})}>
+        <RuntimeToolsWorkflowInstances />
+      </Route>
+      <Route path={routes.runtimeTools.workflowDetails.path({ workflowId: ":workflowId" })}>
+        {({ match }) => <RuntimeToolsWorkflowDetails workflowId={match!.params.workflowId!} />}
+      </Route>
       <Route path={routes.workflows.form.path({ workflowId: ":workflowId" })}>
         {({ match }) => <WorkflowFormPage workflowId={match!.params.workflowId!} />}
       </Route>
@@ -38,6 +47,7 @@ export function RoutesSwitch() {
       </Route>
       <Route path={routes.workflows.home.path({})}>
         <Workflows />
+        {/* <RuntimeToolsWorkflowDefinitions /> */}
       </Route>
       <Route path={routes.runtimeTools.home.path({})}>
         <RuntimeToolsRoutesSwitch />

packages/sonataflow-deployment-webapp/src/pages/Workflows/Workflows.tsx

@@ -36,6 +36,7 @@ import { BasePage } from "../BasePage";
 import { Link } from "react-router-dom";
 import { routes } from "../../routes";
 import { ErrorKind, ErrorPage } from "../ErrorPage";
+import { RuntimeToolsWorkflowDefinitions } from "../../runtimeTools/pages/RuntimeToolsWorkflowDefinitions";
 
 export function Workflows() {
   const openApi = useOpenApi();
@@ -46,13 +47,13 @@ export function Workflows() {
 
   return (
     <BasePage>
-      <PageSection variant={"light"}>
+      {/* <PageSection variant={"light"}>
         <TextContent>
           <Text component={TextVariants.h1}>Workflows</Text>
         </TextContent>
-      </PageSection>
-
-      <PageSection>
+      </PageSection> */}
+      <RuntimeToolsWorkflowDefinitions />
+      {/* <PageSection>
         <Toolbar>
           <ToolbarContent style={{ paddingLeft: "10px", paddingRight: "10px" }}>
             <ToolbarItem alignment={{ default: "alignLeft" }}>
@@ -123,7 +124,7 @@ export function Workflows() {
             />
           </Tbody>
         </Table>
-      </PageSection>
+      </PageSection> */}
     </BasePage>
   );
 }

packages/sonataflow-deployment-webapp/src/routes/index.ts

@@ -30,6 +30,7 @@ export enum QueryParams {
 
 export enum PathParams {
   WORKFLOW_ID = "workflowId",
+  WORKFLOW_NAME = "workflowName",
 }
 
 export class Route<
@@ -105,8 +106,14 @@ export const routes = {
       queryParams: QueryParams.FILTERS | QueryParams.SORT_BY;
       pathParams: PathParams.WORKFLOW_ID;
     }>(({ workflowId }) => RUNTIME_TOOLS_ROUTE + `/workflow-details/${workflowId}`),
+    runtimeToolsWorkflowDefinitions: new Route<{}>(() => RUNTIME_TOOLS_ROUTE + `/workflow-definitions`),
+    runtimeToolsWorkflowForm: new Route<{
+      pathParams: PathParams.WORKFLOW_NAME;
+    }>(({ workflowName }) => RUNTIME_TOOLS_ROUTE + `/workflow-definition/${workflowName}`),
+    runtimeToolsTriggerCloudEventForWorkflowDefinition: new Route<{
+      pathParams: PathParams.WORKFLOW_NAME;
+    }>(({ workflowName }) => RUNTIME_TOOLS_ROUTE + `/workflow-definition/${workflowName}/trigger-cloud-event`),
   },
-
   dataJson: new Route<{}>(() => "/" + APPDATA_JSON_FILENAME),
   openApiJson: new Route<{}>(() => "/q/openapi.json"),
 };

packages/sonataflow-deployment-webapp/src/runtimeTools/contexts/DeploymentWorkflowDefinitionListContextProvider.tsx

@@ -0,0 +1,32 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import * as React from "react";
+import { WorkflowDefinitionListContextProvider } from "@kie-tools/runtime-tools-swf-webapp-components/dist/WorkflowDefinitionList";
+import { useApp } from "../../context/AppContext";
+
+export function DeploymentWorkflowDefinitionListContextProvider(props: React.PropsWithChildren<{}>) {
+  const app = useApp();
+
+  return (
+    <WorkflowDefinitionListContextProvider dataIndexUrl={app.data.dataIndexUrl}>
+      {props.children}
+    </WorkflowDefinitionListContextProvider>
+  );
+}

packages/sonataflow-deployment-webapp/src/runtimeTools/pages/RuntimeToolsWorkflowDefinitions.tsx

@@ -0,0 +1,91 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useCallback } from "react";
+import { WorkflowDefinitionListContainer } from "@kie-tools/runtime-tools-swf-webapp-components/dist/WorkflowDefinitionListContainer";
+import { Card } from "@patternfly/react-core/dist/esm/components/Card";
+import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text";
+import { useHistory } from "react-router";
+import { routes } from "../../routes";
+import { WorkflowDefinition } from "@kie-tools/runtime-tools-swf-gateway-api/dist/types";
+import { CloudEventPageSource } from "@kie-tools/runtime-tools-swf-webapp-components/dist/CloudEventForm";
+
+const PAGE_TITLE = "Workflow Definitions";
+
+export function RuntimeToolsWorkflowDefinitions() {
+  const history = useHistory();
+
+  const onOpenWorkflowForm = useCallback(
+    (workflowDefinition: WorkflowDefinition) => {
+      history.push({
+        pathname: routes.runtimeTools.runtimeToolsWorkflowForm.path({ workflowName: workflowDefinition.workflowName }),
+        state: {
+          workflowDefinition: {
+            workflowName: workflowDefinition.workflowName,
+            endpoint: workflowDefinition.endpoint,
+            serviceUrl: workflowDefinition.serviceUrl,
+          },
+        },
+      });
+    },
+    [history]
+  );
+
+  const onOpenTriggerCloudEventForWorkflow = useCallback(
+    (workflowDefinition: WorkflowDefinition) => {
+      history.push({
+        pathname: routes.runtimeTools.runtimeToolsTriggerCloudEventForWorkflowDefinition.path({
+          workflowName: workflowDefinition.workflowName,
+        }),
+        state: {
+          workflowDefinition: {
+            workflowName: workflowDefinition.workflowName,
+            endpoint: workflowDefinition.endpoint,
+            serviceUrl: workflowDefinition.serviceUrl,
+          },
+          source: CloudEventPageSource.DEFINITIONS,
+        },
+      });
+    },
+    [history]
+  );
+
+  return (
+    <Page>
+      <PageSection variant={"light"}>
+        <TextContent>
+          <Text component={TextVariants.h1}>{PAGE_TITLE}</Text>
+          <Text component={TextVariants.p}>
+            Start new workflow instances from the SonataFlow service linked in your Runtime Tools settings.
+          </Text>
+        </TextContent>
+      </PageSection>
+
+      <PageSection isFilled aria-label="workflow-definitions-section">
+        <Card>
+          <WorkflowDefinitionListContainer
+            onOpenWorkflowForm={onOpenWorkflowForm}
+            onOpenTriggerCloudEventForWorkflow={onOpenTriggerCloudEventForWorkflow}
+          />
+        </Card>
+      </PageSection>
+    </Page>
+  );
+}

packages/sonataflow-deployment-webapp/webpack.config.js

@@ -99,6 +99,14 @@ module.exports = async (env) =>
       client: {
         overlay: false,
       },
+      proxy: [
+        {
+          context: (path, req) => req.method === "POST" || path === "/q/openapi.json",
+          target: "http://localhost:4000",
+          secure: false,
+          changeOrigin: true,
+        },
+      ],
     },
     resolve: {
       fallback: {