Refactor resizableworkspace; add workflowinputs component

Signed-off-by: Tyler Ohlsen <[email protected]>
opensearch-project · May 9, 2024 · fb5af3d · fb5af3d
1 parent 23f222c
commit fb5af3d
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 125 deletions.
diff --git a/public/pages/workflow_detail/components/header.tsx b/public/pages/workflow_detail/components/header.tsx
@@ -18,7 +18,6 @@ import {
 } from '../../../../common';
 
 interface WorkflowDetailHeaderProps {
-  tabs: any[];
   isNewWorkflow: boolean;
   workflow?: Workflow;
 }
@@ -61,7 +60,6 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
           Delete
         </EuiButton>,
       ]}
-      tabs={props.tabs}
       bottomBorder={true}
     />
   );

diff --git a/..._detail/workspace/resizable_workspace.tsx → ...s/workflow_detail/resizable_workspace.tsx b/..._detail/workspace/resizable_workspace.tsx → ...s/workflow_detail/resizable_workspace.tsx
@@ -18,7 +18,7 @@ import {
   EuiPageHeader,
   EuiResizableContainer,
 } from '@elastic/eui';
-import { getCore } from '../../../services';
+import { getCore } from '../../services';
 
 import {
   Workflow,
@@ -29,15 +29,15 @@ import {
   WorkspaceFlowState,
   WORKFLOW_STATE,
   ReactFlowEdge,
-} from '../../../../common';
+} from '../../../common';
 import {
   componentDataToFormik,
   getComponentSchema,
   processNodes,
   reduceToTemplate,
   APP_PATH,
-} from '../../../utils';
-import { validateWorkspaceFlow, toTemplateFlows } from '../utils';
+} from '../../utils';
+import { validateWorkspaceFlow, toTemplateFlows } from './utils';
 import {
   AppState,
   createWorkflow,
@@ -48,20 +48,21 @@ import {
   setDirty,
   updateWorkflow,
   useAppDispatch,
-} from '../../../store';
-import { Workspace } from './workspace';
-import { ComponentDetails } from '../component_details';
+} from '../../store';
+import { Workspace } from './workspace/workspace';
+import { ComponentDetails } from './component_details';
 
 // styling
-import './workspace-styles.scss';
-import '../../../global-styles.scss';
+import './workspace/workspace-styles.scss';
+import '../../global-styles.scss';
+import { WorkflowInputs } from './workflow_inputs';
 
 interface ResizableWorkspaceProps {
   isNewWorkflow: boolean;
   workflow?: Workflow;
 }
 
-const COMPONENT_DETAILS_PANEL_ID = 'component_details_panel_id';
+const WORKFLOW_INPUTS_PANEL_ID = 'workflow_inputs_panel_id';
 
 /**
  * The overall workspace component that maintains state related to the 2 resizable
@@ -461,48 +462,43 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
               return (
                 <>
                   <EuiResizablePanel
-                    mode="main"
-                    initialSize={80}
-                    minSize="50%"
+                    id={WORKFLOW_INPUTS_PANEL_ID}
+                    mode="collapsible"
+                    initialSize={40}
+                    minSize="25%"
                     paddingSize="s"
+                    onToggleCollapsedInternal={() => onToggleChange()}
                   >
                     <EuiFlexGroup
                       direction="column"
                       gutterSize="s"
                       className="workspace-panel"
                     >
                       <EuiFlexItem>
-                        <Workspace
-                          id="ingest"
-                          workflow={workflow}
-                          readonly={false}
-                          onNodesChange={onNodesChange}
-                          onSelectionChange={onSelectionChange}
-                        />
+                        <WorkflowInputs workflow={props.workflow} />
                       </EuiFlexItem>
                     </EuiFlexGroup>
                   </EuiResizablePanel>
                   <EuiResizableButton />
                   <EuiResizablePanel
                     style={{ marginRight: '-16px' }}
-                    id={COMPONENT_DETAILS_PANEL_ID}
-                    mode="collapsible"
-                    initialSize={25}
-                    minSize="10%"
+                    mode="main"
+                    initialSize={80}
+                    minSize="50%"
                     paddingSize="s"
-                    onToggleCollapsedInternal={() => onToggleChange()}
                   >
                     <EuiFlexGroup
                       direction="column"
                       gutterSize="s"
                       className="workspace-panel"
                     >
                       <EuiFlexItem>
-                        <ComponentDetails
-                          workflow={props.workflow}
-                          selectedComponent={selectedComponent}
-                          isDeprovisionable={isDeprovisionable}
-                          onFormChange={onFormChange}
+                        <Workspace
+                          id="ingest"
+                          workflow={workflow}
+                          readonly={false}
+                          onNodesChange={onNodesChange}
+                          onSelectionChange={onSelectionChange}
                         />
                       </EuiFlexItem>
                     </EuiFlexGroup>

diff --git a/public/pages/workflow_detail/workflow_detail.tsx b/public/pages/workflow_detail/workflow_detail.tsx
@@ -3,11 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useState } from 'react';
-import { RouteComponentProps, useLocation } from 'react-router-dom';
+import React, { useEffect } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { ReactFlowProvider } from 'reactflow';
-import queryString from 'query-string';
 import { EuiPage, EuiPageBody } from '@elastic/eui';
 import { BREADCRUMBS } from '../../utils';
 import { getCore } from '../../services';
@@ -24,8 +23,6 @@ import {
   FETCH_ALL_QUERY_BODY,
   NEW_WORKFLOW_ID_URL,
 } from '../../../common';
-import { Resources } from './resources';
-import { Prototype } from './prototype';
 
 // styling
 import './workflow-detail-styles.scss';
@@ -38,29 +35,6 @@ export interface WorkflowDetailRouterProps {
 interface WorkflowDetailProps
   extends RouteComponentProps<WorkflowDetailRouterProps> {}
 
-enum WORKFLOW_DETAILS_TAB {
-  EDITOR = 'editor',
-  // TODO: temporarily adding a resources tab until UX is finalized.
-  // This gives clarity into what has been done on the cluster on behalf
-  // of the frontend provisioning workflows.
-  RESOURCES = 'resources',
-  // TODO: temporarily adding a prototype tab until UX is finalized.
-  // This allows simple UI for executing ingest and search against
-  // created workflow resources
-  PROTOTYPE = 'prototype',
-}
-
-const ACTIVE_TAB_PARAM = 'tab';
-
-function replaceActiveTab(activeTab: string, props: WorkflowDetailProps) {
-  props.history.replace({
-    ...history,
-    search: queryString.stringify({
-      [ACTIVE_TAB_PARAM]: activeTab,
-    }),
-  });
-}
-
 /**
  * The workflow details page. This is where users will configure, create, and
  * test their created workflows. Additionally, can be used to load existing workflows
@@ -84,25 +58,6 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
     ? DEFAULT_NEW_WORKFLOW_NAME
     : '';
 
-  // tab state
-  const tabFromUrl = queryString.parse(useLocation().search)[
-    ACTIVE_TAB_PARAM
-  ] as WORKFLOW_DETAILS_TAB;
-  const [selectedTabId, setSelectedTabId] = useState<WORKFLOW_DETAILS_TAB>(
-    tabFromUrl
-  );
-
-  // Default to editor tab if there is none or invalid tab ID specified via url.
-  useEffect(() => {
-    if (
-      !selectedTabId ||
-      !Object.values(WORKFLOW_DETAILS_TAB).includes(selectedTabId)
-    ) {
-      setSelectedTabId(WORKFLOW_DETAILS_TAB.EDITOR);
-      replaceActiveTab(WORKFLOW_DETAILS_TAB.EDITOR, props);
-    }
-  }, []);
-
   useEffect(() => {
     getCore().chrome.setBreadcrumbs([
       BREADCRUMBS.FLOW_FRAMEWORK,
@@ -129,59 +84,20 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
     }
   }, [errorMessage]);
 
-  const tabs = [
-    {
-      id: WORKFLOW_DETAILS_TAB.EDITOR,
-      label: 'Editor',
-      isSelected: selectedTabId === WORKFLOW_DETAILS_TAB.EDITOR,
-      onClick: () => {
-        setSelectedTabId(WORKFLOW_DETAILS_TAB.EDITOR);
-        replaceActiveTab(WORKFLOW_DETAILS_TAB.EDITOR, props);
-      },
-    },
-    {
-      id: WORKFLOW_DETAILS_TAB.RESOURCES,
-      label: 'Resources',
-      isSelected: selectedTabId === WORKFLOW_DETAILS_TAB.RESOURCES,
-      onClick: () => {
-        setSelectedTabId(WORKFLOW_DETAILS_TAB.RESOURCES);
-        replaceActiveTab(WORKFLOW_DETAILS_TAB.RESOURCES, props);
-      },
-    },
-    {
-      id: WORKFLOW_DETAILS_TAB.PROTOTYPE,
-      label: 'Prototype',
-      isSelected: selectedTabId === WORKFLOW_DETAILS_TAB.PROTOTYPE,
-      onClick: () => {
-        setSelectedTabId(WORKFLOW_DETAILS_TAB.PROTOTYPE);
-        replaceActiveTab(WORKFLOW_DETAILS_TAB.PROTOTYPE, props);
-      },
-    },
-  ];
-
   return (
     <ReactFlowProvider>
       <EuiPage>
         <EuiPageBody className="workflow-detail stretch-relative">
           <WorkflowDetailHeader
             workflow={workflow}
             isNewWorkflow={isNewWorkflow}
-            tabs={tabs}
           />
-          {selectedTabId === WORKFLOW_DETAILS_TAB.EDITOR && (
-            <ReactFlowProvider>
-              <ResizableWorkspace
-                isNewWorkflow={isNewWorkflow}
-                workflow={workflow}
-              />
-            </ReactFlowProvider>
-          )}
-          {selectedTabId === WORKFLOW_DETAILS_TAB.RESOURCES && (
-            <Resources workflow={workflow} />
-          )}
-          {selectedTabId === WORKFLOW_DETAILS_TAB.PROTOTYPE && (
-            <Prototype workflow={workflow} />
-          )}
+          <ReactFlowProvider>
+            <ResizableWorkspace
+              isNewWorkflow={isNewWorkflow}
+              workflow={workflow}
+            />
+          </ReactFlowProvider>
         </EuiPageBody>
       </EuiPage>
     </ReactFlowProvider>

diff --git a/public/pages/workflow_detail/workflow_inputs/index.ts b/public/pages/workflow_detail/workflow_inputs/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './workflow_inputs';
diff --git a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
+import { Workflow } from '../../../../common';
+
+interface WorkflowInputsProps {
+  workflow: Workflow | undefined;
+}
+
+/**
+ * The workflow inputs component containing the multi-step flow to create ingest
+ * and search flows for a particular workflow.
+ */
+
+export function WorkflowInputs(props: WorkflowInputsProps) {
+  return (
+    <EuiPanel paddingSize="m">
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiText>Hello world</EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
+  );
+}
diff --git a/public/pages/workflow_detail/workspace/index.ts b/public/pages/workflow_detail/workspace/index.ts
@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { ResizableWorkspace } from './resizable_workspace';
+export { ResizableWorkspace } from '../resizable_workspace';