Add tabs and placeholder pages

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

public/pages/workflow_detail/components/header.tsx

@@ -11,6 +11,7 @@ import { saveWorkflow } from '../utils';
 import { rfContext, AppState, removeDirty } from '../../../store';
 
 interface WorkflowDetailHeaderProps {
+  tabs: any[];
   workflow?: Workflow;
 }
 
@@ -22,7 +23,6 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
   return (
     <EuiPageHeader
       pageTitle={props.workflow ? props.workflow.name : ''}
-      description={props.workflow ? props.workflow.description : ''}
       rightSideItems={[
         <EuiButton fill={false} onClick={() => {}}>
           Prototype
@@ -39,6 +39,8 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
           Save
         </EuiButton>,
       ]}
+      tabs={props.tabs}
+      bottomBorder={true}
     />
   );
 }

public/pages/workflow_detail/launches/index.ts

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { LaunchList } from './launch_list';
+export { Launches } from './launches';

public/pages/workflow_detail/launches/launch_details.tsx

@@ -0,0 +1,13 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiText } from '@elastic/eui';
+
+interface LaunchDetailsProps {}
+
+export function LaunchDetails(props: LaunchDetailsProps) {
+  return <EuiText>TODO: add selected launch details here</EuiText>;
+}

public/pages/workflow_detail/launches/launches.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { Workflow } from '../../../../common';
+import { LaunchList } from './launch_list';
+import { LaunchDetails } from './launch_details';
+
+interface LaunchesProps {
+  workflow?: Workflow;
+}
+
+/**
+ * The launches page to browse launch history and view individual launch details.
+ */
+export function Launches(props: LaunchesProps) {
+  return (
+    <EuiFlexGroup direction="row">
+      <EuiFlexItem>
+        <LaunchList />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <LaunchDetails />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}

public/pages/workflow_detail/prototype/index.ts

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

public/pages/workflow_detail/prototype/prototype.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiFlexItem, EuiText } from '@elastic/eui';
+import { Workflow } from '../../../../common';
+
+interface PrototypeProps {
+  workflow?: Workflow;
+}
+
+/**
+ * The prototype page. Dedicated for testing out a launched workflow.
+ * Will have default simple interfaces for common application types, such as
+ * conversational chatbots.
+ */
+export function Prototype(props: PrototypeProps) {
+  return (
+    <EuiFlexItem>
+      <EuiText>TODO: add prototype page</EuiText>
+    </EuiFlexItem>
+  );
+}

public/pages/workflow_detail/workflow_detail.tsx

@@ -3,24 +3,47 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect } from 'react';
-import { RouteComponentProps } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { RouteComponentProps, useLocation } 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';
 import { WorkflowDetailHeader } from './components';
 import { AppState } from '../../store';
 import { ResizableWorkspace } from './workspace';
+import { Launches } from './launches';
+import { Prototype } from './prototype';
 
 export interface WorkflowDetailRouterProps {
   workflowId: string;
 }
 
-interface WorkflowDetailProps
+export interface WorkflowDetailProps
   extends RouteComponentProps<WorkflowDetailRouterProps> {}
 
+export enum WORKFLOW_DETAILS_TAB {
+  EDITOR = 'editor',
+  LAUNCHES = 'launches',
+  PROTOTYPE = 'prototype',
+}
+
+export const ACTIVE_TAB_PARAM = 'tab';
+
+export 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
@@ -34,6 +57,21 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
   );
   const workflowName = workflow ? workflow.name : '';
 
+  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 specified via url.
+  useEffect(() => {
+    if (!selectedTabId) {
+      setSelectedTabId(WORKFLOW_DETAILS_TAB.EDITOR);
+      replaceActiveTab(WORKFLOW_DETAILS_TAB.EDITOR, props);
+    }
+  }, []);
+
   useEffect(() => {
     getCore().chrome.setBreadcrumbs([
       BREADCRUMBS.AI_APPLICATION_BUILDER,
@@ -42,12 +80,48 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
     ]);
   });
 
+  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.LAUNCHES,
+      label: 'Launches',
+      isSelected: selectedTabId === WORKFLOW_DETAILS_TAB.LAUNCHES,
+      onClick: () => {
+        setSelectedTabId(WORKFLOW_DETAILS_TAB.LAUNCHES);
+        replaceActiveTab(WORKFLOW_DETAILS_TAB.LAUNCHES, 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>
-          <WorkflowDetailHeader workflow={workflow} />
-          <ResizableWorkspace workflow={workflow} />
+          <WorkflowDetailHeader workflow={workflow} tabs={tabs} />
+          {selectedTabId === WORKFLOW_DETAILS_TAB.EDITOR && (
+            <ResizableWorkspace workflow={workflow} />
+          )}
+          {selectedTabId === WORKFLOW_DETAILS_TAB.LAUNCHES && <Launches />}
+          {selectedTabId === WORKFLOW_DETAILS_TAB.PROTOTYPE && (
+            <Prototype workflow={workflow} />
+          )}
         </EuiPageBody>
       </EuiPage>
     </ReactFlowProvider>

public/pages/workflow_detail/workspace/resizable_workspace.tsx

@@ -141,7 +141,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
         <Form>
           <EuiResizableContainer
             direction="horizontal"
-            style={{ marginLeft: '-14px' }}
+            style={{ marginLeft: '-8px', marginTop: '-8px' }}
           >
             {(EuiResizablePanel, EuiResizableButton, { togglePanel }) => {
               if (togglePanel) {
@@ -151,7 +151,12 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
 
               return (
                 <>
-                  <EuiResizablePanel mode="main" initialSize={75} minSize="50%">
+                  <EuiResizablePanel
+                    mode="main"
+                    initialSize={75}
+                    minSize="50%"
+                    paddingSize="s"
+                  >
                     <Workspace
                       workflow={props.workflow}
                       onNodesChange={onNodesChange}
@@ -163,6 +168,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                     mode="collapsible"
                     initialSize={25}
                     minSize="10%"
+                    paddingSize="s"
                     onToggleCollapsedInternal={() => onToggleChange()}
                   >
                     <ComponentDetails selectedComponent={selectedComponent} />

public/pages/workflows/workflows.tsx

@@ -30,7 +30,7 @@ enum WORKFLOWS_TAB {
   CREATE = 'create',
 }
 
-const ACTIVE_TAB_PARAM = 'active_tab';
+const ACTIVE_TAB_PARAM = 'tab';
 
 function replaceActiveTab(activeTab: string, props: WorkflowsProps) {
   props.history.replace({
@@ -100,6 +100,7 @@ export function Workflows(props: WorkflowsProps) {
               },
             },
           ]}
+          bottomBorder={true}
         />
 
         <EuiPageContent>

public/utils/utils.ts

@@ -4,6 +4,7 @@
  */
 
 import { FormikErrors, FormikTouched, FormikValues } from 'formik';
+import { EuiFilterSelectItem } from '@elastic/eui';
 import { Schema, ObjectSchema } from 'yup';
 import * as yup from 'yup';
 import {
@@ -15,7 +16,6 @@ import {
   WorkspaceFormValues,
   WORKFLOW_STATE,
 } from '../../common';
-import { EuiFilterSelectItem } from '@elastic/eui';
 
 // Append 16 random characters
 export function generateId(prefix: string): string {