Add a CustomPanel component that can be used by a plugin to add additional companion windows

__tests__/src/components/CompanionWindowFactory.test.js

@@ -7,6 +7,7 @@ import ThumbnailNavigation from '../../../src/containers/ThumbnailNavigation';
 import AttributionPanel from '../../../src/containers/AttributionPanel';
 import SearchPanel from '../../../src/containers/SearchPanel';
 import LayersPanel from '../../../src/containers/LayersPanel';
+import CustomPanel from '../../../src/containers/CustomPanel';
 import { CompanionWindowFactory } from '../../../src/components/CompanionWindowFactory';
 
 /** create wrapper */
@@ -93,4 +94,14 @@ describe('CompanionWindowFactory', () => {
       expect(wrapper.find(LayersPanel).length).toBe(1);
     });
   });
+
+  describe('for a custom panel', () => {
+    it('renders the appropriate arg component', () => {
+      wrapper = createWrapper({
+        content: 'custom',
+      });
+
+      expect(wrapper.find(CustomPanel).length).toBe(1);
+    });
+  });
 });

src/components/CompanionWindowFactory.js

@@ -7,6 +7,7 @@ import WindowSideBarCanvasPanel from '../containers/WindowSideBarCanvasPanel';
 import AttributionPanel from '../containers/AttributionPanel';
 import SearchPanel from '../containers/SearchPanel';
 import LayersPanel from '../containers/LayersPanel';
+import CustomPanel from '../containers/CustomPanel';
 
 /**
  * Render a companion window using the appropriate component for the content
@@ -31,6 +32,8 @@ export class CompanionWindowFactory extends Component {
         return <SearchPanel id={id} windowId={windowId} />;
       case 'layers':
         return <LayersPanel id={id} windowId={windowId} />;
+      case 'custom':
+        return <CustomPanel id={id} windowId={windowId} />;
       default:
         return (<></>);
     }

src/components/CustomPanel.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import CompanionWindow from '../containers/CompanionWindow';
+
+/**
+ * a custom panel that can be used for anything
+ */
+export class CustomPanel extends Component {
+  /**
+   * render
+   */
+  render() {
+    const {
+      id,
+      children,
+      t,
+      title,
+      windowId,
+    } = this.props;
+
+    return (
+      <CompanionWindow
+        title={t(title)}
+        id={id}
+        windowId={windowId}
+      >
+        {children}
+      </CompanionWindow>
+    );
+  }
+}
+
+CustomPanel.propTypes = {
+  children: PropTypes.node,
+  id: PropTypes.string.isRequired,
+  t: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired,
+  windowId: PropTypes.string.isRequired,
+};
+
+CustomPanel.defaultProps = {
+  children: null,
+};

src/containers/CustomPanel.js

+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { withTranslation } from 'react-i18next';
+import { withStyles } from '@material-ui/core/styles';
+import { withPlugins } from '../extend/withPlugins';
+import { CustomPanel } from '../components/CustomPanel';
+import {
+} from '../state/selectors';
+
+/**
+ * mapStateToProps - to hook up connect
+ */
+const mapStateToProps = (state, { id, windowId }) => ({
+});
+
+/**
+ *
+ * @param theme
+ * @returns {label: {paddingLeft: number}}}
+ */
+const styles = theme => ({
+});
+
+const enhance = compose(
+  withTranslation(),
+  withStyles(styles),
+  connect(mapStateToProps),
+  withPlugins('CustomPanel'),
+);
+
+export default enhance(CustomPanel);