[CORL-1327] allow configuration of admin and moderator comment tags (#…

…3156) * allow configuration of admin and moderator comment tags * update schema based on feedback * add missing default value * update fixtures * change label to staffLabel * add resolver for staff config * update snap * remove redundant code Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
coralproject · Sep 2, 2020 · 1c3d631 · 1c3d631
1 parent bcf6c9d
commit 1c3d631
Show file tree

Hide file tree

Showing 18 changed files with 413 additions and 82 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/core/client/admin/routes/Configure/sections/General/StaffConfig.tsx b/src/core/client/admin/routes/Configure/sections/General/StaffConfig.tsx
@@ -24,7 +24,9 @@ import styles from "./StaffConfig.css";
 graphql`
   fragment StaffConfig_formValues on Settings {
     staff {
-      label
+      staffLabel
+      adminLabel
+      moderatorLabel
     }
   }
 `;
@@ -48,12 +50,70 @@ const StaffConfig: FunctionComponent<Props> = ({ disabled }) => (
         appears on the comment stream and in the admin interface.
       </FormFieldDescription>
     </Localized>
-    <Field name="staff.label" validate={required}>
+    <Field name="staff.adminLabel" validate={required}>
       {({ input, meta }) => (
         <Flex itemGutter="double">
           <FormField>
-            <Localized id="configure-general-staff-label">
-              <Label>Badge text</Label>
+            <Localized id="configure-general-staff-admin-label">
+              <Label>Admin badge text</Label>
+            </Localized>
+            <Localized id="configure-general-staff-admin-input">
+              <TextFieldWithValidation
+                {...input}
+                className={styles.textInput}
+                id={input.name}
+                type="text"
+                fullWidth
+                placeholder="E.g. Staff"
+                disabled={disabled}
+                meta={meta}
+              />
+            </Localized>
+          </FormField>
+          <HorizontalGutter>
+            <Localized id="configure-general-staff-admin-preview">
+              <Label component="p">Preview</Label>
+            </Localized>
+            {input.value && <Tag>{input.value}</Tag>}
+          </HorizontalGutter>
+        </Flex>
+      )}
+    </Field>
+    <Field name="staff.moderatorLabel" validate={required}>
+      {({ input, meta }) => (
+        <Flex itemGutter="double">
+          <FormField>
+            <Localized id="configure-general-staff-moderator-label">
+              <Label>Moderator badge text</Label>
+            </Localized>
+            <Localized id="configure-general-staff-moderator-input">
+              <TextFieldWithValidation
+                {...input}
+                className={styles.textInput}
+                id={input.name}
+                type="text"
+                fullWidth
+                placeholder="E.g. Staff"
+                disabled={disabled}
+                meta={meta}
+              />
+            </Localized>
+          </FormField>
+          <HorizontalGutter>
+            <Localized id="configure-general-staff-moderator-preview">
+              <Label component="p">Preview</Label>
+            </Localized>
+            {input.value && <Tag>{input.value}</Tag>}
+          </HorizontalGutter>
+        </Flex>
+      )}
+    </Field>
+    <Field name="staff.staffLabel" validate={required}>
+      {({ input, meta }) => (
+        <Flex itemGutter="double">
+          <FormField>
+            <Localized id="configure-general-staff-member-label">
+              <Label>Staff member badge text</Label>
             </Localized>
             <Localized id="configure-general-staff-input">
               <TextFieldWithValidation

diff --git a/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
@@ -1467,7 +1467,7 @@ appears on the comment stream and in the admin interface.
                     <label
                       className="Label-root"
                     >
-                      Badge text
+                      Admin badge text
                     </label>
                     <div
                       className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
@@ -1478,8 +1478,102 @@ appears on the comment stream and in the admin interface.
                         <input
                           className="TextField-input TextField-colorRegular"
                           disabled={false}
-                          id="staff.label"
-                          name="staff.label"
+                          id="staff.adminLabel"
+                          name="staff.adminLabel"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          placeholder="E.g. Staff"
+                          type="text"
+                          value="Staff"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                  >
+                    <p
+                      className="Label-root"
+                    >
+                      Preview
+                    </p>
+                    <span
+                      className="Tag-root Tag-colorGrey Tag-uppercase"
+                    >
+                      Staff
+                    </span>
+                  </div>
+                </div>
+                <div
+                  className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
+                >
+                  <div
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+                  >
+                    <label
+                      className="Label-root"
+                    >
+                      Moderator badge text
+                    </label>
+                    <div
+                      className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
+                    >
+                      <div
+                        className="TextField-root TextField-fullWidth StaffConfig-textInput"
+                      >
+                        <input
+                          className="TextField-input TextField-colorRegular"
+                          disabled={false}
+                          id="staff.moderatorLabel"
+                          name="staff.moderatorLabel"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          placeholder="E.g. Staff"
+                          type="text"
+                          value="Staff"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                  >
+                    <p
+                      className="Label-root"
+                    >
+                      Preview
+                    </p>
+                    <span
+                      className="Tag-root Tag-colorGrey Tag-uppercase"
+                    >
+                      Staff
+                    </span>
+                  </div>
+                </div>
+                <div
+                  className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
+                >
+                  <div
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+                  >
+                    <label
+                      className="Label-root"
+                    >
+                      Staff member badge text
+                    </label>
+                    <div
+                      className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
+                    >
+                      <div
+                        className="TextField-root TextField-fullWidth StaffConfig-textInput"
+                      >
+                        <input
+                          className="TextField-input TextField-colorRegular"
+                          disabled={false}
+                          id="staff.staffLabel"
+                          name="staff.staffLabel"
                           onBlur={[Function]}
                           onChange={[Function]}
                           onFocus={[Function]}

diff --git a/src/core/client/admin/test/fixtures.ts b/src/core/client/admin/test/fixtures.ts
@@ -57,6 +57,9 @@ export const settings = createFixture<GQLSettings>({
   },
   staff: {
     label: "Staff",
+    staffLabel: "Staff",
+    moderatorLabel: "Staff",
+    adminLabel: "Staff",
   },
   reaction: {
     label: "Reaction",

diff --git a/src/core/client/framework/schema/custom.ts b/src/core/client/framework/schema/custom.ts
@@ -12,6 +12,7 @@ import {
   GQLMODERATION_MODE,
   GQLMODERATION_QUEUE,
   GQLSTORY_STATUS,
+  GQLTAG,
   GQLUSER_AUTH_CONDITIONS,
   GQLUSER_ROLE,
   GQLUSER_STATUS,
@@ -23,6 +24,7 @@ export type GQLMODERATION_QUEUE_RL = RelayEnumLiteral<
   typeof GQLMODERATION_QUEUE
 >;
 export type GQLUSER_ROLE_RL = RelayEnumLiteral<typeof GQLUSER_ROLE>;
+export type GQLTAG_RL = RelayEnumLiteral<typeof GQLTAG>;
 export type GQLUSER_STATUS_RL = RelayEnumLiteral<typeof GQLUSER_STATUS>;
 export type GQLCOMMENT_FLAG_DETECTED_REASON_RL = RelayEnumLiteral<
   typeof GQLCOMMENT_FLAG_DETECTED_REASON

diff --git a/src/core/client/stream/tabs/Comments/Comment/StaffTagContainer.css b/src/core/client/stream/tabs/Comments/Comment/StaffTagContainer.css
@@ -0,0 +1,8 @@
+.icon {
+  margin-right: var(--spacing-1);
+}
+
+.tag {
+  margin-right: var(--spacing-1);
+  font-weight: var(--font-weight-primary-bold);
+}
diff --git a/src/core/client/stream/tabs/Comments/Comment/StaffTagContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/StaffTagContainer.tsx
@@ -0,0 +1,57 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+import { graphql } from "react-relay";
+
+import { withFragmentContainer } from "coral-framework/lib/relay";
+import { GQLTAG_RL } from "coral-framework/schema";
+import { Tag } from "coral-ui/components/v2";
+
+import { StaffTagContainer_settings } from "coral-stream/__generated__/StaffTagContainer_settings.graphql";
+
+import styles from "./StaffTagContainer.css";
+
+interface Props {
+  settings: StaffTagContainer_settings;
+  tags: GQLTAG_RL[];
+  className?: string;
+}
+
+const StaffTagContainer: FunctionComponent<Props> = ({
+  settings,
+  tags,
+  className,
+}) => {
+  return (
+    <>
+      {tags.includes("ADMIN") && (
+        <Tag className={cn(className, styles.tag)}>
+          {settings.staff.adminLabel}
+        </Tag>
+      )}
+      {tags.includes("MODERATOR") && (
+        <Tag className={cn(className, styles.tag)}>
+          {settings.staff.moderatorLabel}
+        </Tag>
+      )}
+      {tags.includes("STAFF") && (
+        <Tag className={cn(className, styles.tag)}>
+          {settings.staff.staffLabel}
+        </Tag>
+      )}
+    </>
+  );
+};
+
+const enhanced = withFragmentContainer<Props>({
+  settings: graphql`
+    fragment StaffTagContainer_settings on Settings {
+      staff {
+        staffLabel
+        adminLabel
+        moderatorLabel
+      }
+    }
+  `,
+})(StaffTagContainer);
+
+export default enhanced;
diff --git a/src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx
@@ -1,16 +1,18 @@
 import { Localized } from "@fluent/react/compat";
-import cn from "classnames";
+import { intersection } from "lodash";
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
 
 import withFragmentContainer from "coral-framework/lib/relay/withFragmentContainer";
-import { GQLSTORY_MODE } from "coral-framework/schema";
+import { GQLSTORY_MODE, GQLTAG, GQLTAG_RL } from "coral-framework/schema";
 import { Flex, Icon, Tag } from "coral-ui/components/v2";
 
 import { UserTagsContainer_comment } from "coral-stream/__generated__/UserTagsContainer_comment.graphql";
 import { UserTagsContainer_settings } from "coral-stream/__generated__/UserTagsContainer_settings.graphql";
 import { UserTagsContainer_story } from "coral-stream/__generated__/UserTagsContainer_story.graphql";
 
+import StaffTagContainer from "./StaffTagContainer";
+
 import styles from "./UserTagsContainer.css";
 
 interface Props {
@@ -24,8 +26,17 @@ function storyIsInQAMode(story: UserTagsContainer_story) {
   return story.settings.mode === GQLSTORY_MODE.QA;
 }
 
+function tagStrings(comment: UserTagsContainer_comment): GQLTAG_RL[] {
+  return comment.tags.map((t) => t.code);
+}
+
 function hasStaffTag(comment: UserTagsContainer_comment) {
-  return comment.tags.find((t) => t.code === "STAFF");
+  return (
+    intersection(
+      comment.tags.map((t) => t.code),
+      [GQLTAG.ADMIN, GQLTAG.STAFF, GQLTAG.MODERATOR]
+    ).length > 0
+  );
 }
 
 function hasExpertTag(
@@ -74,7 +85,11 @@ const UserTagsContainer: FunctionComponent<Props> = ({
         </Tag>
       )}
       {staffTag && (
-        <Tag className={cn(className, styles.tag)}>{settings.staff.label}</Tag>
+        <StaffTagContainer
+          settings={settings}
+          tags={tagStrings(comment)}
+          className={className}
+        />
       )}
     </Flex>
   );
@@ -97,9 +112,7 @@ const enhanced = withFragmentContainer<Props>({
   `,
   settings: graphql`
     fragment UserTagsContainer_settings on Settings {
-      staff {
-        label
-      }
+      ...StaffTagContainer_settings
     }
   `,
 })(UserTagsContainer);

diff --git a/...t/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap b/...t/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
@@ -105,7 +105,7 @@ exports[`renders conversation thread 1`] = `
                               className="Box-root Flex-root Flex-flex Flex-alignCenter"
                             >
                               <span
-                                className="Tag-root coral coral-userTag coral-comment-userTag UserTagsContainer-tag Tag-colorGrey Tag-uppercase"
+                                className="Tag-root coral coral-userTag coral-comment-userTag StaffTagContainer-tag Tag-colorGrey Tag-uppercase"
                               >
                                 Staff
                               </span>
@@ -997,7 +997,7 @@ exports[`shows more of this conversation 1`] = `
                                 className="Box-root Flex-root Flex-flex Flex-alignCenter"
                               >
                                 <span
-                                  className="Tag-root coral coral-userTag coral-comment-userTag UserTagsContainer-tag Tag-colorGrey Tag-uppercase"
+                                  className="Tag-root coral coral-userTag coral-comment-userTag StaffTagContainer-tag Tag-colorGrey Tag-uppercase"
                                 >
                                   Staff
                                 </span>

diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
@@ -733,7 +733,7 @@ exports[`renders comment stream 1`] = `
                                       className="Box-root Flex-root Flex-flex Flex-alignCenter"
                                     >
                                       <span
-                                        className="Tag-root coral coral-userTag coral-comment-userTag UserTagsContainer-tag Tag-colorGrey Tag-uppercase"
+                                        className="Tag-root coral coral-userTag coral-comment-userTag StaffTagContainer-tag Tag-colorGrey Tag-uppercase"
                                       >
                                         Staff
                                       </span>

diff --git a/src/core/client/stream/test/fixtures.ts b/src/core/client/stream/test/fixtures.ts
@@ -93,6 +93,9 @@ export const settings = createFixture<GQLSettings>({
   },
   staff: {
     label: "Staff",
+    adminLabel: "Staff",
+    moderatorLabel: "Staff",
+    staffLabel: "Staff",
   },
   reaction: {
     icon: "thumb_up",