Increase z-index of focused dashboard grid item (#17349)

Increase z-index of focused dashboard grid item so that
its overflowing elements display above sibling elements.

Fixes #17333

src/core_plugins/kibana/public/dashboard/grid/__snapshots__/dashboard_grid.test.js.snap

@@ -27,6 +27,11 @@ exports[`renders DashboardGrid 1`] = `
   <div
     className=""
     key="1"
+    style={
+      Object {
+        "zIndex": "auto",
+      }
+    }
   >
     <Connect(DashboardPanel)
       embeddableFactory={
@@ -47,6 +52,11 @@ exports[`renders DashboardGrid 1`] = `
   <div
     className=""
     key="2"
+    style={
+      Object {
+        "zIndex": "auto",
+      }
+    }
   >
     <Connect(DashboardPanel)
       embeddableFactory={

src/core_plugins/kibana/public/dashboard/grid/dashboard_grid.js

@@ -88,6 +88,7 @@ export class DashboardGrid extends React.Component {
     // item.
     this.gridItems = {};
     this.state = {
+      focusedPanelIndex: undefined,
       layout: this.buildLayoutFromPanels()
     };
     // A mapping of panel type to embeddable handlers. Because this function reaches out of react and into angular,
@@ -151,17 +152,13 @@ export class DashboardGrid extends React.Component {
     onPanelsUpdated(updatedPanels);
   };
 
-  onPanelFocused = panelIndex => {
-    const gridItem = this.gridItems[panelIndex];
-    if (gridItem) {
-      gridItem.style.zIndex = '1';
-    }
+  onPanelFocused = focusedPanelIndex => {
+    this.setState({ focusedPanelIndex });
   };
 
-  onPanelBlurred = panelIndex => {
-    const gridItem = this.gridItems[panelIndex];
-    if (gridItem) {
-      gridItem.style.zIndex = 'auto';
+  onPanelBlurred = blurredPanelIndex => {
+    if (this.state.focusedPanelIndex === blurredPanelIndex) {
+      this.setState({ focusedPanelIndex: undefined });
     }
   };
 
@@ -171,6 +168,7 @@ export class DashboardGrid extends React.Component {
       getContainerApi,
       maximizedPanelId
     } = this.props;
+    const { focusedPanelIndex } = this.state;
 
     // Part of our unofficial API - need to render in a consistent order for plugins.
     const panelsInOrder = Object.keys(panels).map(key => panels[key]);
@@ -191,6 +189,7 @@ export class DashboardGrid extends React.Component {
       });
       return (
         <div
+          style={{ zIndex: focusedPanelIndex === panel.panelIndex ? '2' : 'auto' }}
           className={classes}
           key={panel.panelIndex}
           ref={reactGridItem => { this.gridItems[panel.panelIndex] = reactGridItem; }}

src/core_plugins/kibana/public/dashboard/grid/dashboard_grid.test.js

@@ -59,3 +59,12 @@ test('renders DashboardGrid with no visualizations', () => {
   const component = shallow(<DashboardGrid {...getProps({ panels: {} })} />);
   expect(component).toMatchSnapshot();
 });
+
+test('adjusts z-index of focused panel to be higher than siblings', () => {
+  const component = shallow(<DashboardGrid {...getProps()} />);
+  const panelElements = component.find('Connect(DashboardPanel)');
+  panelElements.first().prop('onPanelFocused')('1');
+  const [gridItem1, gridItem2] = component.update().findWhere(el => el.key() === '1' || el.key() === '2');
+  expect(gridItem1.props.style.zIndex).toEqual('2');
+  expect(gridItem2.props.style.zIndex).toEqual('auto');
+});