Adding debug tools

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

@@ -465,7 +465,7 @@ const mapStateToProps = state => ({
   activeStreamTab: state.stream.activeTab,
   previousStreamTab: state.stream.previousTab,
   commentClassNames: state.stream.commentClassNames,
-  pluginConfig: state.config.plugins_config,
+  pluginsConfig: state.config.plugins_config,
   sortOrder: state.stream.sortOrder,
   sortBy: state.stream.sortBy,
 });

client/coral-framework/components/Slot.css

@@ -3,5 +3,31 @@
 }
 
 .debug {
-  background-color: coral;
+  background-color: #e2e2e2;
+  border-style: dotted solid;
+  border-width: 2px;
+  border: dotted 2px coral;
+  padding: 2px;
+  margin: 1px;
+  position: relative; 
+}
+
+.debug::before {
+  content: "•slot: " attr(data-slot-name) "\A" "•classname: " attr(data-slot-classname);
+  display: inline-block;
+  position: absolute;
+  bottom: 50%;
+  background: #000;
+  color: #FFF;
+  padding: 5px;
+  border-radius: 5px;
+  opacity:0; transition:0.3s; overflow:hidden;
+  pointer-events: none;
+  z-index: 999!important;
+  white-space: pre-wrap;
+}
+
+.debug:hover::before {
+  opacity:1;
+  bottom: 100%;
 }

client/coral-framework/components/Slot.js

@@ -72,7 +72,7 @@ class Slot extends React.Component {
     } = this.props;
     const { plugins } = this.context;
     let children = this.getChildren();
-    const pluginConfig =
+    const pluginsConfig =
       get(reduxState, 'config.plugins_config') || emptyConfig;
     if (children.length === 0 && DefaultComponent) {
       const props = plugins.getSlotComponentProps(
@@ -88,13 +88,24 @@ class Slot extends React.Component {
       children = children.map(childFactory);
     }
 
+    const debugProps = pluginsConfig.debug
+      ? {
+          'data-slot-name': fill,
+          'data-slot-classname': `talk-slot-${kebabCase(fill)}`,
+        }
+      : {};
+
     return (
       <Component
         className={cn(
-          { [styles.inline]: inline, [styles.debug]: pluginConfig.debug },
+          {
+            [styles.inline]: inline,
+            [styles.debug]: pluginsConfig.debug,
+          },
           className,
           `talk-slot-${kebabCase(fill)}`
         )}
+        {...debugProps}
       >
         {children}
       </Component>

client/coral-framework/services/plugins.js

@@ -10,7 +10,7 @@ import get from 'lodash/get';
 import { getDisplayName } from 'coral-framework/helpers/hoc';
 import camelize from '../helpers/camelize';
 
-// This is returned for pluginConfig when it is empty.
+// This is returned for pluginsConfig when it is empty.
 const emptyConfig = {};
 
 // Memoize the warnings so we only show them once.
@@ -84,11 +84,11 @@ class PluginsService {
    * query datas are only passed to the component if it is defined in `component.fragments`.
    */
   getSlotComponentProps(component, reduxState, props, queryData) {
-    const pluginConfig =
+    const pluginsConfig =
       get(reduxState, 'config.plugins_config') || emptyConfig;
     return {
       ...props,
-      config: pluginConfig,
+      config: pluginsConfig,
       ...(component.fragments
         ? pick(queryData, Object.keys(component.fragments))
         : withWarnings(component, queryData)),
@@ -99,15 +99,15 @@ class PluginsService {
    * Returns React Elements for given slot.
    */
   getSlotElements(slot, reduxState, props = {}, queryData = {}, options = {}) {
-    const pluginConfig =
+    const pluginsConfig =
       get(reduxState, 'config.plugins_config') || emptyConfig;
     const { slotSize = 0 } = options;
 
     const isDisabled = component => {
       if (
-        pluginConfig &&
-        pluginConfig[component.talkPluginName] &&
-        pluginConfig[component.talkPluginName].disable_components
+        pluginsConfig &&
+        pluginsConfig[component.talkPluginName] &&
+        pluginsConfig[component.talkPluginName].disable_components
       ) {
         return true;
       }

plugin-api/beta/client/selectors/index.js

@@ -1 +1 @@
-export const pluginConfigSelector = state => state.config.pluginConfig;
+export const pluginsConfigSelector = state => state.config.pluginsConfig;