From 5c5a492055bc67424c61d0bb762463c59171cbf9 Mon Sep 17 00:00:00 2001
From: saimedhi <saimedhi@amazon.com>
Date: Tue, 29 Oct 2024 12:04:26 -0700
Subject: [PATCH] Fixed bugs

Signed-off-by: saimedhi <saimedhi@amazon.com>
---
 public/app.tsx                                 |  5 ++++-
 public/global-styles.scss                      |  5 +++++
 .../workflow_detail/resizable_workspace.tsx    |  6 +++++-
 .../workflow_inputs/workflow_inputs.tsx        |  8 ++++++--
 public/render_app.tsx                          | 18 +++++++++---------
 5 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/public/app.tsx b/public/app.tsx
index e22adeeb..d2eb4fd5 100644
--- a/public/app.tsx
+++ b/public/app.tsx
@@ -42,10 +42,13 @@ export const FlowFrameworkDashboardsApp = (props: Props) => {
   const location = useLocation();
   const queryParams = getDataSourceFromURL(location);
   const dataSourceId = queryParams.dataSourceId;
+  const isWorkflowDetailPage = location.pathname.includes(
+    APP_PATH.WORKFLOW_DETAIL.split(':')[0]
+  );
   const sidebar = (
     <EuiPageSideBar
       style={{ minWidth: 190 }}
-      hidden={hideInAppSideNavBar}
+      hidden={isWorkflowDetailPage || hideInAppSideNavBar}
       paddingSize="l"
     >
       <EuiSideNav
diff --git a/public/global-styles.scss b/public/global-styles.scss
index 9920b2f2..9abf0674 100644
--- a/public/global-styles.scss
+++ b/public/global-styles.scss
@@ -11,3 +11,8 @@
   height: 100%;
   width: 100%;
 }
+
+.panel-with-radius {
+  border-radius: 4px;
+  overflow: hidden;
+}
diff --git a/public/pages/workflow_detail/resizable_workspace.tsx b/public/pages/workflow_detail/resizable_workspace.tsx
index 732ab399..02045e98 100644
--- a/public/pages/workflow_detail/resizable_workspace.tsx
+++ b/public/pages/workflow_detail/resizable_workspace.tsx
@@ -162,6 +162,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                     initialSize={60}
                     minSize="25%"
                     paddingSize="s"
+                    className="stretch-absolute panel-with-radius"
                   >
                     <WorkflowInputs
                       workflow={props.workflow}
@@ -182,6 +183,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                       marginRight: isPreviewPanelOpen ? '-32px' : '0px',
                       marginBottom: isToolsPanelOpen ? '0px' : '24px',
                     }}
+                    className="stretch-absolute panel-with-radius"
                     mode="collapsible"
                     initialSize={60}
                     minSize="25%"
@@ -189,7 +191,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                     onToggleCollapsedInternal={() => onTogglePreviewChange()}
                   >
                     <EuiResizableContainer
-                      className="workspace-panel"
+                      className="workspace-panel stretch-absolute"
                       direction="vertical"
                       style={{
                         marginLeft: '-8px',
@@ -221,6 +223,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                               minSize="25%"
                               paddingSize="s"
                               style={{ marginBottom: '-8px' }}
+                              className="stretch-absolute"
                             >
                               <EuiFlexGroup
                                 direction="column"
@@ -237,6 +240,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                             </EuiResizablePanel>
                             <EuiResizableButton />
                             <EuiResizablePanel
+                              className="stretch-absolute panel-with-radius"
                               id={TOOLS_PANEL_ID}
                               mode="collapsible"
                               initialSize={50}
diff --git a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
index d55756b9..9f1808ec 100644
--- a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
@@ -625,7 +625,11 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
   }
 
   return (
-    <EuiPanel paddingSize="m" grow={true} className="workspace-panel">
+    <EuiPanel
+      paddingSize="m"
+      grow={true}
+      className="workspace-panel stretch-relative"
+    >
       {props.uiConfig === undefined ? (
         <EuiLoadingSpinner size="xl" />
       ) : (
@@ -812,7 +816,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
               <EuiFlexItem>
                 <EuiHorizontalRule margin="m" />
               </EuiFlexItem>
-              <EuiFlexItem>
+              <EuiFlexItem style={{ marginBottom: '18px' }}>
                 <EuiFlexGroup direction="row" justifyContent="flexEnd">
                   {onIngest && !ingestEnabled ? (
                     <EuiFlexItem grow={false}>
diff --git a/public/render_app.tsx b/public/render_app.tsx
index a7dee41c..bcbe0114 100644
--- a/public/render_app.tsx
+++ b/public/render_app.tsx
@@ -39,20 +39,20 @@ export const renderApp = (
     params.element
   );
 
-  const EXPECTED_BASE_PATH = `/app/${PLUGIN_ID}#`;
+  const handleLinkClick = (event: MouseEvent) => {
+    const anchorTag = (event.target as HTMLElement).closest(
+      'a'
+    ) as HTMLAnchorElement | null;
 
-  const unlistenParentHistory = params.history.listen(() => {
-    if (
-      hideInAppSideNavBar &&
-      window.location.pathname.endsWith(`/app/${PLUGIN_ID}`)
-    ) {
-      window.location.href = EXPECTED_BASE_PATH;
+    if (anchorTag && anchorTag.href.endsWith(`/app/${PLUGIN_ID}`)) {
+      window.location.href = anchorTag.href + '#';
       window.dispatchEvent(new HashChangeEvent('hashchange'));
     }
-  });
+  };
+  document.addEventListener('click', handleLinkClick);
 
   return () => {
     ReactDOM.unmountComponentAtNode(params.element);
-    unlistenParentHistory();
+    document.removeEventListener('click', handleLinkClick);
   };
 };