Set up basic page structures

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

public/pages/use_cases/components/index.ts

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

public/pages/use_cases/components/use_case.tsx

@@ -0,0 +1,65 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect } from 'react';
+import {
+  EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+  EuiCard,
+  EuiHorizontalRule,
+  EuiButton,
+} from '@elastic/eui';
+import { CoreServicesContext } from '../../../core_services';
+import { CoreStart } from '../../../../../../src/core/public';
+import { BREADCRUMBS } from '../../../utils';
+
+interface UseCaseProps {
+  title: string;
+  description: string;
+}
+
+export function UseCase(props: UseCaseProps) {
+  const core = React.useContext(CoreServicesContext) as CoreStart;
+  useEffect(() => {
+    core.chrome.setBreadcrumbs([
+      BREADCRUMBS.AI_APPLICATION_BUILDER,
+      BREADCRUMBS.USE_CASES,
+    ]);
+  });
+
+  return (
+    <EuiCard
+      title={
+        <EuiTitle size="s">
+          <h2>{props.title}</h2>
+        </EuiTitle>
+      }
+      titleSize="s"
+      paddingSize="l"
+    >
+      <EuiFlexGroup direction="column" gutterSize="l">
+        <EuiHorizontalRule size="full" margin="m" />
+        <EuiFlexItem grow={true}>
+          <EuiText>{props.description}</EuiText>
+        </EuiFlexItem>
+        <EuiFlexGroup direction="column" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              disabled={false}
+              isLoading={false}
+              onClick={() => {
+                // TODO: possibly link to the workflow builder with a pre-configured flow
+              }}
+            >
+              Go
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexGroup>
+    </EuiCard>
+  );
+}

public/pages/use_cases/use_cases.tsx

@@ -4,23 +4,60 @@
  */
 
 import React, { useEffect } from 'react';
-import { EuiPageHeader, EuiText } from '@elastic/eui';
+import {
+  EuiPageHeader,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+  EuiFlexGrid,
+  EuiSpacer,
+} from '@elastic/eui';
 import { CoreServicesContext } from '../../core_services';
 import { CoreStart } from '../../../../../src/core/public';
 import { BREADCRUMBS } from '../../utils';
+import { UseCase } from './components';
 
 export function UseCases() {
   const core = React.useContext(CoreServicesContext) as CoreStart;
   useEffect(() => {
     core.chrome.setBreadcrumbs([
       BREADCRUMBS.AI_APPLICATION_BUILDER,
-      BREADCRUMBS.USE_CASES,
+      BREADCRUMBS.WORKFLOWS,
     ]);
   });
 
   return (
-    <EuiPageHeader>
-      <EuiText>Use cases page placeholder...</EuiText>
-    </EuiPageHeader>
+    <div>
+      <EuiPageHeader>
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="l">
+              <h1>Use Cases</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPageHeader>
+      <EuiSpacer size="l" />
+      <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>
+    </div>
   );
 }

public/pages/workflows/components/index.ts

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

public/pages/workflows/components/workflow_list.tsx

@@ -0,0 +1,90 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect, useState } from 'react';
+import { EuiBasicTable } from '@elastic/eui';
+import { CoreServicesContext } from '../../../core_services';
+import { CoreStart } from '../../../../../../src/core/public';
+import { BREADCRUMBS } from '../../../utils';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface WorkflowListProps {}
+
+interface WorkflowItem {
+  name: string;
+  description: string;
+}
+
+export function WorkflowList(props: WorkflowListProps) {
+  const core = React.useContext(CoreServicesContext) as CoreStart;
+  useEffect(() => {
+    core.chrome.setBreadcrumbs([
+      BREADCRUMBS.AI_APPLICATION_BUILDER,
+      BREADCRUMBS.USE_CASES,
+    ]);
+  });
+
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize, setPageSize] = useState(5);
+  const [sortField, setSortField] = useState('name');
+  const [sortDirection, setSortDirection] = useState('asc');
+
+  const columns = [
+    {
+      field: 'name',
+      name: 'Name',
+      sortable: true,
+    },
+    {
+      field: 'description',
+      name: 'Description',
+      sortable: false,
+    },
+  ];
+
+  const items = [
+    {
+      name: 'Workflow 1',
+    },
+  ] as WorkflowItem[];
+
+  const sorting = {
+    sort: {
+      field: sortField,
+      direction: sortDirection,
+    },
+    enableAllColumns: false,
+    readOnly: false,
+  };
+
+  const pagination = {
+    pageIndex,
+    pageSize,
+    totalItemCount: items.length,
+    pageSizeOptions: [5, 10, 20],
+  };
+
+  const onTableChange = ({ page = {}, sort = {} }) => {
+    const { index, size } = page;
+    const { field, direction } = sort;
+
+    setPageIndex(index);
+    setPageSize(size);
+    setSortField(field);
+    setSortDirection(direction);
+  };
+
+  return (
+    <EuiBasicTable<WorkflowItem>
+      items={items}
+      rowHeader="name"
+      columns={columns}
+      sorting={sorting}
+      pagination={pagination}
+      onChange={onTableChange}
+      noItemsMessage={'No existing workflows found'}
+    />
+  );
+}

public/pages/workflows/workflows.tsx

@@ -4,10 +4,17 @@
  */
 
 import React, { useEffect } from 'react';
-import { EuiPageHeader, EuiText } from '@elastic/eui';
+import {
+  EuiPageHeader,
+  EuiTitle,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+} from '@elastic/eui';
 import { CoreServicesContext } from '../../core_services';
 import { CoreStart } from '../../../../../src/core/public';
 import { BREADCRUMBS } from '../../utils';
+import { WorkflowList } from './components';
 
 export function Workflows() {
   const core = React.useContext(CoreServicesContext) as CoreStart;
@@ -19,8 +26,22 @@ export function Workflows() {
   });
 
   return (
-    <EuiPageHeader>
-      <EuiText>Workflows page placeholder...</EuiText>
-    </EuiPageHeader>
+    <div>
+      <EuiPageHeader>
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="l">
+              <h1>Workflows</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPageHeader>
+      <EuiSpacer size="m" />
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <WorkflowList />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
   );
 }