Create type for menu item action

Also renaming “MenuOption” to be “MenuItem”

ui/src/shared/components/LayoutCellMenu.tsx

@@ -5,7 +5,7 @@ import {bindActionCreators} from 'redux'
 import classnames from 'classnames'
 
 import MenuTooltipButton, {
-  MenuOption,
+  MenuItem,
 } from 'src/shared/components/MenuTooltipButton'
 import CustomTimeIndicator from 'src/shared/components/CustomTimeIndicator'
 import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
@@ -96,21 +96,21 @@ class LayoutCellMenu extends Component<Props, State> {
           {queries.length ? (
             <MenuTooltipButton
               icon="pencil"
-              menuOptions={this.editMenuOptions}
+              menuItems={this.editMenuItems}
               informParent={this.handleToggleSubMenu}
             />
           ) : null}
           <Authorized requiredRole={EDITOR_ROLE}>
             <MenuTooltipButton
               icon="duplicate"
-              menuOptions={this.cloneMenuOptions}
+              menuItems={this.cloneMenuItems}
               informParent={this.handleToggleSubMenu}
             />
           </Authorized>
           <MenuTooltipButton
             icon="trash"
             theme="danger"
-            menuOptions={this.deleteMenuOptions}
+            menuItems={this.deleteMenuItems}
             informParent={this.handleToggleSubMenu}
           />
         </div>
@@ -133,7 +133,7 @@ class LayoutCellMenu extends Component<Props, State> {
     })
   }
 
-  private get editMenuOptions(): MenuOption[] {
+  private get editMenuItems(): MenuItem[] {
     const {
       cell,
       dataExists,
@@ -166,11 +166,11 @@ class LayoutCellMenu extends Component<Props, State> {
     ]
   }
 
-  private get cloneMenuOptions(): MenuOption[] {
+  private get cloneMenuItems(): MenuItem[] {
     return [{text: 'Clone Cell', action: this.handleCloneCell, disabled: false}]
   }
 
-  private get deleteMenuOptions(): MenuOption[] {
+  private get deleteMenuItems(): MenuItem[] {
     return [{text: 'Confirm', action: this.handleDeleteCell, disabled: false}]
   }
 

ui/src/shared/components/MenuTooltipButton.tsx

@@ -3,9 +3,11 @@ import {ClickOutside} from 'src/shared/components/ClickOutside'
 import classnames from 'classnames'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-export interface MenuOption {
+type MenuItemAction = () => void
+
+export interface MenuItem {
   text: string
-  action: () => void
+  action: MenuItemAction
   disabled?: boolean
 }
 
@@ -13,7 +15,7 @@ interface Props {
   theme?: string
   icon: string
   informParent: () => void
-  menuOptions: MenuOption[]
+  menuItems: MenuItem[]
 }
 
 interface State {
@@ -54,11 +56,11 @@ export default class MenuTooltipButton extends Component<Props, State> {
     informParent()
   }
 
-  private handleMenuItemClick = menuItemAction => (): void => {
+  private handleMenuItemClick = (action: MenuItemAction) => (): void => {
     const {informParent} = this.props
 
     this.setState({expanded: false})
-    menuItemAction()
+    action()
     informParent()
   }
 
@@ -87,7 +89,7 @@ export default class MenuTooltipButton extends Component<Props, State> {
   }
 
   private get renderMenu(): JSX.Element {
-    const {menuOptions, theme} = this.props
+    const {menuItems, theme} = this.props
     const {expanded} = this.state
 
     if (expanded === false) {
@@ -96,7 +98,7 @@ export default class MenuTooltipButton extends Component<Props, State> {
 
     return (
       <div className={`dash-graph-context--menu ${theme}`}>
-        {menuOptions.map((option, i) => (
+        {menuItems.map((option, i) => (
           <div
             key={i}
             className={`dash-graph-context--menu-item${