+const DefaultQuestionBoxIcon = ({className}) => (
+
);
-export default DefaultIcon;
+export default DefaultQuestionBoxIcon;
diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js
index 5ce7021fb..7445bf300 100644
--- a/client/coral-embed-stream/src/components/Embed.js
+++ b/client/coral-embed-stream/src/components/Embed.js
@@ -1,16 +1,17 @@
import React from 'react';
import PropTypes from 'prop-types';
-import Stream from '../containers/Stream';
+import Stream from '../tabs/stream/containers/Stream';
+import Configure from '../tabs/configure/containers/Configure';
import Slot from 'coral-framework/components/Slot';
import {can} from 'coral-framework/services/perms';
import t from 'coral-framework/services/i18n';
+import AutomaticAssetClosure from '../containers/AutomaticAssetClosure';
-import {TabBar, Tab, TabContent, TabPane} from 'coral-ui';
+import ExtendableTabPanel from '../containers/ExtendableTabPanel';
+import {Tab, TabPane} from 'coral-ui';
import ProfileContainer from 'coral-settings/containers/ProfileContainer';
import Popup from 'coral-framework/components/Popup';
import IfSlotIsNotEmpty from 'coral-framework/components/IfSlotIsNotEmpty';
-import ConfigureStreamContainer
- from 'coral-configure/containers/ConfigureStreamContainer';
import cn from 'classnames';
export default class Embed extends React.Component {
@@ -21,20 +22,37 @@ export default class Embed extends React.Component {
case 'profile':
this.props.data.refetch();
break;
- case 'config':
- this.props.data.refetch();
- break;
}
this.props.setActiveTab(tab);
};
- render() {
- const {activeTab, commentId, root, data, auth: {showSignInDialog, signInDialogFocus}, blurSignInDialog, focusSignInDialog, hideSignInDialog, router: {location: {query: {parentUrl}}}} = this.props;
+ getTabs() {
const {user} = this.props.auth;
+ const tabs = [
+
+ {t('embed_comments_tab')}
+ ,
+
+ {t('framework.my_profile')}
+ ,
+ ];
+ if (can(user, 'UPDATE_CONFIG')) {
+ tabs.push(
+
+ {t('framework.configure_stream')}
+
+ );
+ }
+ return tabs;
+ }
+
+ render() {
+ const {activeTab, commentId, root, root: {asset}, data, auth: {showSignInDialog, signInDialogFocus}, blurSignInDialog, focusSignInDialog, hideSignInDialog, router: {location: {query: {parentUrl}}}} = this.props;
const hasHighlightedComment = !!commentId;
return (
+
-
-
- {t('embed_comments_tab')}
-
-
- {t('framework.my_profile')}
-
- {can(user, 'UPDATE_CONFIG') &&
-
- {t('framework.configure_stream')}
-
- }
-
+
-
-
-
-
-
-
-
-
-
-
-
+ setActiveTab={this.changeTab}
+ fallbackTab='stream'
+ tabSlot='embedStreamTabs'
+ tabSlotPrepend='embedStreamTabsPrepend'
+ tabPaneSlot='embedStreamTabPanes'
+ slotProps={{data}}
+ queryData={{root}}
+ tabs={this.getTabs()}
+ tabPanes={[
+
+
+ ,
+
+
+ ,
+
+
+ ,
+ ]}
+ />
);
}
diff --git a/client/coral-embed-stream/src/components/StreamTabPanel.css b/client/coral-embed-stream/src/components/ExtendableTabPanel.css
similarity index 100%
rename from client/coral-embed-stream/src/components/StreamTabPanel.css
rename to client/coral-embed-stream/src/components/ExtendableTabPanel.css
diff --git a/client/coral-embed-stream/src/components/StreamTabPanel.js b/client/coral-embed-stream/src/components/ExtendableTabPanel.js
similarity index 85%
rename from client/coral-embed-stream/src/components/StreamTabPanel.js
rename to client/coral-embed-stream/src/components/ExtendableTabPanel.js
index 35c10d5d9..ec582eb84 100644
--- a/client/coral-embed-stream/src/components/StreamTabPanel.js
+++ b/client/coral-embed-stream/src/components/ExtendableTabPanel.js
@@ -1,9 +1,9 @@
import React from 'react';
import {Spinner, TabBar, TabContent} from 'coral-ui';
import PropTypes from 'prop-types';
-import styles from './StreamTabPanel.css';
+import styles from './ExtendableTabPanel.css';
-class StreamTabPanel extends React.Component {
+class ExtendableTabPanel extends React.Component {
render() {
const {activeTab, setActiveTab, tabs, tabPanes, sub, loading, ...rest} = this.props;
@@ -23,7 +23,7 @@ class StreamTabPanel extends React.Component {
}
}
-StreamTabPanel.propTypes = {
+ExtendableTabPanel.propTypes = {
activeTab: PropTypes.string.isRequired,
setActiveTab: PropTypes.func.isRequired,
loading: PropTypes.bool,
@@ -39,4 +39,4 @@ StreamTabPanel.propTypes = {
sub: PropTypes.bool,
};
-export default StreamTabPanel;
+export default ExtendableTabPanel;
diff --git a/client/talk-plugin-questionbox/QuestionBox.css b/client/coral-embed-stream/src/components/QuestionBox.css
similarity index 95%
rename from client/talk-plugin-questionbox/QuestionBox.css
rename to client/coral-embed-stream/src/components/QuestionBox.css
index b8df1f228..f8c8e0eb2 100644
--- a/client/talk-plugin-questionbox/QuestionBox.css
+++ b/client/coral-embed-stream/src/components/QuestionBox.css
@@ -65,8 +65,3 @@
justify-content: center;
font-weight: 400;
}
-
-.hidden {
- visibility: hidden;
- display: none;
-}
diff --git a/client/talk-plugin-questionbox/QuestionBox.js b/client/coral-embed-stream/src/components/QuestionBox.js
similarity index 59%
rename from client/talk-plugin-questionbox/QuestionBox.js
rename to client/coral-embed-stream/src/components/QuestionBox.js
index f15549b7c..1f34afcd7 100644
--- a/client/talk-plugin-questionbox/QuestionBox.js
+++ b/client/coral-embed-stream/src/components/QuestionBox.js
@@ -3,16 +3,14 @@ import cn from 'classnames';
import styles from './QuestionBox.css';
import {Icon} from 'coral-ui';
import Markdown from 'coral-framework/components/Markdown';
+import DefaultQuestionBoxIcon from './DefaultQuestionBoxIcon';
-import Slot from 'coral-framework/components/Slot';
-
-const QuestionBox = ({content, enable, icon = '', className = ''}) => (
-
+const QuestionBox = ({content, icon, className, children}) => (
+
{
icon === 'default' ? (
-
-
+
) : (
@@ -23,8 +21,7 @@ const QuestionBox = ({content, enable, icon = '', className = ''}) => (
-
-
+ {children}
);
diff --git a/client/coral-embed-stream/src/constants/configure.js b/client/coral-embed-stream/src/constants/configure.js
new file mode 100644
index 000000000..b29cf6280
--- /dev/null
+++ b/client/coral-embed-stream/src/constants/configure.js
@@ -0,0 +1,4 @@
+const prefix = 'TALK_EMBED_STREAM_CONFIGURE';
+
+export const UPDATE_PENDING = `${prefix}_UPDATE_PENDING`;
+export const CLEAR_PENDING = `${prefix}_CLEAR_PENDING`;
diff --git a/client/coral-embed-stream/src/containers/AutomaticAssetClosure.js b/client/coral-embed-stream/src/containers/AutomaticAssetClosure.js
index 487e927a8..f6ade1de0 100644
--- a/client/coral-embed-stream/src/containers/AutomaticAssetClosure.js
+++ b/client/coral-embed-stream/src/containers/AutomaticAssetClosure.js
@@ -1,10 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';
-import {gql} from 'react-apollo';
+import {gql, compose} from 'react-apollo';
+import {withFragments} from 'coral-framework/hocs';
const FRAGMENT = gql`
fragment CoralEmbedStream_AutomaticAssetClosure_Fragment on Asset {
- id
isClosed
}
`;
@@ -26,15 +26,15 @@ class AutomaticAssetClosure extends React.Component {
timer = null;
componentWillMount() {
- this.setupTimer(this.props.assetId, this.props.closedAt);
+ this.setupTimer(this.props.asset.id, this.props.asset.closedAt);
}
componentWillReceiveProps(next) {
if (
- this.props.assetId !== next.assetId ||
- this.props.closedAt !== next.closedAt
+ this.props.asset.id !== next.asset.id ||
+ this.props.asset.closedAt !== next.asset.closedAt
) {
- this.setupTimer(next.assetId, next.closedAt);
+ this.setupTimer(next.asset.id, next.asset.closedAt);
}
}
@@ -43,6 +43,7 @@ class AutomaticAssetClosure extends React.Component {
fragment: FRAGMENT,
id: getFragmentId(assetId),
data: {
+ __typename: 'Asset',
isClosed: true,
},
});
@@ -74,9 +75,21 @@ class AutomaticAssetClosure extends React.Component {
}
}
-AutomaticAssetClosure.PropTypes = {
- assetId: PropTypes.string,
- closedAt: PropTypes.string,
+AutomaticAssetClosure.propTypes = {
+ asset: PropTypes.object.isRequired,
};
-export default AutomaticAssetClosure;
+const withAutomaticAssetClosureFragments = withFragments({
+ asset: gql`
+ fragment CoralEmbedStream_AutomaticAssetClosure_asset on Asset {
+ id
+ closedAt
+ }
+ `,
+});
+
+const enhance = compose(
+ withAutomaticAssetClosureFragments,
+);
+
+export default enhance(AutomaticAssetClosure);
diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js
index 132e7f5e7..7a8df6e7c 100644
--- a/client/coral-embed-stream/src/containers/Embed.js
+++ b/client/coral-embed-stream/src/containers/Embed.js
@@ -13,7 +13,9 @@ import * as assetActions from '../actions/asset';
import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
import {withQuery} from 'coral-framework/hocs';
import Embed from '../components/Embed';
-import Stream from './Stream';
+import Stream from '../tabs/stream/containers/Stream';
+import AutomaticAssetClosure from './AutomaticAssetClosure';
+import Configure from '../tabs/configure/containers/Configure';
import {notify} from 'coral-framework/actions/notification';
import t from 'coral-framework/services/i18n';
import PropTypes from 'prop-types';
@@ -151,6 +153,9 @@ const USERNAME_REJECTED_SUBSCRIPTION = gql`
const slots = [
'embed',
+ 'embedStreamTabs',
+ 'embedStreamTabsPrepend',
+ 'embedStreamTabPanes',
];
const EMBED_QUERY = gql`
@@ -167,10 +172,20 @@ const EMBED_QUERY = gql`
id
status
}
+ asset(id: $assetId, url: $assetUrl) {
+ ...${getDefinitionName(Configure.fragments.asset)}
+ ...${getDefinitionName(Stream.fragments.asset)}
+ ...${getDefinitionName(AutomaticAssetClosure.fragments.asset)}
+ }
${getSlotFragmentSpreads(slots, 'root')}
...${getDefinitionName(Stream.fragments.root)}
+ ...${getDefinitionName(Configure.fragments.root)}
}
${Stream.fragments.root}
+ ${Stream.fragments.asset}
+ ${Configure.fragments.root}
+ ${Configure.fragments.asset}
+ ${AutomaticAssetClosure.fragments.asset}
`;
export const withEmbedQuery = withQuery(EMBED_QUERY, {
diff --git a/client/coral-embed-stream/src/containers/StreamTabPanel.js b/client/coral-embed-stream/src/containers/ExtendableTabPanel.js
similarity index 66%
rename from client/coral-embed-stream/src/containers/StreamTabPanel.js
rename to client/coral-embed-stream/src/containers/ExtendableTabPanel.js
index 9a154512d..b582f7b66 100644
--- a/client/coral-embed-stream/src/containers/StreamTabPanel.js
+++ b/client/coral-embed-stream/src/containers/ExtendableTabPanel.js
@@ -1,5 +1,5 @@
import React from 'react';
-import StreamTabPanel from '../components/StreamTabPanel';
+import ExtendableTabPanel from '../components/ExtendableTabPanel';
import {connect} from 'react-redux';
import omit from 'lodash/omit';
import {Tab, TabPane} from 'coral-ui';
@@ -7,17 +7,17 @@ import {getShallowChanges} from 'coral-framework/utils';
import isEqual from 'lodash/isEqual';
import PropTypes from 'prop-types';
-class StreamTabPanelContainer extends React.Component {
+class ExtendableTabPanelContainer extends React.Component {
static contextTypes = {
plugins: PropTypes.object,
};
componentDidMount() {
- this.fallbackAllTab();
+ this.handleFallback();
}
componentWillReceiveProps(next) {
- this.fallbackAllTab(next);
+ this.handleFallback(next);
}
shouldComponentUpdate(next) {
@@ -35,22 +35,31 @@ class StreamTabPanelContainer extends React.Component {
return changes.length !== 0;
}
- fallbackAllTab(props = this.props) {
- if (props.activeTab !== props.fallbackTab) {
- const slotPlugins = this.getSlotElements(props.tabSlot, props).map((el) => el.type.talkPluginName);
- if (slotPlugins.indexOf(props.activeTab) === -1) {
- props.setActiveTab(props.fallbackTab);
- }
+ handleFallback(props = this.props) {
+ if (this.getTabNames(props).indexOf(props.activeTab) === -1) {
+ props.setActiveTab(props.fallbackTab);
}
}
+ getTabNames(props = this.props) {
+ return this.getTabElements(props).map((el) => el.props.tabId);
+ }
+
getSlotElements(slot, props = this.props) {
const {plugins} = this.context;
return plugins.getSlotElements(slot, props.reduxState, props.slotProps, props.queryData);
}
getPluginTabElements(props = this.props) {
- return this.getSlotElements(props.tabSlot).map((el) => {
+ return this.getSlotTabElements(props.tabSlot);
+ }
+
+ getPluginTabElementsPrepend(props = this.props) {
+ return this.getSlotTabElements(props.tabSlotPrepend);
+ }
+
+ getSlotTabElements(slot) {
+ return this.getSlotElements(slot).map((el) => {
return (
{React.cloneElement(el, {active: this.props.activeTab === el.type.talkPluginName})}
@@ -59,6 +68,17 @@ class StreamTabPanelContainer extends React.Component {
});
}
+ getTabElements(props = this.props) {
+ const elements = [...this.getPluginTabElementsPrepend(props)];
+ if (Array.isArray(props.tabs)) {
+ elements.push(...props.tabs);
+ } else {
+ elements.push(props.tabs);
+ }
+ elements.push(...this.getPluginTabElements(props));
+ return elements;
+ }
+
getPluginTabPaneElements(props = this.props) {
return this.getSlotElements(props.tabPaneSlot).map((el) => {
return (
@@ -71,12 +91,12 @@ class StreamTabPanelContainer extends React.Component {
render() {
return (
-
@@ -84,19 +104,20 @@ class StreamTabPanelContainer extends React.Component {
}
}
-StreamTabPanelContainer.propTypes = {
+ExtendableTabPanelContainer.propTypes = {
activeTab: PropTypes.string.isRequired,
setActiveTab: PropTypes.func.isRequired,
- appendTabs: PropTypes.oneOfType([
+ tabs: PropTypes.oneOfType([
PropTypes.element,
PropTypes.arrayOf(PropTypes.element)
]),
- appendTabPanes: PropTypes.oneOfType([
+ tabPanes: PropTypes.oneOfType([
PropTypes.element,
PropTypes.arrayOf(PropTypes.element)
]),
fallbackTab: PropTypes.string.isRequired,
tabSlot: PropTypes.string.isRequired,
+ tabSlotPrepend: PropTypes.string.isRequired,
tabPaneSlot: PropTypes.string.isRequired,
slotProps: PropTypes.object.isRequired,
queryData: PropTypes.object,
@@ -109,4 +130,4 @@ const mapStateToProps = (state) => ({
reduxState: omit(state, 'apollo'),
});
-export default connect(mapStateToProps, null)(StreamTabPanelContainer);
+export default connect(mapStateToProps, null)(ExtendableTabPanelContainer);
diff --git a/client/coral-embed-stream/src/graphql/index.js b/client/coral-embed-stream/src/graphql/index.js
index d18cdc435..d77e6356a 100644
--- a/client/coral-embed-stream/src/graphql/index.js
+++ b/client/coral-embed-stream/src/graphql/index.js
@@ -2,6 +2,7 @@ import {gql} from 'react-apollo';
import update from 'immutability-helper';
import uuid from 'uuid/v4';
import {insertCommentIntoEmbedQuery, removeCommentFromEmbedQuery} from './utils';
+import {mapLeaves} from 'coral-framework/utils';
export default {
fragments: {
@@ -218,6 +219,18 @@ export default {
},
},
}),
+ UpdateAssetSettings: ({variables: {input}}) => ({
+ updateQueries: {
+ CoralEmbedStream_Embed: (prev) => {
+ const updated = update(prev, {
+ asset: {
+ settings: mapLeaves(input, (leaf) => ({$set: leaf})),
+ },
+ });
+ return updated;
+ }
+ }
+ }),
},
};
diff --git a/client/coral-embed-stream/src/reducers/configure.js b/client/coral-embed-stream/src/reducers/configure.js
new file mode 100644
index 000000000..0a94d5a54
--- /dev/null
+++ b/client/coral-embed-stream/src/reducers/configure.js
@@ -0,0 +1,42 @@
+import * as actions from '../constants/configure';
+import isEmpty from 'lodash/isEmpty';
+import update from 'immutability-helper';
+
+const initialState = {
+ canSave: false,
+ pending: {},
+ errors: {},
+};
+
+export default function config(state = initialState, action) {
+ switch (action.type) {
+ case actions.UPDATE_PENDING: {
+ let next = state;
+ if (action.updater) {
+ next = update(next, {
+ pending: action.updater,
+ });
+ }
+ if (action.errorUpdater) {
+ next = update(next, {
+ errors: action.errorUpdater,
+ });
+ }
+ const noErrors = Object.keys(next.errors).reduce((res, error) => res && !next.errors[error], true);
+ const canSave = !isEmpty(next.pending) && noErrors;
+ next = update(next, {
+ canSave: {$set: canSave},
+ });
+
+ return next;
+ }
+ case actions.CLEAR_PENDING:
+ return {
+ ...state,
+ pending: {},
+ canSave: false,
+ };
+ default:
+ return state;
+ }
+}
diff --git a/client/coral-embed-stream/src/reducers/index.js b/client/coral-embed-stream/src/reducers/index.js
index 5c553b04f..d6d0c7693 100644
--- a/client/coral-embed-stream/src/reducers/index.js
+++ b/client/coral-embed-stream/src/reducers/index.js
@@ -2,6 +2,7 @@ import auth from './auth';
import asset from './asset';
import embed from './embed';
import config from './config';
+import configure from './configure';
import stream from './stream';
import {reducer as commentBox} from '../../../talk-plugin-commentbox';
@@ -11,5 +12,6 @@ export default {
commentBox,
embed,
config,
+ configure,
stream,
};
diff --git a/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.css b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.css
new file mode 100644
index 000000000..3dfd98ccc
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.css
@@ -0,0 +1,10 @@
+.wrapper {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.button {
+ width: 300px;
+ margin-left: 20px;
+}
diff --git a/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
new file mode 100644
index 000000000..d3c2f14d7
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import {Button} from 'coral-ui';
+import PropTypes from 'prop-types';
+import t, {timeago} from 'coral-framework/services/i18n';
+import cn from 'classnames';
+import styles from './AssetStatusInfo.css';
+
+class AssetStatusInfo extends React.Component {
+
+ timer = null;
+
+ constructor(props) {
+ super(props);
+ this.setupTimer(props);
+ }
+
+ componentWillReceiveProps(nextProps) {
+ this.setupTimer(nextProps);
+ }
+
+ // Rerendering interval. If remaining time > 1min, rerender every minute, otherwise evey second.
+ interval(closedAt) {
+ const diff = new Date(closedAt).getTime() - new Date().getTime();
+ return diff > 60000 ? 60000 : 1000;
+ }
+
+ // Timer that counts down the remaining time.
+ setupTimer({closedAt, isClosed} = this.props) {
+ if (this.timer && (isClosed || !closedAt)) {
+ clearTimeout(this.timer);
+ this.timer = null;
+ }
+ if (isClosed || !closedAt) {
+ this.timer = null;
+ return;
+ }
+ if (!this.timer) {
+ this.timer = setTimeout(() => {
+ this.timer = null;
+ this.forceUpdate();
+ this.setupTimer();
+ }, this.interval(closedAt));
+ }
+ }
+
+ render() {
+ const {isClosed, closedAt, onClose, onOpen} = this.props;
+ return (
+
+
{!isClosed ? t('configure.close') : t('configure.open')} {t('configure.comment_stream')}
+ {(!isClosed && closedAt) ?
{t('configure.comment_stream_will_close')} {timeago(new Date(closedAt))}.
: ''}
+
+
+ {!isClosed ? t('configure.open_stream_configuration') : t('configure.close_stream_configuration')}
+
+
+
+
+
Include an Icon
+
+
+ {icons.map((item) => {
+ const name = typeof item === 'object' ? Object.keys(item)[0] : item;
+ const icon = typeof item === 'object' ? item[name] : item;
+ return (
+ -
+
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
{t('configure.title')}
+
+
{t('configure.description')}
+
+
+
+
+
+ {
+ questionBoxEnable &&
+
+
+
+ }
+
+
+
+
@@ -157,26 +158,28 @@ class Stream extends React.Component {
{...slotProps}
/>
-
{t('stream.all_comments')} {totalCommentCount}
}
- appendTabPanes={
-
+ tabPanes={
+
-
{open
?
);
diff --git a/client/coral-embed-stream/src/components/StreamError.css b/client/coral-embed-stream/src/tabs/stream/components/StreamError.css
similarity index 100%
rename from client/coral-embed-stream/src/components/StreamError.css
rename to client/coral-embed-stream/src/tabs/stream/components/StreamError.css
diff --git a/client/coral-embed-stream/src/components/StreamError.js b/client/coral-embed-stream/src/tabs/stream/components/StreamError.js
similarity index 100%
rename from client/coral-embed-stream/src/components/StreamError.js
rename to client/coral-embed-stream/src/tabs/stream/components/StreamError.js
diff --git a/client/coral-embed-stream/src/components/SuspendAccount.css b/client/coral-embed-stream/src/tabs/stream/components/SuspendedAccount.css
similarity index 100%
rename from client/coral-embed-stream/src/components/SuspendAccount.css
rename to client/coral-embed-stream/src/tabs/stream/components/SuspendedAccount.css
diff --git a/client/coral-embed-stream/src/components/SuspendedAccount.js b/client/coral-embed-stream/src/tabs/stream/components/SuspendedAccount.js
similarity index 98%
rename from client/coral-embed-stream/src/components/SuspendedAccount.js
rename to client/coral-embed-stream/src/tabs/stream/components/SuspendedAccount.js
index ce9a1c23c..0369ef559 100644
--- a/client/coral-embed-stream/src/components/SuspendedAccount.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/SuspendedAccount.js
@@ -2,7 +2,7 @@ import React, {Component} from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import t from 'coral-framework/services/i18n';
-import styles from './SuspendAccount.css';
+import styles from './SuspendedAccount.css';
import {Button} from 'coral-ui';
import validate from 'coral-framework/helpers/validate';
import RestrictedMessageBox from 'coral-framework/components/RestrictedMessageBox';
diff --git a/client/coral-embed-stream/src/components/util.js b/client/coral-embed-stream/src/tabs/stream/components/util.js
similarity index 100%
rename from client/coral-embed-stream/src/components/util.js
rename to client/coral-embed-stream/src/tabs/stream/components/util.js
diff --git a/client/coral-embed-stream/src/containers/Comment.js b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
similarity index 96%
rename from client/coral-embed-stream/src/containers/Comment.js
rename to client/coral-embed-stream/src/tabs/stream/containers/Comment.js
index 26fc872d5..eb27517f7 100644
--- a/client/coral-embed-stream/src/containers/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
@@ -4,9 +4,9 @@ import Comment from '../components/Comment';
import {withFragments} from 'coral-framework/hocs';
import {getSlotFragmentSpreads} from 'coral-framework/utils';
import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
-import {THREADING_LEVEL} from '../constants/stream';
+import {THREADING_LEVEL} from '../../../constants/stream';
import hoistStatics from 'recompose/hoistStatics';
-import {nest} from '../graphql/utils';
+import {nest} from '../../../graphql/utils';
const slots = [
'streamQuestionArea',
diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
similarity index 84%
rename from client/coral-embed-stream/src/containers/Stream.js
rename to client/coral-embed-stream/src/tabs/stream/containers/Stream.js
index 6c3d7b02c..dad69b960 100644
--- a/client/coral-embed-stream/src/containers/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
@@ -2,7 +2,7 @@ import React from 'react';
import {gql, compose} from 'react-apollo';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
-import {ADDTL_COMMENTS_ON_LOAD_MORE, THREADING_LEVEL} from '../constants/stream';
+import {ADDTL_COMMENTS_ON_LOAD_MORE, THREADING_LEVEL} from '../../../constants/stream';
import {
withPostComment, withPostFlag, withPostDontAgree,
withDeleteAction, withEditComment
@@ -10,7 +10,7 @@ import {
import * as authActions from 'coral-embed-stream/src/actions/auth';
import * as notificationActions from 'coral-framework/actions/notification';
-import {setActiveReplyBox, setActiveTab, viewAllComments} from '../actions/stream';
+import {setActiveReplyBox, setActiveTab, viewAllComments} from '../../../actions/stream';
import Stream from '../components/Stream';
import Comment from './Comment';
import {withFragments, withEmit} from 'coral-framework/hocs';
@@ -23,7 +23,7 @@ import {
removeCommentFromEmbedQuery,
insertFetchedCommentsIntoEmbedQuery,
nest,
-} from '../graphql/utils';
+} from '../../../graphql/utils';
const {showSignInDialog, editName} = authActions;
const {notify} = notificationActions;
@@ -36,7 +36,7 @@ class StreamContainer extends React.Component {
this.commentsEditedSubscription = this.props.data.subscribeToMore({
document: COMMENTS_EDITED_SUBSCRIPTION,
variables: {
- assetId: this.props.root.asset.id,
+ assetId: this.props.asset.id,
},
updateQuery: (prev, {subscriptionData: {data: {commentEdited}}}) => {
@@ -62,7 +62,7 @@ class StreamContainer extends React.Component {
this.commentsAddedSubscription = this.props.data.subscribeToMore({
document: COMMENTS_ADDED_SUBSCRIPTION,
variables: {
- assetId: this.props.root.asset.id,
+ assetId: this.props.asset.id,
},
updateQuery: (prev, {subscriptionData: {data: {commentAdded}}}) => {
@@ -116,7 +116,7 @@ class StreamContainer extends React.Component {
limit: parent_id ? 999999 : ADDTL_COMMENTS_ON_LOAD_MORE,
cursor: comment.replies.endCursor,
parent_id,
- asset_id: this.props.root.asset.id,
+ asset_id: this.props.asset.id,
sortOrder: 'ASC',
excludeIgnored: this.props.data.variables.excludeIgnored,
},
@@ -131,9 +131,9 @@ class StreamContainer extends React.Component {
query: LOAD_MORE_QUERY,
variables: {
limit: ADDTL_COMMENTS_ON_LOAD_MORE,
- cursor: this.props.root.asset.comments.endCursor,
+ cursor: this.props.asset.comments.endCursor,
parent_id: null,
- asset_id: this.props.root.asset.id,
+ asset_id: this.props.asset.id,
sortOrder: this.props.data.variables.sortOrder,
sortBy: this.props.data.variables.sortBy,
excludeIgnored: this.props.data.variables.excludeIgnored,
@@ -177,9 +177,9 @@ class StreamContainer extends React.Component {
}
render() {
- if (!this.props.root.asset
- || this.props.root.asset.comment === undefined
- && !this.props.root.asset.comments
+ if (!this.props.asset
+ || this.props.asset.comment === undefined
+ && !this.props.asset.comments
) {
return ;
}
@@ -271,6 +271,7 @@ const LOAD_MORE_QUERY = gql`
const slots = [
'streamTabs',
+ 'streamTabsPrepend',
'streamTabPanes',
'streamFilter',
];
@@ -278,49 +279,6 @@ const slots = [
const fragments = {
root: gql`
fragment CoralEmbedStream_Stream_root on RootQuery {
- asset(id: $assetId, url: $assetUrl) {
- comment(id: $commentId) @include(if: $hasComment) {
- ...CoralEmbedStream_Stream_comment
- ${nest(`
- parent {
- ...CoralEmbedStream_Stream_comment
- ...nest
- }
- `, THREADING_LEVEL)}
- }
- id
- title
- url
- closedAt
- isClosed
- created_at
- settings {
- moderation
- infoBoxEnable
- infoBoxContent
- premodLinksEnable
- questionBoxEnable
- questionBoxContent
- questionBoxIcon
- closedTimeout
- closedMessage
- charCountEnable
- charCount
- requireEmailConfirmation
- }
- commentCount @skip(if: $hasComment)
- totalCommentCount @skip(if: $hasComment)
- comments(query: {limit: 10, excludeIgnored: $excludeIgnored, sortOrder: $sortOrder, sortBy: $sortBy}) @skip(if: $hasComment) {
- nodes {
- ...CoralEmbedStream_Stream_comment
- }
- hasNextPage
- startCursor
- endCursor
- }
- ${getSlotFragmentSpreads(slots, 'asset')}
- ...${getDefinitionName(Comment.fragments.asset)}
- }
me {
status
ignoredUsers {
@@ -333,8 +291,52 @@ const fragments = {
${getSlotFragmentSpreads(slots, 'root')}
...${getDefinitionName(Comment.fragments.root)}
}
- ${Comment.fragments.asset}
${Comment.fragments.root}
+ `,
+ asset: gql`
+ fragment CoralEmbedStream_Stream_asset on Asset {
+ comment(id: $commentId) @include(if: $hasComment) {
+ ...CoralEmbedStream_Stream_comment
+ ${nest(`
+ parent {
+ ...CoralEmbedStream_Stream_comment
+ ...nest
+ }
+ `, THREADING_LEVEL)}
+ }
+ id
+ title
+ url
+ isClosed
+ created_at
+ settings {
+ moderation
+ infoBoxEnable
+ infoBoxContent
+ premodLinksEnable
+ questionBoxEnable
+ questionBoxContent
+ questionBoxIcon
+ closedTimeout
+ closedMessage
+ charCountEnable
+ charCount
+ requireEmailConfirmation
+ }
+ commentCount @skip(if: $hasComment)
+ totalCommentCount @skip(if: $hasComment)
+ comments(query: {limit: 10, excludeIgnored: $excludeIgnored, sortOrder: $sortOrder, sortBy: $sortBy}) @skip(if: $hasComment) {
+ nodes {
+ ...CoralEmbedStream_Stream_comment
+ }
+ hasNextPage
+ startCursor
+ endCursor
+ }
+ ${getSlotFragmentSpreads(slots, 'asset')}
+ ...${getDefinitionName(Comment.fragments.asset)}
+ }
+ ${Comment.fragments.asset}
${commentFragment}
`,
};
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 0dcbf856e..63f1edf67 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -275,22 +275,6 @@ button.comment__action-button[disabled],
/* Close comments */
-.close-comments-intro-wrapper {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.close-comments-intro-wrapper button {
- width: 300px;
- margin-left: 20px;
-}
-
-.close-comments-intro-wrapper button:disabled {
- opacity: 0.5;
- cursor: not-allowed;
-}
-
.close-comments-message {
box-sizing: border-box;
width: 100%;
diff --git a/client/coral-framework/components/MarkdownEditor.js b/client/coral-framework/components/MarkdownEditor.js
index 65f603b0c..451a06019 100644
--- a/client/coral-framework/components/MarkdownEditor.js
+++ b/client/coral-framework/components/MarkdownEditor.js
@@ -107,6 +107,11 @@ export default class MarkdownEditor extends Component {
...config,
element: this.textarea,
});
+
+ // Don't trap the key, to stay accessible.
+ this.editor.codemirror.options.extraKeys['Tab'] = false;
+ this.editor.codemirror.options.extraKeys['Shift-Tab'] = false;
+
this.editor.codemirror.on('change', this.onChange);
}
diff --git a/client/coral-framework/components/StreamConfiguration.css b/client/coral-framework/components/StreamConfiguration.css
new file mode 100644
index 000000000..c6863fc6a
--- /dev/null
+++ b/client/coral-framework/components/StreamConfiguration.css
@@ -0,0 +1,33 @@
+.root {
+ position: relative;
+ margin: 12px 12px 24px 0;
+}
+
+.action {
+ display: inline-block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding-left: 4px;
+}
+
+.title {
+ display: block;
+ font-size: 14px;
+ margin-bottom: 5px;
+ font-weight: bold;
+ cursor: pointer;
+ padding-right: 50px;
+}
+
+.description{
+ padding-right: 50px;
+}
+
+.content {
+ display: inline-block;
+ box-sizing: border-box;
+ padding-left: 50px;
+}
+
+
diff --git a/client/coral-framework/components/StreamConfiguration.js b/client/coral-framework/components/StreamConfiguration.js
new file mode 100644
index 000000000..6331e8230
--- /dev/null
+++ b/client/coral-framework/components/StreamConfiguration.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import Checkbox from 'coral-ui/components/Checkbox';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import styles from './StreamConfiguration.css';
+import uuid from 'uuid/v4';
+
+class Configuration extends React.Component {
+
+ id = uuid();
+
+ render() {
+ const {title, description, children, className, onCheckbox, checked, ...rest} = this.props;
+ return (
+
+ {checked !== undefined &&
+
+
+
+ }
+
+
+
{description}
+
+ {children}
+
+
+