Add disabled option for kuiContextMenuItems (#15119) (#15271)

* Add disabled option for kuiContextMenuItems

* add jest test to make sure onclick isn't called when disabled is set to tru.

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

@@ -43,7 +43,8 @@ export class PanelOptionsMenu extends React.Component {
           aria-hidden="true"
           className="kuiButton__icon kuiIcon fa-edit"
         />,
-        onClick: this.props.editUrl ? this.onEditPanel : undefined,
+        onClick: this.onEditPanel,
+        disabled: !this.props.editUrl,
       },
       {
         name: 'Customize panel',

ui_framework/dist/ui_framework.css

@@ -1100,6 +1100,14 @@ input[type="button"] {
       -ms-flex-item-align: end;
           align-self: flex-end; }
 
+.kuiContextMenuItem-disabled {
+  color: #9B9B9B;
+  cursor: default; }
+  .theme-dark .kuiContextMenuItem-disabled {
+    color: #9B9B9B; }
+  .kuiContextMenuItem-disabled:hover .kuiContextMenuItem__text, .kuiContextMenuItem-disabled:focus .kuiContextMenuItem__text {
+    text-decoration: none; }
+
 .kuiEvent {
   display: -webkit-box;
   display: -webkit-flex;

ui_framework/doc_site/src/views/context_menu/context_menu.js

@@ -43,7 +43,7 @@ export default class extends Component {
         ),
         onClick: () => { this.closePopover(); window.alert('Show fullscreen'); },
       }, {
-        name: 'Share this dasbhoard',
+        name: 'Share this dashboard',
         icon: <span className="kuiIcon fa-user" />,
         panel: {
           id: 1,
@@ -106,6 +106,11 @@ export default class extends Component {
         name: 'Display options',
         icon: <span className="kuiIcon fa-user" />,
         onClick: () => { this.closePopover(); window.alert('Display options'); },
+      }, {
+        name: 'Disabled option',
+        icon: <span className="kuiIcon fa-user" />,
+        disabled: true,
+        onClick: () => { this.closePopover(); window.alert('Disabled option'); },
       }],
     };
 

ui_framework/src/components/context_menu/_context_menu_item.scss

@@ -1,3 +1,5 @@
+$disabledTextColor: #9B9B9B;
+
 /**
  * 1. Button reset.
  * 2. Ensure buttons stack.
@@ -48,3 +50,17 @@
   .kuiContextMenuItem__arrow {
     align-self: flex-end;
   }
+
+  .kuiContextMenuItem-disabled {
+    color: $disabledTextColor;
+    @include darkTheme {
+      color: $disabledTextColor;
+    }
+
+    cursor: default;
+    &:hover, &:focus {
+      .kuiContextMenuItem__text {
+        text-decoration: none;
+      }
+    }
+  }

ui_framework/src/components/context_menu/context_menu_item.js

@@ -13,7 +13,8 @@ export class KuiContextMenuItem extends Component {
     onClick: PropTypes.func,
     hasPanel: PropTypes.bool,
     buttonRef: PropTypes.func,
-  }
+    disabled: PropTypes.bool,
+  };
 
   render() {
     const {
@@ -22,6 +23,7 @@ export class KuiContextMenuItem extends Component {
       hasPanel,
       icon,
       buttonRef,
+      disabled,
       ...rest
     } = this.props;
 
@@ -39,12 +41,15 @@ export class KuiContextMenuItem extends Component {
       arrow = <span className="kuiContextMenu__arrow kuiIcon fa-angle-right" />;
     }
 
-    const classes = classNames('kuiContextMenuItem', className);
+    const classes = classNames('kuiContextMenuItem', className, {
+      'kuiContextMenuItem-disabled': disabled,
+    });
 
     return (
       <button
         className={classes}
         ref={buttonRef}
+        disabled={disabled}
         {...rest}
       >
         <span className="kuiContextMenu__itemLayout">

ui_framework/src/components/context_menu/context_menu_item.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, shallow } from 'enzyme';
+import { render, shallow, mount } from 'enzyme';
 import sinon from 'sinon';
 import { requiredProps } from '../../test/required_props';
 
@@ -51,6 +51,18 @@ describe('KuiContextMenuItem', () => {
 
         sinon.assert.calledOnce(onClickHandler);
       });
+
+      test('is not called when the item is clicked but set to disabled', () => {
+        const onClickHandler = sinon.stub();
+
+        const component = mount(
+          <KuiContextMenuItem disabled={true} onClick={onClickHandler} />
+        );
+
+        component.simulate('click');
+
+        sinon.assert.notCalled(onClickHandler);
+      });
     });
 
     describe('hasPanel', () => {