wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-03 13:28:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:coralproject/talk

Browse Source
This commit is contained in:
Belen Curcio
2017-07-20 11:31:25 -03:00
parent 7ba11cdee9 f7f5b42b71
commit 1069498323
68 changed files with 1100 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CODE_OF_CONDUCT.md
+77
View File
@@ -0,0 +1,77 @@
# Contributor Covenant Code of Conduct
## Our Pledge
We expect everyone contributing to The Coral Project to follow this code of conduct. That means the team, contractors we employ, contributors, as well as anyone posting to our public or internal-facing channels.
We created it not because we anticipate any unacceptable behavior, but because we believe that articulating our values and obligations to one another reinforces the already exceptional level of respect among the team, and because having a code provides us with clear avenues to correct our culture should it ever stray from that course.
We commit to enforce and evolve this code over the duration of the project.
## Expected behavior
* Be supportive of each other.
* Be collaborative. Involve others in brainstorms, sketching sessions, code reviews, planning documents, and the like. It’s not only okay to ask for help or feedback often, it’s unacceptable not to do so.
* Be generous and kind in both giving and accepting critique. Critique is a natural and important part of our culture. Good critiques are kind, respectful, clear, and constructive, focused on goals and requirements rather than personal preferences. You are expected to give and receive criticism with grace.
* Be humane. Be polite and friendly in all forms of communication, especially remote communication, where opportunities for misunderstanding are greater. Use sarcasm carefully. Tone is hard to decipher online; make judicious use of emoji to aid in communication.
* Be considerate.
* Be tolerant.
* Respect people’s boundaries.
* Do not make it personal.
* Use welcoming and inclusive language.
* Offer to help if you see someone struggling or otherwise in need of assistance (taking care not to be patronizing or disrespectful).
* If someone approaches you looking for help, be generous with your time; if you’re under a deadline, direct them to someone else who may be of assistance.
* Go out of your way to include people in jokes or memes, recognizing that we want to build an environment free of cliques.
* Show empathy towards other community members
## Unacceptable behavior
We are committed to providing a welcoming and safe environment for people of all races, gender identities, gender expressions, sexual orientations, physical abilities, physical appearances, socioeconomic backgrounds, nationalities, ages, religions, and beliefs.
We expect that you will refrain from demeaning, discriminatory, or harassing behavior and speech.
Harassment includes, but is not limited to: deliberate intimidation; stalking; unwanted photography or recording; sustained or willful disruption of talks or other events; inappropriate physical contact; use of sexual or discriminatory imagery, comments, or jokes; and unwelcome sexual attention.
Furthermore, any behavior or language which is unwelcoming—whether or not it rises to the level of harassment—is also strongly discouraged. Much exclusionary behavior takes the form of microaggressions—subtle put-downs which may be unconsciously delivered. Regardless of intent, microaggressions can have a significant negative impact on victims and have no place on our team.
Other inappropriate behavior:
* Threats
* Slurs
* Pornography
* Spam
* Bullying
* Copyright infringement
* Impersonation of someone else
* Violating someone’s privacy
If you feel that someone has harassed you or otherwise treated you or someone else inappropriately, please alert the project lead at andrewl@mozillafoundation.org.
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
## Enforcement
These guidelines are ambitious, and we’re not always going to succeed in meeting them. When something goes wrong—whether it’s a microaggression or an instance of harassment — there are a number of things you can do to address the situation. Depending on your comfort level and the severity of the situation, here are some suggestions:
* Address it directly. If you’re comfortable bringing up the incident with the person who instigated it, pull them aside to discuss how it affected you. Be sure to approach these conversations in a forgiving spirit: an angry or tense conversation will not do either of you any good. If you’re unsure how to go about that, try discussing with your manager or with the people and culture team first—they might have some advice about how to make this conversation happen.
If you’re too frustrated to have a direct conversation, there are a number of alternate routes you can take.
* Talk to a peer or mentor. Your colleagues are likely to have personal and professional experience on which to draw that could be of use to you. If you have someone you’re comfortable approaching, reach out and discuss the situation with them. They may be able to advise on how they would handle it, or direct you to someone who can. The flip side of this, of course, is that you should also be available when your colleagues reach out to you.
* Contact the project lead, Andrew Losowsky, andrewl@mozillafoundation.org, or the technical lead. We will work with you to help you figure out how to ensure that any conflict doesn’t interfere with your work, in confidence if you would prefer.
* Talk to Chris Lawrence. Chris oversees the project. He can be contacted at clawrence@mozillafoundation.org.
If you feel you have been unfairly accused of violating this code of conduct, you should contact Chris with a concise description of your grievance.
## Conclusion
We welcome your feedback on this and every other aspect of what we do as The Coral Project, and we thank you for working with us to make it a safe, enjoyable, and friendly experience for everyone involved in the project and what we do.
Above text is licensed CC BY-SA 4.0, adapted from the SRCCON code of conduct, FreeBSD’s code of conduct, Vox Media’s product team code of conduct, Medium’s code of conduct, as well as adapted from the Contributor Covenant.
Dockerfile
+1 -1
View File
@@ -1,4 +1,4 @@
FROM node:7.8
FROM node:7.10.1
# Create app directory
RUN mkdir -p /usr/src/app
README.md
+6 -1
View File
@@ -19,6 +19,10 @@ See our [Talk Documentation & Guides](https://coralproject.github.io/talk/index.
See our guide to using and building [Talk Plugins](https://github.com/coralproject/talk/blob/master/PLUGINS.md).
### Recipes
Recipes are plugin templates provided by the Coral Core team. Developers can use these recipes to build their own plugins. You can find all the Talk recipes here: https://github.com/coralproject/talk-recipes/
## Usage
### Installation
@@ -46,11 +50,12 @@ sign and verify tokens via a `HS256` algorithm.
- `TALK_SMTP_PASSWORD` (*required for email*) - password for the SMTP provider you are using.
- `TALK_SMTP_HOST` (*required for email*) - SMTP host url with format `smtp.domain.com`.
- `TALK_SMTP_PORT` (*required for email*) - SMTP port.
- `TALK_INSTALL_LOCK` (_optional for dynamic setup_) - Defaults to `FALSE`. When `TRUE`, disables the dynamic setup endpoint.
- `TALK_INSTALL_LOCK` (_optional for dynamic setup_) - When `TRUE`, disables the dynamic setup endpoint. (Default `FALSE`)
- `TALK_RECAPTCHA_SECRET` (*required for reCAPTCHA support*) - server secret used for enabling reCAPTCHA powered logins. If not provided it will instead default to providing only a time based lockout.
- `TALK_RECAPTCHA_PUBLIC` (*required for reCAPTCHA support*) - client secret used for enabling reCAPTCHA powered logins. If not provided it will instead default to providing only a time based lockout.
- `TALK_PLUGINS_JSON` (_optional_) - used to specify the plugin config via the environment
- `TALK_KEEP_ALIVE` (_optional_) - The keepalive timeout that should be used to send keep alive messages through the websocket to keep the socket alive. (Default `30s`)
- `TALK_DISABLE_AUTOFLAG_SUSPECT_WORDS` (_optional_) When `TRUE`, disables flagging of comments that match the suspect word filter. (Default `FALSE`)
Refer to the wiki page on [Configuration Loading](https://github.com/coralproject/talk/wiki/Configuration-Loading) for
alternative methods of loading configuration during development.
circle.yml
+1 -1
View File
@@ -1,6 +1,6 @@
machine:
node:
version: 7.9
version: 7.10.1
services:
- docker
- redis
client/coral-admin/src/routes/Moderation/containers/Comment.js
+5 -7
View File
@@ -1,22 +1,21 @@
import {gql} from 'react-apollo';
import Comment from '../components/Comment';
import {getSlotsFragments} from 'coral-framework/helpers/plugins';
import withFragments from 'coral-framework/hocs/withFragments';
import {getSlotFragmentSpreads} from 'coral-framework/utils';
const pluginFragments = getSlotsFragments([
const slots = [
'adminCommentInfoBar',
'adminCommentContent',
'adminSideActions',
'adminCommentDetailArea',
]);
];
export default withFragments({
root: gql`
fragment CoralAdmin_ModerationComment_root on RootQuery {
__typename
${pluginFragments.spreads('root')}
${getSlotFragmentSpreads(slots, 'root')}
}
${pluginFragments.definitions('root')}
`,
comment: gql`
fragment CoralAdmin_ModerationComment_comment on Comment {
@@ -52,8 +51,7 @@ export default withFragments({
editing {
edited
}
${pluginFragments.spreads('comment')}
${getSlotFragmentSpreads(slots, 'comment')}
}
${pluginFragments.definitions('comment')}
`
})(Comment);
client/coral-admin/src/routes/Moderation/containers/UserDetail.js
+5 -9
View File
@@ -4,8 +4,7 @@ import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import UserDetail from '../components/UserDetail';
import withQuery from 'coral-framework/hocs/withQuery';
import {getSlotsFragments} from 'coral-framework/helpers/plugins';
import {getDefinitionName} from 'coral-framework/utils';
import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
import {
changeUserDetailStatuses,
clearUserDetailSelections,
@@ -26,9 +25,9 @@ const commentConnectionFragment = gql`
${Comment.fragments.comment}
`;
const pluginFragments = getSlotsFragments([
const slots = [
'userProfile',
]);
];
class UserDetailContainer extends React.Component {
static propTypes = {
@@ -80,7 +79,7 @@ export const withUserDetailQuery = withQuery(gql`
id
provider
}
${pluginFragments.spreads('user')}
${getSlotFragmentSpreads(slots, 'user')}
}
totalComments: commentCount(query: {author_id: $author_id})
rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]})
@@ -90,11 +89,8 @@ export const withUserDetailQuery = withQuery(gql`
}) {
...CoralAdmin_Moderation_CommentConnection
}
${pluginFragments.spreads('root')}
${getSlotFragmentSpreads(slots, 'root')}
}
${Comment.fragments.comment}
${pluginFragments.definitions('user')}
${pluginFragments.definitions('root')}
${commentConnectionFragment}
`, {
options: ({id, moderation: {userDetailStatuses: statuses}}) => {
client/coral-embed-stream/src/components/Comment.css
+22 -6
View File
@@ -2,24 +2,23 @@
margin-left: 20px;
margin-bottom: 16px;
position: relative;
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 12px;
}
.rootLevel0:first-child {
padding-top: 0;
}
.root:first-child {
border: 0;
}
.rootLevel0 {
margin-left: 0px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.comment {
padding-left: 20px;
padding-left: 15px;
display: flex;
flex-flow: row;
}
.commentLevel0 {
@@ -43,7 +42,7 @@
}
.highlightedComment {
padding-left: 20px;
padding-left: 15px;
border-left: 3px solid rgb(35,118,216);
}
@@ -157,3 +156,20 @@
.enter {
animation: enter 1000ms;
}
.commentContainer {
flex: auto;
}
.commentAvatar {
max-width: 60px;
}
.commentAvatar:empty {
display: none;
}
.timerIcon {
vertical-align: middle;
font-size: 14px;
}
client/coral-embed-stream/src/components/Comment.js
+172 -156
View File
@@ -430,26 +430,10 @@ export default class Comment extends React.Component {
id={`c_${comment.id}`}
>
<div className={commentClassName}>
<AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
{isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
{commentIsBest(comment)
? <TagLabel><BestIndicator /></TagLabel>
: null }
<span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
<PubDate created_at={comment.created_at} className={'talk-stream-comment-published-date'} />
{
(comment.editing && comment.editing.edited)
? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
: null
}
</span>
<Slot
className={styles.commentInfoBar}
fill="commentInfoBar"
depth={depth}
className={styles.commentAvatar}
fill="commentAvatar"
comment={comment}
commentId={comment.id}
data={this.props.data}
@@ -457,157 +441,189 @@ export default class Comment extends React.Component {
inline
/>
{ (currentUser && (comment.user.id === currentUser.id)) &&
<div className={styles.commentContainer}>
<AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
{isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
/* User can edit/delete their own comment for a short window after posting */
<span className={cn(styles.topRight)}>
{commentIsBest(comment)
? <TagLabel><BestIndicator /></TagLabel>
: null }
<span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
<PubDate created_at={comment.created_at} className={'talk-stream-comment-published-date'} />
{
commentIsStillEditable(comment) &&
<a
className={cn(styles.link, {[styles.active]: this.state.isEditing})}
onClick={this.onClickEdit}>Edit</a>
(comment.editing && comment.editing.edited)
? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
: null
}
</span>
}
{ (currentUser && (comment.user.id !== currentUser.id)) &&
/* TopRightMenu allows currentUser to ignore other users' comments */
<span className={cn(styles.topRight, styles.topRightMenu)}>
<TopRightMenu
comment={comment}
ignoreUser={ignoreUser}
addNotification={addNotification} />
<Slot
className={styles.commentInfoBar}
fill="commentInfoBar"
depth={depth}
comment={comment}
commentId={comment.id}
data={this.props.data}
root={this.props.root}
inline
/>
{ (currentUser && (comment.user.id === currentUser.id)) &&
/* User can edit/delete their own comment for a short window after posting */
<span className={cn(styles.topRight)}>
{
commentIsStillEditable(comment) &&
<a
className={cn(styles.link, {[styles.active]: this.state.isEditing})}
onClick={this.onClickEdit}>Edit</a>
}
</span>
}
{
this.state.isEditing
? <EditableCommentContent
editComment={this.editComment}
addNotification={addNotification}
comment={comment}
currentUser={currentUser}
charCountEnable={charCountEnable}
maxCharCount={maxCharCount}
parentId={parentId}
stopEditing={this.stopEditing}
/>
: <div>
<Slot fill="commentContent" comment={comment} defaultComponent={CommentContent} />
</div>
}
}
{ (currentUser && (comment.user.id !== currentUser.id)) &&
<div className="commentActionsLeft comment__action-container">
<Slot
fill="commentReactions"
data={this.props.data}
root={this.props.root}
comment={comment}
commentId={comment.id}
inline
/>
<ActionButton>
<IfUserCanModifyBest user={currentUser}>
<BestButton
isBest={commentIsBest(comment)}
addBest={addBestTag}
removeBest={removeBestTag}
/>
</IfUserCanModifyBest>
</ActionButton>
{!disableReply &&
<ActionButton>
<ReplyButton
onClick={this.showReplyBox}
parentCommentId={parentId || comment.id}
currentUserId={currentUser && currentUser.id}
/>
</ActionButton>}
</div>
<div className="commentActionsRight comment__action-container">
<Slot
fill="commentActions"
wrapperComponent={ActionButton}
data={this.props.data}
root={this.props.root}
asset={asset}
comment={comment}
commentId={comment.id}
inline
/>
<ActionButton>
<FlagComment
flaggedByCurrentUser={!!myFlag}
flag={myFlag}
id={comment.id}
author_id={comment.user.id}
postFlag={postFlag}
addNotification={addNotification}
postDontAgree={postDontAgree}
deleteAction={deleteAction}
showSignInDialog={showSignInDialog}
currentUser={currentUser}
/>
</ActionButton>
</div>
</div>
{activeReplyBox === comment.id
? <ReplyBox
commentPostedHandler={() => {
setActiveReplyBox('');
}}
charCountEnable={charCountEnable}
maxCharCount={maxCharCount}
setActiveReplyBox={setActiveReplyBox}
parentId={(depth < THREADING_LEVEL) ? comment.id : parentId}
addNotification={addNotification}
postComment={postComment}
currentUser={currentUser}
assetId={asset.id}
/>
: null}
/* TopRightMenu allows currentUser to ignore other users' comments */
<span className={cn(styles.topRight, styles.topRightMenu)}>
<TopRightMenu
comment={comment}
ignoreUser={ignoreUser}
addNotification={addNotification} />
</span>
}
{
this.state.isEditing
? <EditableCommentContent
editComment={this.editComment}
addNotification={addNotification}
comment={comment}
currentUser={currentUser}
charCountEnable={charCountEnable}
maxCharCount={maxCharCount}
parentId={parentId}
stopEditing={this.stopEditing}
/>
: <div>
<Slot fill="commentContent" comment={comment} defaultComponent={CommentContent} />
</div>
}
<TransitionGroup>
{view.map((reply) => {
return commentIsIgnored(reply)
? <IgnoredCommentTombstone key={reply.id} />
: <Comment
<div className="commentActionsLeft comment__action-container">
<Slot
fill="commentReactions"
data={this.props.data}
root={this.props.root}
comment={comment}
commentId={comment.id}
inline
/>
<ActionButton>
<IfUserCanModifyBest user={currentUser}>
<BestButton
isBest={commentIsBest(comment)}
addBest={addBestTag}
removeBest={removeBestTag}
/>
</IfUserCanModifyBest>
</ActionButton>
{!disableReply &&
<ActionButton>
<ReplyButton
onClick={this.showReplyBox}
parentCommentId={parentId || comment.id}
currentUserId={currentUser && currentUser.id}
/>
</ActionButton>}
</div>
<div className="commentActionsRight comment__action-container">
<Slot
fill="commentActions"
wrapperComponent={ActionButton}
data={this.props.data}
root={this.props.root}
setActiveReplyBox={setActiveReplyBox}
disableReply={disableReply}
activeReplyBox={activeReplyBox}
addNotification={addNotification}
parentId={comment.id}
postComment={postComment}
editComment={this.props.editComment}
depth={depth + 1}
asset={asset}
highlighted={highlighted}
currentUser={currentUser}
postFlag={postFlag}
deleteAction={deleteAction}
addTag={addTag}
removeTag={removeTag}
loadMore={loadMore}
ignoreUser={ignoreUser}
comment={comment}
commentId={comment.id}
inline
/>
<ActionButton>
<FlagComment
flaggedByCurrentUser={!!myFlag}
flag={myFlag}
id={comment.id}
author_id={comment.user.id}
postFlag={postFlag}
addNotification={addNotification}
postDontAgree={postDontAgree}
deleteAction={deleteAction}
showSignInDialog={showSignInDialog}
currentUser={currentUser}
/>
</ActionButton>
</div>
</div>
</div>
{activeReplyBox === comment.id
? <ReplyBox
commentPostedHandler={() => {
setActiveReplyBox('');
}}
charCountEnable={charCountEnable}
maxCharCount={maxCharCount}
showSignInDialog={showSignInDialog}
commentIsIgnored={commentIsIgnored}
liveUpdates={liveUpdates}
key={reply.id}
comment={reply}
/>;
})}
</TransitionGroup>
<div className="talk-load-more-replies">
<LoadMore
topLevel={false}
replyCount={moreRepliesCount}
moreComments={hasMoreComments}
loadMore={this.loadNewReplies}
loadingState={loadingState}
/>
setActiveReplyBox={setActiveReplyBox}
parentId={(depth < THREADING_LEVEL) ? comment.id : parentId}
addNotification={addNotification}
postComment={postComment}
currentUser={currentUser}
assetId={asset.id}
/>
: null}
<TransitionGroup>
{view.map((reply) => {
return commentIsIgnored(reply)
? <IgnoredCommentTombstone key={reply.id} />
: <Comment
data={this.props.data}
root={this.props.root}
setActiveReplyBox={setActiveReplyBox}
disableReply={disableReply}
activeReplyBox={activeReplyBox}
addNotification={addNotification}
parentId={comment.id}
postComment={postComment}
editComment={this.props.editComment}
depth={depth + 1}
asset={asset}
highlighted={highlighted}
currentUser={currentUser}
postFlag={postFlag}
deleteAction={deleteAction}
addTag={addTag}
removeTag={removeTag}
loadMore={loadMore}
ignoreUser={ignoreUser}
charCountEnable={charCountEnable}
maxCharCount={maxCharCount}
showSignInDialog={showSignInDialog}
commentIsIgnored={commentIsIgnored}
liveUpdates={liveUpdates}
reactKey={reply.id}
key={reply.id}
comment={reply}
/>;
})}
</TransitionGroup>
<div className="talk-load-more-replies">
<LoadMore
topLevel={false}
replyCount={moreRepliesCount}
moreComments={hasMoreComments}
loadMore={this.loadNewReplies}
loadingState={loadingState}
/>
</div>
</div>
);
client/coral-embed-stream/src/components/EditableCommentContent.js
+1 -1
View File
@@ -145,7 +145,7 @@ export class EditableCommentContent extends React.Component {
}
</span>
: <span>
<Icon name="timer"/> {t('edit_comment.edit_window_timer_prefix')}
<Icon name="timer" className={styles.timerIcon}/> {t('edit_comment.edit_window_timer_prefix')}
<CountdownSeconds
until={this.getEditableUntil()}
classNameForMsRemaining={(remainingMs) => (remainingMs <= 10 * 1000) ? styles.editWindowAlmostOver : '' }
client/coral-embed-stream/src/components/Embed.js
+15 -1
View File
@@ -6,6 +6,8 @@ import t from 'coral-framework/services/i18n';
import {TabBar, Tab, TabContent, 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';
@@ -26,12 +28,24 @@ export default class Embed extends React.Component {
};
render() {
const {activeTab, commentId} = this.props;
const {activeTab, commentId, auth: {showSignInDialog, signInDialogFocus}, blurSignInDialog, focusSignInDialog, hideSignInDialog} = this.props;
const {user} = this.props.auth;
const hasHighlightedComment = !!commentId;
return (
<div className={cn('talk-embed-stream', {'talk-embed-stream-highlight-comment': hasHighlightedComment})}>
<IfSlotIsNotEmpty slot="login">
<Popup
href='/embed/stream/login'
title='Login'
features='menubar=0,resizable=0,width=500,height=550,top=200,left=500'
open={showSignInDialog}
focus={signInDialogFocus}
onFocus={focusSignInDialog}
onBlur={blurSignInDialog}
onClose={hideSignInDialog}
/>
</IfSlotIsNotEmpty>
<TabBar
onTabClick={this.changeTab}
activeTab={activeTab}
client/coral-embed-stream/src/components/Stream.css
+3
View File
@@ -22,5 +22,8 @@
}
.tabContainer {
position: relative;
margin-top: 28px;
padding-bottom: 50px;
min-height: 600px;
}
client/coral-embed-stream/src/components/Stream.js
+6 -8
View File
@@ -75,6 +75,7 @@ class Stream extends React.Component {
viewAllComments,
auth: {loggedIn, user},
removeTag,
reduxState,
editName
} = this.props;
const {keepCommentBox} = this.state;
@@ -98,6 +99,7 @@ class Stream extends React.Component {
};
const showCommentBox = loggedIn && ((!banned && !temporarilySuspended && !highlightedComment) || keepCommentBox);
const streamTabProps = {data, root, asset};
if (!comment && !comments) {
console.error('Talk: No comments came back from the graph given that query. Please, check the query params.');
@@ -207,13 +209,11 @@ class Stream extends React.Component {
<Slot fill="streamFilter" />
</div>
<TabBar activeTab={activeStreamTab} onTabClick={setActiveStreamTab} sub>
{getSlotComponents('streamTabs').map((PluginComponent) => (
{getSlotComponents('streamTabs', reduxState, streamTabProps).map((PluginComponent) => (
<Tab tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
<PluginComponent
{...streamTabProps}
active={activeStreamTab === PluginComponent.talkPluginName}
data={data}
root={root}
asset={asset}
/>
</Tab>
))}
@@ -222,12 +222,10 @@ class Stream extends React.Component {
</Tab>
</TabBar>
<TabContent activeTab={activeStreamTab} sub>
{getSlotComponents('streamTabPanes').map((PluginComponent) => (
{getSlotComponents('streamTabPanes', reduxState, streamTabProps).map((PluginComponent) => (
<TabPane tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
<PluginComponent
data={data}
root={root}
asset={asset}
{...streamTabProps}
/>
</TabPane>
))}
client/coral-embed-stream/src/containers/Comment.js
+7 -8
View File
@@ -1,25 +1,25 @@
import {gql} from 'react-apollo';
import Comment from '../components/Comment';
import {withFragments} from 'coral-framework/hocs';
import {getSlotsFragments} from 'coral-framework/helpers/plugins';
import {getSlotFragmentSpreads} from 'coral-framework/utils';
const pluginFragments = getSlotsFragments([
const slots = [
'streamQuestionArea',
'commentInputArea',
'commentInputDetailArea',
'commentInfoBar',
'commentActions',
'commentContent',
'commentReactions'
]);
'commentReactions',
'commentAvatar'
];
export default withFragments({
root: gql`
fragment CoralEmbedStream_Comment_root on RootQuery {
__typename
${pluginFragments.spreads('root')}
${getSlotFragmentSpreads(slots, 'root')}
}
${pluginFragments.definitions('root')}
`,
comment: gql`
fragment CoralEmbedStream_Comment_comment on Comment {
@@ -47,8 +47,7 @@ export default withFragments({
edited
editableUntil
}
${pluginFragments.spreads('comment')}
${getSlotFragmentSpreads(slots, 'comment')}
}
${pluginFragments.definitions('comment')}
`
})(Comment);
client/coral-embed-stream/src/containers/Embed.js
+4 -1
View File
@@ -19,7 +19,7 @@ import t from 'coral-framework/services/i18n';
import {setActiveTab} from '../actions/embed';
const {logout, checkLogin} = authActions;
const {logout, checkLogin, focusSignInDialog, blurSignInDialog, hideSignInDialog} = authActions;
const {fetchAssetSuccess} = assetActions;
class EmbedContainer extends React.Component {
@@ -185,6 +185,9 @@ const mapDispatchToProps = (dispatch) =>
setActiveTab,
fetchAssetSuccess,
addNotification,
focusSignInDialog,
blurSignInDialog,
hideSignInDialog,
},
dispatch
);
client/coral-embed-stream/src/containers/Stream.js
+9 -9
View File
@@ -15,9 +15,8 @@ import {setActiveReplyBox, setActiveTab, viewAllComments} from '../actions/strea
import Stream from '../components/Stream';
import Comment from './Comment';
import {withFragments} from 'coral-framework/hocs';
import {getSlotsFragments} from 'coral-framework/helpers/plugins';
import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
import {Spinner} from 'coral-ui';
import {getDefinitionName} from 'coral-framework/utils';
import {
findCommentInEmbedQuery,
insertCommentIntoEmbedQuery,
@@ -25,6 +24,7 @@ import {
insertFetchedCommentsIntoEmbedQuery,
nest,
} from '../graphql/utils';
import omit from 'lodash/omit';
const {showSignInDialog} = authActions;
const {addNotification} = notificationActions;
@@ -231,10 +231,10 @@ const LOAD_MORE_QUERY = gql`
${Comment.fragments.comment}
`;
const pluginFragments = getSlotsFragments([
const slots = [
'streamTabs',
'streamTabPanes',
]);
];
const fragments = {
root: gql`
@@ -277,7 +277,7 @@ const fragments = {
startCursor
endCursor
}
${pluginFragments.spreads('asset')}
${getSlotFragmentSpreads(slots, 'asset')}
}
me {
status
@@ -288,11 +288,9 @@ const fragments = {
settings {
organizationName
}
${pluginFragments.spreads('root')}
${getSlotFragmentSpreads(slots, 'root')}
...${getDefinitionName(Comment.fragments.root)}
}
${pluginFragments.definitions('asset')}
${pluginFragments.definitions('root')}
${Comment.fragments.root}
${commentFragment}
`,
@@ -310,7 +308,9 @@ const mapStateToProps = (state) => ({
previousTab: state.embed.previousTab,
activeStreamTab: state.stream.activeTab,
previousStreamTab: state.stream.previousTab,
commentClassNames: state.stream.commentClassNames
commentClassNames: state.stream.commentClassNames,
pluginConfig: state.config.plugin_config,
reduxState: omit(state, 'apollo'),
});
const mapDispatchToProps = (dispatch) =>
client/coral-embed-stream/style/default.css
-17
View File
@@ -21,18 +21,6 @@ body {
padding: 4px;
}
.talk-stream-tab-container {
padding-bottom: 50px;
min-height: 600px;
}
.talk-stream-tab-container .material-icons {
vertical-align: middle;
width: 1em;
font-size: 1em;
overflow: hidden;
}
.expandForSignin {
min-height: 600px;
}
@@ -283,11 +271,6 @@ body {
float: left;
}
.comment__action-container .material-icons {
font-size: 12px;
margin-left: 3px;
}
button.comment__action-button,
.comment__action-button button {
cursor: pointer;
client/coral-framework/actions/auth.js
+21 -33
View File
@@ -7,45 +7,33 @@ import pym from '../services/pym';
import {resetWebsocket} from 'coral-framework/services/client';
import t from 'coral-framework/services/i18n';
import {isSlotEmpty} from 'plugin-api/beta/client/services';
export const showSignInDialog = () => (dispatch, getState) => {
if (isSlotEmpty('login')) {
return;
}
const signInPopUp = window.open(
'/embed/stream/login',
'Login',
'menubar=0,resizable=0,width=500,height=550,top=200,left=500'
);
export const showSignInDialog = () => ({
type: actions.SHOW_SIGNIN_DIALOG,
});
// Workaround odd behavior in older WebKit versions, where
// onunload is called twice. (Encountered in IOS 8.3)
let loaded = false;
signInPopUp.onload = () => {
loaded = true;
// Fire some actions inside the popups reducer, to initialize required state.
const required = getState().asset.toJS().settings.requireEmailConfirmation;
const redirectUri = getState().auth.toJS().redirectUri;
signInPopUp.coralStore.dispatch(setRequireEmailVerification(required));
signInPopUp.coralStore.dispatch(setRedirectUri(redirectUri));
};
// Use `onunload` instead of `onbeforeunload` which is not supported in IOS Safari.
signInPopUp.onunload = () => {
if (loaded) {
dispatch(checkLogin());
}
};
dispatch({type: actions.SHOW_SIGNIN_DIALOG});
};
export const hideSignInDialog = () => (dispatch) => {
if (window.opener && window.opener !== window) {
// TODO: We need to address this when we refactor the
// login popup out of the embed.
// we are in a popup
window.close();
} else {
dispatch(checkLogin());
}
dispatch({type: actions.HIDE_SIGNIN_DIALOG});
window.close();
};
export const focusSignInDialog = () => ({
type: actions.FOCUS_SIGNIN_DIALOG,
});
export const blurSignInDialog = () => ({
type: actions.BLUR_SIGNIN_DIALOG,
});
export const createUsernameRequest = () => ({
type: actions.CREATE_USERNAME_REQUEST
});
client/coral-framework/components/IfSlotIsEmpty.js
+25
View File
@@ -0,0 +1,25 @@
import React from 'react';
import {connect} from 'react-redux';
import {isSlotEmpty} from 'coral-framework/helpers/plugins';
import PropTypes from 'prop-types';
import omit from 'lodash/omit';
function IfSlotIsEmpty({slot, className, reduxState, component: Component = 'div', children, ...rest}) {
return (
<Component className={className}>
{isSlotEmpty(slot, reduxState, rest) ? children : null}
</Component>
);
}
IfSlotIsEmpty.propTypes = {
slot: PropTypes.string,
className: PropTypes.string,
};
const mapStateToProps = (state) => ({
reduxState: omit(state, 'apollo'),
});
export default connect(mapStateToProps, null)(IfSlotIsEmpty);
client/coral-framework/components/IfSlotIsNotEmpty.js
+25
View File
@@ -0,0 +1,25 @@
import React from 'react';
import {connect} from 'react-redux';
import {isSlotEmpty} from 'coral-framework/helpers/plugins';
import PropTypes from 'prop-types';
import omit from 'lodash/omit';
function IfSlotIsNotEmpty({slot, className, reduxState, component: Component = 'div', children, ...rest}) {
return (
<Component className={className}>
{!isSlotEmpty(slot, reduxState, rest) ? children : null}
</Component>
);
}
IfSlotIsNotEmpty.propTypes = {
slot: PropTypes.string,
className: PropTypes.string,
};
const mapStateToProps = (state) => ({
reduxState: omit(state, 'apollo'),
});
export default connect(mapStateToProps, null)(IfSlotIsNotEmpty);
client/coral-framework/components/Popup.js
+152
View File
@@ -0,0 +1,152 @@
import {Component} from 'react';
import PropTypes from 'prop-types';
export default class Popup extends Component {
ref = null;
detectCloseInterval = null;
constructor(props) {
super(props);
if (props.open) {
this.openWindow(props);
}
}
openWindow(props = this.props) {
this.ref = window.open(
props.href,
props.title,
props.features,
);
this.setCallbacks();
}
setCallbacks() {
this.ref.onload = () => {
clearInterval(this.detectCloseInterval);
this.onLoad();
};
this.ref.onfocus = () => {
this.onFocus();
};
this.ref.onblur = () => {
this.onBlur();
};
// Use `onunload` instead of `onbeforeunload` which is not supported in IOS Safari.
this.ref.onunload = () => {
this.onUnload();
const interval = setInterval(() => {
if (this.ref.onload === null) {
this.setCallbacks();
clearInterval(interval);
}
}, 50);
this.detectCloseInterval = setInterval(() => {
if (this.ref.closed) {
clearInterval(this.detectCloseInterval);
this.onClose();
}
}, 50);
};
}
closeWindow() {
if (this.ref) {
if (!this.ref.closed) {
this.ref.close();
}
this.ref = null;
}
}
focusWindow() {
if (this.ref && !this.ref.closed) {
this.ref.focus();
}
}
blurWindow() {
if (this.ref && !this.ref.closed) {
this.ref.blur();
}
}
onLoad = () => {
if (this.props.onLoad) {
this.props.onLoad();
}
}
onUnload = () => {
if (this.props.onUnload) {
this.props.onUnload();
}
}
onClose = () => {
if (this.props.onClose) {
this.props.onClose();
}
}
onFocus = () => {
if (this.props.onFocus) {
this.props.onFocus();
}
}
onBlur = () => {
if (this.props.onBlur) {
this.props.onBlur();
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.open && !this.ref) {
this.openWindow(nextProps);
}
if (this.props.open && !nextProps.open) {
this.closeWindow();
}
if (!this.props.focus && nextProps.focus) {
this.focusWindow();
}
if (this.props.focus && !nextProps.focus) {
this.blurWindow();
}
if (this.props.href !== nextProps.href) {
this.ref.location.href = nextProps.href;
}
}
componentWillUnmount() {
this.closeWindow();
}
render() {
return null;
}
}
Popup.propTypes = {
open: PropTypes.bool,
focus: PropTypes.bool,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
onLoad: PropTypes.func,
onUnload: PropTypes.func,
onClose: PropTypes.func,
href: PropTypes.string.isRequired,
features: PropTypes.string,
};
client/coral-framework/components/Slot.js
+8 -4
View File
@@ -3,15 +3,17 @@ import cn from 'classnames';
import styles from './Slot.css';
import {connect} from 'react-redux';
import {getSlotElements} from 'coral-framework/helpers/plugins';
import omit from 'lodash/omit';
function Slot ({fill, inline = false, className, plugin_config: config, defaultComponent: DefaultComponent, ...rest}) {
let children = getSlotElements(fill, {...rest, config});
function Slot ({fill, inline = false, className, reduxState, defaultComponent: DefaultComponent, ...rest}) {
let children = getSlotElements(fill, reduxState, rest);
const pluginConfig = reduxState.config.pluginConfig || {};
if (children.length === 0 && DefaultComponent) {
children = <DefaultComponent {...rest} />;
}
return (
<div className={cn({[styles.inline]: inline, [styles.debug]: config.debug}, className)}>
<div className={cn({[styles.inline]: inline, [styles.debug]: pluginConfig.debug}, className)}>
{children}
</div>
);
@@ -21,7 +23,9 @@ Slot.propTypes = {
fill: React.PropTypes.string
};
const mapStateToProps = ({config: {plugin_config = {}}}) => ({plugin_config});
const mapStateToProps = (state) => ({
reduxState: omit(state, 'apollo'),
});
export default connect(mapStateToProps, null)(Slot);
client/coral-framework/constants/auth.js
+2
View File
@@ -3,6 +3,8 @@ export const CLEAN_STATE = 'CLEAN_STATE';
export const SHOW_SIGNIN_DIALOG = 'SHOW_SIGNIN_DIALOG';
export const HIDE_SIGNIN_DIALOG = 'HIDE_SIGNIN_DIALOG';
export const FOCUS_SIGNIN_DIALOG = 'FOCUS_SIGNIN_DIALOG';
export const BLUR_SIGNIN_DIALOG = 'BLUR_SIGNIN_DIALOG';
export const CREATE_USERNAME_REQUEST = 'CREATE_USERNAME_REQUEST';
export const CREATE_USERNAME_SUCCESS = 'CREATE_USERNAME_SUCCESS';
client/coral-framework/helpers/plugins.js
+37 -69
View File
@@ -5,92 +5,60 @@ import merge from 'lodash/merge';
import plugins from 'pluginsConfig';
import flatten from 'lodash/flatten';
import flattenDeep from 'lodash/flattenDeep';
import {getDefinitionName, mergeDocuments} from 'coral-framework/utils';
import {loadTranslations} from 'coral-framework/services/i18n';
import {injectReducers, getStore} from 'coral-framework/services/store';
import {injectReducers} from 'coral-framework/services/store';
import camelize from './camelize';
export function getSlotComponents(slot) {
const pluginConfig = getStore().getState().config.plugin_config;
export function getSlotComponents(slot, reduxState, props = {}) {
const pluginConfig = reduxState.config.pluginConfig || {};
return flatten(plugins
// Filter out components that have slots and have been disabled in `plugin_config`
.filter((o) => o.module.slots && (!pluginConfig || !pluginConfig[o.name] || !pluginConfig[o.name].disable_components))
// Filter out components that have slots and have been disabled in `plugin_config`
.filter((o) => o.module.slots && (!pluginConfig || !pluginConfig[o.name] || !pluginConfig[o.name].disable_components))
.filter((o) => o.module.slots[slot])
.map((o) => o.module.slots[slot])
);
.filter((o) => o.module.slots[slot])
.map((o) => o.module.slots[slot])
)
.filter((component) => {
if(!component.isExcluded) {
return true;
}
let resolvedProps = {...props, config: pluginConfig};
if (component.mapStateToProps) {
resolvedProps = {...resolvedProps, ...component.mapStateToProps(reduxState)};
}
return !component.isExcluded(resolvedProps);
});
}
export function isSlotEmpty(slot) {
return getSlotComponents(slot).length === 0;
export function isSlotEmpty(slot, reduxState, props) {
return getSlotComponents(slot, reduxState, props).length === 0;
}
/**
* Returns React Elements for given slot.
*/
export function getSlotElements(slot, props = {}) {
return getSlotComponents(slot)
.map((component, i) => React.createElement(component, {key: i, ...props}));
export function getSlotElements(slot, reduxState, props = {}) {
const pluginConfig = reduxState.config.pluginConfig || {};
return getSlotComponents(slot, reduxState, props)
.map((component, i) => React.createElement(component, {key: i, ...props, config: pluginConfig}));
}
function getComponentFragments(components) {
const res = components
.map((c) => c.fragments)
.filter((fragments) => fragments)
.reduce((res, fragments) => {
Object.keys(fragments).forEach((key) => {
if (!(key in res)) {
res[key] = {spreads: [], definitions: []};
}
res[key].spreads.push(getDefinitionName(fragments[key]));
res[key].definitions.push(fragments[key]);
});
return res;
}, {});
Object.keys(res).forEach((key) => {
// Assemble arguments for `gql` to call it directly without using template literals.
res[key].spreads = `...${res[key].spreads.join('\n...')}\n`;
res[key].definitions = mergeDocuments(res[key].definitions);
});
return res;
}
/**
* Returns an object that can be used to compose fragments or queries.
*
* Example:
* const pluginFragments = getSlotsFragments(['commentInfoBar', 'commentActions']);
* const rootFragment = gql`
* fragment Comment_root on RootQuery {
+ ${pluginFragments.spreads('root')}
* }
* ${pluginFragments.definitions('root')}
* `;
*/
export function getSlotsFragments(slots) {
if (!Array.isArray(slots)) {
slots = [slots];
}
const components = uniq(flattenDeep(slots.map((slot) => {
return plugins
export function getSlotFragments(slot, part) {
const components = uniq(flattenDeep(plugins
.filter((o) => o.module.slots ? o.module.slots[slot] : false)
.map((o) => o.module.slots[slot]);
})));
.map((o) => o.module.slots[slot])
));
const fragments = getComponentFragments(components);
return {
spreads(key) {
return (fragments[key] && fragments[key].spreads) || '';
},
definitions(key) {
return (fragments[key] && fragments[key].definitions) || '';
},
};
const documents = components
.map((c) => c.fragments)
.filter((fragments) => fragments && fragments[part])
.reduce((res, fragments) => {
res.push(fragments[part]);
return res;
}, []);
return documents;
}
export function getGraphQLExtensions() {
client/coral-framework/hocs/connect.js
+6
View File
@@ -0,0 +1,6 @@
import {connect} from 'react-redux';
export default (mapStateToProps, ...rest) => (BaseComponent) => {
BaseComponent.mapStateToProps = mapStateToProps;
return connect(mapStateToProps, ...rest)(BaseComponent);
};
client/coral-framework/hocs/excludeIf.js
+4
View File
@@ -0,0 +1,4 @@
export default (condition) => (BaseComponent) => {
BaseComponent.isExcluded = condition;
return BaseComponent;
};
client/coral-framework/hocs/withFragments.js
+3 -12
View File
@@ -1,14 +1,5 @@
import React from 'react';
import {getDisplayName} from '../helpers/hoc';
// TODO: revisit `filtering` after https://github.com/apollographql/graphql-anywhere/issues/38.
export default (fragments) => (WrappedComponent) => {
class WithFragments extends React.Component {
render() {
return <WrappedComponent {...this.props} />;
}
}
WithFragments.fragments = fragments;
WithFragments.displayName = `WithFragments(${getDisplayName(WrappedComponent)})`;
return WithFragments;
export default (fragments) => (BaseComponent) => {
BaseComponent.fragments = fragments;
return BaseComponent;
};
client/coral-framework/hocs/withQuery.js
+32 -4
View File
@@ -15,14 +15,42 @@ const withSkipOnErrors = (reducer) => (prev, action, ...rest) => {
* apply query options registered in the graphRegistry.
*/
export default (document, config = {}) => (WrappedComponent) => {
config = {
const wrappedConfig = {
...config,
options: config.options || {},
props: config.props || (({data}) => separateDataAndRoot(data)),
props: (args) => {
const wrappedArgs = {
...args,
data: {
...args.data,
subscribeToMore(stmArgs) {
// Resolve document fragments before passing it to `apollo-client`.
return args.data.subscribeToMore({
...stmArgs,
document: resolveFragments(stmArgs.document),
});
},
fetchMore(lmArgs) {
// Resolve document fragments before passing it to `apollo-client`.
return args.data.fetchMore({
...lmArgs,
query: resolveFragments(lmArgs.query),
});
},
},
};
return config.props
? config.props(wrappedArgs)
: separateDataAndRoot(wrappedArgs.data);
},
};
const wrappedOptions = (data) => {
const base = (typeof config.options === 'function') ? config.options(data) : config.options;
const base = (typeof wrappedConfig.options === 'function')
? wrappedConfig.options(data)
: wrappedConfig.options;
const name = getDefinitionName(document);
const configs = getQueryOptions(name);
const reducerCallbacks =
@@ -45,7 +73,7 @@ export default (document, config = {}) => (WrappedComponent) => {
let memoized = null;
const getWrapped = () => {
if (!memoized) {
memoized = graphql(resolveFragments(document), {...config, options: wrappedOptions})(WrappedComponent);
memoized = graphql(resolveFragments(document), {...wrappedConfig, options: wrappedOptions})(WrappedComponent);
}
return memoized;
};
client/coral-framework/reducers/auth.js
+10 -1
View File
@@ -7,6 +7,7 @@ const initialState = Map({
loggedIn: false,
user: null,
showSignInDialog: false,
signInDialogFocus: false,
showCreateUsernameDialog: false,
checkedInitialLogin: false,
view: 'SIGNIN',
@@ -29,13 +30,21 @@ const purge = (user) => {
export default function auth (state = initialState, action) {
switch (action.type) {
case actions.FOCUS_SIGNIN_DIALOG:
return state
.set('signInDialogFocus', true);
case actions.BLUR_SIGNIN_DIALOG:
return state
.set('signInDialogFocus', false);
case actions.SHOW_SIGNIN_DIALOG :
return state
.set('showSignInDialog', true);
.set('showSignInDialog', true)
.set('signInDialogFocus', true);
case actions.HIDE_SIGNIN_DIALOG :
return state.merge(Map({
isLoading: false,
showSignInDialog: false,
signInDialogFocus: false,
view: 'SIGNIN',
error: '',
passwordRequestFailure: null,
client/coral-framework/services/graphqlRegistry.js
+92 -15
View File
@@ -1,7 +1,8 @@
import {getDefinitionName, mergeDocuments} from 'coral-framework/utils';
import {getGraphQLExtensions} from 'coral-framework/helpers/plugins';
import {getGraphQLExtensions, getSlotFragments} from 'coral-framework/helpers/plugins';
import globalFragments from 'coral-framework/graphql/fragments';
import uniq from 'lodash/uniq';
import {gql} from 'react-apollo';
const fragments = {};
const mutationOptions = {};
@@ -139,18 +140,47 @@ export function getQueryOptions(key) {
}
/**
* Get a document with a fragment named `key`, which contains
* all fragments added under this key.
* getSlotFragmentDocument handles `key`s in the form of TalkSlot_SlotName_Resource.
* It parses the slot name and the resource and usees the plugin API to assemble
* the fragment document.
*/
export function getFragmentDocument(key) {
init();
function getSlotFragmentDocument(key) {
const match = key.match(/TalkSlot_(.*)_(.*)/);
if (!match) {
return '';
}
const slot = match[1][0].toLowerCase() + match[1].substr(1);
const resource = match[2];
const documents = getSlotFragments(slot, resource);
if (documents.length === 0) {
return '';
}
const names = documents.map((d) => getDefinitionName(d));
const typeName = getTypeName(documents[0]);
// Assemble arguments for `gql` to call it directly without using template literals.
const main = `
fragment ${key} on ${typeName} {
...${names.join('\n...')}\n
}
`;
return mergeDocuments([main, ...documents]);
}
/**
* getRegistryFragmentDocument assembles a fragment document using
* all registered fragment under given `key`.
*/
function getRegistryFragmentDocument(key) {
if (!(key in fragments)) {
return '';
}
let documents = fragments[key] ? fragments[key].documents : [];
let fields = fragments[key] ? `...${fragments[key].names.join('\n...')}\n` : ' __typename';
let documents = fragments[key].documents;
let fields = `...${fragments[key].names.join('\n...')}\n`;
// Assemble arguments for `gql` to call it directly without using template literals.
const main = `
@@ -161,6 +191,16 @@ export function getFragmentDocument(key) {
return mergeDocuments([main, ...documents]);
}
/**
* getFragmentDocument returns a fragment that assembles all registered
* fragments under given `key` or if `key` refers to Slot fragments it will
* return the slot fragments specified by this key.
*/
export function getFragmentDocument(key) {
init();
return getRegistryFragmentDocument(key) || getSlotFragmentDocument(key);
}
// The fragments and configs are lazily loaded to allow circular dependencies to work.
// TODO: We might want to change this to an explicit add after we have lazy Queries and Mutations.
let initialized = false;
@@ -178,19 +218,56 @@ function init() {
getGraphQLExtensions().forEach((ext) => add(ext));
}
/**
* resolveFragments finds fragment spread names and attachs
* the related fragment document to the given root document.
*/
export function resolveFragments(document) {
if (document.loc.source) {
// resolve fragments from registry
const matchedSubFragments = document.loc.source.body.match(/\.\.\.(.*)/g) || [];
const subFragments =
uniq(matchedSubFragments.map((f) => f.replace('...', '')))
.map((key) => getFragmentDocument(key))
.filter((i) => i);
// Remember keys that we have already resolved.
const resolvedKeys = [];
if (subFragments.length > 0) {
return mergeDocuments([document, ...subFragments]);
// Spreads from slots that are empty and need to be removed.
// (works around the issue that we don't know the resource type
// if we don't have a fragment)
const spreadsToBeRemoved = [];
// fragments to be attached.
const subFragments = [];
// body contains the final result.
let body = document.loc.source.body;
let done = false;
while (!done) {
done = true;
const matchedSubFragments = body.match(/\.\.\.([_a-zA-Z][_a-zA-Z0-9]*)/g) || [];
uniq(matchedSubFragments.map((f) => f.replace('...', '')))
.filter((key) => resolvedKeys.indexOf(key) === -1)
.forEach((key) => {
const doc = getFragmentDocument(key);
if (doc) {
subFragments.push(doc);
// We found a new fragment, so we are not done yet.
done = false;
} else if(key.startsWith('TalkSlot_')) {
spreadsToBeRemoved.push(key);
}
resolvedKeys.push(key);
});
body = mergeDocuments([body, ...subFragments]).loc.source.body;
}
spreadsToBeRemoved.forEach((key) => {
const regex = new RegExp(`\\.\\.\\.${key}\n`, 'g');
body = body.replace(regex, '');
});
return gql`${body}`;
} else {
console.warn('Can only resolve fragments from documents definied using the gql tag.');
}
client/coral-framework/utils/index.js
+11
View File
@@ -1,5 +1,6 @@
import {gql} from 'react-apollo';
import t from 'coral-framework/services/i18n';
import {capitalize} from 'coral-framework/helpers/strings';
export const getTotalActionCount = (type, comment) => {
return comment.action_summaries
@@ -144,3 +145,13 @@ export function forEachError(error, callback) {
callback({error: e, msg});
});
}
/**
* getSlotFragmentSpreads will return a string in the
* expected format for slot fragments, given `slots` and `resource`.
* e.g. `getSlotFragmentSpreads(['slotName'], 'root')` returns
* `...TalkSlot_SlotName_root`.
*/
export function getSlotFragmentSpreads(slots, resource) {
return `...${slots.map((s) => `TalkSlot_${capitalize(s)}_${resource}`).join('\n...')}\n`;
}
client/coral-plugin-best/BestButton.css
+10
View File
@@ -2,3 +2,13 @@
composes: buttonReset from "coral-framework/styles/reset.css";
margin: 5px 10px 5px 0px;
}
.tagIcon {
font-size: 12px;
vertical-align: middle;
}
.icon {
font-size: 12px;
vertical-align: middle;
}
client/coral-plugin-best/BestButton.js
+2 -2
View File
@@ -18,7 +18,7 @@ const canModifyBestTag = ({roles = []} = {}) => roles && ['ADMIN', 'MODERATOR'].
// Put this on a comment to show that it is best
export const BestIndicator = ({children = <Icon name='star'/>}) => (
export const BestIndicator = ({children = <Icon name='star' className={styles.tagIcon} />}) => (
<span aria-label={t('comment_is_best')}>
{ children }
</span>
@@ -98,7 +98,7 @@ export class BestButton extends Component {
disabled={disabled}
className={cn(styles.button, `${name}-button`, `e2e__${isBest ? 'unset' : 'set'}-best-comment`)}
aria-label={t(isBest ? 'unset_best' : 'set_best')}>
<Icon name={ isBest ? 'star' : 'star_border' } />
<Icon name={ isBest ? 'star' : 'star_border' } className={styles.icon} />
</button>
);
}
client/coral-plugin-commentbox/CommentBox.js
+1 -3
View File
@@ -67,7 +67,7 @@ class CommentBox extends React.Component {
postComment(comment, 'comments')
.then(({data}) => {
this.setState({loadingState: 'success'});
this.setState({loadingState: 'success', body: ''});
const postedComment = data.createComment.comment;
// Execute postSubmit Hooks
@@ -78,8 +78,6 @@ class CommentBox extends React.Component {
if (commentPostedHandler) {
commentPostedHandler();
}
this.setState({body: ''});
})
.catch((err) => {
this.setState({loadingState: 'error'});
client/coral-plugin-flags/components/FlagButton.js
+1 -1
View File
@@ -155,7 +155,7 @@ export default class FlagButton extends Component {
: <span className={`${name}-button-text`}>{t('report')}</span>
}
<i className={
cn(`${name}-icon`, 'material-icons', {
cn(`${name}-icon`, 'material-icons', styles.icon, {
flaggedIcon: flagged,
[styles.flaggedIcon]: flagged,
})}
client/coral-plugin-flags/components/styles.css
+6
View File
@@ -6,3 +6,9 @@
.flaggedIcon {
color: #f00
}
.icon {
padding: 0 2px;
font-size: 12px;
vertical-align: middle;
}
client/coral-plugin-history/Comment.css
+5
View File
@@ -75,3 +75,8 @@
margin: inherit;
color: inherit;
}
.iconView, .iconDate {
vertical-align: middle;
padding-bottom: 1px;
}
client/coral-plugin-history/Comment.js
+2 -2
View File
@@ -30,11 +30,11 @@ const Comment = (props) => {
<ul>
<li>
<a onClick={props.link(`${props.asset.url}?commentId=${props.comment.id}`)}>
<Icon name="open_in_new" />{t('view_conversation')}
<Icon name="open_in_new" className={styles.iconView}/>{t('view_conversation')}
</a>
</li>
<li>
<Icon name="schedule" />
<Icon name="schedule" className={styles.iconDate}/>
<PubDate
className={styles.pubdate}
created_at={props.comment.created_at}
client/coral-plugin-replies/ReplyButton.css
+6
View File
@@ -8,3 +8,9 @@
display: none;
}
}
.icon {
padding: 0 2px;
font-size: 12px;
vertical-align: middle;
}
client/coral-plugin-replies/ReplyButton.js
+1 -1
View File
@@ -15,7 +15,7 @@ const ReplyButton = ({onClick}) => {
<span className={cn(`${name}-label`, styles.label)}>
{t('reply')}
</span>
<i className={`${name}-icon material-icons`}
<i className={cn(`${name}-icon`, 'material-icons', styles.icon)}
aria-hidden={true}>reply</i>
</button>
);
client/coral-ui/components/Icon.css
+3
View File
@@ -0,0 +1,3 @@
.root {
}
client/coral-ui/components/Icon.js
+3 -1
View File
@@ -1,8 +1,10 @@
import React, {PropTypes} from 'react';
import {Icon as IconMDL} from 'react-mdl';
import cn from 'classnames';
import styles from './Icon.css';
const Icon = ({className = '', name}) => (
<IconMDL className={className} name={name} />
<IconMDL className={cn(styles.root, className)} name={name} />
);
Icon.propTypes = {
config.js
+9 -1
View File
@@ -77,7 +77,15 @@ const CONFIG = {
SMTP_HOST: process.env.TALK_SMTP_HOST,
SMTP_PASSWORD: process.env.TALK_SMTP_PASSWORD,
SMTP_PORT: process.env.TALK_SMTP_PORT,
SMTP_USERNAME: process.env.TALK_SMTP_USERNAME
SMTP_USERNAME: process.env.TALK_SMTP_USERNAME,
//------------------------------------------------------------------------------
// Flagging Config
//------------------------------------------------------------------------------
// DISABLE_AUTOFLAG_SUSPECT_WORDS is true when the suspect words that are
// matched should not be flagged.
DISABLE_AUTOFLAG_SUSPECT_WORDS: process.env.TALK_DISABLE_AUTOFLAG_SUSPECT_WORDS === 'TRUE'
};
//==============================================================================
docs/_data/sidebars/talk_sidebar.yml
+9 -1
View File
@@ -36,6 +36,12 @@ entries:
- title: Setup
url: /install-setup.html
output: web
- title: Microservice Deployments
url: /install-microservices.html
output: web
- title: Troubleshooting
url: /install-troubleshooting.html
output: web
- title: Architecture
output: web
@@ -46,11 +52,13 @@ entries:
- title: Tags
url: /architecture-tags.html
output: web
- title: Metadata API
url: /architecture-metadata.html
output: web
- title: cli
url: /architecture-cli.html
output: web
- title: Plugins
output: web
folderitems:
docs/architecture-metadata.md
+92
View File
@@ -0,0 +1,92 @@
---
title: Metadata
keywords: architecture
sidebar: talk_sidebar
permalink: architecture-metadata.html
summary:
---
_Metadata_ allows you to add fields to models that are not represented in the core schema.
## Goals
The metadata api is designed to satisfy two product goals:
* Give developers flexibility in extending datatypes.
* Protect core fields that are essential to Talk's operation.
## Design
Metadata is represented by an [subdocument in our Schemas](https://github.com/coralproject/talk/blob/c59c09e1f42c51eed3b0d57b7c2882fc7b5edc13/models/comment.js#L74). This takes advantage of Mongo's flexibility allowing for any data to be stored therein.
### Setting Metadata
Talk provides [a service layer](https://github.com/coralproject/talk/blob/c59c09e1f42c51eed3b0d57b7c2882fc7b5edc13/services/metadata.js) allowing developers to `set` and `unset` metadata on objects in a way similar to key-value stores.
Let's say that I want to add a custom field called `potency` to a comment.
```
const MetadataService = require('services/metadata');
const CommentModel = require('models/comment');
// Sets the property `potency` on the comment with `id=1`.
MetadataService.set(CommentModel, '1', 'potency', 42);
```
Note that the model passed here is the Model itself and not an individual comment object. This allows us to update the value on that document [in an atomic manner](https://github.com/coralproject/talk/blob/c59c09e1f42c51eed3b0d57b7c2882fc7b5edc13/services/metadata.js#L60) for efficiency and to prevent race conditions.
### Accessing Metadata
The metadata api does not contain a `get` method. The metadata object is retrieved via database queries along with the rest of the data.
## Metadata and the Graph
One of the first principles of GraphQL is that the shape of the graph does not need to be the same as the shape of the data in the database. In fact, it probably shouldn't be.
This enables us to treat metadata fields in any way that makes sense as we design our Graph. The fact that a value is stored in the metadata object is an implementation detail invisible to the front end.
Take for example, the `reason` field in the `FlagAction` type. This stores the user provided reason why they flagged a comment. As far as the front end knows, it's [just another field](https://github.com/coralproject/talk/blob/c59c09e1f42c51eed3b0d57b7c2882fc7b5edc13/graph/typeDefs.graphql#L453) alongside the core fields:
```
# graph/typeDefs.graphql
type FlagAction implements Action {
...
# The reason for which the Flag Action was created.
reason: String
...
}
```
If, however, we [look at the resolver](https://github.com/coralproject/talk/blob/a47e2378e96f34f25447782f3e7ce59fa48ec791/graph/resolvers/dont_agree_action.js) for that field, we see that `reason` is [destructured](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) from the metadata object and returned.
```
// graph/resolvers/dont_agree_action.js
const DontAgreeAction = {
// Stored in the metadata, extract and return.
reason({metadata: {reason}}) {
return reason;
}
};
module.exports = DontAgreeAction;
```
This is an extremely powerful pattern as it allows us absolute freedom in designing our graph and complete isolation of the added fields in the database.
## Some things to keep in mind
### Namespace your metadata fields
Since metadata can be added by the core and multiple plugins, collisions may occur. As you create your plugins, please be careful to pick unique names for metadata fields. We recommend namespacing all your fields in a subdocument named after your plugin.
```
[model].metadata.[your_plugin_name].[the_field]
```
### Querying by metadata fields
We currently do not have a clean way to index metadata fields. As a result queries that match against metadata fields will not scale. If you have a need to match, sort, etc... by a metadata field, [please let us know](https://github.com/coralproject/talk/blob/master/CONTRIBUTING.md#writing-code).
docs/architecture.md
+1 -1
View File
@@ -17,7 +17,7 @@ Talk consists of four distinct layers of code:
### Plugins
Talk plugins deliver the features and functionality that can be changed or removed. Much of the default functionality is delivered by plugins allowing developers to change behavior along product lines that we've found to be important.
Talk plugins deliver the features and functionality that can be changed or removed. Much of the default functionality is delivered by core plugins allowing developers to have control over any non-essential functionality.
### Plugin API
docs/configuration.md
+1 -1
View File
@@ -17,7 +17,7 @@ sign and verify tokens via a `HS256` algorithm.
- `TALK_JWT_EXPIRY` (_optional_) - the expiry duration (`exp`) for the tokens issued for logged in sessions (Default `1 day`)
- `TALK_JWT_ISSUER` (_optional_) - the issuer (`iss`) claim for login JWT tokens (Default `process.env.TALK_ROOT_URL`)
- `TALK_JWT_AUDIENCE` (_optional_) - the audience (`aud`) claim for login JWT tokens (Default `talk`)
- `TALK_SMTP_EMAIL` (*required for email*) - the address to send emails from using the
- `TALK_SMTP_FROM_ADDRESS` (*required for email*) - the address to send emails from using the
SMTP provider.
- `TALK_SMTP_USERNAME` (*required for email*) - username of the SMTP provider you are using.
- `TALK_SMTP_PASSWORD` (*required for email*) - password for the SMTP provider you are using.
docs/install-microservices.md
+98
View File
@@ -0,0 +1,98 @@
---
title: Microservice Deployments
keywords: install
sidebar: talk_sidebar
permalink: install-microservices.html
summary:
---
In Talk, we seek to deliver the simplicity of a monolith with the advantages of
a microservice based infrastructure for those who want them.
To accomplish this, Talk has the ability to run with subsets of its overall
functionality and contains architecture that allows them to operate logically as
microservices when running in a single environment.
## Talk Server Functionalities
The Talk server serves several logically/architecturally distinct functions:
* A web server that
* serves "public" assets (aka, the comment embed)
* the GraphQL endpoints
* A web socket server that handles subscriptions.
* A jobs processor that handles queued operations.
In the documentation so far, we've discussed how to deploy all of these
functionalities bundled into a single monolith application. This is convenient
as there is minimal configuration and horizontal scaling is as easy as upping
the number of servers behind a single load balancer.
## Separating Talk into Microservices
Talk can be run in two or more separate clusters of servers by
enabling/disabling different bits of functionality: webserver, socket server and
jobs server.
Each microservice would deploy with the same codebase and configuration.
Note that the `cli serve` command, which is responsible for starting the server,
contains flags that control whether `jobs` and `websockets` are enabled.
```
talk :) ]$ bin/cli serve --help
Options:
...
-j, --jobs enable job processing on this thread
-w, --websockets enable the websocket (subscriptions) handler on this thread
...
```
Each Talk Microservice cluster can be deployed in an identical manner described
in the other docs in this section with the omission of the `-j` and/or `-w`
flags.
With routing logic in front of the webserver cluster, separation between public
and protected assets can be achieved.
## When should I consider separating?
Consider a microservice deployment if:
* you are running plugins that require intensive job processing
* you do not want to simplicity of single cluster horizontal scaling and want to
tune the economy and performance of your install.
* You run into scaling issues serving websockets
At scale, combining separate concerns in a single process makes it very
difficult to understand what is taking up resources. With microservices, each
server could be configured to sit behind it's own load balance and scale
independently. Each variety of process can always have just enough resources.
An install that heavily utilizes the jobs queue could see delays in http service
because of heavy jobs processes and/or delays in the execution of jobs processes
due to increased server load as a result of Node's single thread infrustructure.
## Deployment Methodologies
Note that there is no flag to separate the http routes on the webserver.
Separating the http server functionalities can be accomplished by the routing of
various routes to the correct http server via an external upstream proxy like
Google Cloud's Load Balancer, AWS's ELB, or a websever like NGINX/Apache. This
can ensure that sensitive areas, such as the `/admin/` route are not available
outside the firewall.
Talk's job processors are synchronized by Redis, so as long as all Talk
instances access the same Redis cluster no additional configuration is needed
when launching an independent jobs cluster.
If there are any features of Talk that you believe should be disable-able via
server flags, please let us know and consider contributing it to the project!
## Deployment Flows/Scripts
We do not currently support any microservice based deployment flows. If you
develop one yourself that is completely based on open source tooling, please
consider contributing it to the project!
docs/install-troubleshooting.md
+22
View File
@@ -0,0 +1,22 @@
---
title: Installation Troubleshooting
keywords: install
sidebar: talk_sidebar
permalink: install-troubleshooting.html
summary:
---
This page tracks common issues that arise when installing Talk and provides resolutions.
## The Talk server seems to be working but the stream isn't showing up on my page.
Talk employs a _domain whitelist_ that controls which sites can contain comment threads. This prevents malicious folks from using your server to embed streams on unwanted pages.
If your comment thread isn't showing:
1. Log into your admin panel
1. Go to the Configure tab
1. Select the Tech Settings submenu
1. Ensure that your Domain is the Permitted Domains list
Note: if your site has multiple subdomains, listing the domain itself (ie: `mydomain.com`) will enable Talk on all subdomains. If you would like to restrict Talk to certain subdomains, you must list all of them here (ie: `thisone.mydomain.com thatone.mydomain.com`).
graph/mutators/comment.js
+8 -1
View File
@@ -15,6 +15,10 @@ const {
EDIT_COMMENT
} = require('../../perms/constants');
const {
DISABLE_AUTOFLAG_SUSPECT_WORDS
} = require('../../config');
const debug = require('debug')('talk:graph:mutators:tags');
const plugins = require('../../services/plugins');
@@ -297,7 +301,10 @@ const createPublicComment = async (context, commentInput) => {
// Otherwise just return the new comment.
// TODO: Check why the wordlist is undefined
if (wordlist != null && wordlist.suspect != null) {
// If the wordlist has matched the suspect word filter and we haven't disabled
// auto-flagging suspect words, then we should flag the comment!
if (wordlist != null && wordlist.suspect != null && !DISABLE_AUTOFLAG_SUSPECT_WORDS) {
// TODO: this is kind of fragile, we should refactor this to resolve
// all these const's that we're using like 'COMMENTS', 'FLAG' to be
package.json
+4 -2
View File
@@ -1,6 +1,6 @@
{
"name": "talk",
"version": "2.4.0",
"version": "2.5.0",
"description": "A better commenting experience from Mozilla, The New York Times, and the Washington Post. https://coralproject.net",
"main": "app.js",
"scripts": {
@@ -77,6 +77,7 @@
"env-rewrite": "^1.0.2",
"express": "^4.15.2",
"express-session": "^1.15.1",
"file-loader": "^0.11.2",
"form-data": "^2.1.2",
"fs-extra": "^3.0.1",
"gql-merge": "^0.0.4",
@@ -209,9 +210,10 @@
"style-loader": "^0.16.0",
"supertest": "^2.0.1",
"timeago.js": "^2.0.3",
"url-loader": "^0.5.9",
"webpack": "^2.3.1"
},
"engines": {
"node": "^7.8.0"
"node": "^7.10.1"
}
}
plugin-api/beta/client/hocs/index.js
+3
View File
@@ -1 +1,4 @@
export {default as withReaction} from './withReaction';
export {default as withFragments} from 'coral-framework/hocs/withFragments';
export {default as excludeIf} from 'coral-framework/hocs/excludeIf';
export {default as connect} from 'coral-framework/hocs/connect';
plugin-api/beta/client/hocs/withReaction.js
+1 -1
View File
@@ -1,7 +1,7 @@
import React from 'react';
import get from 'lodash/get';
import uuid from 'uuid/v4';
import {connect} from 'react-redux';
import {connect} from 'plugin-api/beta/client/hocs';
import {bindActionCreators} from 'redux';
import {getDisplayName} from 'coral-framework/helpers/hoc';
import {compose, gql} from 'react-apollo';
plugin-api/beta/client/selectors/index.js
+1
View File
@@ -0,0 +1 @@
export const pluginConfigSelector = (state) => state.config.pluginConfig;
plugin-api/beta/client/services/index.js
+7 -1
View File
@@ -1,3 +1,9 @@
export {t} from 'coral-framework/services/i18n';
export {can} from 'coral-framework/services/perms';
export {isSlotEmpty} from 'coral-framework/helpers/plugins';
import {isSlotEmpty as ise} from 'coral-framework/helpers/plugins';
// @TODO: Deprecated.
export function isSlotEmpty(...args) {
console.warn('A plugin is using `isSlotEmpty` which has been deprecated, please port to the new API using the `IfSlotIsEmpty` and `IfSlotIsNotEmpty` components.');
return ise(...args);
}
plugin-api/beta/client/utils/index.js
+1
View File
@@ -0,0 +1 @@
export {getSlotFragmentSpreads} from 'coral-framework/utils';
plugins.default.json
-2
View File
@@ -1,14 +1,12 @@
{
"server": [
"coral-plugin-auth",
"coral-plugin-like",
"coral-plugin-respect",
"coral-plugin-offtopic",
"coral-plugin-facebook-auth"
],
"client": [
"coral-plugin-respect",
"coral-plugin-like",
"coral-plugin-auth",
"coral-plugin-offtopic",
"coral-plugin-viewing-options",
plugins/coral-plugin-like/client/styles.css
+3 -1
View File
@@ -25,7 +25,9 @@
}
.icon {
padding: 0 2px;
font-size: 12px;
padding: 0 2px 0 5px;
vertical-align: middle;
}
@media (max-width: 425px) {
plugins/coral-plugin-love/client/styles.css
+3 -1
View File
@@ -25,7 +25,9 @@
}
.icon {
padding: 0 2px;
font-size: 12px;
padding: 0 2px 0 5px;
vertical-align: middle;
}
@media (max-width: 425px) {
plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js
+1 -1
View File
@@ -1,7 +1,7 @@
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {addTag, removeTag} from 'plugin-api/alpha/client/actions';
import {commentBoxTagsSelector} from 'plugin-api/alpha/client/selectors';
import {connect} from 'plugin-api/beta/client/hocs';
import OffTopicCheckbox from '../components/OffTopicCheckbox';
const mapStateToProps = (state) => ({
plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js
+1 -1
View File
@@ -1,4 +1,4 @@
import {connect} from 'react-redux';
import {connect} from 'plugin-api/beta/client/hocs';
import {bindActionCreators} from 'redux';
import {toggleCheckbox} from '../actions';
import {commentClassNamesSelector} from 'plugin-api/alpha/client/selectors';
plugins/coral-plugin-respect/client/styles.css
+2 -1
View File
@@ -26,7 +26,8 @@
}
.icon {
padding: 0 2px;
font-size: 12px;
padding: 0 3px;
}
@media (max-width: 425px) {
plugins/coral-plugin-viewing-options/client/components/ViewingOptions.css
+5
View File
@@ -24,3 +24,8 @@
list-style: none;
white-space: nowrap;
}
.icon {
font-size: 14px;
vertical-align: middle;
}
plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js
+1 -1
View File
@@ -24,7 +24,7 @@ const ViewingOptions = (props) => {
<div className={cn([styles.root, 'coral-plugin-viewing-options'])}>
<div>
<button className={styles.button} onClick={toggleOpen}>Viewing Options
{props.open ? <Icon name="arrow_drop_up"/> : <Icon name="arrow_drop_down"/>}
{props.open ? <Icon name="arrow_drop_up" className={styles.icon}/> : <Icon name="arrow_drop_down" className={styles.icon}/>}
</button>
</div>
{
plugins/coral-plugin-viewing-options/client/containers/ViewingOptions.js
+1 -1
View File
@@ -1,4 +1,4 @@
import {connect} from 'react-redux';
import {connect} from 'plugin-api/beta/client/hocs';
import {bindActionCreators} from 'redux';
import ViewingOptions from '../components/ViewingOptions';
import {openViewingOptions, closeViewingOptions} from '../actions';
plugins/talk-plugin-permalink/client/components/PermalinkButton.js
+4 -3
View File
@@ -62,7 +62,7 @@ export default class PermalinkButton extends React.Component {
render () {
const {copySuccessful, copyFailure, popoverOpen} = this.state;
const {asset} = this.props;
const {asset, comment} = this.props;
return (
<ClickOutside onClickOutside={this.handleClickOutside}>
<div className={cn(`${name}-container`, styles.container)}>
@@ -72,7 +72,7 @@ export default class PermalinkButton extends React.Component {
onClick={this.toggle}
className={cn(`${name}-button`, styles.button)}>
{t('permalink')}
<Icon name="link" />
<Icon name="link" className={styles.icon}/>
</button>
<div
@@ -83,7 +83,8 @@ export default class PermalinkButton extends React.Component {
className={cn(styles.input, `${name}-copy-field`)}
type='text'
ref={(input) => this.permalinkInput = input}
defaultValue={`${asset.url}?commentId=${this.props.commentId}`}
defaultValue={`${asset.url}?commentId=${comment.id}`}
readOnly
/>
<Button
plugins/talk-plugin-permalink/client/components/styles.css
+6
View File
@@ -82,3 +82,9 @@
.active {
display: block;
}
.icon {
padding: 0 2px;
font-size: 12px;
vertical-align: middle;
}
webpack.config.js
-4
View File
@@ -70,10 +70,6 @@ const config = {
],
test: /.css$/,
},
{
loader: 'url-loader?limit=100000',
test: /\.png$/
},
{
loader: 'file-loader',
test: /\.(jpg|png|gif|svg)$/
yarn.lock
+14 -1
View File
@@ -3119,6 +3119,12 @@ file-entry-cache@^2.0.0:
flat-cache "^1.2.1"
object-assign "^4.0.1"
file-loader@^0.11.2:
version "0.11.2"
resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.11.2.tgz#4ff1df28af38719a6098093b88c82c71d1794a34"
dependencies:
loader-utils "^1.0.2"
file-uri-to-path@0:
version "0.0.2"
resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-0.0.2.tgz#37cdd1b5b905404b3f05e1b23645be694ff70f82"
@@ -5245,7 +5251,7 @@ mime-types@~2.0.3:
dependencies:
mime-db "~1.12.0"
mime@1.3.4, mime@^1.3.4:
mime@1.3.4, mime@1.3.x, mime@^1.3.4:
version "1.3.4"
resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
@@ -8305,6 +8311,13 @@ urijs@1.16.1:
version "1.16.1"
resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.16.1.tgz#859ad31890f5f9528727be89f1932c94fb4731e2"
url-loader@^0.5.9:
version "0.5.9"
resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.9.tgz#cc8fea82c7b906e7777019250869e569e995c295"
dependencies:
loader-utils "^1.0.2"
mime "1.3.x"
url-search-params@^0.9.0:
version "0.9.0"
resolved "https://registry.yarnpkg.com/url-search-params/-/url-search-params-0.9.0.tgz#e71d7764a6503533cbfe9771b2963cb61ea1c225"