Clean up context menu toggle in view mode (#19558) (#19593)

* Clean up context menu toggle in view mode

- hide unless the menu is opened or the panel is being hovered over
- use a down arrow in view mode, a gear in edit mode

* Use a different icon

* and the color='text' line

* update jest snapshots

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

@@ -29,7 +29,7 @@ exports[`DashboardPanel matches snapshot 1`] = `
         >
           <button
             aria-label="Panel options"
-            class="euiButtonIcon euiButtonIcon--primary"
+            class="euiButtonIcon euiButtonIcon--text"
             data-test-subj="dashboardPanelToggleMenuIcon"
             type="button"
           >

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

@@ -26,10 +26,12 @@ import {
   EuiButtonIcon,
 } from '@elastic/eui';
 
-export function PanelOptionsMenu({ toggleContextMenu, isPopoverOpen, closeContextMenu, panels }) {
+export function PanelOptionsMenu({ toggleContextMenu, isPopoverOpen, closeContextMenu, panels, isViewMode }) {
   const button = (
     <EuiButtonIcon
-      iconType="gear"
+      iconType={isViewMode ? 'boxesHorizontal' : 'gear'}
+      color="text"
+      className={isViewMode && !isPopoverOpen ? 'viewModeOpenContextMenuIcon' : ''}
       aria-label="Panel options"
       data-test-subj="dashboardPanelToggleMenuIcon"
       onClick={toggleContextMenu}
@@ -60,4 +62,5 @@ PanelOptionsMenu.propTypes = {
   toggleContextMenu: PropTypes.func,
   closeContextMenu: PropTypes.func,
   isPopoverOpen: PropTypes.bool,
+  isViewMode: PropTypes.bool.isRequired,
 };

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu_container.js

@@ -47,8 +47,10 @@ import {
   getEmbeddableTitle,
   getContainerState,
   getVisibleContextMenuPanelId,
+  getViewMode,
 } from '../../selectors';
 import { DashboardContextMenuPanel } from 'ui/dashboard_panel_actions';
+import { DashboardViewMode } from '../../dashboard_view_mode';
 
 const mapStateToProps = ({ dashboard }, { panelId }) => {
   const embeddable = getEmbeddable(dashboard, panelId);
@@ -56,12 +58,14 @@ const mapStateToProps = ({ dashboard }, { panelId }) => {
   const embeddableTitle = getEmbeddableTitle(dashboard, panelId);
   const containerState = getContainerState(dashboard, panelId);
   const visibleContextMenuPanelId = getVisibleContextMenuPanelId(dashboard);
+  const viewMode = getViewMode(dashboard);
   return {
     panelTitle: panel.title === undefined ? embeddableTitle : panel.title,
     editUrl: embeddable ? getEmbeddableEditUrl(dashboard, panelId) : null,
     isExpanded: getMaximizedPanelId(dashboard) === panelId,
     containerState,
     visibleContextMenuPanelId,
+    isViewMode: viewMode === DashboardViewMode.VIEW,
   };
 };
 
@@ -83,7 +87,7 @@ const mapDispatchToProps = (dispatch, { panelId }) => ({
 });
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { isExpanded, panelTitle, containerState, visibleContextMenuPanelId } = stateProps;
+  const { isExpanded, panelTitle, containerState, visibleContextMenuPanelId, isViewMode } = stateProps;
   const isPopoverOpen = visibleContextMenuPanelId === ownProps.panelId;
   const {
     onMaximizePanel,
@@ -139,6 +143,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     toggleContextMenu,
     closeContextMenu: closeMyContextMenuPanel,
     isPopoverOpen,
+    isViewMode,
   };
 };
 

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

@@ -340,7 +340,7 @@ dashboard-viewport-provider {
      * 1. Use opacity to make this element accessible to screen readers and keyboard.
      * 2. Show on focus to enable keyboard accessibility.
      */
-    .viewModeExpandPanelToggle {
+    .viewModeOpenContextMenuIcon {
       opacity: 0; /* 1 */
       &:focus {
         opacity: 1; /* 2 */
@@ -354,7 +354,7 @@ dashboard-viewport-provider {
       .visualize-show-spy {
         visibility: visible;
       }
-      .viewModeExpandPanelToggle {
+      .viewModeOpenContextMenuIcon {
         opacity: 1;
       }
     }