[CORL-797] Moderate this stream (#2729)

* feat: added moderate this stream button

* fix: removed origin

* fix: revised based on feedback from design

src/core/client/framework/helpers/urls.tsx

@@ -1,5 +1,7 @@
 export default {
-  admin: "/admin",
+  admin: {
+    moderateReported: "/admin/moderate/reported",
+  },
   embed: {
     stream: "/embed/stream",
     auth: "/embed/auth",

src/core/client/install/App/steps/FinalStep.tsx

@@ -28,7 +28,12 @@ class FinalStep extends Component {
             </Button>
           </Localized>
           <Localized id="install-finalStep-goToAdmin">
-            <Button anchor color="primary" variant="filled" href={urls.admin}>
+            <Button
+              anchor
+              color="primary"
+              variant="filled"
+              href={urls.admin.moderateReported}
+            >
               Go to Admin
             </Button>
           </Localized>

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

@@ -6,13 +6,16 @@ import { HorizontalGutter } from "coral-ui/components";
 
 import ConfigureStreamContainer from "./ConfigureStream";
 import HorizontalRule from "./HorizontalRule";
+import ModerateStreamContainer from "./ModerateStreamContainer";
 import OpenOrCloseStreamContainer from "./OpenOrCloseStream";
 
 export interface Props {
   viewer: PropTypesOf<typeof UserBoxContainer>["viewer"];
-  settings: PropTypesOf<typeof UserBoxContainer>["settings"];
+  settings: PropTypesOf<typeof UserBoxContainer>["settings"] &
+    PropTypesOf<typeof ModerateStreamContainer>["settings"];
   story: PropTypesOf<typeof ConfigureStreamContainer>["story"] &
-    PropTypesOf<typeof OpenOrCloseStreamContainer>["story"];
+    PropTypesOf<typeof OpenOrCloseStreamContainer>["story"] &
+    PropTypesOf<typeof ModerateStreamContainer>["story"];
 }
 
 const Configure: FunctionComponent<Props> = props => {
@@ -20,10 +23,15 @@ const Configure: FunctionComponent<Props> = props => {
     <div>
       <HorizontalGutter size="double">
         <UserBoxContainer viewer={props.viewer} settings={props.settings} />
+        <ModerateStreamContainer
+          settings={props.settings}
+          story={props.story}
+        />
+        <HorizontalRule />
         <ConfigureStreamContainer story={props.story} />
+        <HorizontalRule />
+        <OpenOrCloseStreamContainer story={props.story} />
       </HorizontalGutter>
-      <HorizontalRule />
-      <OpenOrCloseStreamContainer story={props.story} />
     </div>
   );
 };

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

@@ -31,6 +31,7 @@ const enhanced = withFragmentContainer<ConfigureContainerProps>({
     fragment ConfigureContainer_story on Story {
       ...ConfigureStreamContainer_story
       ...OpenOrCloseStreamContainer_story
+      ...ModerateStreamContainer_story
     }
   `,
   viewer: graphql`
@@ -41,6 +42,7 @@ const enhanced = withFragmentContainer<ConfigureContainerProps>({
   settings: graphql`
     fragment ConfigureContainer_settings on Settings {
       ...UserBoxContainer_settings
+      ...ModerateStreamContainer_settings
     }
   `,
 })(StreamContainer);

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

@@ -0,0 +1,80 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent, useMemo } from "react";
+import { graphql } from "react-relay";
+
+import { urls } from "coral-framework/helpers";
+import { ExternalLink } from "coral-framework/lib/i18n/components";
+import {
+  withFragmentContainer,
+  withLocalStateContainer,
+} from "coral-framework/lib/relay";
+import { Typography } from "coral-ui/components";
+
+import { ModerateStreamContainer_settings } from "coral-stream/__generated__/ModerateStreamContainer_settings.graphql";
+import { ModerateStreamContainer_story } from "coral-stream/__generated__/ModerateStreamContainer_story.graphql";
+import { ModerateStreamContainerLocal } from "coral-stream/__generated__/ModerateStreamContainerLocal.graphql";
+
+interface Props {
+  local: ModerateStreamContainerLocal;
+  settings: ModerateStreamContainer_settings;
+  story: ModerateStreamContainer_story;
+}
+
+const ModerateStreamContainer: FunctionComponent<Props> = ({
+  local: { accessToken },
+  settings,
+  story: { id },
+}) => {
+  const href = useMemo(() => {
+    let link = urls.admin.moderateReported + "/" + id;
+    if (
+      accessToken &&
+      settings.auth.integrations.sso.enabled &&
+      settings.auth.integrations.sso.targetFilter.admin
+    ) {
+      link += `#accessToken=${accessToken}`;
+    }
+
+    return link;
+  }, [accessToken, settings, id]);
+
+  return (
+    <div>
+      <Typography variant="heading2">
+        <Localized id="configure-moderateThisStream">
+          <ExternalLink href={href}>Moderate this stream</ExternalLink>
+        </Localized>
+      </Typography>
+    </div>
+  );
+};
+
+const enhanced = withFragmentContainer<Props>({
+  settings: graphql`
+    fragment ModerateStreamContainer_settings on Settings {
+      auth {
+        integrations {
+          sso {
+            enabled
+            targetFilter {
+              admin
+            }
+          }
+        }
+      }
+    }
+  `,
+  story: graphql`
+    fragment ModerateStreamContainer_story on Story {
+      id
+    }
+  `,
+})(
+  withLocalStateContainer(graphql`
+    fragment ModerateStreamContainerLocal on Local {
+      accessToken
+    }
+  `)(ModerateStreamContainer)
+);
+
+export default enhanced;

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

@@ -52,6 +52,23 @@ exports[`renders configure 1`] = `
           </div>
         </div>
       </div>
+      <div>
+        <h1
+          className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary"
+        >
+          <a
+            className="ExternalLink-root"
+            href="/admin/moderate/reported/story-1"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Moderate this stream
+          </a>
+        </h1>
+      </div>
+      <hr
+        className="HorizontalRule-root"
+      />
       <form
         autoComplete="off"
         className="coral coral-configureCommentStream"
@@ -267,43 +284,43 @@ announcements relating to the comments on this story.
           </div>
         </div>
       </form>
-    </div>
-    <hr
-      className="HorizontalRule-root"
-    />
-    <div
-      className="coral coral-closeCommentStream"
-    >
-      <h1
-        className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary CloseStream-heading"
-      >
-        Close Comment Stream
-      </h1>
+      <hr
+        className="HorizontalRule-root"
+      />
       <div
-        className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignFlexStart gutter"
+        className="coral coral-closeCommentStream"
       >
-        <p
-          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+        <h1
+          className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary CloseStream-heading"
         >
-          This comment stream is currently open. By closing this comment stream,
+          Close Comment Stream
+        </h1>
+        <div
+          className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignFlexStart gutter"
+        >
+          <p
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            This comment stream is currently open. By closing this comment stream,
 no new comments may be submitted and all previously submitted comments
 will still be displayed.
-        </p>
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorError Button-variantOutlined CloseStream-button coral coral-closeCommentStream-closeButton"
-          data-color="error"
-          data-variant="outlined"
-          disabled={false}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Close Stream
-        </button>
+          </p>
+          <button
+            className="BaseButton-root Button-root Button-sizeRegular Button-colorError Button-variantOutlined CloseStream-button coral coral-closeCommentStream-closeButton"
+            data-color="error"
+            data-variant="outlined"
+            disabled={false}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Close Stream
+          </button>
+        </div>
       </div>
     </div>
   </div>

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

@@ -77,6 +77,7 @@ export const settings = createFixture<GQLSettings>({
         allowRegistration: true,
         targetFilter: {
           stream: true,
+          admin: true,
         },
       },
       local: {

src/locales/en-US/stream.ftl

@@ -428,6 +428,8 @@ configure-openStream-description =
   stream new comments may be submitted and displayed.
 configure-openStream-openStream = Open Stream
 
+configure-moderateThisStream = Moderate this stream
+
 comments-tombstone-ignore = This comment is hidden because you ignored {$username}
 comments-tombstone-deleted =
   This comment is no longer available. The commenter has deleted their account.