Flip the icon on WindowThumbnailSettings for RTL view

__tests__/src/components/WindowThumbnailSettings.test.js

@@ -10,6 +10,7 @@ function createWrapper(props) {
   return shallow(
     <WindowThumbnailSettings
       classes={{}}
+      direction="ltr"
       windowId="xyz"
       setWindowThumbnailPosition={() => {}}
       thumbnailNavigationPosition="off"
@@ -47,4 +48,9 @@ describe('WindowThumbnailSettings', () => {
     wrapper.find(MenuItem).at(2).simulate('click');
     expect(setWindowThumbnailPosition).toHaveBeenCalledWith('xyz', 'far-right');
   });
+
+  it('when rtl flips an icon', () => {
+    const wrapper = createWrapper({ direction: 'rtl' });
+    expect(wrapper.find(FormControlLabel).at(2).props().control.props.style).toEqual({ transform: 'rotate(180deg)' });
+  });
 });

src/components/WindowThumbnailSettings.js

@@ -34,7 +34,7 @@ export class WindowThumbnailSettings extends Component {
    */
   render() {
     const {
-      classes, handleClose, t, thumbnailNavigationPosition,
+      classes, handleClose, t, thumbnailNavigationPosition, direction,
     } = this.props;
 
     return (
@@ -67,9 +67,12 @@ export class WindowThumbnailSettings extends Component {
           <FormControlLabel
             value="far-right"
             classes={{ label: thumbnailNavigationPosition === 'far-right' ? classes.selectedLabel : classes.label }}
-            control={
-              <ThumbnailNavigationRightIcon color={thumbnailNavigationPosition === 'far-right' ? 'secondary' : undefined} />
-            }
+            control={(
+              <ThumbnailNavigationRightIcon
+                color={thumbnailNavigationPosition === 'far-right' ? 'secondary' : undefined}
+                style={direction === 'rtl' ? { transform: 'rotate(180deg)' } : {}}
+              />
+            )}
             label={t('right')}
             labelPlacement="bottom"
           />
@@ -81,6 +84,7 @@ export class WindowThumbnailSettings extends Component {
 
 WindowThumbnailSettings.propTypes = {
   classes: PropTypes.objectOf(PropTypes.string).isRequired,
+  direction: PropTypes.string.isRequired,
   handleClose: PropTypes.func,
   setWindowThumbnailPosition: PropTypes.func.isRequired,
   t: PropTypes.func,

src/containers/WindowThumbnailSettings.js

@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next';
 import { withStyles } from '@material-ui/core/styles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
-import { getThumbnailNavigationPosition } from '../state/selectors';
+import { getThumbnailNavigationPosition, getThemeDirection } from '../state/selectors';
 import { WindowThumbnailSettings } from '../components/WindowThumbnailSettings';
 
 /**
@@ -21,6 +21,7 @@ const mapDispatchToProps = { setWindowThumbnailPosition: actions.setWindowThumbn
  */
 const mapStateToProps = (state, { windowId }) => (
   {
+    direction: getThemeDirection(state),
     thumbnailNavigationPosition: getThumbnailNavigationPosition(state, { windowId }),
   }
 );