kie-issues#1276: Reuse components and retrieve workflow definitions f…

…rom data index instead of openapi.json in sonataflow-deployment-webapp (#2537)

Co-authored-by: fantonangeli <[email protected]>

packages/sonataflow-deployment-webapp/package.json

@@ -43,17 +43,12 @@
     "@patternfly/patternfly": "^4.224.2",
     "@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",

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

@@ -21,7 +21,6 @@ import { Redirect, Route, Switch } from "react-router-dom";
 import { APPDATA_JSON_FILENAME } from "../AppConstants";
 import { ErrorKind, ErrorPage } from "../pages/ErrorPage";
 import { NoMatchPage } from "../pages/NoMatchPage";
-import { Workflows } from "../pages/Workflows/";
 import { CloudEventFormPage } from "../pages/Workflows/CloudEventFormPage";
 import { WorkflowFormPage } from "../pages/Workflows/WorkflowFormPage";
 import { routes } from "../routes";
@@ -36,17 +35,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.workflowDefinitions.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.workflowDefinitions.path({})}>
+        <RuntimeToolsWorkflowDefinitions />
+      </Route>
       <Route path={routes.runtimeTools.workflowInstances.path({})}>
         <RuntimeToolsWorkflowInstances />
       </Route>

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

@@ -17,5 +17,4 @@
  * under the License.
  */
 
-export * from "./Workflows";
 export * from "./WorkflowFormPage";

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,8 @@ export const routes = {
       queryParams: QueryParams.FILTERS | QueryParams.SORT_BY;
       pathParams: PathParams.WORKFLOW_ID;
     }>(({ workflowId }) => RUNTIME_TOOLS_ROUTE + `/workflow-details/${workflowId}`),
+    workflowDefinitions: new Route<{}>(() => RUNTIME_TOOLS_ROUTE + `/workflow-definitions`),
   },
-
   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>
+  );
+}