Add placeholder tabs; refactor resources into tools tab

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

public/pages/workflow_detail/resizable_workspace.tsx

@@ -45,6 +45,7 @@ import { Workspace } from './workspace';
 // styling
 import './workspace/workspace-styles.scss';
 import '../../global-styles.scss';
+import { Tools } from './tools';
 
 interface ResizableWorkspaceProps {
   isNewWorkflow: boolean;
@@ -360,9 +361,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                               >
                                 <EuiFlexItem>
                                   <EuiPanel paddingSize="m">
-                                    <EuiTitle>
-                                      <h3>Tools</h3>
-                                    </EuiTitle>
+                                    <Tools workflow={workflow} />
                                   </EuiPanel>
                                 </EuiFlexItem>
                               </EuiFlexGroup>

public/pages/workflow_detail/resources/index.ts → public/pages/workflow_detail/tools/index.ts

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

public/pages/workflow_detail/resources/columns.tsx → public/pages/workflow_detail/tools/resources/columns.tsx

@@ -6,7 +6,7 @@
 import {
   WORKFLOW_STEP_TO_RESOURCE_TYPE_MAP,
   WORKFLOW_STEP_TYPE,
-} from '../../../../common';
+} from '../../../../../common';
 
 export const columns = [
   {

public/pages/workflow_detail/tools/resources/index.ts

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

public/pages/workflow_detail/resources/resource_list.tsx → public/pages/workflow_detail/tools/resources/resource_list.tsx

@@ -10,7 +10,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
 } from '@elastic/eui';
-import { Workflow, WorkflowResource } from '../../../../common';
+import { Workflow, WorkflowResource } from '../../../../../common';
 import { columns } from './columns';
 
 interface ResourceListProps {

public/pages/workflow_detail/tools/resources/resources.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { Workflow } from '../../../../../common';
+import { ResourceList } from './resource_list';
+
+interface ResourcesProps {
+  workflow?: Workflow;
+}
+
+/**
+ * A simple resources page to browse created resources for a given Workflow.
+ */
+export function Resources(props: ResourcesProps) {
+  return (
+    <>
+      {props.workflow?.resourcesCreated &&
+      props.workflow.resourcesCreated.length > 0 ? (
+        <>
+          <EuiTitle>
+            <h2>Resources</h2>
+          </EuiTitle>
+          <EuiSpacer size="m" />
+          <EuiFlexGroup direction="row">
+            <EuiFlexItem>
+              <ResourceList workflow={props.workflow} />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
+      ) : (
+        <EuiEmptyPrompt
+          iconType={'cross'}
+          title={<h2>No resources available</h2>}
+          titleSize="s"
+          body={
+            <>
+              <EuiText>
+                Provision the workflow to generate resources in order to start
+                prototyping.
+              </EuiText>
+            </>
+          }
+        />
+      )}
+    </>
+  );
+}

public/pages/workflow_detail/tools/tools.tsx

@@ -0,0 +1,105 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiTab,
+  EuiTabs,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { Workflow } from '../../../../common';
+import { Resources } from './resources';
+
+interface ToolsProps {
+  workflow?: Workflow;
+}
+
+enum TAB_ID {
+  INGEST = 'ingest',
+  QUERY = 'query',
+  ERRORS = 'errors',
+  RESOURCES = 'resources',
+}
+
+const inputTabs = [
+  {
+    id: TAB_ID.INGEST,
+    name: 'Run ingestion',
+    disabled: false,
+  },
+  {
+    id: TAB_ID.QUERY,
+    name: 'Run queries',
+    disabled: false,
+  },
+  {
+    id: TAB_ID.ERRORS,
+    name: 'Errors',
+    disabled: false,
+  },
+  {
+    id: TAB_ID.RESOURCES,
+    name: 'Resources',
+    disabled: false,
+  },
+];
+
+/**
+ * The base Tools component for performing ingest and search, viewing resources, and debugging.
+ */
+export function Tools(props: ToolsProps) {
+  const [selectedTabId, setSelectedTabId] = useState<string>(TAB_ID.INGEST);
+  return (
+    <>
+      <EuiTitle>
+        <h2>Tools</h2>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <>
+        <EuiTabs size="m" expand={false}>
+          {inputTabs.map((tab, idx) => {
+            return (
+              <EuiTab
+                onClick={() => setSelectedTabId(tab.id)}
+                isSelected={tab.id === selectedTabId}
+                disabled={tab.disabled}
+                key={idx}
+              >
+                {tab.name}
+              </EuiTab>
+            );
+          })}
+        </EuiTabs>
+        <EuiSpacer size="m" />
+        <EuiFlexGroup direction="column">
+          {selectedTabId === TAB_ID.INGEST && (
+            <EuiFlexItem>
+              <EuiText>Run ingestion placeholder</EuiText>
+            </EuiFlexItem>
+          )}
+          {selectedTabId === TAB_ID.QUERY && (
+            <EuiFlexItem>
+              <EuiText>Run queries placeholder</EuiText>
+            </EuiFlexItem>
+          )}
+          {selectedTabId === TAB_ID.ERRORS && (
+            <EuiFlexItem>
+              <EuiText>View errors placeholder</EuiText>
+            </EuiFlexItem>
+          )}
+          {selectedTabId === TAB_ID.RESOURCES && (
+            <EuiFlexItem>
+              <Resources />
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      </>
+    </>
+  );
+}