Add flag to optionally enable Q&A (#2878)

CORL-956

src/core/client/stream/tabs/Configure/Configure.tsx

@@ -13,7 +13,8 @@ import { QAConfigContainer } from "./Q&A";
 export interface Props {
   viewer: PropTypesOf<typeof UserBoxContainer>["viewer"];
   settings: PropTypesOf<typeof UserBoxContainer>["settings"] &
-    PropTypesOf<typeof ModerateStreamContainer>["settings"];
+    PropTypesOf<typeof ModerateStreamContainer>["settings"] &
+    PropTypesOf<typeof QAConfigContainer>["settings"];
   story: PropTypesOf<typeof ConfigureStreamContainer>["story"] &
     PropTypesOf<typeof OpenOrCloseStreamContainer>["story"] &
     PropTypesOf<typeof ModerateStreamContainer>["story"] &
@@ -31,8 +32,7 @@ const Configure: FunctionComponent<Props> = props => {
         />
         <HorizontalRule />
         <ConfigureStreamContainer story={props.story} />
-        <HorizontalRule />
-        <QAConfigContainer story={props.story} />
+        <QAConfigContainer story={props.story} settings={props.settings} />
         <HorizontalRule />
         <OpenOrCloseStreamContainer story={props.story} />
       </HorizontalGutter>

src/core/client/stream/tabs/Configure/ConfigureContainer.tsx

@@ -44,6 +44,7 @@ const enhanced = withFragmentContainer<ConfigureContainerProps>({
     fragment ConfigureContainer_settings on Settings {
       ...UserBoxContainer_settings
       ...ModerateStreamContainer_settings
+      ...QAConfigContainer_settings
     }
   `,
 })(StreamContainer);

src/core/client/stream/tabs/Configure/Q&A/QAConfigContainer.tsx

@@ -5,10 +5,12 @@ import {
   useMutation,
   withFragmentContainer,
 } from "coral-framework/lib/relay";
-import { GQLSTORY_MODE } from "coral-framework/schema";
+import { GQLFEATURE_FLAG, GQLSTORY_MODE } from "coral-framework/schema";
 
+import { QAConfigContainer_settings } from "coral-stream/__generated__/QAConfigContainer_settings.graphql";
 import { QAConfigContainer_story } from "coral-stream/__generated__/QAConfigContainer_story.graphql";
 
+import HorizontalRule from "../HorizontalRule";
 import DisableQA from "./DisableQA";
 import EnableQA from "./EnableQA";
 import ExpertSelectionQuery from "./ExpertSelectionQuery";
@@ -16,9 +18,10 @@ import UpdateStoryModeMutation from "./UpdateStoryModeMutation";
 
 interface Props {
   story: QAConfigContainer_story;
+  settings: QAConfigContainer_settings;
 }
 
-const QAConfigContainer: FunctionComponent<Props> = ({ story }) => {
+const QAConfigContainer: FunctionComponent<Props> = ({ story, settings }) => {
   const [waiting, setWaiting] = useState(false);
   const updateStoryMode = useMutation(UpdateStoryModeMutation);
 
@@ -36,13 +39,22 @@ const QAConfigContainer: FunctionComponent<Props> = ({ story }) => {
 
   const isQA = story.settings.mode === GQLSTORY_MODE.QA;
 
+  // Check if we're allowed to show Q&A based on feature flags
+  if (!settings.featureFlags.includes(GQLFEATURE_FLAG.ENABLE_QA)) {
+    return null;
+  }
+
   return isQA ? (
     <>
+      <HorizontalRule />
       <DisableQA onClick={handleOnClick} disableButton={waiting} />
       <ExpertSelectionQuery storyID={story.id} />
     </>
   ) : (
-    <EnableQA onClick={handleOnClick} disableButton={waiting} />
+    <>
+      <HorizontalRule />
+      <EnableQA onClick={handleOnClick} disableButton={waiting} />
+    </>
   );
 };
 
@@ -55,5 +67,10 @@ const enhanced = withFragmentContainer<Props>({
       }
     }
   `,
+  settings: graphql`
+    fragment QAConfigContainer_settings on Settings {
+      featureFlags
+    }
+  `,
 })(QAConfigContainer);
 export default enhanced;

src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap

@@ -287,43 +287,6 @@ announcements relating to the comments on this story.
       <hr
         className="HorizontalRule-root"
       />
-      <div
-        className="coral coral-openCommentStream"
-      >
-        <h1
-          className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary EnableQA-heading"
-        >
-          Switch to Q&A Format
-        </h1>
-        <div
-          className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignFlexStart gutter"
-        >
-          <p
-            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            The Q&A format allows community members to submit questions for chosen
-experts to answer.
-          </p>
-          <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantOutlined EnableQA-button coral coral-openCommentStream-openButton"
-            data-color="primary"
-            data-variant="outlined"
-            disabled={false}
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Switch to Q&A
-          </button>
-        </div>
-      </div>
-      <hr
-        className="HorizontalRule-root"
-      />
       <div
         className="coral coral-closeCommentStream"
       >

src/core/client/stream/test/fixtures.ts

@@ -109,6 +109,7 @@ export const settings = createFixture<GQLSettings>({
     deleteAccount: true,
   },
   multisite: false,
+  featureFlags: [],
 });
 
 export const site = createFixture<GQLSite>({

src/core/server/graph/schema/schema.graphql

@@ -341,6 +341,11 @@ enum FEATURE_FLAG {
   toxic comments.
   """
   DISABLE_WARN_USER_OF_TOXIC_COMMENT
+
+  """
+  ENABLE_QA when enabled will turn off Q&A features client side.
+  """
+  ENABLE_QA
 }
 
 # The moderation mode of the site.
@@ -1481,7 +1486,7 @@ type Settings {
   """
   featureFlags provides the enabled feature flags.
   """
-  featureFlags: [FEATURE_FLAG!]! @auth(roles: [ADMIN])
+  featureFlags: [FEATURE_FLAG!]! @auth(roles: [ADMIN, MODERATOR])
 
   """
   createdAt is the time that the Settings was created at.