diff --git a/client/coral-admin/src/components/CommentLabels.css b/client/coral-admin/src/components/CommentLabels.css
index 718cd7dfd..b7a5699fe 100644
--- a/client/coral-admin/src/components/CommentLabels.css
+++ b/client/coral-admin/src/components/CommentLabels.css
@@ -1,4 +1,18 @@
.root {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.coreLabels {
+ > *:not(:last-child) {
+ margin-right: 3px;
+ }
+}
+
+.slot {
+ &:not(:empty) {
+ padding-left: 3px;
+ }
> *:not(:last-child) {
margin-right: 3px;
}
diff --git a/client/coral-admin/src/components/CommentLabels.js b/client/coral-admin/src/components/CommentLabels.js
index 333f905ef..7af7e9a7e 100644
--- a/client/coral-admin/src/components/CommentLabels.js
+++ b/client/coral-admin/src/components/CommentLabels.js
@@ -1,7 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
-import Label from './Label';
-import FlagLabel from './FlagLabel';
+import Label from 'coral-ui/components/Label';
+import Slot from 'coral-framework/components/Slot';
+import FlagLabel from 'coral-ui/components/FlagLabel';
import cn from 'classnames';
import styles from './CommentLabels.css';
@@ -17,14 +18,17 @@ function hasHistoryFlag(actions) {
return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'TRUST');
}
-const CommentLabels = ({comment: {className, status, actions, hasParent}}) => {
+const CommentLabels = ({comment, comment: {className, status, actions, hasParent}}) => {
return (
- {hasParent &&
}
- {status === 'PREMOD' &&
}
- {isUserFlagged(actions) &&
User}
- {hasSuspectedWords(actions) &&
Suspect}
- {hasHistoryFlag(actions) &&
History}
+
+ {hasParent && }
+ {status === 'PREMOD' && }
+ {isUserFlagged(actions) && User}
+ {hasSuspectedWords(actions) && Suspect}
+ {hasHistoryFlag(actions) && History}
+
+
);
};
diff --git a/client/coral-admin/src/containers/CommentLabels.js b/client/coral-admin/src/containers/CommentLabels.js
index ab9639bcd..af6a0d963 100644
--- a/client/coral-admin/src/containers/CommentLabels.js
+++ b/client/coral-admin/src/containers/CommentLabels.js
@@ -1,6 +1,11 @@
import {gql} from 'react-apollo';
import CommentLabels from '../components/CommentLabels';
import withFragments from 'coral-framework/hocs/withFragments';
+import {getSlotFragmentSpreads} from 'coral-framework/utils';
+
+const slots = [
+ 'adminCommentLabels',
+];
export default withFragments({
comment: gql`
@@ -16,6 +21,7 @@ export default withFragments({
id
}
}
+ ${getSlotFragmentSpreads(slots, 'comment')}
}
`
})(CommentLabels);
diff --git a/client/coral-admin/src/components/FlagLabel.css b/client/coral-ui/components/FlagLabel.css
similarity index 100%
rename from client/coral-admin/src/components/FlagLabel.css
rename to client/coral-ui/components/FlagLabel.css
diff --git a/client/coral-admin/src/components/FlagLabel.js b/client/coral-ui/components/FlagLabel.js
similarity index 100%
rename from client/coral-admin/src/components/FlagLabel.js
rename to client/coral-ui/components/FlagLabel.js
diff --git a/client/coral-admin/src/components/Label.css b/client/coral-ui/components/Label.css
similarity index 100%
rename from client/coral-admin/src/components/Label.css
rename to client/coral-ui/components/Label.css
diff --git a/client/coral-admin/src/components/Label.js b/client/coral-ui/components/Label.js
similarity index 71%
rename from client/coral-admin/src/components/Label.js
rename to client/coral-ui/components/Label.js
index 9d1b736de..a73b6183d 100644
--- a/client/coral-admin/src/components/Label.js
+++ b/client/coral-ui/components/Label.js
@@ -4,9 +4,9 @@ import styles from './Label.css';
import {Icon} from 'coral-ui';
import cn from 'classnames';
-const Label = ({iconName, children, className, isFlag}) => {
+const Label = ({iconName, children, className}) => {
return (
-
+
{children}
);
@@ -14,7 +14,6 @@ const Label = ({iconName, children, className, isFlag}) => {
Label.propTypes = {
className: PropTypes.string,
- isFlag: PropTypes.bool,
children: PropTypes.node.isRequired,
iconName: PropTypes.string,
};
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index 8a538d120..93fe5af64 100644
--- a/client/coral-ui/index.js
+++ b/client/coral-ui/index.js
@@ -26,3 +26,5 @@ export {default as Option} from './components/Option';
export {default as SnackBar} from './components/SnackBar';
export {default as TextArea} from './components/TextArea';
export {default as Drawer} from './components/Drawer';
+export {default as Label} from './components/Label';
+export {default as FlagLabel} from './components/FlagLabel';
diff --git a/plugins/talk-plugin-toxic-comments/client/components/ToxicLabel.js b/plugins/talk-plugin-toxic-comments/client/components/ToxicLabel.js
new file mode 100644
index 000000000..3c17703dd
--- /dev/null
+++ b/plugins/talk-plugin-toxic-comments/client/components/ToxicLabel.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import {FlagLabel} from 'plugin-api/beta/client/components/ui';
+
+const ToxicLabel = () => (
+ Toxic
+);
+
+export default ToxicLabel;
diff --git a/plugins/talk-plugin-toxic-comments/client/containers/ToxicLabel.js b/plugins/talk-plugin-toxic-comments/client/containers/ToxicLabel.js
new file mode 100644
index 000000000..0d2e9e14b
--- /dev/null
+++ b/plugins/talk-plugin-toxic-comments/client/containers/ToxicLabel.js
@@ -0,0 +1,24 @@
+import {compose, gql} from 'react-apollo';
+import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
+import ToxicLabel from '../components/ToxicLabel';
+
+function isToxic(actions) {
+ return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'TOXIC_COMMENT');
+}
+
+const enhance = compose(
+ withFragments({
+ comment: gql`
+ fragment TalkToxicComments_Comment on Comment {
+ actions {
+ __typename
+ ... on FlagAction {
+ reason
+ }
+ }
+ }`,
+ }),
+ excludeIf(({comment: {actions}}) => !isToxic(actions)),
+);
+
+export default enhance(ToxicLabel);
diff --git a/plugins/talk-plugin-toxic-comments/client/index.js b/plugins/talk-plugin-toxic-comments/client/index.js
index bb0417606..8a16b8dea 100644
--- a/plugins/talk-plugin-toxic-comments/client/index.js
+++ b/plugins/talk-plugin-toxic-comments/client/index.js
@@ -1,9 +1,11 @@
import translations from './translations.yml';
import CheckToxicityHook from './containers/CheckToxicityHook';
+import ToxicLabel from './containers/ToxicLabel';
export default {
translations,
slots: {
commentInputDetailArea: [CheckToxicityHook],
+ adminCommentLabels: [ToxicLabel],
},
};