#2404: disables the move to buttom button, if conditions are met

__tests__/src/components/CompanionWindow.test.js

@@ -109,13 +109,13 @@ describe('CompanionWindow', () => {
     expect(companionWindow.find(Rnd).prop('default')).toEqual({ height: 201, width: 'auto' });
   });
 
-  it('shows the moveToBottom button when true is passed for showMoveToBottom', () => {
-    companionWindow = createWrapper({ showMoveToBottom: false, updateCompanionWindow: true });
-    expect(companionWindow.find('.positionButton').length).toBe(0);
+  it('moveToBottom button is enabled when true is passed for enableMoveToBottom', () => {
+    companionWindow = createWrapper({ enableMoveToBottom: true, updateCompanionWindow: true });
+    expect(companionWindow.find('.positionButton[disabled=false]').length).toBe(1);
   });
 
-  it('doesn\'t show the moveToBottom button when false is passed for showMoveToBottom', () => {
-    companionWindow = createWrapper({ showMoveToBottom: false, updateCompanionWindow: true });
-    expect(companionWindow.find('.positionButton').length).toBe(0);
+  it('moveToBottom button is disabled when false is passed for enableMoveToBottom', () => {
+    companionWindow = createWrapper({ enableMoveToBottom: false, updateCompanionWindow: true });
+    expect(companionWindow.find('.positionButton[disabled=true]').length).toBe(1);
   });
 });

src/components/CompanionWindow.js

@@ -50,8 +50,8 @@ export class CompanionWindow extends Component {
    */
   render() {
     const {
-      classes, paperClassName, id, onCloseClick, updateCompanionWindow, isDisplayed,
-      position, t, windowId, title, children, titleControls, size, showMoveToBottom,
+      classes, enableMoveToBottom, paperClassName, id, onCloseClick, updateCompanionWindow,
+      isDisplayed, position, t, windowId, title, children, titleControls, size,
     } = this.props;
 
     return (
@@ -96,10 +96,11 @@ export class CompanionWindow extends Component {
                 : (
                   <>
                     {
-                      updateCompanionWindow && showMoveToBottom && (
+                      updateCompanionWindow && (
                         <MiradorMenuButton
                           aria-label={position === 'bottom' ? t('moveCompanionWindowToRight') : t('moveCompanionWindowToBottom')}
                           className={classes.positionButton}
+                          disabled={!enableMoveToBottom}
                           onClick={() => { updateCompanionWindow(windowId, id, { position: position === 'bottom' ? 'right' : 'bottom' }); }}
                         >
                           <MoveIcon />
@@ -137,12 +138,12 @@ export class CompanionWindow extends Component {
 CompanionWindow.propTypes = {
   children: PropTypes.node,
   classes: PropTypes.objectOf(PropTypes.string).isRequired,
+  enableMoveToBottom: PropTypes.bool.isRequired,
   id: PropTypes.string.isRequired,
   isDisplayed: PropTypes.bool,
   onCloseClick: PropTypes.func,
   paperClassName: PropTypes.string,
   position: PropTypes.string,
-  showMoveToBottom: PropTypes.bool.isRequired,
   size: PropTypes.shape({ width: PropTypes.number }),
   t: PropTypes.func,
   title: PropTypes.string,

src/containers/CompanionWindow.js

@@ -19,14 +19,14 @@ import { CompanionWindow } from '../components/CompanionWindow';
 const mapStateToProps = (state, { id, windowId }) => {
   const window = getWindow(state, { windowId });
   const companionWindow = getCompanionWindow(state, { companionWindowId: id });
-  const showMoveToBottom = !window.height || window.height > 300 || companionWindow.position !== 'right';
+  const enableMoveToBottom = !window.height || window.height > 300 || companionWindow.position !== 'right';
 
   return {
     ...companionWindow,
+    enableMoveToBottom,
     isDisplayed: (companionWindow
                   && companionWindow.content
                   && companionWindow.content.length > 0),
-    showMoveToBottom,
   };
 };