Fix to hide side panel completely on close (#9)

jenny-s51 · Jul 3, 2024 · 1ea2729 · 1ea2729
1 parent 9758f52
commit 1ea2729
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/frontend/src/app/App.scss b/frontend/src/app/App.scss
@@ -41,12 +41,6 @@ body,
       inset-inline-start: 12px;
     }
   }
-  .pf-topology-container {
-    overflow-y: hidden;
-    .pf-v5-c-drawer__panel.pf-m-resizable {
-      min-width: 350px;
-    }
-  }
 }
 
 // specificity targeting form elements to override --pf-v5-global--FontSize--md

diff --git a/frontend/src/concepts/topology/PipelineVisualizationSurface.scss b/frontend/src/concepts/topology/PipelineVisualizationSurface.scss
@@ -0,0 +1,8 @@
+.pipeline-visualization.m-is-open {
+  .pf-topology-container {
+    overflow-y: hidden;
+    .pf-v5-c-drawer__panel.pf-m-resizable {
+      min-width: 350px;
+    }
+  }
+}
diff --git a/frontend/src/concepts/topology/PipelineVisualizationSurface.tsx b/frontend/src/concepts/topology/PipelineVisualizationSurface.tsx
@@ -21,7 +21,9 @@ import {
   EmptyStateHeader,
 } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { css } from '@patternfly/react-styles';
 import { NODE_HEIGHT, NODE_WIDTH } from './const';
+import './PipelineVisualizationSurface.scss';
 
 type PipelineVisualizationSurfaceProps = {
   nodes: PipelineNodeModel[];
@@ -159,6 +161,7 @@ const PipelineVisualizationSurface: React.FC<PipelineVisualizationSurfaceProps>
 
   return (
     <TopologyView
+      className={css('pipeline-visualization', !!selectedNode && 'm-is-open')}
       controlBar={
         <TopologyControlBar
           controlButtons={createTopologyControlButtons({