[CORL-681] Configurable Staff Badges (#2620)

* feat: added configurable staff badge * fix: removed ambigous styles
2026-09-10 12:43:11 +08:00 · 2019-10-04 20:22:31 +00:00
parent e7ab0b27f9
commit 918ba10867
32 changed files with 428 additions and 44 deletions
@@ -11,6 +11,7 @@ import GuidelinesConfigContainer from "./GuidelinesConfigContainer";
 import LocaleConfigContainer from "./LocaleConfigContainer";
 import ReactionConfigContainer from "./ReactionConfigContainer";
 import SitewideCommentingConfigContainer from "./SitewideCommentingConfigContainer";
+import StaffConfigContainer from "./StaffConfigContainer";

 interface Props {
  disabled: boolean;
@@ -19,6 +20,7 @@ interface Props {
    PropTypesOf<typeof CommentEditingConfigContainer>["settings"] &
    PropTypesOf<typeof ClosedStreamMessageConfigContainer>["settings"] &
    PropTypesOf<typeof ReactionConfigContainer>["settings"] &
+    PropTypesOf<typeof StaffConfigContainer>["settings"] &
    PropTypesOf<typeof ClosingCommentStreamsConfigContainer>["settings"] &
    PropTypesOf<typeof SitewideCommentingConfigContainer>["settings"] &
    PropTypesOf<typeof LocaleConfigContainer>["settings"];
@@ -71,6 +73,11 @@ const General: FunctionComponent<Props> = ({
      settings={settings}
      onInitValues={onInitValues}
    />
+    <StaffConfigContainer
+      disabled={disabled}
+      settings={settings}
+      onInitValues={onInitValues}
+    />
  </HorizontalGutter>
 );

@@ -53,6 +53,7 @@ const enhanced = withFragmentContainer<Props>({
      ...ClosingCommentStreamsConfigContainer_settings
      ...SitewideCommentingConfigContainer_settings
      ...ReactionConfigContainer_settings
+      ...StaffConfigContainer_settings
    }
  `,
 })(GeneralConfigContainer);
@@ -0,0 +1,3 @@
+.textInput {
+  min-width: 300px;
+}
@@ -0,0 +1,78 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+import { Field } from "react-final-form";
+
+import { StaffConfigContainer_settings as SettingsData } from "coral-admin/__generated__/StaffConfigContainer_settings.graphql";
+import { required } from "coral-framework/lib/validation";
+import {
+  FieldSet,
+  Flex,
+  FormField,
+  HorizontalGutter,
+  InputLabel,
+  Tag,
+  TextField,
+  Typography,
+} from "coral-ui/components";
+
+import Header from "../../Header";
+import SectionContent from "../../SectionContent";
+import ValidationMessage from "../../ValidationMessage";
+
+import styles from "./StaffConfig.css";
+
+interface Props {
+  disabled: boolean;
+  settings: SettingsData;
+}
+
+const StaffConfig: FunctionComponent<Props> = ({ disabled, settings }) => (
+  <HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
+    <Localized id="configure-general-staff-title">
+      <Header container="legend">Staff member badge</Header>
+    </Localized>
+    <SectionContent>
+      <Localized id="configure-general-staff-explanation">
+        <Typography variant="bodyShort">
+          Show a custom badge for staff members of your organization. This badge
+          appears on the comment stream and in the admin interface.
+        </Typography>
+      </Localized>
+      <HorizontalGutter size="double">
+        <FormField>
+          <Field name="staff.label" validate={required}>
+            {({ input, meta }) => (
+              <Flex itemGutter="double">
+                <HorizontalGutter>
+                  <Localized id="configure-general-staff-label">
+                    <InputLabel>Badge text</InputLabel>
+                  </Localized>
+                  <Localized id="configure-general-staff-input">
+                    <TextField
+                      className={styles.textInput}
+                      id={input.name}
+                      type="text"
+                      fullWidth
+                      placeholder="E.g. Staff"
+                      disabled={disabled}
+                      {...input}
+                    />
+                  </Localized>
+                  <ValidationMessage fullWidth meta={meta} />
+                </HorizontalGutter>
+                <HorizontalGutter>
+                  <Localized id="configure-general-staff-preview">
+                    <Typography variant="heading3">Preview</Typography>
+                  </Localized>
+                  {input.value && <Tag>{input.value}</Tag>}
+                </HorizontalGutter>
+              </Flex>
+            )}
+          </Field>
+        </FormField>
+      </HorizontalGutter>
+    </SectionContent>
+  </HorizontalGutter>
+);
+
+export default StaffConfig;
@@ -0,0 +1,37 @@
+import React from "react";
+import { graphql } from "react-relay";
+
+import { StaffConfigContainer_settings as SettingsData } from "coral-admin/__generated__/StaffConfigContainer_settings.graphql";
+import { withFragmentContainer } from "coral-framework/lib/relay";
+
+import StaffConfig from "./StaffConfig";
+
+interface Props {
+  settings: SettingsData;
+  onInitValues: (values: SettingsData) => void;
+  disabled: boolean;
+}
+
+class StaffConfigContainer extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    props.onInitValues(props.settings);
+  }
+
+  public render() {
+    const { disabled, settings } = this.props;
+    return <StaffConfig settings={settings} disabled={disabled} />;
+  }
+}
+
+const enhanced = withFragmentContainer<Props>({
+  settings: graphql`
+    fragment StaffConfigContainer_settings on Settings {
+      staff {
+        label
+      }
+    }
+  `,
+})(StaffConfigContainer);
+
+export default enhanced;
@@ -1063,6 +1063,76 @@ each other's comments.
              </div>
            </div>
          </fieldset>
+          <fieldset
+            className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+          >
+            <legend
+              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
+            >
+              Staff member badge
+            </legend>
+            <div
+              className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
+            >
+              <p
+                className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
+              >
+                Show a custom badge for staff members of your organization. This badge
+appears on the comment stream and in the admin interface.
+              </p>
+              <div
+                className="Box-root HorizontalGutter-root HorizontalGutter-double"
+              >
+                <div
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                >
+                  <div
+                    className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
+                  >
+                    <div
+                      className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                    >
+                      <label
+                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      >
+                        Badge text
+                      </label>
+                      <div
+                        className="TextField-root TextField-fullWidth StaffConfig-textInput"
+                      >
+                        <input
+                          className="TextField-input TextField-colorRegular"
+                          disabled={false}
+                          id="staff.label"
+                          name="staff.label"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          placeholder="E.g. Staff"
+                          type="text"
+                          value="Staff"
+                        />
+                      </div>
+                    </div>
+                    <div
+                      className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                    >
+                      <h1
+                        className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
+                      >
+                        Preview
+                      </h1>
+                      <span
+                        className="Tag-root Tag-colorGrey Tag-uppercase"
+                      >
+                        Staff
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </fieldset>
        </div>
      </div>
    </div>
@@ -50,6 +50,9 @@ export const settings = createFixture<GQLSettings>({
    timeout: 604800,
    message: "Comments are closed on this story.",
  },
+  staff: {
+    label: "Staff",
+  },
  reaction: {
    label: "Reaction",
    labelActive: "reacted",