Connect to redux store

Signed-off-by: Tyler Ohlsen <[email protected]>

common/index.ts

@@ -4,3 +4,5 @@
  */
 
 export * from './constants';
+export * from './interfaces';
+export { IComponent } from '../public/component_types';

common/interfaces.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// TODO: this will grow as more fields are defined and what frontend reqts there will be
+export interface Workflow {
+  name: string;
+  id: string;
+  description: string;
+}

public/pages/use_cases/components/use_case.tsx

@@ -40,7 +40,7 @@ export function UseCase(props: UseCaseProps) {
               disabled={false}
               isLoading={false}
               onClick={() => {
-                // TODO: possibly link to the workflow builder with a pre-configured flow
+                // TODO: possibly link to the workflow details with a pre-configured flow
               }}
             >
               Go

public/pages/workflow_detail/components/header.tsx

@@ -5,17 +5,18 @@
 
 import React from 'react';
 import { EuiPageHeader, EuiButton } from '@elastic/eui';
+import { Workflow } from '../../../../common';
 
 interface WorkflowDetailHeaderProps {
-  componentName: string;
+  workflow: Workflow | undefined;
 }
 
 export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
   return (
     <div>
       <EuiPageHeader
-        pageTitle={props.componentName}
-        description="Some description of this workflow..."
+        pageTitle={props.workflow ? props.workflow.name : ''}
+        description={props.workflow ? props.workflow.description : ''}
         rightSideItems={[
           <EuiButton fill={false} onClick={() => {}}>
             Prototype

public/pages/workflow_detail/workflow_detail.tsx

@@ -5,18 +5,13 @@
 
 import React, { useEffect } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-// import { useSelector, useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { EuiSpacer } from '@elastic/eui';
 import { BREADCRUMBS } from '../../utils';
 import { getCore } from '../../services';
 import { WorkflowDetailHeader } from './components';
-import {
-  TextEmbeddingProcessor,
-  IComponent,
-  KnnIndex,
-} from '../../component_types';
 import { Workspace } from './workspace';
-// import { AppState, removeDirty, setComponents } from '../../store';
+import { AppState } from '../../store';
 
 export interface WorkflowDetailRouterProps {
   workflowId: string;
@@ -27,31 +22,26 @@ interface WorkflowDetailProps
   extends RouteComponentProps<WorkflowDetailRouterProps> {}
 
 export function WorkflowDetail(props: WorkflowDetailProps) {
-  // TODO: below commented out lines can be used for fetching & setting global redux state
-  // const dispatch = useDispatch();
-  // const { isDirty, components } = useSelector(
-  //   (state: AppState) => state.workspace
-  // );
+  const { workflows } = useSelector((state: AppState) => state.workflows);
 
-  // TODO: Should be fetched from global state. Using some defaults for testing purposes
-  const curComponents = [
-    new TextEmbeddingProcessor(),
-    new KnnIndex(),
-  ] as IComponent[];
+  const workflow = workflows.find(
+    (wf) => wf.id === props.match?.params?.workflowId
+  );
+  const workflowName = workflow ? workflow.name : '';
 
   useEffect(() => {
     getCore().chrome.setBreadcrumbs([
       BREADCRUMBS.AI_APPLICATION_BUILDER,
       BREADCRUMBS.WORKFLOWS,
-      { text: 'workflow-name-placeholder' },
+      { text: workflowName },
     ]);
   });
 
   return (
     <div>
-      <WorkflowDetailHeader componentName="component 1" />
+      <WorkflowDetailHeader workflow={workflow} />
       <EuiSpacer size="l" />
-      <Workspace components={curComponents} />
+      <Workspace />
     </div>
   );
 }

public/pages/workflow_detail/workspace/workspace.tsx

@@ -4,18 +4,17 @@
  */
 
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { AppState } from '../../../store';
 import { WorkspaceComponent } from '../workspace_component';
-import { IComponent } from '../../../component_types';
 
-interface WorkspaceProps {
-  components: IComponent[];
-}
+export function Workspace() {
+  const { components } = useSelector((state: AppState) => state.workspace);
 
-export function Workspace(props: WorkspaceProps) {
   return (
     <EuiFlexGroup direction="row">
-      {props.components.map((component, idx) => {
+      {components.map((component, idx) => {
         return (
           <EuiFlexItem key={idx}>
             <WorkspaceComponent component={component} />

public/pages/workflows/components/columns.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiLink } from '@elastic/eui';
+import { PLUGIN_ID, Workflow } from '../../../../common';
+
+export const columns = [
+  {
+    field: 'name',
+    name: 'Name',
+    sortable: true,
+    render: (name: string, workflow: Workflow) => (
+      <EuiLink href={`${PLUGIN_ID}#/workflows/${workflow.id}`}>{name}</EuiLink>
+    ),
+  },
+  {
+    field: 'id',
+    name: 'ID',
+    sortable: true,
+  },
+  {
+    field: 'description',
+    name: 'Description',
+    sortable: false,
+  },
+];

public/pages/workflows/components/workflow_list.tsx

@@ -3,93 +3,34 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState } from 'react';
-import { EuiBasicTable, EuiLink } from '@elastic/eui';
-import { PLUGIN_ID } from '../../../../common';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { EuiInMemoryTable, Direction } from '@elastic/eui';
+import { AppState } from '../../../store';
+import { Workflow } from '../../../../common';
+import { columns } from './columns';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface WorkflowListProps {}
 
-interface WorkflowItem {
-  name: string;
-  id: string;
-  description: string;
-}
-
 export function WorkflowList(props: WorkflowListProps) {
-  const [pageIndex, setPageIndex] = useState(0);
-  const [pageSize, setPageSize] = useState(5);
-  const [sortField, setSortField] = useState('name');
-  const [sortDirection, setSortDirection] = useState('asc');
-
-  // TODO: move column details to separate file
-  const columns = [
-    {
-      field: 'name',
-      name: 'Name',
-      sortable: true,
-      render: (name: string, workflow: WorkflowItem) => (
-        <EuiLink href={`${PLUGIN_ID}#/workflows/${workflow.id}`}>
-          {name}
-        </EuiLink>
-      ),
-    },
-    {
-      field: 'id',
-      name: 'ID',
-      sortable: false,
-    },
-    {
-      field: 'description',
-      name: 'Description',
-      sortable: false,
-    },
-  ];
-
-  // TODO: remove items and fetch from store
-  const items = [
-    {
-      name: 'Workflow-1',
-      id: 'workflow-1-id',
-      description: 'some test description',
-    },
-  ] as WorkflowItem[];
+  const { workflows } = useSelector((state: AppState) => state.workflows);
 
   const sorting = {
     sort: {
-      field: sortField,
-      direction: sortDirection,
+      field: 'name',
+      direction: 'asc' as Direction,
     },
-    enableAllColumns: false,
-    readOnly: false,
-  };
-
-  const pagination = {
-    pageIndex,
-    pageSize,
-    totalItemCount: items.length,
-    pageSizeOptions: [5, 10, 20],
-  };
-
-  const onTableChange = ({ page = {}, sort = {} }) => {
-    const { index, size } = page;
-    const { field, direction } = sort;
-
-    setPageIndex(index);
-    setPageSize(size);
-    setSortField(field);
-    setSortDirection(direction);
   };
 
   return (
-    <EuiBasicTable<WorkflowItem>
-      items={items}
+    <EuiInMemoryTable<Workflow>
+      items={workflows}
       rowHeader="name"
       columns={columns}
       sorting={sorting}
-      pagination={pagination}
-      onChange={onTableChange}
-      noItemsMessage={'No existing workflows found'}
+      pagination={true}
+      message={'No existing workflows found'}
     />
   );
 }

public/store/reducers/index.ts

@@ -4,3 +4,4 @@
  */
 
 export * from './workspace_reducer';
+export * from './workflows_reducer';

public/store/reducers/workflows_reducer.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createSlice } from '@reduxjs/toolkit';
+import { Workflow } from '../../../common';
+
+const initialState = {
+  // TODO: fetch from server-side later
+  workflows: [
+    {
+      name: 'Workflow-1',
+      id: 'workflow-1-id',
+      description: 'description for workflow 1',
+    },
+    {
+      name: 'Workflow-2',
+      id: 'workflow-2-id',
+      description: 'description for workflow 2',
+    },
+  ] as Workflow[],
+  loading: false,
+};
+
+const workflowsSlice = createSlice({
+  name: 'workflows',
+  initialState,
+  reducers: {
+    setWorkflows(state, action) {
+      state.workflows = action.payload;
+    },
+    setLoading(state, action) {
+      state.loading = action.payload;
+    },
+  },
+});
+
+export const workflowsReducer = workflowsSlice.reducer;
+export const { setWorkflows, setLoading } = workflowsSlice.actions;