Add resizable side panel for workspace component details

Signed-off-by: Tyler Ohlsen <[email protected]>
ohltyler · Oct 6, 2023 · ed3c058 · ed3c058
1 parent f30ac98
commit ed3c058
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 23 deletions.
diff --git 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/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;
@@ -40,7 +40,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_inputs.tsx b/public/pages/workflow_detail/workspace/component_inputs.tsx
@@ -0,0 +1,28 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { Workflow } from '../../../../common';
+
+// styling
+import './workspace-styles.scss';
+
+interface ComponentInputsProps {}
+
+export function ComponentInputs(props: ComponentInputsProps) {
+  return (
+    <EuiFlexGroup
+      direction="column"
+      gutterSize="none"
+      justifyContent="spaceBetween"
+      className="workspace-panel"
+    >
+      <EuiFlexItem className="resizable-panel-border">
+        <EuiText>Side panel</EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git 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
@@ -1,6 +1,6 @@
-$handle-color: #5a5a5a;
-$handle-color-valid: #55dd99;
-$handle-color-invalid: #ff6060;
+$handle-color: $euiColorDarkestShade;
+$handle-color-valid: $euiColorSuccess;
+$handle-color-invalid: $euiColorDanger;
 
 .reactflow-parent-wrapper {
   display: flex;
@@ -13,12 +13,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
@@ -0,0 +1,40 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiResizableContainer } from '@elastic/eui';
+import { Workflow } from '../../../../common';
+import { Workspace } from './workspace';
+import { ComponentInputs } from './component_inputs';
+
+interface ResizableWorkspaceProps {
+  workflow?: Workflow;
+}
+
+export function ResizableWorkspace(props: ResizableWorkspaceProps) {
+  return (
+    <EuiResizableContainer
+      direction="horizontal"
+      style={{ marginLeft: '-14px' }}
+    >
+      {(EuiResizablePanel, EuiResizableButton) => (
+        <>
+          <EuiResizablePanel
+            mode="main"
+            initialSize={80}
+            minSize="50%"
+            style={{ margin: 0, padding: 0 }}
+          >
+            <Workspace workflow={props.workflow} />
+          </EuiResizablePanel>
+          <EuiResizableButton />
+          <EuiResizablePanel mode="collapsible" initialSize={20} minSize="10%">
+            <ComponentInputs />
+          </EuiResizablePanel>
+        </>
+      )}
+    </EuiResizableContainer>
+  );
+}
diff --git a/public/pages/workflow_detail/workspace/workspace-styles.scss 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
@@ -23,6 +23,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 +118,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.