From 3b6c3d373a72e180361b08baff05c5c504c00ce7 Mon Sep 17 00:00:00 2001
From: Ashwin Pc <ashwinpc@amazon.com>
Date: Sat, 3 Sep 2022 04:31:32 +0000
Subject: [PATCH] adds resizeable container to right nav

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>
---
 .../wizard/public/application/app.scss        | 13 +++++--
 src/plugins/wizard/public/application/app.tsx | 35 +++++++++++++++++--
 .../application/components/side_nav.scss      |  1 +
 .../application/components/workspace.scss     |  1 +
 4 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/plugins/wizard/public/application/app.scss b/src/plugins/wizard/public/application/app.scss
index aef10c7abd1f..f4a73eb3ecd4 100644
--- a/src/plugins/wizard/public/application/app.scss
+++ b/src/plugins/wizard/public/application/app.scss
@@ -8,9 +8,18 @@
   padding: 0;
   display: grid;
   grid-template:
-    "topNav topNav topNav" min-content
-    "leftNav workspace rightNav" 1fr / #{$wizLeftNavWidth} 1fr #{$wizRightNavWidth};
+    "topNav topNav" min-content
+    "leftNav workspaceNav" 1fr / #{$wizLeftNavWidth} 1fr;
   height: calc(100vh - #{$osdHeaderOffset});
+
+  &__resizeContainer {
+    min-height: 0;
+    background-color: $euiColorEmptyShade;
+  }
+
+  &__resizeButton {
+    transform: translateX(-$euiSizeM / 2);
+  }
 }
 
 .headerIsExpanded .wizLayout {
diff --git a/src/plugins/wizard/public/application/app.tsx b/src/plugins/wizard/public/application/app.tsx
index 9c93dcb1b552..52a0f537646e 100644
--- a/src/plugins/wizard/public/application/app.tsx
+++ b/src/plugins/wizard/public/application/app.tsx
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import { I18nProvider } from '@osd/i18n/react';
-import { EuiPage } from '@elastic/eui';
+import { EuiPage, EuiResizableContainer } from '@elastic/eui';
 import { DragDropProvider } from './utils/drag_drop/drag_drop_context';
 import { LeftNav } from './components/left_nav';
 import { TopNav } from './components/top_nav';
@@ -21,8 +21,37 @@ export const WizardApp = () => {
         <EuiPage className="wizLayout">
           <TopNav />
           <LeftNav />
-          <Workspace />
-          <RightNav />
+          <EuiResizableContainer className="wizLayout__resizeContainer">
+            {(EuiResizablePanel, EuiResizableButton) => (
+              <>
+                <EuiResizablePanel
+                  className="wizLayout__workspaceResize"
+                  paddingSize="none"
+                  initialSize={80}
+                  minSize="300px"
+                  mode="main"
+                >
+                  <Workspace />
+                </EuiResizablePanel>
+                <EuiResizableButton className="wizLayout__resizeButton" />
+                <EuiResizablePanel
+                  className="wizLayout__rightNavResize"
+                  paddingSize="none"
+                  initialSize={20}
+                  minSize="250px"
+                  mode={[
+                    'collapsible',
+                    {
+                      position: 'top',
+                    },
+                  ]}
+                  id="wizRightResize"
+                >
+                  <RightNav />
+                </EuiResizablePanel>
+              </>
+            )}
+          </EuiResizableContainer>
         </EuiPage>
       </DragDropProvider>
     </I18nProvider>
diff --git a/src/plugins/wizard/public/application/components/side_nav.scss b/src/plugins/wizard/public/application/components/side_nav.scss
index 1191c0a703b9..025e42d08170 100644
--- a/src/plugins/wizard/public/application/components/side_nav.scss
+++ b/src/plugins/wizard/public/application/components/side_nav.scss
@@ -16,6 +16,7 @@
   &.right {
     border-left: $euiBorderThin;
     grid-area: rightNav;
+    height: 100%;
   }
 
   &__header {
diff --git a/src/plugins/wizard/public/application/components/workspace.scss b/src/plugins/wizard/public/application/components/workspace.scss
index 0b7b851cfddb..1a57a891262e 100644
--- a/src/plugins/wizard/public/application/components/workspace.scss
+++ b/src/plugins/wizard/public/application/components/workspace.scss
@@ -10,6 +10,7 @@
   grid-gap: $euiSizeM;
   padding: $euiSizeM;
   background-color: $euiColorEmptyShade;
+  height: 100%;
 
   &__empty {
     height: 100%;