Give descriptive key for slot elements and use it instead of talkPluginName

.gitignore

@@ -6,6 +6,7 @@ npm-debug.log*
 dump.rdb
 
 client/coral-framework/graphql/introspection.json
+docs/source/_data/introspection.json
 
 .env
 *.cfg

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

@@ -35,12 +35,9 @@ class ExtendableTabPanelContainer extends React.Component {
 
   createPluginTabFactory = (props = this.props) => el => {
     return (
-      <ExtendableTab
-        tabId={el.type.talkPluginName}
-        key={el.type.talkPluginName}
-      >
+      <ExtendableTab tabId={el.key} key={el.key}>
         {React.cloneElement(el, {
-          active: props.activeTab === el.type.talkPluginName,
+          active: props.activeTab === el.key,
         })}
       </ExtendableTab>
     );
@@ -59,7 +56,7 @@ class ExtendableTabPanelContainer extends React.Component {
 
   createPluginTabPane(el) {
     return (
-      <TabPane tabId={el.type.talkPluginName} key={el.type.talkPluginName}>
+      <TabPane tabId={el.key} key={el.key}>
         {el}
       </TabPane>
     );

client/coral-framework/services/plugins.js

@@ -173,11 +173,30 @@ class PluginsService {
       );
     }
 
+    /**
+     * This adds a consistent keying for the slot elements.
+     * It uses the plugin name as the key. If the same plugin inserts
+     * multiple elements it will append `.${noOfOccurence}` to the
+     * key starting with the second element.
+     */
+    const getKey = (() => {
+      const map = {};
+      return component => {
+        if (map[component.talkPluginName] === undefined) {
+          map[component.talkPluginName] = 0;
+        } else {
+          map[component.talkPluginName]++;
+        }
+        const i = map[component.talkPluginName];
+        return `${component.talkPluginName}${i > 0 ? `.${i}` : ''}`;
+      };
+    })();
+
     return (size > 0 ? slots.slice(0, size) : slots)
-      .map((component, i) => ({
+      .map(component => ({
         component,
         disabled: isDisabled(component),
-        key: i,
+        key: getKey(component),
       }))
       .filter(o => !o.disabled)
       .map(({ component, key }) =>

plugins/talk-plugin-auth-checkbox/client/components/TermsAndConditionsField.js

@@ -4,8 +4,6 @@ import { t } from 'plugin-api/beta/client/services';
 import styles from './TermsAndConditionsField.css';
 import cn from 'classnames';
 
-const pluginName = 'talk-plugin-auth-checkbox';
-
 const TermsLink = () => (
   <a
     className={styles.link}
@@ -31,16 +29,15 @@ class TermsAndConditionsField extends React.Component {
   id = 'terms-and-conditions';
 
   componentWillMount() {
-    this.props.indicateBlockerOn(pluginName);
+    this.props.indicateBlocker();
   }
 
   onChange = ({ target: { checked } }) => {
+    this.setState({ checked });
     if (checked) {
-      this.setState(() => ({ checked }));
-      this.props.indicateBlockerOff(pluginName);
+      this.props.indicateBlockerResolved();
     } else {
-      this.setState(() => ({ checked }));
-      this.props.indicateBlockerOn(pluginName);
+      this.props.indicateBlocker();
     }
   };
 

plugins/talk-plugin-auth/client/login/components/SignUp.js

@@ -29,6 +29,15 @@ class SignUp extends React.Component {
     this.props.onSubmit();
   };
 
+  childFactory = el => {
+    const key = el.key;
+    const props = {
+      indicateBlocker: () => this.props.indicateBlocker(key),
+      indicateBlockerResolved: () => this.props.indicateBlockerResolved(key),
+    };
+    return React.cloneElement(el, props);
+  };
+
   render() {
     const {
       username,
@@ -43,17 +52,9 @@ class SignUp extends React.Component {
       errorMessage,
       requireEmailConfirmation,
       success,
-      indicateBlockerOn,
-      indicateBlockerOff,
-      hasBlockers,
+      blocked,
     } = this.props;
 
-    const slotPassthrough = {
-      indicateBlockerOn,
-      indicateBlockerOff,
-      hasBlockers,
-    };
-
     return (
       <div>
         <div className={styles.header}>
@@ -115,7 +116,7 @@ class SignUp extends React.Component {
               />
               <Slot
                 fill="talkPluginAuth-formField"
-                passthrough={slotPassthrough}
+                childFactory={this.childFactory}
               />
               <div className={styles.action}>
                 <Button
@@ -124,7 +125,7 @@ class SignUp extends React.Component {
                   id="coralSignUpButton"
                   className={styles.button}
                   full
-                  disabled={hasBlockers.length}
+                  disabled={blocked}
                 >
                   {t('talk-plugin-auth.login.sign_up')}
                 </Button>
@@ -176,9 +177,9 @@ SignUp.propTypes = {
   errorMessage: PropTypes.string,
   requireEmailConfirmation: PropTypes.bool.isRequired,
   success: PropTypes.bool.isRequired,
-  hasBlockers: PropTypes.array.isRequired,
-  indicateBlockerOn: PropTypes.func.isRequired,
-  indicateBlockerOff: PropTypes.func.isRequired,
+  blocked: PropTypes.bool.isRequired,
+  indicateBlocker: PropTypes.func.isRequired,
+  indicateBlockerResolved: PropTypes.func.isRequired,
 };
 
 export default SignUp;

plugins/talk-plugin-auth/client/login/containers/SignUp.js

@@ -16,17 +16,17 @@ class SignUpContainer extends Component {
     emailError: null,
     passwordError: null,
     passwordRepeatError: null,
-    hasBlockers: [],
+    blockers: [],
   };
 
-  indicateBlockerOn = plugin =>
+  indicateBlocker = key =>
     this.setState(state => ({
-      hasBlockers: state.hasBlockers.concat(plugin),
+      blockers: state.blockers.concat(key),
     }));
 
-  indicateBlockerOff = plugin =>
+  indicateBlockerResolved = key =>
     this.setState(state => ({
-      hasBlockers: state.hasBlockers.filter(i => i !== plugin),
+      blockers: state.blockers.filter(i => i !== key),
     }));
 
   validate = data => {
@@ -87,9 +87,9 @@ class SignUpContainer extends Component {
   render() {
     return (
       <SignUp
-        indicateBlockerOn={this.indicateBlockerOn}
-        indicateBlockerOff={this.indicateBlockerOff}
-        hasBlockers={this.state.hasBlockers}
+        indicateBlocker={this.indicateBlocker}
+        indicateBlockerResolved={this.indicateBlockerResolved}
+        blocked={!!this.state.blockers.length}
         onSubmit={this.handleSubmit}
         onUsernameChange={this.setUsername}
         onEmailChange={this.props.setEmail}

plugins/talk-plugin-notifications/client/components/Settings.js

@@ -14,10 +14,10 @@ import cn from 'classnames';
 
 class Settings extends React.Component {
   childFactory = el => {
-    const pluginName = el.type.talkPluginName;
+    const key = el.key;
     const props = {
-      indicateOn: () => this.props.indicateOn(pluginName),
-      indicateOff: () => this.props.indicateOff(pluginName),
+      indicateOn: () => this.props.indicateOn(key),
+      indicateOff: () => this.props.indicateOff(key),
     };
     return React.cloneElement(el, props);
   };

plugins/talk-plugin-notifications/client/containers/Settings.js

@@ -20,14 +20,14 @@ class SettingsContainer extends React.Component {
     turnOffInput: {},
   };
 
-  indicateOn = plugin =>
+  indicateOn = key =>
     this.setState(state => ({
-      hasNotifications: state.hasNotifications.concat(plugin),
+      hasNotifications: state.hasNotifications.concat(key),
     }));
 
-  indicateOff = plugin =>
+  indicateOff = key =>
     this.setState(state => ({
-      hasNotifications: state.hasNotifications.filter(i => i !== plugin),
+      hasNotifications: state.hasNotifications.filter(i => i !== key),
     }));
 
   setTurnOffInputFragment = fragment =>