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

packages/sonataflow-deployment-webapp/package.json

@@ -42,16 +42,12 @@
     "@patternfly/react-core": "^4.276.6",
     "@patternfly/react-icons": "^4.93.6",
     "@patternfly/react-table": "^4.112.39",
-    "apollo-cache-inmemory": "1.6.6",
-    "apollo-client": "2.6.10",
-    "apollo-link-http": "1.5.17",
     "openapi-types": "^7.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
-    "typescript": "^5.5.3",
-    "util": "^0.12.5"
+    "typescript": "^5.5.3"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
@@ -77,7 +73,6 @@
     "stream-http": "^3.2.0",
     "terser-webpack-plugin": "^5.3.9",
     "ts-jest": "^29.1.5",
-    "url": "^0.11.3",
     "webpack": "^5.88.2",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.15.1",

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

@@ -36,17 +36,14 @@ export function RoutesSwitch() {
       <Route path={routes.workflows.cloudEvent.path({})}>
         <CloudEventFormPage />
       </Route>
-      <Route path={routes.workflows.home.path({})}>
-        <Workflows />
-      </Route>
       <Route path={routes.runtimeTools.home.path({})}>
         <RuntimeToolsRoutesSwitch />
       </Route>
       <Route path={routes.dataJsonError.path({})}>
         <ErrorPage kind={ErrorKind.APPDATA_JSON} errors={[`There was an error with the ${APPDATA_JSON_FILENAME}`]} />
       </Route>
       <Route path={routes.home.path({})}>
-        <Redirect to={routes.workflows.home.path({})} />
+        <Redirect to={routes.runtimeTools.runtimeToolsWorkflowDefinitions.path({})} />
       </Route>
       <Route component={NoMatchPage} />
     </Switch>

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

@@ -21,10 +21,14 @@ import { Route, Switch } from "react-router-dom";
 import { RuntimeToolsWorkflowInstances } from "../runtimeTools/pages/RuntimeToolsWorkflowInstances";
 import { routes } from "../routes";
 import { RuntimeToolsWorkflowDetails } from "../runtimeTools/pages/RuntimeToolsWorkflowDetails";
+import { RuntimeToolsWorkflowDefinitions } from "../runtimeTools/pages/RuntimeToolsWorkflowDefinitions";
 
 export function RuntimeToolsRoutesSwitch() {
   return (
     <Switch>
+      <Route path={routes.runtimeTools.runtimeToolsWorkflowDefinitions.path({})}>
+        <RuntimeToolsWorkflowDefinitions />
+      </Route>
       <Route path={routes.runtimeTools.workflowInstances.path({})}>
         <RuntimeToolsWorkflowInstances />
       </Route>

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();
@@ -51,7 +52,7 @@ export function Workflows() {
           <Text component={TextVariants.h1}>Workflows</Text>
         </TextContent>
       </PageSection>
-
+      <RuntimeToolsWorkflowDefinitions />
       <PageSection>
         <Toolbar>
           <ToolbarContent style={{ paddingLeft: "10px", paddingRight: "10px" }}>

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,94 @@
+/*
+ * 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";
+import { BasePage } from "../../pages/BasePage";
+
+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 (
+    <BasePage>
+      <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>
+    </BasePage>
+  );
+}

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: {