Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 9 commits into from Sep 2, 2020
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6285245
allow configuration of admin and moderator comment tags
tessalt Aug 31, 2020
1d9c859
update schema based on feedback
tessalt Sep 1, 2020
53113e2
add missing default value
tessalt Sep 1, 2020
14e7a23
update fixtures
tessalt Sep 2, 2020
985ffb5
change label to staffLabel
tessalt Sep 2, 2020
b0526e8
add resolver for staff config
tessalt Sep 2, 2020
3cd7fc6
update snap
tessalt Sep 2, 2020
fc9f485
remove redundant code
tessalt Sep 2, 2020
0417a9d
Merge branch 'master' into feature/CORL-1327-badges
kodiakhq[bot] Sep 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
115 changes: 58 additions & 57 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

68 changes: 64 additions & 4 deletions src/core/client/admin/routes/Configure/sections/General/StaffConfig.tsx
View file
Open in desktop
Expand Up @@ -24,7 +24,9 @@ import styles from "./StaffConfig.css";
graphql`
fragment StaffConfig_formValues on Settings {
staff {
label
staffLabel
adminLabel
moderatorLabel
}
}
`;
Expand All @@ -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
Expand Down
100 changes: 97 additions & 3 deletions src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
View file
Open in desktop
Expand Up @@ -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"
Expand All @@ -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]}
Expand Down
3 changes: 3 additions & 0 deletions src/core/client/admin/test/fixtures.ts
View file
Open in desktop
Expand Up @@ -57,6 +57,9 @@ export const settings = createFixture<GQLSettings>({
},
staff: {
label: "Staff",
staffLabel: "Staff",
moderatorLabel: "Staff",
adminLabel: "Staff",
},
reaction: {
label: "Reaction",
Expand Down
2 changes: 2 additions & 0 deletions src/core/client/framework/schema/custom.ts
View file
Open in desktop
Expand Up @@ -12,6 +12,7 @@ import {
GQLMODERATION_MODE,
GQLMODERATION_QUEUE,
GQLSTORY_STATUS,
GQLTAG,
GQLUSER_AUTH_CONDITIONS,
GQLUSER_ROLE,
GQLUSER_STATUS,
Expand All @@ -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
Expand Down
8 changes: 8 additions & 0 deletions src/core/client/stream/tabs/Comments/Comment/StaffTagContainer.css
View file
Open in desktop
@@ -0,0 +1,8 @@
.icon {
margin-right: var(--spacing-1);
}

.tag {
margin-right: var(--spacing-1);
font-weight: var(--font-weight-primary-bold);
}
57 changes: 57 additions & 0 deletions src/core/client/stream/tabs/Comments/Comment/StaffTagContainer.tsx
View file
Open in desktop
@@ -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;
27 changes: 20 additions & 7 deletions src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx
View file
Open in desktop
@@ -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 {
Expand All @@ -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(
Expand Down Expand Up @@ -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>
);
Expand All @@ -97,9 +112,7 @@ const enhanced = withFragmentContainer<Props>({
`,
settings: graphql`
fragment UserTagsContainer_settings on Settings {
staff {
label
}
...StaffTagContainer_settings
}
`,
})(UserTagsContainer);
Expand Down
4 changes: 2 additions & 2 deletions ...t/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
View file
Open in desktop
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
View file
Open in desktop
Expand Up @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions src/core/client/stream/test/fixtures.ts
View file
Open in desktop
Expand Up @@ -93,6 +93,9 @@ export const settings = createFixture<GQLSettings>({
},
staff: {
label: "Staff",
adminLabel: "Staff",
moderatorLabel: "Staff",
staffLabel: "Staff",
},
reaction: {
icon: "thumb_up",
Expand Down