Improve reactflow workspace to fit entire available page

Signed-off-by: Tyler Ohlsen <[email protected]>
opensearch-project · Apr 22, 2024 · 88c4919 · 88c4919
1 parent 73cbed4
commit 88c4919
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 41 deletions.
diff --git a/public/app.tsx b/public/app.tsx
@@ -5,7 +5,12 @@
 
 import React from 'react';
 import { Route, RouteComponentProps, Switch } from 'react-router-dom';
-import { EuiPageSideBar, EuiSideNav, EuiPageTemplate } from '@elastic/eui';
+import {
+  EuiPageSideBar,
+  EuiSideNav,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
 import { Navigation, APP_PATH } from './utils';
 import {
   Workflows,
@@ -14,6 +19,9 @@ import {
   WorkflowsRouterProps,
 } from './pages';
 
+// styling
+import './global-styles.scss';
+
 interface Props extends RouteComponentProps {}
 
 export const FlowFrameworkDashboardsApp = (props: Props) => {
@@ -41,44 +49,44 @@ export const FlowFrameworkDashboardsApp = (props: Props) => {
 
   // Render the application DOM.
   return (
-    <EuiPageTemplate
-      template="empty"
-      paddingSize="none"
-      grow={true}
-      restrictWidth={false}
-      pageContentProps={{ paddingSize: 's' }}
-      pageSideBar={sidebar}
+    <EuiFlexGroup
+      direction="row"
+      gutterSize="none"
+      className="stretch-relative"
     >
-      <Switch>
-        <Route
-          path={APP_PATH.WORKFLOW_DETAIL}
-          render={(
-            routeProps: RouteComponentProps<WorkflowDetailRouterProps>
-          ) => <WorkflowDetail {...routeProps} />}
-        />
-        <Route
-          path={APP_PATH.WORKFLOWS}
-          render={(routeProps: RouteComponentProps<WorkflowsRouterProps>) => (
-            <Workflows {...routeProps} />
-          )}
-        />
-        {/*
+      <EuiFlexItem grow={false}>{sidebar}</EuiFlexItem>
+      <EuiFlexItem>
+        <Switch>
+          <Route
+            path={APP_PATH.WORKFLOW_DETAIL}
+            render={(
+              routeProps: RouteComponentProps<WorkflowDetailRouterProps>
+            ) => <WorkflowDetail {...routeProps} />}
+          />
+          <Route
+            path={APP_PATH.WORKFLOWS}
+            render={(routeProps: RouteComponentProps<WorkflowsRouterProps>) => (
+              <Workflows {...routeProps} />
+            )}
+          />
+          {/*
         Defaulting to Workflows page. The pathname will need to be updated
         to handle the redirection and get the router props consistent.
         */}
-        <Route
-          path={`${APP_PATH.HOME}`}
-          render={(routeProps: RouteComponentProps<WorkflowsRouterProps>) => {
-            if (props.history.location.pathname !== APP_PATH.WORKFLOWS) {
-              props.history.replace({
-                ...history,
-                pathname: APP_PATH.WORKFLOWS,
-              });
-            }
-            return <Workflows {...routeProps} />;
-          }}
-        />
-      </Switch>
-    </EuiPageTemplate>
+          <Route
+            path={`${APP_PATH.HOME}`}
+            render={(routeProps: RouteComponentProps<WorkflowsRouterProps>) => {
+              if (props.history.location.pathname !== APP_PATH.WORKFLOWS) {
+                props.history.replace({
+                  ...history,
+                  pathname: APP_PATH.WORKFLOWS,
+                });
+              }
+              return <Workflows {...routeProps} />;
+            }}
+          />
+        </Switch>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };
diff --git a/public/global-styles.scss b/public/global-styles.scss
@@ -0,0 +1,13 @@
+// Maximize space given its relative position
+.stretch-relative {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+// Maximize space given its absolute position
+.stretch-absolute {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
diff --git a/public/pages/workflow_detail/workflow_detail.tsx b/public/pages/workflow_detail/workflow_detail.tsx
@@ -25,10 +25,11 @@ import {
   NEW_WORKFLOW_ID_URL,
 } from '../../../common';
 import { Resources } from './resources';
+import { Prototype } from './prototype';
 
 // styling
 import './workflow-detail-styles.scss';
-import { Prototype } from './prototype';
+import '../../global-styles.scss';
 
 export interface WorkflowDetailRouterProps {
   workflowId: string;
@@ -161,7 +162,7 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
   return (
     <ReactFlowProvider>
       <EuiPage>
-        <EuiPageBody className="workflow-detail">
+        <EuiPageBody className="workflow-detail stretch-relative">
           <WorkflowDetailHeader
             workflow={workflow}
             isNewWorkflow={isNewWorkflow}

diff --git a/public/pages/workflow_detail/workspace/resizable_workspace.tsx b/public/pages/workflow_detail/workspace/resizable_workspace.tsx
@@ -52,6 +52,7 @@ import { ComponentDetails } from '../component_details';
 
 // styling
 import './workspace-styles.scss';
+import '../../../global-styles.scss';
 
 interface ResizableWorkspaceProps {
   isNewWorkflow: boolean;
@@ -444,6 +445,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
           />
           <EuiResizableContainer
             direction="horizontal"
+            className="stretch-absolute"
             style={{
               marginLeft: '-8px',
             }}

diff --git a/public/pages/workflow_detail/workspace/workspace-styles.scss b/public/pages/workflow_detail/workspace/workspace-styles.scss
@@ -1,5 +1,3 @@
 .workspace-panel {
-  // this ratio will allow the workspace to render on a standard
-  // laptop (3024 x 1964) without introducing overflow/scrolling
-  height: 55vh;
+  height: 100%;
 }
diff --git a/public/render_app.tsx b/public/render_app.tsx
@@ -11,10 +11,15 @@ import { AppMountParameters, CoreStart } from '../../../src/core/public';
 import { FlowFrameworkDashboardsApp } from './app';
 import { store } from './store';
 
+// styling
+import './global-styles.scss';
+
 export const renderApp = (
   coreStart: CoreStart,
   { appBasePath, element }: AppMountParameters
 ) => {
+  // This is so our base element stretches to fit the entire webpage
+  element.className = 'stretch-absolute';
   ReactDOM.render(
     <Provider store={store}>
       <Router basename={appBasePath + '#/'}>