Merge branch 'master' into 1782-embedded-integration-test

__tests__/integration/mirador/index.html

@@ -17,7 +17,7 @@
          canvasIndex: 2,
        },
        {
-         loadedManifest: 'https://media.nga.gov/public/manifests/nga_highlights.json',
+         loadedManifest: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json',
          thumbnailNavigationPosition: 'off',
        }]
      });

__tests__/src/components/App.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
+import { MuiThemeProvider } from '@material-ui/core/styles';
+import Fullscreen from 'react-fullscreen-crossbrowser';
+import WorkspaceControlPanel from '../../../src/components/WorkspaceControlPanel';
+import Workspace from '../../../src/containers/Workspace';
 import App from '../../../src/components/App';
 
-describe('App', () => {
-  it('renders without an error', () => {
-    const wrapper = shallow(
+/** */
+function createWrapper(props) {
+  return shallow(
     <App
-        manifests={[]}
-        workspace={{}}
-        config={{ theme: 'light' }}
+      isFullscreenEnabled={false}
+      setWorkspaceFullscreen={() => {}}
+      theme="light"
+      classes={{}}
+      {...props}
     />,
-    );
-    expect(wrapper.dive().find('div.mirador-app').length).toBe(1);
+  ).dive(); // to unwrapp HOC created by withStyle()
+}
+
+describe('App', () => {
+  it('should render outer element correctly', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.find('div.mirador-app').length).toBe(1);
   });
 
-  describe('FullScreen', () => {
-    it('is enabled by the workspace.fullscreen state', () => {
-      const wrapper = shallow(
-        <App
-          manifests={[]}
-          workspace={{ isFullscreenEnabled: true }}
-          config={{ theme: 'light' }}
-        />,
-      );
-      expect(wrapper.dive().find('FullScreen').first().prop('enabled')).toEqual(true);
+  it('should render all needed elements ', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.find(MuiThemeProvider).length).toBe(1);
+    expect(wrapper.find(Fullscreen).length).toBe(1);
+    expect(wrapper.find(Workspace).length).toBe(1);
+    expect(wrapper.find(WorkspaceControlPanel).length).toBe(1);
   });
+
+  it('should pass setWorkspaceFullscreen to Fullscreen.onChange', () => {
+    const mockFn = jest.fn();
+    const wrapper = createWrapper({ setWorkspaceFullscreen: mockFn });
+    expect(wrapper.find(Fullscreen).first().prop('onChange'))
+      .toBe(mockFn);
+  });
+
+  it('should pass isFullscreenEnabled to Fullscreen.enabled', () => {
+    let wrapper = createWrapper({ isFullscreenEnabled: false });
+    expect(wrapper.find(Fullscreen).first().prop('enabled'))
+      .toEqual(false);
+
+    wrapper = createWrapper({ isFullscreenEnabled: true });
+    expect(wrapper.find(Fullscreen).first().prop('enabled'))
+      .toEqual(true);
   });
 });

__tests__/src/components/ThumbnailNavigation.test.js

@@ -19,11 +19,9 @@ describe('ThumbnailNavigation', () => {
     );
     wrapper = shallow(
       <ThumbnailNavigation
-        manifest={{
-          id: 'http://foo',
-          manifestation: manifesto.create(manifestJson),
-          isFetching: false,
-        }}
+        canvases={
+          manifesto.create(manifestJson).getSequences()[0].getCanvases()
+        }
         window={{
           id: 'foobar',
           canvasIndex: 1,

__tests__/src/components/WindowIcon.test.js

@@ -2,40 +2,27 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import WindowIcon from '../../../src/components/WindowIcon';
 
-describe('WindowIcon', () => {
-  let wrapper;
-  let manifestation;
-
-  describe('without a manifestation', () => {
-    beforeEach(() => {
-      wrapper = shallow(<WindowIcon />).dive();
-    });
-
-    it('renders without an error', () => {
-      expect(wrapper.find('img').length).toBe(0);
-    });
-  });
-
+/** createWrapper */
+function createWrapper(props) {
+  return shallow(
+    <WindowIcon
+      manifestLogo=""
+      classses={{}}
+      {...props}
+    />,
+  ).dive(); // to unwrap HOC created by withStyles();
+}
 
-  describe('with a manifestation without a logo', () => {
-    beforeEach(() => {
-      manifestation = { getLogo: () => null };
-      wrapper = shallow(<WindowIcon manifestation={manifestation} />).dive();
-    });
-
-    it('renders without an error', () => {
+describe('WindowIcon', () => {
+  it('should render nothing if no manifest logo given', () => {
+    const wrapper = createWrapper();
     expect(wrapper.find('img').length).toBe(0);
   });
-  });
 
-  describe('with a manifestation with a logo', () => {
-    beforeEach(() => {
-      manifestation = { getLogo: () => 'http://example.com/thumbnail.jpg' };
-      wrapper = shallow(<WindowIcon manifestation={manifestation} classes={{ logo: 'logo-class' }} />).dive();
-    });
-
-    it('renders without an error', () => {
-      expect(wrapper.find('img.logo-class[src="http://example.com/thumbnail.jpg"]').length).toBe(1);
-    });
+  it('should render logo if manifest logo is given', () => {
+    const manifestLogo = 'http://foo.bar';
+    const wrapper = createWrapper({ manifestLogo });
+    expect(wrapper.find('img').first().prop('src'))
+      .toEqual(manifestLogo);
   });
 });

__tests__/src/components/WindowList.test.js

@@ -49,7 +49,7 @@ describe('WindowList', () => {
       expect(wrapper.find('WithStyles(MenuItem)').length).toBe(1);
       expect(wrapper.find('WithStyles(MenuItem)').key()).toBe('xyz');
       expect(
-        wrapper.find('WithStyles(MenuItem)').matchesElement(<MenuItem>[Untitled]</MenuItem>),
+        wrapper.find('WithStyles(MenuItem)').matchesElement(<MenuItem>untitled</MenuItem>),
       ).toBe(true);
       wrapper.find('WithStyles(MenuItem)').simulate('click', {});
       expect(handleClose).toBeCalled();

__tests__/src/components/WindowSideBarButtons.test.js

@@ -18,7 +18,7 @@ describe('WindowSideBarButtons', () => {
       <WindowSideBarButtons toggleWindowSideBarPanel={toggleWindowSideBarPanel} />,
     );
 
-    const iconButton = wrapper.find('WithStyles(IconButton)[aria-label="Open information companion window"]');
+    const iconButton = wrapper.find('WithStyles(IconButton)[aria-label="openInfoCompanionWindow"]');
     expect(iconButton.simulate('click'));
     expect(toggleWindowSideBarPanel).toHaveBeenCalledTimes(1);
     expect(toggleWindowSideBarPanel).toHaveBeenCalledWith('info');

__tests__/src/components/WindowSideBarInfoPanel.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
+import Typography from '@material-ui/core/Typography';
 import createStore from '../../../src/state/createStore';
 import * as actions from '../../../src/state/actions';
 import WindowSideBarInfoPanel from '../../../src/components/WindowSideBarInfoPanel';
@@ -13,12 +14,28 @@ describe('WindowSideBarInfoPanel', () => {
   beforeEach(() => {
     store.dispatch(actions.receiveManifest('foo', fixture));
     manifest = store.getState().manifests.foo;
-    wrapper = shallow(<WindowSideBarInfoPanel manifest={manifest} />);
+    wrapper = shallow(
+      <WindowSideBarInfoPanel manifest={manifest} />,
+    ).dive();
   });
 
   it('renders without an error', () => {
-    expect(wrapper.find('h2').text()).toBe('About this item');
-    expect(wrapper.find('h3').text()).toBe('Bodleian Library Human Freaks 2 (33)');
-    expect(wrapper.find('.mirador-window-sidebar-info-panel div').text()).toBe('[Handbill of Mr. Becket, [1787] ]');
+    expect(
+      wrapper.find('WithStyles(Typography)[variant="h2"]').first().matchesElement(
+        <Typography>aboutThisItem</Typography>,
+      ),
+    ).toBe(true);
+
+    expect(
+      wrapper.find('WithStyles(Typography)[variant="h3"]').first().matchesElement(
+        <Typography>Bodleian Library Human Freaks 2 (33)</Typography>,
+      ),
+    ).toBe(true);
+
+    expect(
+      wrapper.find('WithStyles(Typography)[variant="body2"]').first().matchesElement(
+        <Typography>[Handbill of Mr. Becket, [1787] ]</Typography>,
+      ),
+    ).toBe(true);
   });
 });

__tests__/src/components/WindowSideBarPanel.test.js

@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 import createStore from '../../../src/state/createStore';
 import * as actions from '../../../src/state/actions';
 import WindowSideBarPanel from '../../../src/components/WindowSideBarPanel';
+import WindowSideBarInfoPanel from '../../../src/containers/WindowSideBarInfoPanel';
 import fixture from '../../fixtures/version-2/001.json';
 
 describe('WindowSideBarPanel', () => {
@@ -21,7 +22,7 @@ describe('WindowSideBarPanel', () => {
     });
 
     it('renders the WindowSideBarInfoPanel', () => {
-      expect(wrapper.find('WindowSideBarInfoPanel').length).toBe(1);
+      expect(wrapper.find(WindowSideBarInfoPanel).length).toBe(1);
     });
   });
 
@@ -31,7 +32,7 @@ describe('WindowSideBarPanel', () => {
     });
 
     it('does not render any panel component', () => {
-      expect(wrapper.find('WindowSideBarInfoPanel').length).toBe(0);
+      expect(wrapper.find(WindowSideBarInfoPanel).length).toBe(0);
     });
   });
 });

__tests__/src/components/WindowThumbnailSettings.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Typography from '@material-ui/core/Typography';
 import WindowThumbnailSettings from '../../../src/components/WindowThumbnailSettings';
 
-describe('WindowThumbnailSettings', () => {
-  let wrapper;
-  const setWindowThumbnailPosition = jest.fn();
-  beforeEach(() => {
-    wrapper = shallow(
+/** create wrapper */
+function createWrapper(props) {
+  return shallow(
     <WindowThumbnailSettings
       windowId="xyz"
-        setWindowThumbnailPosition={setWindowThumbnailPosition}
-        thumbnailNavigationPosition="bottom"
+      setWindowThumbnailPosition={() => {}}
+      thumbnailNavigationPosition="off"
+      {...props}
     />,
   );
+}
+
+describe('WindowThumbnailSettings', () => {
+  it('renders all elements correctly', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.find(Typography).length).toBe(1);
+    expect(wrapper.find(RadioGroup).length).toBe(1);
+    const labels = wrapper.find(FormControlLabel);
+    expect(labels.length).toBe(3);
+    expect(labels.at(0).props().value).toBe('off');
+    expect(labels.at(1).props().value).toBe('bottom');
+    expect(labels.at(2).props().value).toBe('right');
   });
 
-  it('renders without an error', () => {
-    expect(wrapper.find('WithStyles(Typography)').dive().dive().text()).toBe('Thumbnails');
-    expect(wrapper.find('RadioGroup').props().value).toBe('bottom');
+  it('should set the correct label active', () => {
+    let wrapper = createWrapper({ thumbnailNavigationPosition: 'bottom' });
+    expect(wrapper.find(RadioGroup).props().value).toBe('bottom');
+    wrapper = createWrapper({ thumbnailNavigationPosition: 'right' });
+    expect(wrapper.find(RadioGroup).props().value).toBe('right');
   });
 
   it('updates state when the thumbnail config selection changes', () => {
-    wrapper.find('RadioGroup').first().simulate('change', { target: { value: 'off' } });
+    const setWindowThumbnailPosition = jest.fn();
+    const wrapper = createWrapper({ setWindowThumbnailPosition });
+    wrapper.find(RadioGroup).first().simulate('change', { target: { value: 'off' } });
     expect(setWindowThumbnailPosition).toHaveBeenCalledWith('xyz', 'off');
+    wrapper.find(RadioGroup).first().simulate('change', { target: { value: 'right' } });
+    expect(setWindowThumbnailPosition).toHaveBeenCalledWith('xyz', 'right');
   });
 });

__tests__/src/components/WindowTopBar.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import WindowTopBar from '../../../src/components/WindowTopBar';
+import WindowIcon from '../../../src/containers/WindowIcon';
 
 const manifestFixture = {
   manifestation: {
@@ -23,6 +24,7 @@ describe('WindowTopBar', () => {
         removeWindow={mockRemoveWindow}
         toggleWindowSideBar={mockToggleWindowSideBar}
         classes={{}}
+        t={key => key}
       />,
     ).dive();
   });
@@ -37,7 +39,7 @@ describe('WindowTopBar', () => {
   });
 
   it('renders a window icon', () => {
-    expect(topBar.find('WithStyles(WindowIcon)').length).toBe(1);
+    expect(topBar.find(WindowIcon).length).toBe(1);
   });
 
   it('calls the toggleWindowSideBar prop when the menu IconButton is clicked', () => {

__tests__/src/components/WindowTopMenu.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
+import ListItem from '@material-ui/core/ListItem';
+import Menu from '@material-ui/core/Menu';
+import Divider from '@material-ui/core/Divider';
+import WindowThumbnailSettings from '../../../src/containers/WindowThumbnailSettings';
 import WindowTopMenu from '../../../src/components/WindowTopMenu';
 
+/** create wrapper */
+function createWrapper(props) {
+  return shallow(
+    <WindowTopMenu
+      windowId="xyz"
+      handleClose={() => {}}
+      anchorEl={null}
+      {...props}
+    />,
+  );
+}
+
 describe('WindowTopMenu', () => {
-  let wrapper;
-  let handleClose;
-  beforeEach(() => {
-    handleClose = jest.fn();
-    wrapper = shallow(<WindowTopMenu windowId="xyz" handleClose={handleClose} />).dive();
+  it('renders all needed elements', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.find(Menu).length).toBe(1);
+    expect(wrapper.find(ListItem).length).toBe(1);
+    expect(wrapper.find(WindowThumbnailSettings).length).toBe(1);
+    expect(wrapper.find(Divider).length).toBe(1);
+  });
+
+  it('passes windowId to <WindowThumbnailSettings/>', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.find(WindowThumbnailSettings)
+      .first().props().windowId).toBe('xyz');
+  });
+
+  it('passses correct props to <Menu/> when no achor element given', () => {
+    const handleClose = jest.fn();
+    const wrapper = createWrapper({ handleClose });
+    expect(wrapper.find(Menu).first().props().anchorEl).toBe(null);
+    expect(wrapper.find(Menu).first().props().open).toBe(false);
+    expect(wrapper.find(Menu).first().props().onClose).toBe(handleClose);
   });
 
-  it('renders without an error', () => {
-    expect(wrapper.find('WithStyles(Menu)').length).toBe(1);
-    expect(wrapper.find('Connect(WindowThumbnailSettings)').length).toBe(1);
+  it('passses correct props to <Menu/> when no achor element given', () => {
+    const handleClose = jest.fn();
+    const anchorEl = {};
+    const wrapper = createWrapper({ anchorEl, handleClose });
+    expect(wrapper.find(Menu).first().props().anchorEl).toBe(anchorEl);
+    expect(wrapper.find(Menu).first().props().open).toBe(true);
+    expect(wrapper.find(Menu).first().props().onClose).toBe(handleClose);
   });
 });

__tests__/src/components/WindowTopMenuButton.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import WindowTopMenuButton from '../../../src/components/WindowTopMenuButton';
+import WindowTopMenu from '../../../src/containers/WindowTopMenu';
 
 describe('WindowTopMenuButton', () => {
   let wrapper;
@@ -15,6 +16,6 @@ describe('WindowTopMenuButton', () => {
   });
   it('when clicked, updates the state', () => {
     wrapper.find('WithStyles(IconButton)').simulate('click', { currentTarget: 'x' });
-    expect(wrapper.find('Connect(miradorWithPlugins(WithStyles(WindowTopMenu)))').props().anchorEl).toBe('x');
+    expect(wrapper.find(WindowTopMenu).props().anchorEl).toBe('x');
   });
 });

__tests__/src/components/WorkspaceControlPanelButtons.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
+import WorkspaceFullScreenButton from '../../../src/containers/WorkspaceFullScreenButton';
 import WorkspaceControlPanelButtons
   from '../../../src/components/WorkspaceControlPanelButtons';
 
@@ -11,6 +12,6 @@ describe('WorkspaceControlPanelButtons', () => {
 
   it('renders without an error', () => {
     expect(wrapper.find('WithStyles(List)').length).toBe(1);
-    expect(wrapper.find('Connect(WithStyles(WorkspaceFullScreenButton))').length).toBe(1);
+    expect(wrapper.find(WorkspaceFullScreenButton).length).toBe(1);
   });
 });

__tests__/src/components/WorkspaceFullScreenButton.test.js

@@ -8,7 +8,10 @@ describe('WorkspaceFullScreenButton', () => {
   beforeEach(() => {
     setWorkspaceFullscreen = jest.fn();
     wrapper = shallow(
-      <WorkspaceFullScreenButton classes={{}} setWorkspaceFullscreen={setWorkspaceFullscreen} />,
+      <WorkspaceFullScreenButton
+        classes={{}}
+        setWorkspaceFullscreen={setWorkspaceFullscreen}
+      />,
     ).dive();
   });
 

__tests__/src/components/WorkspaceMenu.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import WorkspaceMenu from '../../../src/components/WorkspaceMenu';
+import WindowList from '../../../src/containers/WindowList';
 
 describe('WorkspaceMenu', () => {
   let wrapper;
@@ -23,15 +24,14 @@ describe('WorkspaceMenu', () => {
     it('sets the anchor state', () => {
       wrapper.instance().handleMenuItemClick('windowList', { currentTarget: true });
 
-      expect(wrapper.find('Connect(WindowList)').props().open).toBe(true);
+      expect(wrapper.find(WindowList).props().open).toBe(true);
     });
   });
 
   describe('handleMenuItemClose', () => {
     it('resets the anchor state', () => {
       wrapper.instance().handleMenuItemClose('windowList')();
-
-      expect(wrapper.find('Connect(WindowList)').props().open).toBe(false);
+      expect(wrapper.find(WindowList).props().open).toBe(false);
     });
   });
 });

__tests__/src/selectors/index.test.js

+import manifesto from 'manifesto.js';
+import manifestFixture from '../../fixtures/version-2/001.json';
+import {
+  getWindowManifest,
+  getManifestLogo,
+  getManifestCanvases,
+  getThumbnailNavigationPosition,
+} from '../../../src/state/selectors';
+
+
+describe('getWindowManifest()', () => {
+  const state = {
+    windows: {
+      a: { id: 'a', manifestId: 'x' },
+      b: { id: 'b', manifestId: 'y' },
+      c: { id: 'c' },
+    },
+    manifests: {
+      x: { id: 'x' },
+    },
+  };
+
+  it('should return the manifest of a certain window', () => {
+    const received = getWindowManifest(state, 'a');
+    const expected = { id: 'x' };
+    expect(received).toEqual(expected);
+  });
+
+  it('should return undefined if window doesnt exist', () => {
+    const received = getWindowManifest(state, 'unknown');
+    expect(received).toBeUndefined();
+  });
+
+  it('should return undefined if window has no manifest id', () => {
+    const received = getWindowManifest(state, 'c');
+    expect(received).toBeUndefined();
+  });
+
+  it('should return undefined if manifest does not exist', () => {
+    const received = getWindowManifest(state, 'b');
+    expect(received).toBeUndefined();
+  });
+});
+
+describe('getManifestLogo()', () => {
+  it('should return manifest logo id', () => {
+    const manifest = { manifestation: manifesto.create(manifestFixture) };
+    const received = getManifestLogo(manifest);
+    expect(received).toEqual(manifestFixture.logo['@id']);
+  });
+
+  it('should return null if manifest has no logo', () => {
+    const manifest = { manifestation: manifesto.create({}) };
+    const received = getManifestLogo(manifest);
+    expect(received).toBeNull();
+  });
+});
+
+describe('getManifestCanvases', () => {
+  it('returns an empty array if the manifestation is not loaded', () => {
+    const manifest = {};
+    const received = getManifestCanvases(manifest);
+    expect(received).toEqual([]);
+  });
+
+  it('returns canvases from the manifest', () => {
+    const manifest = { manifestation: manifesto.create(manifestFixture) };
+    const received = getManifestCanvases(manifest);
+    expect(received.length).toBe(1);
+    expect(received[0].id).toBe('https://iiif.bodleian.ox.ac.uk/iiif/canvas/9cca8fdd-4a61-4429-8ac1-f648764b4d6d.json');
+  });
+});
+
+describe('getThumbnailNavigationPosition', () => {
+  const state = {
+    windows: {
+      a: { id: 'a', thumbnailNavigationPosition: 'bottom' },
+      b: { id: 'b' },
+    },
+  };
+
+  it('should return thumbnail navigation position if window exists', () => {
+    const received = getThumbnailNavigationPosition(state, 'a');
+    expect(received).toBe('bottom');
+  });
+
+  it('should return undefined if position does not exist in window', () => {
+    const received = getThumbnailNavigationPosition(state, 'b');
+    expect(received).toBeUndefined();
+  });
+
+  it('should return undefined if window does not exists', () => {
+    const received = getThumbnailNavigationPosition(state, 'c');
+    expect(received).toBeUndefined();
+  });
+});

locales/en/translation.json

+{
+  "translation": {
+    "aboutThisItem": "About this item",
+    "add": "Add",
+    "bottom": "Bottom",
+    "closeInfoCompanionWindow": "Close information companion window",
+    "closeMenu": "Close Menu",
+    "closeWindow": "Close window",
+    "dark": "Dark",
+    "downloadExport": "Download/Export",
+    "downloadExportWorkspace": "Download/export workspace",
+    "fetchManifest": "Fetch Manifest",
+    "fullScreen": "Full Screen",
+    "light": "Light",
+    "listAllOpenWindows": "List all open windows",
+    "menu": "Menu",
+    "off": "Off",
+    "openInfoCompanionWindow": "Open information companion window",
+    "openWindows": "Open windows",
+    "position": "Position",
+    "right": "Right",
+    "settings": "Settings",
+    "theme": "Theme",
+    "thumbnails": "Thumbnails",
+    "toggleWindowSideBar": "Toggle window sidebar",
+    "untitled": "[Untitled]"
+  }
+}

package.json

@@ -34,6 +34,7 @@
     "classnames": "^2.2.6",
     "css-ns": "^1.2.2",
     "deepmerge": "^3.1.0",
+    "i18next": "^14.0.1",
     "intersection-observer": "^0.5.1",
     "manifesto.js": "^3.0.9",
     "node-fetch": "^2.3.0",
@@ -43,6 +44,7 @@
     "react": "^16.7.0",
     "react-dom": "^16.4.0",
     "react-fullscreen-crossbrowser": "^1.0.9",
+    "react-i18next": "^9.0.10",
     "react-mosaic-component": "^2.0.2",
     "react-redux": "^6.0.0",
     "react-virtualized": "^9.21.0",

src/components/App.js

@@ -13,28 +13,34 @@ import ns from '../config/css-ns';
  */
 class App extends Component {
   /**
-   * render
-   * @return {String} - HTML markup for the component
   */
-  render() {
-    const {
-      workspace, setWorkspaceFullscreen, config, classes,
-    } = this.props;
-    const theme = createMuiTheme({
+  makeMuiTheme() {
+    const { theme } = this.props;
+    return createMuiTheme({
       palette: {
-        type: config.theme,
+        type: theme,
       },
       typography: {
         useNextVariants: true,
       },
     });
+  }
+
+  /**
+   * render
+   * @return {String} - HTML markup for the component
+   */
+  render() {
+    const {
+      isFullscreenEnabled, setWorkspaceFullscreen, classes,
+    } = this.props;
 
     return (
       <div className={classNames(classes.background, ns('app'))}>
-        <MuiThemeProvider theme={theme}>
+        <MuiThemeProvider theme={this.makeMuiTheme()}>
           <Fullscreen
-            enabled={workspace.isFullscreenEnabled}
-            onChange={isFullscreenEnabled => setWorkspaceFullscreen(isFullscreenEnabled)}
+            enabled={isFullscreenEnabled}
+            onChange={setWorkspaceFullscreen}
           >
             <Workspace />
           </Fullscreen>
@@ -46,17 +52,15 @@ class App extends Component {
 }
 
 App.propTypes = {
-  config: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  workspace: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  theme: PropTypes.string.isRequired, // eslint-disable-line react/forbid-prop-types
+  isFullscreenEnabled: PropTypes.bool, // eslint-disable-line react/forbid-prop-types
   classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types,
-  setWorkspaceFullscreen: PropTypes.func,
+  setWorkspaceFullscreen: PropTypes.func.isRequired,
 };
 
 App.defaultProps = {
-  workspace: {},
-  setWorkspaceFullscreen: () => {},
+  isFullscreenEnabled: false,
 };
-
 /**
  Material UI style overrides
  @private

src/components/ManifestForm.js

@@ -52,6 +52,7 @@ class ManifestForm extends Component {
    */
   render() {
     const { formValue } = this.state;
+    const { t } = this.props;
     return (
       <form onSubmit={this.formSubmit}>
         <input
@@ -60,7 +61,7 @@ class ManifestForm extends Component {
           type="text"
           onChange={this.handleInputChange}
         />
-        <button id="fetchBtn" type="submit">FetchManifest</button>
+        <button id="fetchBtn" type="submit">{t('fetchManifest')}</button>
       </form>
     );
   }
@@ -69,6 +70,11 @@ class ManifestForm extends Component {
 ManifestForm.propTypes = {
   fetchManifest: PropTypes.func.isRequired,
   setLastRequested: PropTypes.func.isRequired,
+  t: PropTypes.func,
+};
+
+ManifestForm.defaultProps = {
+  t: key => key,
 };
 
 export default ManifestForm;