Adds a new add/wrap plugin area in the top bar for more expansive

choices

__tests__/integration/mirador/plugins/add.html

@@ -49,6 +49,12 @@
         )
       }
 
+      const AddPluginComponentE = (props) => (
+        <div id="add-plugin-component-e">
+          <input value="hello world"/>
+        </div>
+      );
+
       const addPluginA = {
         target: 'WorkspaceControlPanelButtons',
         mode: 'add',
@@ -73,7 +79,13 @@
         component: WrapPluginComponent,
       };
 
-      const miradorInstance = Mirador.viewer(config, [addPluginA, addPluginB, addPluginC, wrapPluginD]);
+      const addPluginE = {
+        target: 'WindowTopBarPluginArea',
+        mode: 'add',
+        component: AddPluginComponentE,
+      };
+
+      const miradorInstance = Mirador.viewer(config, [addPluginA, addPluginB, addPluginC, wrapPluginD, addPluginE]);
 
      </script>
   </body>

__tests__/src/components/WindowTopBar.test.js

@@ -5,6 +5,7 @@ import Toolbar from '@material-ui/core/Toolbar';
 import AppBar from '@material-ui/core/AppBar';
 
 import WindowTopMenuButton from '../../../src/containers/WindowTopMenuButton';
+import WindowTopBarPluginArea from '../../../src/containers/WindowTopBarPluginArea';
 import WindowTopBarPluginMenu from '../../../src/containers/WindowTopBarPluginMenu';
 import WindowTopBarTitle from '../../../src/containers/WindowTopBarTitle';
 import MiradorMenuButton from '../../../src/containers/MiradorMenuButton';
@@ -35,6 +36,7 @@ describe('WindowTopBar', () => {
     expect(wrapper.find(Toolbar).length).toBe(1);
     expect(wrapper.find(MiradorMenuButton).length).toBe(3);
     expect(wrapper.find(WindowTopBarTitle).length).toBe(1);
+    expect(wrapper.find(WindowTopBarPluginArea).length).toBe(1);
     expect(wrapper.find(WindowTopBarPluginMenu).length).toBe(1);
     expect(wrapper.find(WindowTopMenuButton).length).toBe(1);
     expect(wrapper.find(FullScreenButton).length).toBe(0);

__tests__/src/components/WindowTopBarPluginArea.test.js

+import React from 'react';
+import { shallow } from 'enzyme';
+import { WindowTopBarPluginArea } from '../../../src/components/WindowTopBarPluginArea';
+import { PluginHook } from '../../../src/components/PluginHook';
+
+it('renders the component', () => {
+  const wrapper = shallow(<WindowTopBarPluginArea />);
+  expect(wrapper.find(PluginHook).length).toBe(1);
+});

src/components/WindowTopBar.js

@@ -6,6 +6,7 @@ import Toolbar from '@material-ui/core/Toolbar';
 import AppBar from '@material-ui/core/AppBar';
 import classNames from 'classnames';
 import WindowTopMenuButton from '../containers/WindowTopMenuButton';
+import WindowTopBarPluginArea from '../containers/WindowTopBarPluginArea';
 import WindowTopBarPluginMenu from '../containers/WindowTopBarPluginMenu';
 import WindowTopBarTitle from '../containers/WindowTopBarTitle';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
@@ -58,6 +59,7 @@ export class WindowTopBar extends Component {
             {allowTopMenuButton && (
               <WindowTopMenuButton className={ns('window-menu-btn')} windowId={windowId} />
             )}
+            <WindowTopBarPluginArea windowId={windowId} />
             <WindowTopBarPluginMenu windowId={windowId} />
             {allowMaximize && (
               <MiradorMenuButton

src/components/WindowTopBarPluginArea.js

+import React, { Component } from 'react';
+import { PluginHook } from './PluginHook';
+
+/**
+ *
+ */
+export class WindowTopBarPluginArea extends Component {
+  /** */
+  render() {
+    return (
+      <>
+        <PluginHook {...this.props} />
+      </>
+    );
+  }
+}

src/containers/WindowTopBarPluginArea.js

+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { withTranslation } from 'react-i18next';
+import { withStyles } from '@material-ui/core';
+import { withPlugins } from '../extend/withPlugins';
+import { WindowTopBarPluginArea } from '../components/WindowTopBarPluginArea';
+
+/**
+ */
+const styles = {};
+
+const enhance = compose(
+  withTranslation(),
+  withStyles(styles),
+  connect(null, null),
+  withPlugins('WindowTopBarPluginArea'),
+);
+
+export default enhance(WindowTopBarPluginArea);