Refactor

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

public/pages/workflow_detail/components/index.ts

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export * from './header';
+export { WorkflowDetailHeader } from './header';

public/pages/workflow_detail/workflow_detail.tsx

@@ -5,10 +5,18 @@
 
 import React, { useEffect } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import { EuiFlexItem, EuiText, EuiSpacer } from '@elastic/eui';
+// import { useSelector, useDispatch } 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';
 
 export interface WorkflowDetailRouterProps {
   workflowId: string;
@@ -19,6 +27,18 @@ 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
+  // );
+
+  // TODO: Should be fetched from global state. Using some defaults for testing purposes
+  const curComponents = [
+    new TextEmbeddingProcessor(),
+    new KnnIndex(),
+  ] as IComponent[];
+
   useEffect(() => {
     getCore().chrome.setBreadcrumbs([
       BREADCRUMBS.AI_APPLICATION_BUILDER,
@@ -31,9 +51,7 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
     <div>
       <WorkflowDetailHeader componentName="component 1" />
       <EuiSpacer size="l" />
-      <EuiFlexItem>
-        <EuiText>Put ReactFlow canvas here...</EuiText>
-      </EuiFlexItem>
+      <Workspace components={curComponents} />
     </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,27 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { WorkspaceComponent } from '../workspace_component';
+import { IComponent } from '../../../component_types';
+
+interface WorkspaceProps {
+  components: IComponent[];
+}
+
+export function Workspace(props: WorkspaceProps) {
+  return (
+    <EuiFlexGroup direction="row">
+      {props.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_detail/components/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');