[Backport 2.x] Refactor UseCases into nested tab; standardize page layouts

public/app.tsx

@@ -9,10 +9,10 @@ import { EuiPageSideBar, EuiSideNav, EuiPageTemplate } from '@elastic/eui';
 import { Navigation, APP_PATH } from './utils';
 import {
   Overview,
-  UseCases,
   Workflows,
   WorkflowDetail,
   WorkflowDetailRouterProps,
+  WorkflowsRouterProps,
 } from './pages';
 
 interface Props extends RouteComponentProps {}
@@ -28,10 +28,10 @@ export const AiFlowDashboardsApp = (props: Props) => {
             id: 0,
             items: [
               {
-                name: Navigation.UseCases,
+                name: Navigation.Overview,
                 id: 1,
-                href: `#${APP_PATH.USE_CASES}`,
-                isSelected: props.location.pathname === APP_PATH.USE_CASES,
+                href: `#${APP_PATH.OVERVIEW}`,
+                isSelected: props.location.pathname === APP_PATH.OVERVIEW,
               },
               {
                 name: Navigation.Workflows,
@@ -54,10 +54,6 @@ export const AiFlowDashboardsApp = (props: Props) => {
       pageSideBar={sidebar}
     >
       <Switch>
-        <Route
-          path={APP_PATH.USE_CASES}
-          render={(routeProps: RouteComponentProps) => <UseCases />}
-        />
         <Route
           path={APP_PATH.WORKFLOW_DETAIL}
           render={(
@@ -66,7 +62,9 @@ export const AiFlowDashboardsApp = (props: Props) => {
         />
         <Route
           path={APP_PATH.WORKFLOWS}
-          render={(routeProps: RouteComponentProps) => <Workflows />}
+          render={(routeProps: RouteComponentProps<WorkflowsRouterProps>) => (
+            <Workflows {...routeProps} />
+          )}
         />
         {/* Defaulting to Overview page */}
         <Route

public/pages/index.ts

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export * from './use_cases';
 export * from './workflows';
 export * from './overview';
 export * from './workflow_detail';

public/pages/overview/overview.tsx

@@ -4,18 +4,33 @@
  */
 
 import React, { useEffect } from 'react';
-import { EuiPageHeader, EuiText } from '@elastic/eui';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageHeader,
+  EuiPageContent,
+  EuiText,
+} from '@elastic/eui';
 import { BREADCRUMBS } from '../../utils';
 import { getCore } from '../../services';
 
 export function Overview() {
   useEffect(() => {
-    getCore().chrome.setBreadcrumbs([BREADCRUMBS.AI_APPLICATION_BUILDER]);
+    getCore().chrome.setBreadcrumbs([
+      BREADCRUMBS.AI_APPLICATION_BUILDER,
+      BREADCRUMBS.OVERVIEW,
+    ]);
   });
 
   return (
-    <EuiPageHeader>
-      <EuiText>Welcome to the AI Application Builder!</EuiText>
-    </EuiPageHeader>
+    <EuiPage>
+      <EuiPageBody>
+        <EuiPageHeader pageTitle="Overview" />
+
+        <EuiPageContent>
+          <EuiText>TODO: Put overview details here...</EuiText>
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
   );
 }

public/pages/workflow_detail/components/header.tsx

@@ -13,19 +13,17 @@ interface WorkflowDetailHeaderProps {
 
 export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
   return (
-    <div>
-      <EuiPageHeader
-        pageTitle={props.workflow ? props.workflow.name : ''}
-        description={props.workflow ? props.workflow.description : ''}
-        rightSideItems={[
-          <EuiButton fill={false} onClick={() => {}}>
-            Prototype
-          </EuiButton>,
-          <EuiButton fill={false} onClick={() => {}}>
-            Save
-          </EuiButton>,
-        ]}
-      />
-    </div>
+    <EuiPageHeader
+      pageTitle={props.workflow ? props.workflow.name : ''}
+      description={props.workflow ? props.workflow.description : ''}
+      rightSideItems={[
+        <EuiButton fill={false} onClick={() => {}}>
+          Prototype
+        </EuiButton>,
+        <EuiButton fill={false} onClick={() => {}}>
+          Save
+        </EuiButton>,
+      ]}
+    />
   );
 }

public/pages/workflow_detail/workflow_detail.tsx

@@ -6,7 +6,7 @@
 import React, { useEffect } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { useSelector } from 'react-redux';
-import { EuiSpacer } from '@elastic/eui';
+import { EuiPage, EuiPageBody } from '@elastic/eui';
 import { BREADCRUMBS } from '../../utils';
 import { getCore } from '../../services';
 import { WorkflowDetailHeader } from './components';
@@ -37,10 +37,11 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
   });
 
   return (
-    <div>
-      <WorkflowDetailHeader workflow={workflow} />
-      <EuiSpacer size="l" />
-      <Workspace workflow={workflow} />
-    </div>
+    <EuiPage>
+      <EuiPageBody>
+        <WorkflowDetailHeader workflow={workflow} />
+        <Workspace workflow={workflow} />
+      </EuiPageBody>
+    </EuiPage>
   );
 }

public/pages/workflow_detail/workspace/workspace.tsx

@@ -111,47 +111,45 @@ export function Workspace(props: WorkspaceProps) {
   }, [props.workflow]);
 
   return (
-    <EuiFlexItem grow={true}>
-      <EuiFlexGroup
-        direction="column"
-        gutterSize="m"
-        justifyContent="spaceBetween"
-        className="workspace"
+    <EuiFlexGroup
+      direction="column"
+      gutterSize="m"
+      justifyContent="spaceBetween"
+      className="workspace"
+    >
+      <EuiFlexItem
+        style={{
+          borderStyle: 'groove',
+          borderColor: 'gray',
+          borderWidth: '1px',
+        }}
       >
-        <EuiFlexItem
-          style={{
-            borderStyle: 'groove',
-            borderColor: 'gray',
-            borderWidth: '1px',
-          }}
-        >
-          {/**
-           * We have these wrapper divs & reactFlowWrapper ref to control and calculate the
-           * ReactFlow bounds when calculating node positioning.
-           */}
-          <div className="reactflow-parent-wrapper">
-            <div className="reactflow-wrapper" ref={reactFlowWrapper}>
-              <ReactFlow
-                nodes={nodes}
-                edges={edges}
-                nodeTypes={nodeTypes}
-                edgeTypes={edgeTypes}
-                onNodesChange={onNodesChange}
-                onEdgesChange={onEdgesChange}
-                onConnect={onConnect}
-                onInit={setReactFlowInstance}
-                onDrop={onDrop}
-                onDragOver={onDragOver}
-                className="reactflow-workspace"
-                fitView
-              >
-                <Controls />
-                <Background />
-              </ReactFlow>
-            </div>
+        {/**
+         * We have these wrapper divs & reactFlowWrapper ref to control and calculate the
+         * ReactFlow bounds when calculating node positioning.
+         */}
+        <div className="reactflow-parent-wrapper">
+          <div className="reactflow-wrapper" ref={reactFlowWrapper}>
+            <ReactFlow
+              nodes={nodes}
+              edges={edges}
+              nodeTypes={nodeTypes}
+              edgeTypes={edgeTypes}
+              onNodesChange={onNodesChange}
+              onEdgesChange={onEdgesChange}
+              onConnect={onConnect}
+              onInit={setReactFlowInstance}
+              onDrop={onDrop}
+              onDragOver={onDragOver}
+              className="reactflow-workspace"
+              fitView
+            >
+              <Controls />
+              <Background />
+            </ReactFlow>
           </div>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiFlexItem>
+        </div>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }

public/pages/workflows/index.ts

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

public/pages/use_cases/components/index.ts → public/pages/workflows/new_workflow/index.ts

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { UseCase } from './use_case';
+export { NewWorkflow } from './new_workflow';

public/pages/workflows/new_workflow/new_workflow.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiFlexItem, EuiFlexGrid } from '@elastic/eui';
+
+import { UseCase } from './use_case';
+
+interface NewWorkflowProps {}
+
+export function NewWorkflow(props: NewWorkflowProps) {
+  return (
+    <EuiFlexGrid columns={3} gutterSize="l">
+      <EuiFlexItem>
+        <UseCase
+          title="Semantic Search"
+          description="Semantic search description..."
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <UseCase
+          title="Multi-modal Search"
+          description="Multi-modal search description..."
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <UseCase
+          title="Search Summarization"
+          description="Search summarization description..."
+        />
+      </EuiFlexItem>
+    </EuiFlexGrid>
+  );
+}

public/pages/use_cases/components/use_case.tsx → public/pages/workflows/new_workflow/use_case.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect } from 'react';
+import React from 'react';
 import {
   EuiText,
   EuiFlexGroup,