Disable Add & Edit annotations actions for cell types that don't support annotations

ui/src/shared/components/LayoutCellMenu.js

@@ -40,6 +40,14 @@ class LayoutCellMenu extends Component {
       onDismissEditingAnnotation,
     } = this.props
 
+    const cellSupportsAnnotations =
+      cell.type ===
+      ('line' ||
+        'bar' ||
+        'line-plus-single-stat' ||
+        'line-stacked' ||
+        'line-stepplot')
+
     return (
       <div
         className={classnames('dash-graph-context', {
@@ -61,10 +69,15 @@ class LayoutCellMenu extends Component {
                   icon="pencil"
                   menuOptions={[
                     {text: 'Configure', action: onEdit(cell)},
-                    {text: 'Add Annotation', action: onStartAddingAnnotation},
+                    {
+                      text: 'Add Annotation',
+                      action: onStartAddingAnnotation,
+                      disabled: !cellSupportsAnnotations,
+                    },
                     {
                       text: 'Edit Annotations',
                       action: onStartEditingAnnotation,
+                      disabled: !cellSupportsAnnotations,
                     },
                   ]}
                   informParent={this.handleToggleSubMenu}

ui/src/shared/components/MenuTooltipButton.js

@@ -45,8 +45,12 @@ class MenuTooltipButton extends Component {
     return menuOptions.map((option, i) =>
       <div
         key={i}
-        className="dash-graph-context--menu-item"
-        onClick={this.handleMenuItemClick(option.action)}
+        className={`dash-graph-context--menu-item${option.disabled
+          ? ' disabled'
+          : ''}`}
+        onClick={
+          option.disabled ? null : this.handleMenuItemClick(option.action)
+        }
       >
         {option.text}
       </div>
@@ -73,7 +77,7 @@ class MenuTooltipButton extends Component {
   }
 }
 
-const {arrayOf, func, shape, string} = PropTypes
+const {arrayOf, bool, func, shape, string} = PropTypes
 
 MenuTooltipButton.defaultProps = {
   theme: 'default',
@@ -86,6 +90,7 @@ MenuTooltipButton.propTypes = {
     shape({
       text: string.isRequired,
       action: func.isRequired,
+      disabled: bool,
     })
   ).isRequired,
   informParent: func,

ui/src/style/pages/dashboards.scss

@@ -311,6 +311,14 @@ $dash-graph-options-arrow: 8px;
       background-color: $g8-storm;
       cursor: pointer;
     }
+
+    &.disabled,
+    &.disabled:hover {
+      cursor: default;
+      background-color: transparent;
+      font-style: italic;
+      color: $g11-sidewalk;
+    }
   }
 }