[Security Solution] Fixes scroll bar displayed on collapsed Treemap p…

…anel (#136787) ## [Security Solution] Fixes scroll bar displayed on collapsed Treemap panel This PR fixes [issue 136374](#136374), where sometimes, a scroll bar is displayed when the Treemap panel is collapsed, per the following screenshot: ![screenshot from issue 136374](https://user-images.githubusercontent.com/61860752/178940030-62391fde-0170-4472-ad5d-d9dd102499ea.png) _Above: Image from the repro steps of <https://github.com/elastic/kibana/issues/136374>_ ### Notes - ⚠️ The issue, (even before the fix), may not appear on some platforms. For example, the following screenshot was taken with Chrome `103.0.5060.134` on macOS _before_ the fix: ![mac_chrome_treemap_collapsed_before](https://user-images.githubusercontent.com/4459398/180098942-a1aac4b0-8568-4afa-b97c-c7d00e471e54.png) _Above: Even BEFORE the fix, the issue may not appear in Chrome on macOS_ - This PR was desk tested in light and dark on Windows and macOS (see screenshots below) using the following browsers: - Chrome `103.0.5060.134` - Firefox `102.0.1` - Safari `15.5` - The Treemap legend scroll bar was updated in this PR to use the `eui-yScroll` style, per the before and after screenshots below: #### BEFORE: The treemap legend scroll bar (Windows, light theme) ![windows_chrome_treemap_expanded_before](https://user-images.githubusercontent.com/4459398/180099530-ba462da6-7687-44ea-ad40-4d67abbbb895.png) _Above: BEFORE: The treemap legend scroll bar (Windows, light theme)_ #### AFTER: The treemap legend scroll bar (Windows, light theme) ![windows_chrome_treemap_expanded_after_light_theme](https://user-images.githubusercontent.com/4459398/180099755-5e5f5536-2bf4-4edc-b53a-12105ecb4f79.png) _Above: AFTER: The treemap legend scroll bar (Windows, light theme)_ #### AFTER: The treemap legend scroll bar (Windows, dark theme) ![windows_chrome_treemap_expanded_after_dark_theme](https://user-images.githubusercontent.com/4459398/180099883-8d7a25ce-4b0e-46a8-b7ad-2cc0c9356b9a.png) _Above: AFTER: The treemap legend scroll bar (Windows, dark theme)_ #### AFTER: The treemap legend scroll bar (macOS, light theme) ![mac_chrome_treemap_expanded_after_light_theme](https://user-images.githubusercontent.com/4459398/180100158-97b131b8-61a7-4390-93f7-cdc6d2ee782d.png) _Above: AFTER: The treemap legend scroll bar (macOS, light theme)_ #### AFTER: The treemap legend scroll bar (macOS, dark theme) ![mac_chrome_treemap_expanded_after_dark_theme](https://user-images.githubusercontent.com/4459398/180101628-7d5333f2-e428-4a3e-b394-0d14accacdef.png) _Above: AFTER: The treemap legend scroll bar (macOS, dark theme)_ ### Desk Testing The following BEFORE / AFTER screenshots of the collapsed Treemap panel were taken using Chrome `103.0.5060.134` on Windows and macOS: #### BEFORE: Collapsed panel (Windows, light theme) ![windows_chrome_treemap_collapsed_before](https://user-images.githubusercontent.com/4459398/180100527-4239e7cd-7e45-4e7f-8342-07bc206da3a4.png) _Above: BEFORE: Collapsed panel (Windows, light theme)_ #### AFTER: Collapsed panel (Windows, light theme) ![windows_chrome_treemap_collapsed_after_light_theme](https://user-images.githubusercontent.com/4459398/180100619-0ffd9d86-563e-4e4b-984d-c03f84a393b6.png) _Above: AFTER: Collapsed panel (Windows, light theme)_ #### AFTER: Collapsed panel (Windows, dark theme) ![windows_chrome_treemap_collapsed_after_dark_theme](https://user-images.githubusercontent.com/4459398/180100789-b5bed14f-4d00-4645-9078-ccba680454b8.png) _Above: AFTER: Collapsed panel (Windows, dark theme)_ #### AFTER: Collapsed panel (macOS, light theme) ![mac_chrome_treemap_collapsed_after_light_theme](https://user-images.githubusercontent.com/4459398/180100879-0881e6f3-83ee-4fd4-827d-73cf2c0b6b58.png) _Above: AFTER: Collapsed panel (macOS, light theme)_ #### AFTER: Collapsed panel (macOS, dark theme) ![mac_chrome_treemap_collapsed_after_dark_theme](https://user-images.githubusercontent.com/4459398/180101153-50775efd-831b-47f7-937b-4f5b25b13ff6.png) _Above: AFTER: Collapsed panel (macOS, dark theme)_
elastic · Jul 21, 2022 · a9780d2 · a9780d2
1 parent 1b2ce49
commit a9780d2
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 5 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/components/alerts_treemap/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/alerts_treemap/index.test.tsx
@@ -39,8 +39,8 @@ describe('AlertsTreemap', () => {
       expect(screen.getByTestId('treemap').querySelector('.echChart')).toBeInTheDocument();
     });
 
-    test('it renders the legend', () => {
-      expect(screen.getByTestId('draggable-legend')).toBeInTheDocument();
+    test('it renders the legend with the expected overflow-y style', () => {
+      expect(screen.getByTestId('draggable-legend')).toHaveClass('eui-yScroll');
     });
   });
 

diff --git a/x-pack/plugins/security_solution/public/common/components/alerts_treemap/index.tsx b/x-pack/plugins/security_solution/public/common/components/alerts_treemap/index.tsx
@@ -188,6 +188,7 @@ const AlertsTreemapComponent: React.FC<Props> = ({
           <LegendContainer>
             {legendItems.length > 0 && (
               <DraggableLegend
+                className="eui-yScroll"
                 height={minChartHeight}
                 legendItems={legendItems}
                 minWidth={DEFAULT_LEGEND_WIDTH}

diff --git a/...ck/plugins/security_solution/public/common/components/alerts_treemap_panel/index.test.tsx b/...ck/plugins/security_solution/public/common/components/alerts_treemap_panel/index.test.tsx
@@ -149,7 +149,17 @@ describe('AlertsTreemapPanel', () => {
     );
   });
 
-  it('renders the panel with an auto overflow-y to allow vertical scrolling when necessary', async () => {
+  it('renders the panel with the expected class to style the overflow-y scroll bar', async () => {
+    render(
+      <TestProviders>
+        <AlertsTreemapPanel {...defaultProps} />
+      </TestProviders>
+    );
+
+    await waitFor(() => expect(screen.getByTestId('treemapPanel')).toHaveClass('eui-yScroll'));
+  });
+
+  it('renders the panel with an auto overflow-y to allow vertical scrolling when necessary when the panel is expanded', async () => {
     render(
       <TestProviders>
         <AlertsTreemapPanel {...defaultProps} />
@@ -161,6 +171,18 @@ describe('AlertsTreemapPanel', () => {
     );
   });
 
+  it('renders the panel with a hidden overflow-y when the panel is NOT expanded', async () => {
+    render(
+      <TestProviders>
+        <AlertsTreemapPanel {...defaultProps} isPanelExpanded={false} />
+      </TestProviders>
+    );
+
+    await waitFor(() =>
+      expect(screen.getByTestId('treemapPanel')).toHaveStyleRule('overflow-y', 'hidden')
+    );
+  });
+
   it('renders the chart selector as a custom header title', async () => {
     render(
       <TestProviders>

diff --git a/x-pack/plugins/security_solution/public/common/components/alerts_treemap_panel/index.tsx b/x-pack/plugins/security_solution/public/common/components/alerts_treemap_panel/index.tsx
@@ -149,10 +149,11 @@ const AlertsTreemapPanelComponent: React.FC<Props> = ({
   return (
     <InspectButtonContainer>
       <KpiPanel
+        className="eui-yScroll"
         data-test-subj="treemapPanel"
         hasBorder
         height={isPanelExpanded ? height : COLLAPSED_HEIGHT}
-        $overflowY="auto"
+        $overflowY={isPanelExpanded ? 'auto' : 'hidden'}
         $toggleStatus
       >
         <HeaderSection

diff --git a/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx b/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx
@@ -142,4 +142,18 @@ describe('DraggableLegend', () => {
       `${MIN_LEGEND_HEIGHT}px`
     );
   });
+
+  it('renders a legend with specified class names', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <DraggableLegend className="foo bar baz" height={0} legendItems={legendItems} />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('[data-test-subj="draggable-legend"]').first().getDOMNode()).toHaveClass(
+      'foo',
+      'bar',
+      'baz'
+    );
+  });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend.tsx b/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend.tsx
@@ -44,16 +44,18 @@ const DraggableLegendContainer = styled.div<{ height: number; $minWidth: number
 `;
 
 const DraggableLegendComponent: React.FC<{
+  className?: string;
   height: number;
   legendItems: LegendItem[];
   minWidth?: number;
-}> = ({ height, legendItems, minWidth = DEFAULT_WIDTH }) => {
+}> = ({ className, height, legendItems, minWidth = DEFAULT_WIDTH }) => {
   if (legendItems.length === 0) {
     return null;
   }
 
   return (
     <DraggableLegendContainer
+      className={className}
       data-test-subj="draggable-legend"
       height={height === 0 ? MIN_LEGEND_HEIGHT : height}
       $minWidth={minWidth}