[UI Framework] Add KuiContextMenu. (#14183) (#14427)

* Add KuiContextMenu.
- Update KuiPopover to use K7 code.
- Add KuiPanelSimple for use within KuiPopover; it's just the K7 KuiPanel renamed.
- Refactor/rewrite KuiExpression and KuiExpressionButton to depend upon KuiPopover.
- Add K7 shadow mixins and size and z-index vars to global_styling.

* Update Dashboard panel to use KuiContextMenu.
- Fix reloading issue when editing a visualization from within a dashboard.

* Completely refactor KuiContextMenu to enable a single panel.
- Move keyboard navigation logic into KuiContextPanel.
- Set focus on the item which shows the panel we're leaving within KuiContextMenu.
- Remove unnecessary logic from KuiPopoverTitle.
- Replace confusing idToPanelMap and idToPreviousPanelIdMap props with a panels prop.
- Replace panelRef prop with onHeightChange prop.
- Migrate transition state and logic from KuiContextMenu into KuiContextMenuPanel.
- Rename 'current panel' to 'incoming panel' for cohesion with 'outgoing panel.'
- Map panel items to panels up-front.
- Convert maps from state variables into instance variables.

package.json

@@ -122,6 +122,7 @@
     "expose-loader": "0.7.0",
     "extract-text-webpack-plugin": "0.8.2",
     "file-loader": "0.8.4",
+    "focus-trap-react": "3.0.3",
     "font-awesome": "4.4.0",
     "glob": "5.0.13",
     "glob-all": "3.0.1",
@@ -194,6 +195,7 @@
     "script-loader": "0.6.1",
     "semver": "5.1.0",
     "style-loader": "0.12.3",
+    "tabbable": "1.1.0",
     "tar": "2.2.0",
     "tinygradient": "0.3.0",
     "trunc-html": "1.0.2",

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

@@ -79,10 +79,17 @@ export class DashboardGrid extends React.Component {
   };
 
   onPanelFocused = panelIndex => {
-    this.gridItems[panelIndex].style.zIndex = '1';
+    const gridItem = this.gridItems[panelIndex];
+    if (gridItem) {
+      gridItem.style.zIndex = '1';
+    }
   };
+
   onPanelBlurred = panelIndex => {
-    this.gridItems[panelIndex].style.zIndex = 'auto';
+    const gridItem = this.gridItems[panelIndex];
+    if (gridItem) {
+      gridItem.style.zIndex = 'auto';
+    }
   };
 
   renderDOM() {

src/core_plugins/kibana/public/dashboard/panel/__snapshots__/dashboard_panel.test.js.snap

@@ -29,56 +29,6 @@ exports[`DashboardPanel matches snapshot 1`] = `
             role="button"
             tabindex="0"
           />
-          <div
-            class="kuiPopover__body"
-          >
-            <ul
-              class="kuiMenu"
-            >
-              <li
-                class="kuiMenuItem dashboardPanelMenuItem"
-                data-test-subj="dashboardPanelEditLink"
-              >
-                <span
-                  aria-hidden="true"
-                  class="kuiButton__icon kuiIcon fa-edit"
-                />
-                <p
-                  class="kuiText"
-                >
-                  Edit Visualization
-                </p>
-              </li>
-              <li
-                class="kuiMenuItem dashboardPanelMenuItem"
-                data-test-subj="dashboardPanelExpandIcon"
-              >
-                <span
-                  aria-hidden="true"
-                  class="kuiButton__icon kuiIcon fa-expand"
-                />
-                <p
-                  class="kuiText"
-                >
-                  Full screen
-                </p>
-              </li>
-              <li
-                class="kuiMenuItem dashboardPanelMenuItem"
-                data-test-subj="dashboardPanelRemoveIcon"
-              >
-                <span
-                  aria-hidden="true"
-                  class="kuiButton__icon kuiIcon fa-trash"
-                />
-                <p
-                  class="kuiText"
-                >
-                  Delete from dashboard
-                </p>
-              </li>
-            </ul>
-          </div>
         </div>
       </div>
     </div>

src/core_plugins/kibana/public/dashboard/panel/dashboard_panel.js

@@ -60,9 +60,11 @@ export class DashboardPanel extends React.Component {
   }
 
   toggleExpandedPanel = () => this.props.onToggleExpanded(this.props.panel.panelIndex);
+
   deletePanel = () => {
     this.props.onDeletePanel(this.props.panel.panelIndex);
   };
+
   onEditPanel = () => window.location = this.state.editUrl;
 
   onFocus = () => {
@@ -71,6 +73,7 @@ export class DashboardPanel extends React.Component {
       onPanelFocused(this.props.panel.panelIndex);
     }
   };
+
   onBlur = () => {
     const { onPanelBlurred } = this.props;
     if (onPanelBlurred) {

src/core_plugins/kibana/public/dashboard/panel/panel_options_menu.js

@@ -1,78 +1,100 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { PanelMenuItem } from './panel_menu_item';
 import {
   KuiPopover,
-  KuiMenu,
-  KuiKeyboardAccessible
+  KuiContextMenuPanel,
+  KuiContextMenuItem,
+  KuiKeyboardAccessible,
 } from 'ui_framework/components';
 
 export class PanelOptionsMenu extends React.Component {
   state = {
-    showMenu: false
+    isPopoverOpen: false
   };
 
   toggleMenu = () => {
-    this.setState({ showMenu: !this.state.showMenu });
+    this.setState({ isPopoverOpen: !this.state.isPopoverOpen });
   };
-  closeMenu = () => this.setState({ showMenu: false });
 
-  renderEditVisualizationMenuItem() {
-    return (
-      <PanelMenuItem
-        onClick={this.props.onEditPanel}
+  closePopover = () => this.setState({ isPopoverOpen: false });
+
+  renderItems() {
+    const items = [(
+      <KuiContextMenuItem
+        key="0"
         data-test-subj="dashboardPanelEditLink"
-        label="Edit Visualization"
-        iconClass="fa-edit"
-      />
-    );
-  }
+        onClick={this.props.onEditPanel}
+        icon={(
+          <span
+            aria-hidden="true"
+            className="kuiButton__icon kuiIcon fa-edit"
+          />
+        )}
+      >
+        Edit Visualization
+      </KuiContextMenuItem>
+    ), (
+      <KuiContextMenuItem
+        key="1"
+        data-test-subj="dashboardPanelExpandIcon"
+        onClick={this.props.onToggleExpandPanel}
+        icon={(
+          <span
+            aria-hidden="true"
+            className={`kuiButton__icon kuiIcon ${this.props.isExpanded ? 'fa-compress' : 'fa-expand'}`}
+          />
+        )}
+      >
+        {this.props.isExpanded ? 'Minimize' : 'Full screen'}
+      </KuiContextMenuItem>
+    )];
 
-  renderDeleteMenuItem() {
-    return (
-      <PanelMenuItem
-        onClick={this.props.onDeletePanel}
-        data-test-subj="dashboardPanelRemoveIcon"
-        label="Delete from dashboard"
-        iconClass="fa-trash"
-      />
-    );
-  }
+    if (!this.props.isExpanded) {
+      items.push(
+        <KuiContextMenuItem
+          key="2"
+          data-test-subj="dashboardPanelRemoveIcon"
+          onClick={this.props.onDeletePanel}
+          icon={(
+            <span
+              aria-hidden="true"
+              className="kuiButton__icon kuiIcon fa-trash"
+            />
+          )}
+        >
+          Delete from dashboard
+        </KuiContextMenuItem>
+      );
+    }
 
-  renderToggleExpandMenuItem() {
-    return (
-      <PanelMenuItem
-        onClick={this.props.onToggleExpandPanel}
-        data-test-subj="dashboardPanelExpandIcon"
-        label={this.props.isExpanded ? 'Minimize' : 'Full screen'}
-        iconClass={this.props.isExpanded ? 'fa-compress' : 'fa-expand'}
-      />
-    );
+    return items;
   }
 
   render() {
+    const button = (
+      <KuiKeyboardAccessible>
+        <span
+          aria-label="Click for more panel options"
+          className="kuiButton__icon kuiIcon panel-dropdown fa fa-caret-down"
+          data-test-subj="dashboardPanelToggleMenuIcon"
+          onClick={this.toggleMenu}
+        />
+      </KuiKeyboardAccessible>
+    );
+
     return (
       <KuiPopover
         className="dashboardPanelPopOver"
-        button={(
-          <KuiKeyboardAccessible>
-            <span
-              aria-label="Click for more panel options"
-              className="kuiButton__icon kuiIcon panel-dropdown fa fa-caret-down"
-              data-test-subj="dashboardPanelToggleMenuIcon"
-              onClick={this.toggleMenu}
-            />
-          </KuiKeyboardAccessible>
-        )}
-        isOpen={this.state.showMenu}
+        button={button}
+        isOpen={this.state.isPopoverOpen}
+        closePopover={this.closePopover}
+        panelPaddingSize="none"
         anchorPosition="right"
-        closePopover={this.closeMenu}
       >
-        <KuiMenu>
-          {this.renderEditVisualizationMenuItem()}
-          {this.renderToggleExpandMenuItem()}
-          {this.props.isExpanded ? null : this.renderDeleteMenuItem()}
-        </KuiMenu>
+        <KuiContextMenuPanel
+          onClose={this.closePopover}
+          items={this.renderItems()}
+        />
       </KuiPopover>
     );
   }

src/core_plugins/kibana/public/dashboard/styles/index.less

@@ -215,21 +215,6 @@ dashboard-panel {
         z-index: 25;
       }
 
-      .dashboardPanelMenuItem {
-        padding: 10px;
-        color: @text-color;
-
-        p {
-          display: inline;
-          padding: 0 0 0 5px;
-        }
-
-        &:hover {
-          color: @link-hover-color;
-        }
-
-      }
-
       .panel-title {
         font-size: inherit;