Align the WorkspaceMenu and add the selected state styling to the...

Align the WorkspaceMenu and add the selected state styling to the WorkspaceMenuButton when the menu is open.

__tests__/src/components/WorkspaceMenuButton.test.js

@@ -6,7 +6,7 @@ describe('WorkspaceMenuButton', () => {
   let wrapper;
   beforeEach(() => {
     wrapper = shallow(
-      <WorkspaceMenuButton classes={{}} />,
+      <WorkspaceMenuButton classes={{ ctrlBtnSelected: 'ctrlBtnSelected' }} />,
     );
   });
 
@@ -17,4 +17,12 @@ describe('WorkspaceMenuButton', () => {
     wrapper.find('WithStyles(IconButton)').simulate('click', {});
     // TODO: this is currently a no-op
   });
+
+  it('the button has a class indicating that it is "selected" once it is clicked', () => {
+    expect(wrapper.find('.ctrlBtnSelected').length).toBe(0);
+    wrapper.find('WithStyles(IconButton)').simulate('click', { currentTarget: 'anElement' });
+    expect(wrapper.find('.ctrlBtnSelected').length).toBe(1);
+    wrapper.find('WithStyles(IconButton)').simulate('click', {});
+    expect(wrapper.find('.ctrlBtnSelected').length).toBe(0);
+  });
 });

src/components/WorkspaceMenu.js

@@ -99,6 +99,14 @@ export class WorkspaceMenu extends Component {
           id="workspace-menu"
           container={container}
           anchorEl={anchorEl}
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'left',
+          }}
           open={Boolean(anchorEl)}
           onClose={handleClose}
         >

src/components/WorkspaceMenuButton.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/MenuSharp';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import WorkspaceMenu from '../containers/WorkspaceMenu';
 
 /**
@@ -51,7 +52,7 @@ export class WorkspaceMenuButton extends Component {
           color="default"
           id="menuBtn"
           aria-label={t('workspaceMenu')}
-          className={classes.ctrlBtn}
+          className={classNames(classes.ctrlBtn, (anchorEl ? classes.ctrlBtnSelected : null))}
           aria-haspopup="true"
           onClick={this.handleMenuClick}
           aria-owns={anchorEl ? 'workspace-menu' : undefined}

src/containers/WorkspaceMenuButton.js

@@ -13,6 +13,9 @@ const styles = theme => ({
   ctrlBtn: {
     margin: theme.spacing.unit,
   },
+  ctrlBtnSelected: {
+    backgroundColor: theme.palette.action.selected,
+  },
 });
 
 const enhance = compose(