From c2a708d7d4b5a91886122b16b7b3c0d1102b0625 Mon Sep 17 00:00:00 2001 From: Tyler Ohlsen Date: Thu, 21 Sep 2023 14:42:41 -0700 Subject: [PATCH] Remove workflow builder; add workflow details Signed-off-by: Tyler Ohlsen --- public/app.tsx | 25 ++++++------ public/pages/index.ts | 2 +- public/pages/workflow_builder/index.ts | 7 ---- .../components}/components/index.ts | 0 .../components/input_field_list.tsx | 0 .../components/input_fields/index.ts | 0 .../components/input_fields/json_field.tsx | 0 .../components/input_fields/select_field.tsx | 0 .../components/input_fields/text_field.tsx | 0 .../components/new_or_existing_tabs.tsx | 0 .../workflow_detail/components/header.tsx | 30 ++++++++++++++ .../pages/workflow_detail/components/index.ts | 6 +++ .../components}/workflow_component.tsx | 0 public/pages/workflow_detail/index.ts | 6 +++ .../pages/workflow_detail/workflow_detail.tsx | 39 +++++++++++++++++++ .../workflows/components/workflow_list.tsx | 20 +++++++++- public/utils/constants.ts | 8 +--- 17 files changed, 114 insertions(+), 29 deletions(-) delete mode 100644 public/pages/workflow_builder/index.ts rename public/pages/{workflow_builder => workflow_detail/components}/components/index.ts (100%) rename public/pages/{workflow_builder => workflow_detail/components}/components/input_field_list.tsx (100%) rename public/pages/{workflow_builder => workflow_detail/components}/components/input_fields/index.ts (100%) rename public/pages/{workflow_builder => workflow_detail/components}/components/input_fields/json_field.tsx (100%) rename public/pages/{workflow_builder => workflow_detail/components}/components/input_fields/select_field.tsx (100%) rename public/pages/{workflow_builder => workflow_detail/components}/components/input_fields/text_field.tsx (100%) rename public/pages/{workflow_builder => workflow_detail/components}/components/new_or_existing_tabs.tsx (100%) create mode 100644 public/pages/workflow_detail/components/header.tsx create mode 100644 public/pages/workflow_detail/components/index.ts rename public/pages/{workflow_builder => workflow_detail/components}/workflow_component.tsx (100%) create mode 100644 public/pages/workflow_detail/index.ts create mode 100644 public/pages/workflow_detail/workflow_detail.tsx diff --git a/public/app.tsx b/public/app.tsx index 786baadd..0130d4e8 100644 --- a/public/app.tsx +++ b/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) => } /> } + path={APP_PATH.WORKFLOW_DETAIL} + render={( + routeProps: RouteComponentProps + ) => } /> } + path={APP_PATH.WORKFLOWS} + render={(routeProps: RouteComponentProps) => } /> {/* Defaulting to Overview page */} + {}}> + Prototype + , + {}}> + Save + , + ]} + /> + + ); +} diff --git a/public/pages/workflow_detail/components/index.ts b/public/pages/workflow_detail/components/index.ts new file mode 100644 index 00000000..67ffe5c5 --- /dev/null +++ b/public/pages/workflow_detail/components/index.ts @@ -0,0 +1,6 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +export * from './header'; diff --git a/public/pages/workflow_builder/workflow_component.tsx b/public/pages/workflow_detail/components/workflow_component.tsx similarity index 100% rename from public/pages/workflow_builder/workflow_component.tsx rename to public/pages/workflow_detail/components/workflow_component.tsx diff --git a/public/pages/workflow_detail/index.ts b/public/pages/workflow_detail/index.ts new file mode 100644 index 00000000..1d03e52f --- /dev/null +++ b/public/pages/workflow_detail/index.ts @@ -0,0 +1,6 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +export * from './workflow_detail'; diff --git a/public/pages/workflow_detail/workflow_detail.tsx b/public/pages/workflow_detail/workflow_detail.tsx new file mode 100644 index 00000000..c3fc9dc4 --- /dev/null +++ b/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 {} + +export function WorkflowDetail(props: WorkflowDetailProps) { + useEffect(() => { + getCore().chrome.setBreadcrumbs([ + BREADCRUMBS.AI_APPLICATION_BUILDER, + BREADCRUMBS.WORKFLOWS, + { text: 'workflow-name-placeholder' }, + ]); + }); + + return ( +
+ + + + Put ReactFlow canvas here... + +
+ ); +} diff --git a/public/pages/workflows/components/workflow_list.tsx b/public/pages/workflows/components/workflow_list.tsx index 90d765ad..0016e0f7 100644 --- a/public/pages/workflows/components/workflow_list.tsx +++ b/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) => ( + + {name} + + ), + }, + { + 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[]; diff --git a/public/utils/constants.ts b/public/utils/constants.ts index b20b36d9..10b5eb82 100644 --- a/public/utils/constants.ts +++ b/public/utils/constants.ts @@ -7,7 +7,6 @@ export enum Navigation { AiApplicationBuilder = 'AI Application Builder', UseCases = 'Use Cases', Workflows = 'Workflows', - WorkflowBuilder = 'Workflow Builder', } export enum APP_PATH { @@ -15,18 +14,13 @@ export enum APP_PATH { 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}`, - }, }); export enum COMPONENT_CATEGORY {