diff --git a/client/coral-embed-stream/src/containers/StreamTabPanel.js b/client/coral-embed-stream/src/containers/StreamTabPanel.js index fde6e3be4..be37c307d 100644 --- a/client/coral-embed-stream/src/containers/StreamTabPanel.js +++ b/client/coral-embed-stream/src/containers/StreamTabPanel.js @@ -26,8 +26,8 @@ class StreamTabPanelContainer extends React.Component { // it does not result in a change of slot children. const changes = getShallowChanges(this.props, next); if (changes.length === 1 && changes[0] === 'reduxState') { - const prevUuid = this.getSlotComponents(this.props.tabSlot, this.props).map((cmp) => cmp.talkUuid); - const nextUuid = this.getSlotComponents(next.tabSlot, next).map((cmp) => cmp.talkUuid); + const prevUuid = this.getSlotElements(this.props.tabSlot, this.props).map((el) => el.type.talkUuid); + const nextUuid = this.getSlotElements(next.tabSlot, next).map((el) => el.type.talkUuid); return !isEqual(prevUuid, nextUuid); } @@ -37,42 +37,33 @@ class StreamTabPanelContainer extends React.Component { fallbackAllTab(props = this.props) { if (props.activeTab !== props.fallbackTab) { - const slotPlugins = this.getSlotComponents(props.tabSlot, props).map((c) => c.talkPluginName); + const slotPlugins = this.getSlotElements(props.tabSlot, props).map((el) => el.type.talkPluginName); if (slotPlugins.indexOf(props.activeTab) === -1) { props.setActiveTab(props.fallbackTab); } } } - getSlotComponents(slot, props = this.props) { + getSlotElements(slot, props = this.props) { const {plugins} = this.context; - return plugins.getSlotComponents(slot, props.reduxState, props.slotProps, props.queryData); + return plugins.getSlotElements(slot, props.reduxState, props.slotProps, props.queryData); } getPluginTabElements(props = this.props) { - const {plugins} = this.context; - return this.getSlotComponents(props.tabSlot).map((PluginComponent) => { - const pluginProps = plugins.getSlotComponentProps(PluginComponent, props.reduxState, props.slotProps, props.queryData); + return this.getSlotElements(props.tabSlot).map((el) => { return ( - - + + {React.cloneElement(el, {active: this.props.activeTab === el.type.talkPluginName})} ); }); } getPluginTabPaneElements(props = this.props) { - const {plugins} = this.context; - return this.getSlotComponents(props.tabPaneSlot).map((PluginComponent) => { - const pluginProps = plugins.getSlotComponentProps(PluginComponent, props.reduxState, props.slotProps, props.queryData); + return this.getSlotElements(props.tabPaneSlot).map((el) => { return ( - - + + {el} ); }); diff --git a/client/coral-framework/services/plugins.js b/client/coral-framework/services/plugins.js index 301428c12..5c4f8eb35 100644 --- a/client/coral-framework/services/plugins.js +++ b/client/coral-framework/services/plugins.js @@ -77,7 +77,7 @@ class PluginsService { addMetaDataToSlotComponents(plugins); } - getSlotComponents(slot, reduxState, props = {}, queryData = {}) { + _getSlotComponents(slot, reduxState, props = {}, queryData = {}) { const pluginConfig = reduxState.config.plugin_config || emptyConfig; return flatten(this.plugins @@ -100,7 +100,7 @@ class PluginsService { } isSlotEmpty(slot, reduxState, props = {}, queryData = {}) { - return this.getSlotComponents(slot, reduxState, props, queryData).length === 0; + return this._getSlotComponents(slot, reduxState, props, queryData).length === 0; } /** @@ -124,10 +124,42 @@ class PluginsService { * Returns React Elements for given slot. */ getSlotElements(slot, reduxState, props = {}, queryData = {}) { - return this.getSlotComponents(slot, reduxState, props, queryData) - .map((component, i) => { - return React.createElement(component, {key: i, ...this.getSlotComponentProps(component, reduxState, props, queryData)}); - }); + const pluginConfig = reduxState.config.plugin_config || emptyConfig; + + const isDisabled = (component) => { + if ( + pluginConfig && + pluginConfig[component.talkPluginName] && + pluginConfig[component.talkPluginName].disable_components + ) { + return true; + } + + // Check if component is excluded. + if(component.isExcluded) { + let resolvedProps = this.getSlotComponentProps(component, reduxState, props, queryData); + if (component.mapStateToProps) { + resolvedProps = {...resolvedProps, ...component.mapStateToProps(reduxState)}; + } + return component.isExcluded(resolvedProps); + } + + return false; + }; + + return flatten(this.plugins + .filter((o) => o.module.slots && o.module.slots[slot]) + .map((o) => o.module.slots[slot]) + ) + .map((component, i) => ({ + component, + disabled: isDisabled(component), + key: i, + })) + .filter((o) => !o.disabled) + .map(({component, key}) => + React.createElement(component, {key, ...this.getSlotComponentProps(component, reduxState, props, queryData)}) + ); } getSlotFragments(slot, part) {