Refactor & improve Workflow Builder; connect to redux store

common/index.ts

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

common/interfaces.ts

@@ -12,3 +12,10 @@ export interface IIndex {
   name: string;
   health: 'green' | 'yellow' | 'red';
 }
+
+// TODO: this will grow as more fields are defined and what frontend reqts there will be
+export interface IWorkflow {
+  name: string;
+  id: string;
+  description: string;
+}

public/app.tsx

@@ -7,7 +7,13 @@ import React from 'react';
 import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 import { EuiPageSideBar, EuiSideNav, EuiPageTemplate } from '@elastic/eui';
 import { Navigation, APP_PATH } from './utils';
-import { Overview, UseCases, Workflows, WorkflowBuilder } from './pages';
+import {
+  Overview,
+  UseCases,
+  Workflows,
+  WorkflowDetail,
+  WorkflowDetailRouterProps,
+} from './pages';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface Props extends RouteComponentProps {}
@@ -34,13 +40,6 @@ export const AiFlowDashboardsApp = (props: Props) => {
                 href: `#${APP_PATH.WORKFLOWS}`,
                 isSelected: props.location.pathname === APP_PATH.WORKFLOWS,
               },
-              {
-                name: Navigation.WorkflowBuilder,
-                id: 3,
-                href: `#${APP_PATH.WORKFLOW_BUILDER}`,
-                isSelected:
-                  props.location.pathname === APP_PATH.WORKFLOW_BUILDER,
-              },
             ],
           },
         ]}
@@ -61,12 +60,14 @@ export const AiFlowDashboardsApp = (props: Props) => {
           render={(routeProps: RouteComponentProps) => <UseCases />}
         />
         <Route
-          path={APP_PATH.WORKFLOWS}
-          render={(routeProps: RouteComponentProps) => <Workflows />}
+          path={APP_PATH.WORKFLOW_DETAIL}
+          render={(
+            routeProps: RouteComponentProps<WorkflowDetailRouterProps>
+          ) => <WorkflowDetail {...routeProps} />}
         />
         <Route
-          path={APP_PATH.WORKFLOW_BUILDER}
-          render={(routeProps: RouteComponentProps) => <WorkflowBuilder />}
+          path={APP_PATH.WORKFLOWS}
+          render={(routeProps: RouteComponentProps) => <Workflows />}
         />
         {/* Defaulting to Overview page */}
         <Route

public/pages/index.ts

@@ -6,4 +6,4 @@
 export * from './use_cases';
 export * from './workflows';
 export * from './overview';
-export * from './workflow_builder';
+export * from './workflow_detail';

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

@@ -0,0 +1,31 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiPageHeader, EuiButton } from '@elastic/eui';
+import { IWorkflow } from '../../../../common';
+
+interface WorkflowDetailHeaderProps {
+  workflow: IWorkflow | undefined;
+}
+
+export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
+  return (
+    <div>
+      <EuiPageHeader
+        pageTitle={props.workflow ? props.workflow.name : ''}
+        description={props.workflow ? props.workflow.description : ''}
+        rightSideItems={[
+          <EuiButton fill={false} onClick={() => {}}>
+            Prototype
+          </EuiButton>,
+          <EuiButton fill={false} onClick={() => {}}>
+            Save
+          </EuiButton>,
+        ]}
+      />
+    </div>
+  );
+}

public/pages/workflow_detail/components/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { WorkflowDetailHeader } from './header';

public/pages/workflow_detail/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './workflow_detail';

public/pages/workflow_detail/workflow_detail.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { EuiSpacer } from '@elastic/eui';
+import { BREADCRUMBS } from '../../utils';
+import { getCore } from '../../services';
+import { WorkflowDetailHeader } from './components';
+import { Workspace } from './workspace';
+import { AppState } from '../../store';
+
+export interface WorkflowDetailRouterProps {
+  workflowId: string;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface WorkflowDetailProps
+  extends RouteComponentProps<WorkflowDetailRouterProps> {}
+
+export function WorkflowDetail(props: WorkflowDetailProps) {
+  const { workflows } = useSelector((state: AppState) => state.workflows);
+
+  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: workflowName },
+    ]);
+  });
+
+  return (
+    <div>
+      <WorkflowDetailHeader workflow={workflow} />
+      <EuiSpacer size="l" />
+      <Workspace />
+    </div>
+  );
+}

public/pages/workflow_detail/workspace/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { Workspace } from './workspace';

public/pages/workflow_detail/workspace/workspace.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { AppState } from '../../../store';
+import { WorkspaceComponent } from '../workspace_component';
+
+export function Workspace() {
+  const { components } = useSelector((state: AppState) => state.workspace);
+
+  return (
+    <EuiFlexGroup direction="row">
+      {components.map((component, idx) => {
+        return (
+          <EuiFlexItem key={idx}>
+            <WorkspaceComponent component={component} />
+          </EuiFlexItem>
+        );
+      })}
+    </EuiFlexGroup>
+  );
+}

public/pages/workflow_detail/workspace_component/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { WorkspaceComponent } from './workspace_component';

public/pages/workflow_builder/workflow_component.tsx → public/pages/workflow_detail/workspace_component/workspace_component.tsx

@@ -11,10 +11,11 @@ import {
   EuiSpacer,
   EuiCard,
 } from '@elastic/eui';
-import { IComponent } from '../../component_types';
-import { InputFieldList, NewOrExistingTabs } from './components';
+import { IComponent } from '../../../component_types';
+import { InputFieldList } from './input_field_list';
+import { NewOrExistingTabs } from './new_or_existing_tabs';
 
-interface WorkflowComponentProps {
+interface WorkspaceComponentProps {
   component: IComponent;
 }
 
@@ -24,7 +25,7 @@ interface WorkflowComponentProps {
  * Similar to Flowise's CanvasNode - see
  * https://github.com/FlowiseAI/Flowise/blob/main/packages/ui/src/views/canvas/CanvasNode.js
  */
-export function WorkflowComponent(props: WorkflowComponentProps) {
+export function WorkspaceComponent(props: WorkspaceComponentProps) {
   const { component } = props;
 
   const [selectedTabId, setSelectedTabId] = useState<string>('existing');

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, IWorkflow } from '../../../../common';
+
+export const columns = [
+  {
+    field: 'name',
+    name: 'Name',
+    sortable: true,
+    render: (name: string, workflow: IWorkflow) => (
+      <EuiLink href={`${PLUGIN_ID}#/workflows/${workflow.id}`}>{name}</EuiLink>
+    ),
+  },
+  {
+    field: 'id',
+    name: 'ID',
+    sortable: true,
+  },
+  {
+    field: 'description',
+    name: 'Description',
+    sortable: false,
+  },
+];