[Backport 2.x] Add deletion to Workflow List page table

public/pages/workflows/workflow_list/columns.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import { EuiLink } from '@elastic/eui';
 import { PLUGIN_ID, Workflow } from '../../../../common';
 
-export const columns = [
+export const columns = (actions: any[]) => [
   {
     field: 'name',
     name: 'Name',
@@ -36,4 +36,8 @@ export const columns = [
     name: 'Last launched',
     sortable: true,
   },
+  {
+    name: 'Actions',
+    actions,
+  },
 ];

public/pages/workflows/workflow_list/workflow_list.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { debounce } from 'lodash';
 import {
   EuiInMemoryTable,
@@ -13,8 +13,9 @@ import {
   EuiFlexItem,
   EuiFilterSelectItem,
   EuiFieldSearch,
+  EuiLoadingSpinner,
 } from '@elastic/eui';
-import { AppState } from '../../../store';
+import { AppState, deleteWorkflow } from '../../../store';
 import { Workflow } from '../../../../common';
 import { columns } from './columns';
 import { MultiSelectFilter } from '../../../general_components';
@@ -33,7 +34,10 @@ const sorting = {
  * The searchable list of created workflows.
  */
 export function WorkflowList(props: WorkflowListProps) {
-  const { workflows } = useSelector((state: AppState) => state.workflows);
+  const dispatch = useDispatch();
+  const { workflows, loading } = useSelector(
+    (state: AppState) => state.workflows
+  );
 
   // search bar state
   const [searchQuery, setSearchQuery] = useState<string>('');
@@ -58,6 +62,19 @@ export function WorkflowList(props: WorkflowListProps) {
     );
   }, [selectedStates, searchQuery, workflows]);
 
+  const tableActions = [
+    {
+      name: 'Delete',
+      description: 'Delete this workflow',
+      type: 'icon',
+      icon: 'trash',
+      color: 'danger',
+      onClick: (item: Workflow) => {
+        dispatch(deleteWorkflow(item.id));
+      },
+    },
+  ];
+
   return (
     <EuiFlexGroup direction="column">
       <EuiFlexItem>
@@ -80,10 +97,18 @@ export function WorkflowList(props: WorkflowListProps) {
         <EuiInMemoryTable<Workflow>
           items={filteredWorkflows}
           rowHeader="name"
-          columns={columns}
+          // @ts-ignore
+          columns={columns(tableActions)}
           sorting={sorting}
           pagination={true}
-          message={'No existing workflows found'}
+          message={
+            loading === true ? (
+              <EuiLoadingSpinner size="xl" />
+            ) : (
+              'No existing workflows found'
+            )
+          }
+          hasActions={true}
         />
       </EuiFlexItem>
     </EuiFlexGroup>

public/pages/workflows/workflows.tsx

@@ -72,6 +72,13 @@ export function Workflows(props: WorkflowsProps) {
     }
   }, [selectedTabId, workflows]);
 
+  // If the user navigates back to the manage tab, re-fetch workflows
+  useEffect(() => {
+    if (selectedTabId === WORKFLOWS_TAB.MANAGE) {
+      dispatch(searchWorkflows({ query: { match_all: {} } }));
+    }
+  }, [selectedTabId]);
+
   useEffect(() => {
     getCore().chrome.setBreadcrumbs([
       BREADCRUMBS.FLOW_FRAMEWORK,

public/store/reducers/workflows_reducer.ts

@@ -233,12 +233,8 @@ const workflowsSlice = createSlice({
         state.errorMessage = '';
       })
       .addCase(deleteWorkflow.fulfilled, (state, action) => {
-        // TODO: add logic to mutate state
-        // const workflow = action.payload;
-        // state.workflows = {
-        //   ...state.workflows,
-        //   [workflow.id]: workflow,
-        // };
+        const workflowId = action.payload.id;
+        delete state.workflows[workflowId];
         state.loading = false;
         state.errorMessage = '';
       })

server/routes/flow_framework_routes_service.ts

@@ -98,12 +98,12 @@
     req: OpenSearchDashboardsRequest,
     res: OpenSearchDashboardsResponseFactory
   ): Promise<IOpenSearchDashboardsResponse<any>> => {
     const { workflow_id } = req.params as { workflow_id: string };
     try {
       const response = await this.client
         .asScoped(req)
         .callAsCurrentUser('flowFramework.getWorkflow', { workflow_id });
       console.log('response from get workflow: ', response);
       // TODO: format response
       return res.ok({ body: response });
     } catch (err: any) {
@@ -147,12 +147,12 @@
     req: OpenSearchDashboardsRequest,
     res: OpenSearchDashboardsResponseFactory
   ): Promise<IOpenSearchDashboardsResponse<any>> => {
     const { workflow_id } = req.params as { workflow_id: string };
     try {
       const response = await this.client
         .asScoped(req)
         .callAsCurrentUser('flowFramework.getWorkflowState', { workflow_id });
       console.log('response from get workflow state: ', response);
       // TODO: format response
       return res.ok({ body: response });
     } catch (err: any) {
@@ -172,28 +172,23 @@
       const response = await this.client
         .asScoped(req)
         .callAsCurrentUser('flowFramework.createWorkflow', { body });
-      console.log('response from create workflow: ', response);
-      // TODO: format response
-      return res.ok({ body: response });
+      return res.ok({ body: { id: response._id } });
     } catch (err: any) {
       return generateCustomError(res, err);
     }
   };
 
-  // TODO: test e2e
   deleteWorkflow = async (
     context: RequestHandlerContext,
     req: OpenSearchDashboardsRequest,
     res: OpenSearchDashboardsResponseFactory
   ): Promise<IOpenSearchDashboardsResponse<any>> => {
     const { workflow_id } = req.params as { workflow_id: string };
     try {
       const response = await this.client
         .asScoped(req)
         .callAsCurrentUser('flowFramework.deleteWorkflow', { workflow_id });
-      console.log('response from delete workflow: ', response);
-      // TODO: format response
-      return res.ok({ body: response });
+      return res.ok({ body: { id: response._id } });
     } catch (err: any) {
       return generateCustomError(res, err);
     }

server/routes/helpers.ts

@@ -48,18 +48,20 @@
   workflowHits.forEach((workflowHit: any) => {
     workflowDict[workflowHit._id] = toWorkflowObj(workflowHit);
     const workflowStateHit = workflowStateHits.find(
       (workflowStateHit) => workflowStateHit._id === workflowHit._id
     );
-    const workflowState = workflowStateHit._source
-      .state as typeof WORKFLOW_STATE;
-    workflowDict[workflowHit._id] = {
-      ...workflowDict[workflowHit._id],
-      // @ts-ignore
-      state: WORKFLOW_STATE[workflowState],
-      // TODO: this needs to be persisted by backend. Tracking issue:
-      // https://github.com/opensearch-project/flow-framework/issues/548
-      lastLaunched: 1234,
-    };
+    if (workflowStateHit) {
+      const workflowState = workflowStateHit._source
+        .state as typeof WORKFLOW_STATE;
+      workflowDict[workflowHit._id] = {
+        ...workflowDict[workflowHit._id],
+        // @ts-ignore
+        state: WORKFLOW_STATE[workflowState],
+        // TODO: this needs to be persisted by backend. Tracking issue:
+        // https://github.com/opensearch-project/flow-framework/issues/548
+        lastLaunched: 1234,
+      };
+    }
   });
   return workflowDict;
 }