Implement streamTabs and streamTabPanes slot

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

@@ -9,6 +9,7 @@ import {ModerationLink} from 'coral-plugin-moderation';
 import RestrictedMessageBox
   from 'coral-framework/components/RestrictedMessageBox';
 import t, {timeago} from 'coral-framework/services/i18n';
+import {getSlotComponents} from 'coral-framework/helpers/plugins';
 import CommentBox from 'coral-plugin-commentbox/CommentBox';
 import QuestionBox from 'coral-plugin-questionbox/QuestionBox';
 import {Button, TabBar, Tab, TabCount, TabContent, TabPane} from 'coral-ui';
@@ -202,17 +203,30 @@ class Stream extends React.Component {
                 <Slot fill="streamFilter" />
               </div>
               <TabBar activeTab={activeStreamTab} onTabClick={setActiveStreamTab} sub>
-                <Tab tabId={'featured'}>
-                 Featured
-                </Tab>
+                {getSlotComponents('streamTabs').map((PluginComponent) => (
+                  <Tab tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
+                    <PluginComponent
+                      active={activeStreamTab === PluginComponent.talkPluginName}
+                      data={data}
+                      root={root}
+                      asset={asset}
+                    />
+                  </Tab>
+                ))}
                 <Tab tabId={'all'}>
                   All Comments <TabCount active={activeStreamTab === 'all'} sub>{totalCommentCount}</TabCount>
                 </Tab>
               </TabBar>
               <TabContent activeTab={activeStreamTab} sub>
-                <TabPane tabId={'featured'}>
-                  TODO
-                </TabPane>
+                {getSlotComponents('streamTabPanes').map((PluginComponent) => (
+                  <TabPane tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
+                    <PluginComponent
+                      data={data}
+                      root={root}
+                      asset={asset}
+                    />
+                  </TabPane>
+                ))}
                 <TabPane tabId={'all'}>
                   <AllCommentsPane
                     data={data}

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

@@ -14,6 +14,7 @@ import {setActiveReplyBox, setActiveTab, viewAllComments} from '../actions/strea
 import Stream from '../components/Stream';
 import Comment from './Comment';
 import {withFragments} from 'coral-framework/hocs';
+import {getSlotsFragments} from 'coral-framework/helpers/plugins';
 import {Spinner} from 'coral-ui';
 import {getDefinitionName} from 'coral-framework/utils';
 import {
@@ -240,6 +241,11 @@ const LOAD_MORE_QUERY = gql`
   ${Comment.fragments.comment}
 `;
 
+const pluginFragments = getSlotsFragments([
+  'streamTabs',
+  'streamTabPanes',
+]);
+
 const fragments = {
   root: gql`
     fragment CoralEmbedStream_Stream_root on RootQuery {
@@ -281,6 +287,7 @@ const fragments = {
           startCursor
           endCursor
         }
+        ${pluginFragments.spreads('asset')}
       }
       me {
         status
@@ -291,8 +298,11 @@ const fragments = {
       settings {
         organizationName
       }
+      ${pluginFragments.spreads('root')}
       ...${getDefinitionName(Comment.fragments.root)}
     }
+    ${pluginFragments.definitions('asset')}
+    ${pluginFragments.definitions('root')}
     ${Comment.fragments.root}
     ${commentFragment}
   `,

client/coral-framework/helpers/plugins.js

@@ -10,17 +10,16 @@ import {loadTranslations} from 'coral-framework/services/i18n';
 import {injectReducers, getStore} from 'coral-framework/services/store';
 import camelize from './camelize';
 
-function getSlotComponents(slot) {
+export function getSlotComponents(slot) {
   const pluginConfig = getStore().getState().config.plugin_config;
 
-    // Filter out components that have been disabled in `plugin_config`
   return flatten(plugins
 
     // Filter out components that have been disabled in `plugin_config`
-    .filter((o) => !pluginConfig || !pluginConfig[o.plugin] || !pluginConfig[o.plugin].disable_components)
-
+    .filter((o) => !pluginConfig || !pluginConfig[o.name] || !pluginConfig[o.name].disable_components)
     .filter((o) => o.module.slots[slot])
-    .map((o) => o.module.slots[slot]));
+    .map((o) => o.module.slots[slot])
+  );
 }
 
 export function isSlotEmpty(slot) {
@@ -113,7 +112,22 @@ export function injectPluginsReducers() {
   const reducers = merge(
     ...plugins
       .filter((o) => o.module.reducer)
-      .map((o) => ({[camelize(o.plugin)] : o.module.reducer}))
+      .map((o) => ({[camelize(o.name)] : o.module.reducer}))
   );
   injectReducers(reducers);
 }
+
+function addMetaDataToSlotComponents() {
+
+  // Add talkPluginName to Slot Components.
+  plugins.forEach((plugin) => {
+    const slots = plugin.module.slots;
+    slots && Object.keys(slots).forEach((slot) => {
+      slots[slot].forEach((component) => {
+        component.talkPluginName = plugin.name;
+      });
+    });
+  });
+}
+
+addMetaDataToSlotComponents();

client/coral-framework/loaders/plugins-loader.js

@@ -22,7 +22,7 @@ module.exports = function(source) {
   const config = this.exec(source, this.resourcePath);
   const plugins = getPluginList(config).map((plugin) => `{
     module: require('${plugin}/client'),
-    plugin: '${plugin}'
+    name: '${plugin}'
   }`);
 
   return stripIndent`

client/coral-ui/components/Tab.css

@@ -60,6 +60,7 @@
   font-weight: bold;
   border-bottom: solid 3px #10589b;
   margin-bottom: 0px;
+  padding: 6px 10px;
 }
 
 .root:only-child .button, .rootSub:only-child .buttonSub {