diff --git a/src/core/client/admin/components/ModerateCard/FeatureButton.css b/src/core/client/admin/components/ModerateCard/FeatureButton.css index 0166dd6f0..f496436d9 100644 --- a/src/core/client/admin/components/ModerateCard/FeatureButton.css +++ b/src/core/client/admin/components/ModerateCard/FeatureButton.css @@ -22,10 +22,24 @@ border-color: var(--v2-palette-primary-main); color: var(--v2-palette-primary-main); } + + &:disabled { + cursor: default; + + background-color: transparent; + border-color: var(--v2-colors-grey-300); + color: var(--v2-colors-grey-300); + } } .invert { background-color: var(--v2-palette-primary-main); border-color: var(--v2-palette-primary-main); color: var(--v2-palette-text-light); + + &:disabled { + color: var(--v2-colors-pure-white); + border-color: var(--v2-colors-grey-300); + background-color: var(--v2-colors-grey-300); + } } diff --git a/src/core/client/admin/components/ModerateCard/ModerateCard.tsx b/src/core/client/admin/components/ModerateCard/ModerateCard.tsx index 252e7e567..411690904 100644 --- a/src/core/client/admin/components/ModerateCard/ModerateCard.tsx +++ b/src/core/client/admin/components/ModerateCard/ModerateCard.tsx @@ -74,6 +74,7 @@ interface Props { selectPrev?: () => void; selectNext?: () => void; onBan: () => void; + isQA?: boolean; } const ModerateCard: FunctionComponent = ({ @@ -108,6 +109,7 @@ const ModerateCard: FunctionComponent = ({ selectNext, selectPrev, onBan, + isQA, }) => { const div = useRef(null); useEffect(() => { @@ -206,7 +208,7 @@ const ModerateCard: FunctionComponent = ({ {inReplyTo && inReplyTo.username && ( diff --git a/src/core/client/admin/components/ModerateCard/ModerateCardContainer.tsx b/src/core/client/admin/components/ModerateCard/ModerateCardContainer.tsx index 81637c994..f1278c65b 100644 --- a/src/core/client/admin/components/ModerateCard/ModerateCardContainer.tsx +++ b/src/core/client/admin/components/ModerateCard/ModerateCardContainer.tsx @@ -15,7 +15,7 @@ import { withFragmentContainer, withMutation, } from "coral-framework/lib/relay"; -import { GQLTAG, GQLUSER_STATUS } from "coral-framework/schema"; +import { GQLSTORY_MODE, GQLTAG, GQLUSER_STATUS } from "coral-framework/schema"; import { COMMENT_STATUS, @@ -252,6 +252,7 @@ const ModerateCardContainer: FunctionComponent = ({ hideUsername={hideUsername} deleted={comment.deleted ? comment.deleted : false} edited={comment.editing.edited} + isQA={comment.story.settings.mode === GQLSTORY_MODE.QA} /> ({ metadata { title } + settings { + mode + } } site { id @@ -324,6 +328,7 @@ const enhanced = withFragmentContainer({ suspect } multisite + featureFlags ...MarkersContainer_settings } `, diff --git a/src/core/client/admin/test/fixtures.ts b/src/core/client/admin/test/fixtures.ts index 159374816..a2ca94e2c 100644 --- a/src/core/client/admin/test/fixtures.ts +++ b/src/core/client/admin/test/fixtures.ts @@ -17,6 +17,7 @@ import { GQLSitesConnection, GQLStoriesConnection, GQLStory, + GQLSTORY_MODE, GQLSTORY_STATUS, GQLTAG, GQLUser, @@ -176,6 +177,7 @@ export const settings = createFixture({ channels: [], }, multisite: false, + featureFlags: [], }); export const settingsWithEmptyAuth = createFixture( @@ -506,6 +508,9 @@ export const stories = createFixtures([ }, }, site: sites[0], + settings: { + mode: GQLSTORY_MODE.COMMENTS, + }, }, { id: "story-2", @@ -533,6 +538,9 @@ export const stories = createFixtures([ }, }, site: sites[1], + settings: { + mode: GQLSTORY_MODE.COMMENTS, + }, }, { id: "story-3", @@ -560,6 +568,9 @@ export const stories = createFixtures([ publishedAt: "2018-11-29T16:01:51.897Z", }, site: sites[1], + settings: { + mode: GQLSTORY_MODE.COMMENTS, + }, }, ]); diff --git a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionsContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionsContainer.tsx index 5f54ba112..cd88c3ad0 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionsContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationActionsContainer.tsx @@ -5,6 +5,7 @@ import { graphql } from "react-relay"; import { useViewerEvent } from "coral-framework/lib/events"; import { useMutation, withFragmentContainer } from "coral-framework/lib/relay"; +import { GQLSTORY_MODE } from "coral-framework/schema"; import CLASSES from "coral-stream/classes"; import { GotoModerationEvent } from "coral-stream/events"; import { DropdownButton, DropdownDivider, Icon } from "coral-ui/components"; @@ -87,6 +88,7 @@ const ModerationActionsContainer: FunctionComponent = ({ !comment.author || !comment.author.id || viewer === null ? false : comment.author.id !== viewer.id; + const isQA = story.settings.mode === GQLSTORY_MODE.QA; return ( <> @@ -103,6 +105,7 @@ const ModerationActionsContainer: FunctionComponent = ({ CLASSES.moderationDropdown.unfeatureButton )} onClick={onUnfeature} + disabled={isQA} > Un-Feature @@ -113,6 +116,7 @@ const ModerationActionsContainer: FunctionComponent = ({ className={CLASSES.moderationDropdown.featureButton} icon={star_border} onClick={onFeature} + disabled={isQA} > Feature @@ -229,6 +233,9 @@ const enhanced = withFragmentContainer({ story: graphql` fragment ModerationActionsContainer_story on Story { id + settings { + mode + } } `, viewer: graphql`