PropTypes for StreamTabPanel

client/coral-embed-stream/src/components/Stream.js

@@ -220,12 +220,12 @@ class Stream extends React.Component {
                 tabPaneSlot={'streamTabPanes'}
                 slotProps={slotProps}
                 appendTabs={
-                  <Tab tabId={'all'}>
+                  <Tab tabId={'all'} key='all'>
                     All Comments <TabCount active={activeStreamTab === 'all'} sub>{totalCommentCount}</TabCount>
                   </Tab>
                 }
                 appendTabPanes={
-                  <TabPane tabId={'all'}>
+                  <TabPane tabId={'all'} key='all'>
                     <AllCommentsPane
                       data={data}
                       root={root}

client/coral-embed-stream/src/components/StreamTabPanel.js

@@ -1,23 +1,37 @@
 import React from 'react';
 import {TabBar, TabContent} from 'coral-ui';
+import PropTypes from 'prop-types';
 
 class StreamTabPanel extends React.Component {
 
   render() {
-    const {activeTab, setActiveTab, appendTabs, appendTabPanes, pluginTabElements, pluginTabPaneElements, sub} = this.props;
+    const {activeTab, setActiveTab, tabs, tabPanes, sub} = this.props;
     return (
       <div>
         <TabBar activeTab={activeTab} onTabClick={setActiveTab} sub={sub}>
-          {pluginTabElements}
-          {appendTabs}
+          {tabs}
         </TabBar>
         <TabContent activeTab={activeTab} sub={sub}>
-          {pluginTabPaneElements}
-          {appendTabPanes}
+          {tabPanes}
         </TabContent>
       </div>
     );
   }
 }
 
+StreamTabPanel.propTypes = {
+  activeTab: PropTypes.string.isRequired,
+  setActiveTab: PropTypes.func.isRequired,
+  tabs: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element)
+  ]),
+  tabPanes: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element)
+  ]),
+  className: PropTypes.string,
+  sub: PropTypes.bool,
+};
+
 export default StreamTabPanel;

client/coral-embed-stream/src/containers/StreamTabPanel.js

@@ -6,6 +6,7 @@ import {getSlotComponents} from 'coral-framework/helpers/plugins';
 import {Tab, TabPane} from 'coral-ui';
 import {getShallowChanges} from 'coral-framework/utils';
 import isEqual from 'lodash/isEqual';
+import PropTypes from 'prop-types';
 
 class StreamTabPanelContainer extends React.Component {
 
@@ -69,14 +70,35 @@ class StreamTabPanelContainer extends React.Component {
   render() {
     return (
       <StreamTabPanel
-        {...this.props}
-        pluginTabElements={this.getPluginTabElements()}
-        pluginTabPaneElements={this.getPluginTabPaneElements()}
+        className={this.props.className}
+        activeTab={this.props.activeTab}
+        setActiveTab={this.props.setActiveTab}
+        tabs={this.getPluginTabElements().concat(this.props.appendTabs)}
+        tabPanes={this.getPluginTabPaneElements().concat(this.props.appendTabPanes)}
+        sub={this.props.sub}
       />
     );
   }
 }
 
+StreamTabPanelContainer.propTypes = {
+  activeTab: PropTypes.string.isRequired,
+  setActiveTab: PropTypes.func.isRequired,
+  appendTabs: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element)
+  ]),
+  appendTabPanes: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element)
+  ]),
+  fallbackTab: PropTypes.string.isRequired,
+  tabSlot: PropTypes.string.isRequired,
+  tabPaneSlot: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  sub: PropTypes.bool,
+};
+
 const mapStateToProps = (state) => ({
   reduxState: omit(state, 'apollo'),
 });