Slot streamSettings

client/coral-embed-stream/src/tabs/configure/components/Configure.js

@@ -8,6 +8,8 @@ class Configure extends React.Component {
     return (
       <div className='talk-embed-stream-configuration-container'>
         <Settings
+          data={this.props.data}
+          root={this.props.root}
           asset={this.props.asset}
         />
         <hr />

client/coral-embed-stream/src/tabs/configure/components/Settings.js

@@ -6,6 +6,7 @@ import cn from 'classnames';
 import styles from './Settings.css';
 import Configuration from './Configuration';
 import QuestionBoxBuilder from './QuestionBoxBuilder';
+import Slot from 'coral-framework/components/Slot';
 
 class Settings extends React.Component {
   render() {
@@ -24,6 +25,8 @@ class Settings extends React.Component {
       onQuestionBoxContentChange,
       canSave,
       onApply,
+      slotProps,
+      queryData,
     } = this.props;
     return (
       <div className={styles.wrapper}>
@@ -35,6 +38,7 @@ class Settings extends React.Component {
             checked={canSave}
             cStyle={canSave ? 'green' : 'darkGrey'}
             onClick={onApply}
+            disabled={!canSave}
           >
             {t('configure.apply')}
           </Button>
@@ -71,6 +75,11 @@ class Settings extends React.Component {
                 </div>
             }
           </Configuration>
+          <Slot
+            fill="streamSettings"
+            queryData={queryData}
+            {...slotProps}
+          />
         </div>
       </div>
     );
@@ -78,6 +87,8 @@ class Settings extends React.Component {
 }
 
 Settings.propTypes = {
+  queryData: PropTypes.object.isRequired,
+  slotProps: PropTypes.object.isRequired,
   settings: PropTypes.object.isRequired,
   canSave: PropTypes.bool.isRequired,
   onToggleModeration: PropTypes.func.isRequired,

client/coral-embed-stream/src/tabs/configure/containers/Configure.js

@@ -28,6 +28,7 @@ const withConfigureFragments = withFragments({
   root: gql`
     fragment CoralEmbedStream_Configure_root on RootQuery {
       __typename
+      ...${getDefinitionName(Settings.fragments.root)}
     }
   `,
   asset: gql`
@@ -38,6 +39,7 @@ const withConfigureFragments = withFragments({
     }
     ${AssetStatusInfo.fragments.asset}
     ${Settings.fragments.asset}
+    ${Settings.fragments.root}
   `,
 });
 

client/coral-embed-stream/src/tabs/configure/containers/Settings.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {gql, compose} from 'react-apollo';
 import {withFragments, withMergedSettings} from 'coral-framework/hocs';
-import {getErrorMessages} from 'coral-framework/utils';
+import {getErrorMessages, getSlotFragmentSpreads} from 'coral-framework/utils';
 import Settings from '../components/Settings.js';
 import PropTypes from 'prop-types';
 import {withUpdateAssetSettings} from 'coral-framework/graphql/mutations';
@@ -10,6 +10,10 @@ import {bindActionCreators} from 'redux';
 import {notify} from 'coral-framework/actions/notification';
 import {clearPending, updatePending} from '../../../actions/configure';
 
+const slots = [
+  'streamSettings',
+];
+
 class SettingsContainer extends React.Component {
 
   toggleModeration = () => {
@@ -48,8 +52,11 @@ class SettingsContainer extends React.Component {
   };
 
   render() {
+    const {mergedSettings, canSave, data, root, asset} = this.props;
     return <Settings
-      settings={this.props.mergedSettings}
+      settings={mergedSettings}
+      queryData={{root, asset, settings: mergedSettings}}
+      slotProps={{data}}
       savePending={this.savePending}
       onToggleModeration={this.toggleModeration}
       onTogglePremodLinks={this.togglePremodLinks}
@@ -57,12 +64,14 @@ class SettingsContainer extends React.Component {
       onQuestionBoxIconChange={this.setQuestionBoxIcon}
       onQuestionBoxContentChange={this.setQuestionBoxContent}
       onApply={this.savePending}
-      canSave={this.props.canSave}
+      canSave={canSave}
     />;
   }
 }
 
 SettingsContainer.propTypes = {
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
   asset: PropTypes.object.isRequired,
   pending: PropTypes.object.isRequired,
   mergedSettings: PropTypes.object.isRequired,
@@ -74,6 +83,12 @@ SettingsContainer.propTypes = {
 };
 
 const withSettingsFragments = withFragments({
+  root: gql`
+    fragment CoralEmbedStream_Settings_root on RootQuery {
+      __typename
+      ${getSlotFragmentSpreads(slots, 'root')}
+    }
+  `,
   asset: gql`
     fragment CoralEmbedStream_Settings_asset on Asset {
       id
@@ -83,7 +98,9 @@ const withSettingsFragments = withFragments({
         questionBoxEnable
         questionBoxIcon
         questionBoxContent
+        ${getSlotFragmentSpreads(slots, 'settings')}
       }
+      ${getSlotFragmentSpreads(slots, 'asset')}
     }
   `,
 });