add kabob menu to linode card, factor out menu items from list view

Author: asauber

src/components/ActionMenu.spec.tsx

@@ -14,7 +14,7 @@ describe('ActionMenu', () => {
     const result = mount(<ActionMenu actions={[action, action, action]} />);
     expect(result.find('WithStyles(ActionMenu)')).toHaveLength(1);
 
-    result.find('Button').simulate('click');
+    result.find('IconButton').simulate('click');
     expect(result.find('WithStyles(MenuItem)')).toHaveLength(3);
   });
 });

src/components/ActionMenu.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import {
   withStyles, WithStyles, StyleRulesCallback, Theme,
 } from 'material-ui';
-import Button from 'material-ui/Button';
+import IconButton from 'material-ui/IconButton';
 import Menu, { MenuItem } from 'material-ui/Menu';
 import MoreHoriz from 'material-ui-icons/MoreHoriz';
 
@@ -51,13 +51,13 @@ class ActionMenu extends React.Component<PropsWithStyles, State> {
     return actions.length === 1
       ? actions.map((a, idx) => <a href="#" key={idx} onClick={e => a.onClick(e)}>{a.title}</a>)
       : (<div>
-        <Button
+        <IconButton
           aria-owns={anchorEl ? 'action-menu' : undefined}
           aria-haspopup="true"
           onClick={this.handleClick}
         >
           <MoreHoriz color="primary" />
-        </Button >
+        </IconButton >
         <Menu
           id="action-menu"
           anchorEl={anchorEl}

src/features/linodes/ListLinodes/LinodeCard.tsx

@@ -14,17 +14,17 @@ import Button from 'material-ui/Button';
 import Card, { CardHeader, CardContent, CardActions } from 'material-ui/Card';
 import Divider from 'material-ui/Divider';
 import Grid from 'material-ui/Grid';
-import IconButton from 'material-ui/IconButton';
 import Typography from 'material-ui/Typography';
 import ContentCopyIcon from 'material-ui-icons/ContentCopy';
 
-import MoreHoriz from 'material-ui-icons/MoreHoriz';
 import CallToAction from 'material-ui-icons/CallToAction';
 import Replay from 'material-ui-icons/Replay';
 
+import ActionMenu from 'src/components/ActionMenu';
 import Tag from 'src/components/Tag';
 import RegionIndicator from './RegionIndicator';
 import { typeLabelLong } from './presentation';
+import { actions } from './menuActions';
 
 import Arch from 'src/assets/distros/Arch.png';
 import CentOS from 'src/assets/distros/CentOS.png';
@@ -116,9 +116,7 @@ class LinodeCard extends React.Component<Props & WithStyles<CSSClasses> > {
           <CardHeader
             title={linode.label}
             action={
-              <IconButton>
-                <MoreHoriz color="primary"/>
-              </IconButton>
+              <ActionMenu actions={actions} />
             }
           />
           {<Divider />}

src/features/linodes/ListLinodes/LinodeRow.tsx

@@ -16,10 +16,11 @@ import TableRow from 'material-ui/Table/TableRow';
 import TableCell from 'material-ui/Table/TableCell';
 import ContentCopyIcon from 'material-ui-icons/ContentCopy';
 
-import ActionMenu, { Action } from 'src/components/ActionMenu';
+import ActionMenu from 'src/components/ActionMenu';
 import Tag from 'src/components/Tag';
 import RegionIndicator from './RegionIndicator';
 import { displayLabel } from './presentation';
+import { actions } from './menuActions';
 
 type CSSClasses = 'inlineItems';
 
@@ -45,16 +46,6 @@ interface Props {
 type PropsWithStyles = Props & WithStyles<CSSClasses>;
 
 class LinodeRow extends React.Component<PropsWithStyles> {
-  actions: Action[] = [
-    { title: 'Launch Console', onClick: (e) => { e.preventDefault(); } },
-    { title: 'Reboot', onClick: (e) => { e.preventDefault(); } },
-    { title: 'View Graphs', onClick: (e) => { e.preventDefault(); } },
-    { title: 'Resize', onClick: (e) => { e.preventDefault(); } },
-    { title: 'View Backups', onClick: (e) => { e.preventDefault(); } },
-    { title: 'Power On', onClick: (e) => { e.preventDefault(); } },
-    { title: 'Settings', onClick: (e) => { e.preventDefault(); } },
-  ];
-
   render() {
     const { classes, linode, type, image } = this.props;
     const label = displayLabel(type.memory, image.label);
@@ -109,7 +100,7 @@ class LinodeRow extends React.Component<PropsWithStyles> {
           <RegionIndicator region={linode.region} />
         </TableCell>
         <TableCell>
-          <ActionMenu actions={this.actions} />
+          <ActionMenu actions={actions} />
         </TableCell>
       </TableRow >
     );

src/features/linodes/ListLinodes/menuActions.ts

@@ -0,0 +1,11 @@
+import  { Action } from 'src/components/ActionMenu';
+
+export const actions: Action[] = [
+  { title: 'Launch Console', onClick: (e) => { e.preventDefault(); } },
+  { title: 'Reboot', onClick: (e) => { e.preventDefault(); } },
+  { title: 'View Graphs', onClick: (e) => { e.preventDefault(); } },
+  { title: 'Resize', onClick: (e) => { e.preventDefault(); } },
+  { title: 'View Backups', onClick: (e) => { e.preventDefault(); } },
+  { title: 'Power On', onClick: (e) => { e.preventDefault(); } },
+  { title: 'Settings', onClick: (e) => { e.preventDefault(); } },
+];