Disable featuring options when a story is in Q&A mode (#2883)

CORL-960

Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>

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);
+  }
 }

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<Props> = ({
@@ -108,6 +109,7 @@ const ModerateCard: FunctionComponent<Props> = ({
   selectNext,
   selectPrev,
   onBan,
+  isQA,
 }) => {
   const div = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -206,7 +208,7 @@ const ModerateCard: FunctionComponent<Props> = ({
               <FeatureButton
                 featured={featured}
                 onClick={onFeature}
-                enabled={!deleted}
+                enabled={!deleted && !isQA}
               />
             </Flex>
             {inReplyTo && inReplyTo.username && (

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<Props> = ({
           hideUsername={hideUsername}
           deleted={comment.deleted ? comment.deleted : false}
           edited={comment.editing.edited}
+          isQA={comment.story.settings.mode === GQLSTORY_MODE.QA}
         />
       </FadeInTransition>
       <BanModal
@@ -303,6 +304,9 @@ const enhanced = withFragmentContainer<Props>({
         metadata {
           title
         }
+        settings {
+          mode
+        }
       }
       site {
         id
@@ -324,6 +328,7 @@ const enhanced = withFragmentContainer<Props>({
         suspect
       }
       multisite
+      featureFlags
       ...MarkersContainer_settings
     }
   `,

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<GQLSettings>({
     channels: [],
   },
   multisite: false,
+  featureFlags: [],
 });
 
 export const settingsWithEmptyAuth = createFixture<GQLSettings>(
@@ -506,6 +508,9 @@ export const stories = createFixtures<GQLStory>([
       },
     },
     site: sites[0],
+    settings: {
+      mode: GQLSTORY_MODE.COMMENTS,
+    },
   },
   {
     id: "story-2",
@@ -533,6 +538,9 @@ export const stories = createFixtures<GQLStory>([
       },
     },
     site: sites[1],
+    settings: {
+      mode: GQLSTORY_MODE.COMMENTS,
+    },
   },
   {
     id: "story-3",
@@ -560,6 +568,9 @@ export const stories = createFixtures<GQLStory>([
       publishedAt: "2018-11-29T16:01:51.897Z",
     },
     site: sites[1],
+    settings: {
+      mode: GQLSTORY_MODE.COMMENTS,
+    },
   },
 ]);
 

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<Props> = ({
     !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<Props> = ({
               CLASSES.moderationDropdown.unfeatureButton
             )}
             onClick={onUnfeature}
+            disabled={isQA}
           >
             Un-Feature
           </DropdownButton>
@@ -113,6 +116,7 @@ const ModerationActionsContainer: FunctionComponent<Props> = ({
             className={CLASSES.moderationDropdown.featureButton}
             icon={<Icon size="md">star_border</Icon>}
             onClick={onFeature}
+            disabled={isQA}
           >
             Feature
           </DropdownButton>
@@ -229,6 +233,9 @@ const enhanced = withFragmentContainer<Props>({
   story: graphql`
     fragment ModerationActionsContainer_story on Story {
       id
+      settings {
+        mode
+      }
     }
   `,
   viewer: graphql`