Remove workflow builder; add workflow details

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

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/workflow_detail/components/header.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiPageHeader, EuiButton } from '@elastic/eui';
+
+interface WorkflowDetailHeaderProps {
+  componentName: string;
+}
+
+export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
+  return (
+    <div>
+      <EuiPageHeader
+        pageTitle={props.componentName}
+        description="Some description of this workflow..."
+        rightSideItems={[
+          <EuiButton fill={false} onClick={() => {}}>
+            Prototype
+          </EuiButton>,
+          <EuiButton fill={false} onClick={() => {}}>
+            Save
+          </EuiButton>,
+        ]}
+      />
+    </div>
+  );
+}

public/pages/workflow_builder/index.ts → public/pages/workflow_detail/components/index.ts

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { WorkflowBuilder } from './workflow_builder';
+export * 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,39 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import { EuiFlexItem, EuiText, EuiSpacer } from '@elastic/eui';
+import { BREADCRUMBS } from '../../utils';
+import { getCore } from '../../services';
+import { WorkflowDetailHeader } from './components';
+
+export interface WorkflowDetailRouterProps {
+  workflowId: string;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface WorkflowDetailProps
+  extends RouteComponentProps<WorkflowDetailRouterProps> {}
+
+export function WorkflowDetail(props: WorkflowDetailProps) {
+  useEffect(() => {
+    getCore().chrome.setBreadcrumbs([
+      BREADCRUMBS.AI_APPLICATION_BUILDER,
+      BREADCRUMBS.WORKFLOWS,
+      { text: 'workflow-name-placeholder' },
+    ]);
+  });
+
+  return (
+    <div>
+      <WorkflowDetailHeader componentName="component 1" />
+      <EuiSpacer size="l" />
+      <EuiFlexItem>
+        <EuiText>Put ReactFlow canvas here...</EuiText>
+      </EuiFlexItem>
+    </div>
+  );
+}

public/pages/workflows/components/workflow_list.tsx

@@ -4,13 +4,15 @@
  */
 
 import React, { useState } from 'react';
-import { EuiBasicTable } from '@elastic/eui';
+import { EuiBasicTable, EuiLink } from '@elastic/eui';
+import { PLUGIN_ID } from '../../../../common';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface WorkflowListProps {}
 
 interface WorkflowItem {
   name: string;
+  id: string;
   description: string;
 }
 
@@ -20,11 +22,22 @@ export function WorkflowList(props: WorkflowListProps) {
   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',
@@ -33,9 +46,12 @@ export function WorkflowList(props: WorkflowListProps) {
     },
   ];
 
+  // TODO: remove items and fetch from store
   const items = [
     {
-      name: 'Workflow 1',
+      name: 'Workflow-1',
+      id: 'workflow-1-id',
+      description: 'some test description',
     },
   ] as WorkflowItem[];
 

public/utils/constants.ts

@@ -7,24 +7,18 @@ export enum Navigation {
   AiApplicationBuilder = 'AI Application Builder',
   UseCases = 'Use Cases',
   Workflows = 'Workflows',
-  WorkflowBuilder = 'Workflow Builder',
 }
 
 export enum APP_PATH {
   HOME = '/',
   USE_CASES = '/use-cases',
   WORKSPACE = '/workspace',
   WORKFLOWS = '/workflows',
-  WORKFLOW_DETAIL = '/workflows/:workflowId/',
-  WORKFLOW_BUILDER = '/workflow-builder',
+  WORKFLOW_DETAIL = '/workflows/:workflowId',
 }
 
 export const BREADCRUMBS = Object.freeze({
   AI_APPLICATION_BUILDER: { text: 'AI application builder', href: '#/' },
   USE_CASES: { text: 'Use cases', href: `#${APP_PATH.USE_CASES}` },
   WORKFLOWS: { text: 'Workflows', href: `#${APP_PATH.WORKFLOWS}` },
-  WORKFLOW_BUILDER: {
-    text: 'Workflow builder',
-    href: `#${APP_PATH.WORKFLOW_BUILDER}`,
-  },
 });