From 119626075ddb8357ae91319bdada188caaad76a2 Mon Sep 17 00:00:00 2001
From: Tyler Ohlsen <ohltyler@amazon.com>
Date: Mon, 9 Oct 2023 14:56:57 -0700
Subject: [PATCH] Add a component details side panel (#57)

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>
---
 public/app.tsx                                |  7 +-
 public/pages/overview/overview.tsx            |  8 ++
 .../pages/workflow_detail/workflow_detail.tsx |  9 +-
 .../workspace/component_details.tsx           | 99 +++++++++++++++++++
 .../pages/workflow_detail/workspace/index.ts  |  2 +-
 .../workspace/reactflow-styles.scss           | 16 ++-
 .../workspace/resizable_workspace.tsx         | 68 +++++++++++++
 .../workspace/workspace-styles.scss           | 12 +++
 .../workflow_detail/workspace/workspace.tsx   | 19 ++--
 .../workspace_component/input_field_list.tsx  |  2 +-
 .../workspace_component.tsx                   | 21 +---
 .../workflows/new_workflow/new_workflow.tsx   |  7 ++
 .../workflows/workflow_list/workflow_list.tsx |  3 +
 public/pages/workflows/workflows.tsx          |  5 +
 14 files changed, 234 insertions(+), 44 deletions(-)
 create mode 100644 public/pages/workflow_detail/workspace/component_details.tsx
 create mode 100644 public/pages/workflow_detail/workspace/resizable_workspace.tsx
 create mode 100644 public/pages/workflow_detail/workspace/workspace-styles.scss

diff --git a/public/app.tsx b/public/app.tsx
index 393a0145..578995d2 100644
--- a/public/app.tsx
+++ b/public/app.tsx
@@ -19,7 +19,7 @@ interface Props extends RouteComponentProps {}
 
 export const AiFlowDashboardsApp = (props: Props) => {
   const sidebar = (
-    <EuiPageSideBar style={{ minWidth: 190 }} hidden={false}>
+    <EuiPageSideBar style={{ minWidth: 190 }} hidden={false} paddingSize="l">
       <EuiSideNav
         style={{ width: 190 }}
         items={[
@@ -50,7 +50,10 @@ export const AiFlowDashboardsApp = (props: Props) => {
   return (
     <EuiPageTemplate
       template="empty"
-      pageContentProps={{ paddingSize: 'm' }}
+      paddingSize="none"
+      grow={true}
+      restrictWidth={false}
+      pageContentProps={{ paddingSize: 's' }}
       pageSideBar={sidebar}
     >
       <Switch>
diff --git a/public/pages/overview/overview.tsx b/public/pages/overview/overview.tsx
index d352297e..3043bacc 100644
--- a/public/pages/overview/overview.tsx
+++ b/public/pages/overview/overview.tsx
@@ -14,6 +14,14 @@ import {
 import { BREADCRUMBS } from '../../utils';
 import { getCore } from '../../services';
 
+/**
+ * The overview page. This contains a detailed description on what
+ * this plugin offers, and links to different resources (blogs, demos,
+ * documentation, etc.)
+ *
+ * This may be hidden for the initial release until we have sufficient content
+ * such that this page adds enough utility & user value.
+ */
 export function Overview() {
   useEffect(() => {
     getCore().chrome.setBreadcrumbs([
diff --git a/public/pages/workflow_detail/workflow_detail.tsx b/public/pages/workflow_detail/workflow_detail.tsx
index faa3af56..f8ecc1f3 100644
--- a/public/pages/workflow_detail/workflow_detail.tsx
+++ b/public/pages/workflow_detail/workflow_detail.tsx
@@ -10,8 +10,8 @@ import { EuiPage, EuiPageBody } from '@elastic/eui';
 import { BREADCRUMBS } from '../../utils';
 import { getCore } from '../../services';
 import { WorkflowDetailHeader } from './components';
-import { Workspace } from './workspace';
 import { AppState } from '../../store';
+import { ResizableWorkspace } from './workspace';
 
 export interface WorkflowDetailRouterProps {
   workflowId: string;
@@ -20,6 +20,11 @@ export interface WorkflowDetailRouterProps {
 interface WorkflowDetailProps
   extends RouteComponentProps<WorkflowDetailRouterProps> {}
 
+/**
+ * The workflow details page. This is where users will configure, create, and
+ * test their created workflows. Additionally, can be used to load existing workflows
+ * to view details and/or make changes to them.
+ */
 export function WorkflowDetail(props: WorkflowDetailProps) {
   const { workflows } = useSelector((state: AppState) => state.workflows);
 
@@ -40,7 +45,7 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
     <EuiPage>
       <EuiPageBody>
         <WorkflowDetailHeader workflow={workflow} />
-        <Workspace workflow={workflow} />
+        <ResizableWorkspace workflow={workflow} />
       </EuiPageBody>
     </EuiPage>
   );
diff --git a/public/pages/workflow_detail/workspace/component_details.tsx b/public/pages/workflow_detail/workspace/component_details.tsx
new file mode 100644
index 00000000..3499a3a9
--- /dev/null
+++ b/public/pages/workflow_detail/workspace/component_details.tsx
@@ -0,0 +1,99 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useContext } from 'react';
+import { useOnSelectionChange } from 'reactflow';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiPanel,
+  EuiTitle,
+  EuiEmptyPrompt,
+  EuiText,
+} from '@elastic/eui';
+import { ReactFlowComponent } from '../../../../common';
+import { rfContext } from '../../../store';
+import { InputFieldList } from '../workspace_component/input_field_list';
+
+// styling
+import './workspace-styles.scss';
+
+interface ComponentDetailsProps {
+  onToggleChange: () => void;
+  isOpen: boolean;
+}
+
+/**
+ * A panel that will be nested in a resizable container to dynamically show
+ * the details and user-required inputs based on the selected component
+ * in the flow workspace.
+ */
+export function ComponentDetails(props: ComponentDetailsProps) {
+  // TODO: use this instance to update the internal node state. ex: update field data in the selected node based
+  // on user input
+  const { reactFlowInstance } = useContext(rfContext);
+
+  const [selectedComponent, setSelectedComponent] = useState<
+    ReactFlowComponent
+  >();
+
+  /**
+   * Hook provided by reactflow to listen on when nodes are selected / de-selected.
+   * - populate panel content appropriately
+   * - open the panel if a node is selected and the panel is closed
+   * - it is assumed that only one node can be selected at once
+   */
+  useOnSelectionChange({
+    onChange: ({ nodes, edges }) => {
+      if (nodes && nodes.length > 0) {
+        setSelectedComponent(nodes[0]);
+        if (!props.isOpen) {
+          props.onToggleChange();
+        }
+      } else {
+        setSelectedComponent(undefined);
+      }
+    },
+  });
+
+  return (
+    <EuiFlexGroup
+      direction="column"
+      gutterSize="none"
+      className="workspace-panel"
+    >
+      <EuiFlexItem className="resizable-panel-border">
+        <EuiPanel paddingSize="m">
+          {selectedComponent ? (
+            <>
+              <EuiTitle size="m">
+                <h2>{selectedComponent?.data.label || ''}</h2>
+              </EuiTitle>
+              <EuiSpacer size="s" />
+              <InputFieldList
+                inputFields={selectedComponent?.data.fields || []}
+              />
+            </>
+          ) : (
+            <EuiEmptyPrompt
+              iconType={'cross'}
+              title={<h2>No component selected</h2>}
+              titleSize="s"
+              body={
+                <>
+                  <EuiText>
+                    Add a component, or select a component to view or edit its
+                    configuration.
+                  </EuiText>
+                </>
+              }
+            />
+          )}
+        </EuiPanel>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/public/pages/workflow_detail/workspace/index.ts b/public/pages/workflow_detail/workspace/index.ts
index 47ade8d8..4221a0db 100644
--- 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 { Workspace } from './workspace';
+export { ResizableWorkspace } from './resizable_workspace';
diff --git a/public/pages/workflow_detail/workspace/reactflow-styles.scss b/public/pages/workflow_detail/workspace/reactflow-styles.scss
index 6c5293e0..5ce54672 100644
--- a/public/pages/workflow_detail/workspace/reactflow-styles.scss
+++ b/public/pages/workflow_detail/workspace/reactflow-styles.scss
@@ -1,6 +1,10 @@
-$handle-color: #5a5a5a;
-$handle-color-valid: #55dd99;
-$handle-color-invalid: #ff6060;
+$handle-color: $euiColorDarkestShade;
+$handle-color-valid: $euiColorSuccess;
+$handle-color-invalid: $euiColorDanger;
+
+.reactflow-workspace {
+  background: $euiColorEmptyShade;
+}
 
 .reactflow-parent-wrapper {
   display: flex;
@@ -13,12 +17,6 @@ $handle-color-invalid: #ff6060;
   height: 100%;
 }
 
-.workspace {
-  width: 80vh;
-  height: 50vh;
-  padding: 0;
-}
-
 .reactflow-workspace .react-flow__node {
   width: 300px;
 }
diff --git a/public/pages/workflow_detail/workspace/resizable_workspace.tsx b/public/pages/workflow_detail/workspace/resizable_workspace.tsx
new file mode 100644
index 00000000..e092660d
--- /dev/null
+++ b/public/pages/workflow_detail/workspace/resizable_workspace.tsx
@@ -0,0 +1,68 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useRef, useState } from 'react';
+import { ReactFlowProvider } from 'reactflow';
+import { EuiResizableContainer } from '@elastic/eui';
+import { Workflow } from '../../../../common';
+import { Workspace } from './workspace';
+import { ComponentDetails } from './component_details';
+
+interface ResizableWorkspaceProps {
+  workflow?: Workflow;
+}
+
+const COMPONENT_DETAILS_PANEL_ID = 'component_details_panel_id';
+
+/**
+ * The overall workspace component that maintains state related to the 2 resizable
+ * panels - the ReactFlow workspace panel and the selected component details panel.
+ */
+export function ResizableWorkspace(props: ResizableWorkspaceProps) {
+  const [isOpen, setIsOpen] = useState<boolean>(true);
+  const collapseFn = useRef(
+    (id: string, options: { direction: 'left' | 'right' }) => {}
+  );
+
+  const onToggleChange = () => {
+    collapseFn.current(COMPONENT_DETAILS_PANEL_ID, { direction: 'left' });
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <EuiResizableContainer
+      direction="horizontal"
+      style={{ marginLeft: '-14px' }}
+    >
+      {(EuiResizablePanel, EuiResizableButton, { togglePanel }) => {
+        if (togglePanel) {
+          collapseFn.current = (panelId: string, { direction }) =>
+            togglePanel(panelId, { direction });
+        }
+
+        return (
+          <ReactFlowProvider>
+            <EuiResizablePanel mode="main" initialSize={75} minSize="50%">
+              <Workspace workflow={props.workflow} />
+            </EuiResizablePanel>
+            <EuiResizableButton />
+            <EuiResizablePanel
+              id={COMPONENT_DETAILS_PANEL_ID}
+              mode="collapsible"
+              initialSize={25}
+              minSize="10%"
+              onToggleCollapsedInternal={() => onToggleChange()}
+            >
+              <ComponentDetails
+                onToggleChange={onToggleChange}
+                isOpen={isOpen}
+              />
+            </EuiResizablePanel>
+          </ReactFlowProvider>
+        );
+      }}
+    </EuiResizableContainer>
+  );
+}
diff --git a/public/pages/workflow_detail/workspace/workspace-styles.scss b/public/pages/workflow_detail/workspace/workspace-styles.scss
new file mode 100644
index 00000000..375c5107
--- /dev/null
+++ b/public/pages/workflow_detail/workspace/workspace-styles.scss
@@ -0,0 +1,12 @@
+.workspace-panel {
+  // this ratio will allow the workspace to render on a standard
+  // laptop (3024 x 1964) without introducing overflow/scrolling
+  height: 60vh;
+  padding: 0;
+}
+
+.resizable-panel-border {
+  border-style: groove;
+  border-color: gray;
+  border-width: 1px;
+}
diff --git a/public/pages/workflow_detail/workspace/workspace.tsx b/public/pages/workflow_detail/workspace/workspace.tsx
index 515e2503..e26ee1fb 100644
--- a/public/pages/workflow_detail/workspace/workspace.tsx
+++ b/public/pages/workflow_detail/workspace/workspace.tsx
@@ -11,6 +11,7 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
   addEdge,
+  BackgroundVariant,
 } from 'reactflow';
 import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
 import { rfContext, setDirty } from '../../../store';
@@ -23,6 +24,7 @@ import { DeletableEdge } from '../workspace_edge';
 // styling
 import 'reactflow/dist/style.css';
 import './reactflow-styles.scss';
+import './workspace-styles.scss';
 import '../workspace_edge/deletable-edge-styles.scss';
 
 interface WorkspaceProps {
@@ -117,17 +119,11 @@ export function Workspace(props: WorkspaceProps) {
   return (
     <EuiFlexGroup
       direction="column"
-      gutterSize="m"
+      gutterSize="none"
       justifyContent="spaceBetween"
-      className="workspace"
+      className="workspace-panel"
     >
-      <EuiFlexItem
-        style={{
-          borderStyle: 'groove',
-          borderColor: 'gray',
-          borderWidth: '1px',
-        }}
-      >
+      <EuiFlexItem className="resizable-panel-border">
         {/**
          * We have these wrapper divs & reactFlowWrapper ref to control and calculate the
          * ReactFlow bounds when calculating node positioning.
@@ -149,7 +145,10 @@ export function Workspace(props: WorkspaceProps) {
               fitView
             >
               <Controls />
-              <Background />
+              <Background
+                color="#343741"
+                variant={'dots' as BackgroundVariant}
+              />
             </ReactFlow>
           </div>
         </div>
diff --git a/public/pages/workflow_detail/workspace_component/input_field_list.tsx b/public/pages/workflow_detail/workspace_component/input_field_list.tsx
index 57ff82ca..e37979e6 100644
--- a/public/pages/workflow_detail/workspace_component/input_field_list.tsx
+++ b/public/pages/workflow_detail/workspace_component/input_field_list.tsx
@@ -19,7 +19,7 @@ interface InputFieldListProps {
 
 export function InputFieldList(props: InputFieldListProps) {
   return (
-    <EuiFlexItem>
+    <EuiFlexItem grow={false}>
       {props.inputFields?.map((field, idx) => {
         let el;
         switch (field.type) {
diff --git a/public/pages/workflow_detail/workspace_component/workspace_component.tsx b/public/pages/workflow_detail/workspace_component/workspace_component.tsx
index f0b640db..7d0ac3de 100644
--- a/public/pages/workflow_detail/workspace_component/workspace_component.tsx
+++ b/public/pages/workflow_detail/workspace_component/workspace_component.tsx
@@ -3,11 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiCard } from '@elastic/eui';
 import { IComponent } from '../../../component_types';
-import { InputFieldList } from './input_field_list';
-import { NewOrExistingTabs } from './new_or_existing_tabs';
 import { InputHandle } from './input_handle';
 import { OutputHandle } from './output_handle';
 
@@ -23,24 +21,9 @@ interface WorkspaceComponentProps {
 export function WorkspaceComponent(props: WorkspaceComponentProps) {
   const component = props.data;
 
-  const [selectedTabId, setSelectedTabId] = useState<string>('existing');
-
-  const isCreatingNew = component.allowsCreation && selectedTabId === 'new';
-  const fieldsToDisplay = isCreatingNew
-    ? component.createFields
-    : component.fields;
-
   return (
     <EuiCard title={component.label}>
       <EuiFlexGroup direction="column">
-        {/* <EuiFlexItem>
-          {component.allowsCreation ? (
-            <NewOrExistingTabs
-              setSelectedTabId={setSelectedTabId}
-              selectedTabId={selectedTabId}
-            />
-          ) : undefined}
-        </EuiFlexItem> */}
         {component.inputs?.map((input, index) => {
           return (
             <EuiFlexItem key={index}>
@@ -48,7 +31,7 @@ export function WorkspaceComponent(props: WorkspaceComponentProps) {
             </EuiFlexItem>
           );
         })}
-        <InputFieldList inputFields={fieldsToDisplay} />
+        {/* TODO: finalize from UX what we show in the component itself. Readonly fields? Configure in the component JSON definition? */}
         {component.outputs?.map((output, index) => {
           return (
             <EuiFlexItem key={index}>
diff --git a/public/pages/workflows/new_workflow/new_workflow.tsx b/public/pages/workflows/new_workflow/new_workflow.tsx
index 580c7a6d..ce87c443 100644
--- a/public/pages/workflows/new_workflow/new_workflow.tsx
+++ b/public/pages/workflows/new_workflow/new_workflow.tsx
@@ -10,6 +10,13 @@ import { UseCase } from './use_case';
 
 interface NewWorkflowProps {}
 
+/**
+ * TODO: may rename this later on.
+ *
+ * Contains the searchable library of templated workflows based
+ * on a variety of use cases. Can click on them to load in a pre-configured
+ * workflow for users to start with.
+ */
 export function NewWorkflow(props: NewWorkflowProps) {
   return (
     <EuiFlexGrid columns={3} gutterSize="l">
diff --git a/public/pages/workflows/workflow_list/workflow_list.tsx b/public/pages/workflows/workflow_list/workflow_list.tsx
index f182de24..005eb6e3 100644
--- a/public/pages/workflows/workflow_list/workflow_list.tsx
+++ b/public/pages/workflows/workflow_list/workflow_list.tsx
@@ -12,6 +12,9 @@ import { columns } from './columns';
 
 interface WorkflowListProps {}
 
+/**
+ * The searchable list of created workflows.
+ */
 export function WorkflowList(props: WorkflowListProps) {
   const { workflows } = useSelector((state: AppState) => state.workflows);
 
diff --git a/public/pages/workflows/workflows.tsx b/public/pages/workflows/workflows.tsx
index c79a8736..0b3c4649 100644
--- a/public/pages/workflows/workflows.tsx
+++ b/public/pages/workflows/workflows.tsx
@@ -41,6 +41,11 @@ function replaceActiveTab(activeTab: string, props: WorkflowsProps) {
   });
 }
 
+/**
+ * The base workflows page. From here, users can toggle between views to access
+ * existing created workflows, or explore the library of workflow templates
+ * to get started on a new workflow.
+ */
 export function Workflows(props: WorkflowsProps) {
   const { workflows } = useSelector((state: AppState) => state.workflows);