diff --git a/package-lock.json b/package-lock.json index 99e7f12336..8a3225fe15 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22684,28 +22684,28 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "dev": true, "optional": true }, "ansi-regex": { "version": "2.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "dev": true, "optional": true }, "aproba": { "version": "1.2.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "dev": true, "optional": true }, "are-we-there-yet": { "version": "1.1.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "dev": true, "optional": true, @@ -22716,14 +22716,14 @@ }, "balanced-match": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "dev": true, "optional": true }, "brace-expansion": { "version": "1.1.11", - "resolved": false, + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, "optional": true, @@ -22734,35 +22734,35 @@ }, "code-point-at": { "version": "1.1.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true, "optional": true }, "concat-map": { "version": "0.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true, "optional": true }, "console-control-strings": { "version": "1.1.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "dev": true, "optional": true }, "core-util-is": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true, "optional": true }, "debug": { "version": "4.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", "dev": true, "optional": true, @@ -22772,28 +22772,28 @@ }, "deep-extend": { "version": "0.6.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", "dev": true, "optional": true }, "delegates": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "dev": true, "optional": true }, "detect-libc": { "version": "1.0.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "dev": true, "optional": true }, "gauge": { "version": "2.7.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, "optional": true, @@ -22810,7 +22810,7 @@ }, "glob": { "version": "7.1.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz", "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==", "dev": true, "optional": true, @@ -22825,14 +22825,14 @@ }, "has-unicode": { "version": "2.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "dev": true, "optional": true }, "iconv-lite": { "version": "0.4.24", - "resolved": false, + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", "dev": true, "optional": true, @@ -22842,7 +22842,7 @@ }, "ignore-walk": { "version": "3.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz", "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==", "dev": true, "optional": true, @@ -22852,7 +22852,7 @@ }, "inflight": { "version": "1.0.6", - "resolved": false, + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "optional": true, @@ -22863,21 +22863,21 @@ }, "inherits": { "version": "2.0.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "dev": true, "optional": true }, "ini": { "version": "1.3.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true, "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, "optional": true, @@ -22887,14 +22887,14 @@ }, "isarray": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "dev": true, "optional": true }, "minimatch": { "version": "3.0.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "optional": true, @@ -22914,7 +22914,7 @@ }, "ms": { "version": "2.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", "dev": true, "optional": true @@ -22928,7 +22928,7 @@ }, "needle": { "version": "2.3.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/needle/-/needle-2.3.0.tgz", "integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==", "dev": true, "optional": true, @@ -22940,7 +22940,7 @@ }, "node-pre-gyp": { "version": "0.12.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz", "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==", "dev": true, "optional": true, @@ -22959,7 +22959,7 @@ }, "nopt": { "version": "4.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz", "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "dev": true, "optional": true, @@ -22970,14 +22970,14 @@ }, "npm-bundled": { "version": "1.0.6", - "resolved": false, + "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.6.tgz", "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==", "dev": true, "optional": true }, "npm-packlist": { "version": "1.4.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.1.tgz", "integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==", "dev": true, "optional": true, @@ -22988,7 +22988,7 @@ }, "npmlog": { "version": "4.1.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, "optional": true, @@ -23001,21 +23001,21 @@ }, "number-is-nan": { "version": "1.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "dev": true, "optional": true }, "object-assign": { "version": "4.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "dev": true, "optional": true }, "once": { "version": "1.4.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, "optional": true, @@ -23025,21 +23025,21 @@ }, "os-homedir": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "dev": true, "optional": true }, "os-tmpdir": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true, "optional": true }, "osenv": { "version": "0.1.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz", "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "dev": true, "optional": true, @@ -23050,21 +23050,21 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "dev": true, "optional": true }, "process-nextick-args": { "version": "2.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", "dev": true, "optional": true }, "rc": { "version": "1.2.8", - "resolved": false, + "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "dev": true, "optional": true, @@ -23086,7 +23086,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": false, + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "dev": true, "optional": true, @@ -23102,7 +23102,7 @@ }, "rimraf": { "version": "2.6.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", "dev": true, "optional": true, @@ -23112,49 +23112,49 @@ }, "safe-buffer": { "version": "5.1.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "dev": true, "optional": true }, "safer-buffer": { "version": "2.1.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true, "optional": true }, "sax": { "version": "1.2.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true, "optional": true }, "semver": { "version": "5.7.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz", "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==", "dev": true, "optional": true }, "set-blocking": { "version": "2.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "dev": true, "optional": true }, "signal-exit": { "version": "3.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true, "optional": true }, "string-width": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "optional": true, @@ -23166,7 +23166,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "dev": true, "optional": true, @@ -23176,7 +23176,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "optional": true, @@ -23186,21 +23186,21 @@ }, "strip-json-comments": { "version": "2.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "dev": true, "optional": true }, "util-deprecate": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "dev": true, "optional": true }, "wide-align": { "version": "1.1.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "dev": true, "optional": true, @@ -23210,7 +23210,7 @@ }, "wrappy": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "dev": true, "optional": true @@ -29528,7 +29528,8 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": "", + "resolved": false, + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true, "optional": true } diff --git a/src/core/client/admin/routes/Configure/sections/General/StaffConfig.tsx b/src/core/client/admin/routes/Configure/sections/General/StaffConfig.tsx index 335e49e986..99895bcb24 100644 --- 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 = ({ disabled }) => ( appears on the comment stream and in the admin interface. - + {({ input, meta }) => ( - - + + + + + + + + + + + + {input.value && {input.value}} + + + )} + + + {({ input, meta }) => ( + + + + + + + + + + + + + + {input.value && {input.value}} + + + )} + + + {({ input, meta }) => ( + + + + - Badge text + Admin badge text
+
+ + +
+

+ Preview +

+ + Staff + +
+ +
+
+ +
+
+ +
+
+
+
+

+ Preview +

+ + Staff + +
+
+
+
+ +
+
+ ({ }, 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 index 8fbd3d2a2f..881cad12cc 100644 --- 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; +export type GQLTAG_RL = RelayEnumLiteral; export type GQLUSER_STATUS_RL = RelayEnumLiteral; 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 new file mode 100644 index 0000000000..482007a8f3 --- /dev/null +++ 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 new file mode 100644 index 0000000000..948b091608 --- /dev/null +++ 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 = ({ + settings, + tags, + className, +}) => { + return ( + <> + {tags.includes("ADMIN") && ( + + {settings.staff.adminLabel} + + )} + {tags.includes("MODERATOR") && ( + + {settings.staff.moderatorLabel} + + )} + {tags.includes("STAFF") && ( + + {settings.staff.staffLabel} + + )} + + ); +}; + +const enhanced = withFragmentContainer({ + 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 index 9ba36463f4..d669f53967 100644 --- 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 = ({ )} {staffTag && ( - {settings.staff.label} + )} ); @@ -97,9 +112,7 @@ const enhanced = withFragmentContainer({ `, settings: graphql` fragment UserTagsContainer_settings on Settings { - staff { - label - } + ...StaffTagContainer_settings } `, })(UserTagsContainer); diff --git a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap index f690981c15..c53ff94c50 100644 --- a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap +++ b/src/core/client/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" > Staff @@ -997,7 +997,7 @@ exports[`shows more of this conversation 1`] = ` className="Box-root Flex-root Flex-flex Flex-alignCenter" > Staff 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 index 4469e8d965..ebf8b55379 100644 --- 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" > Staff diff --git a/src/core/client/stream/test/fixtures.ts b/src/core/client/stream/test/fixtures.ts index 673d0d29ab..d64ed06ec9 100644 --- a/src/core/client/stream/test/fixtures.ts +++ b/src/core/client/stream/test/fixtures.ts @@ -93,6 +93,9 @@ export const settings = createFixture({ }, staff: { label: "Staff", + adminLabel: "Staff", + moderatorLabel: "Staff", + staffLabel: "Staff", }, reaction: { icon: "thumb_up", diff --git a/src/core/server/graph/resolvers/StaffConfig.ts b/src/core/server/graph/resolvers/StaffConfig.ts new file mode 100644 index 0000000000..961c23e4ea --- /dev/null +++ b/src/core/server/graph/resolvers/StaffConfig.ts @@ -0,0 +1,11 @@ +import * as settings from "coral-server/models/settings"; + +import { GQLStaffConfigurationTypeResolver } from "coral-server/graph/schema/__generated__/types"; + +export const StaffConfiguration: GQLStaffConfigurationTypeResolver = { + // MIGRATE: plan to remove this in 7.0.0. + label: (config) => config.label, + adminLabel: (config) => config.adminLabel || config.label, + moderatorLabel: (config) => config.moderatorLabel || config.label, + staffLabel: (config) => config.staffLabel || config.label, +}; diff --git a/src/core/server/graph/resolvers/index.ts b/src/core/server/graph/resolvers/index.ts index ccb6e52f6e..00b8ba1eca 100644 --- a/src/core/server/graph/resolvers/index.ts +++ b/src/core/server/graph/resolvers/index.ts @@ -50,6 +50,7 @@ import { SigningSecret } from "./SigningSecret"; import { Site } from "./Site"; import { SlackConfiguration } from "./SlackConfiguration"; import { SSOAuthIntegration } from "./SSOAuthIntegration"; +import { StaffConfiguration } from "./StaffConfig"; import { Story } from "./Story"; import { StorySettings } from "./StorySettings"; import { Subscription } from "./Subscription"; @@ -70,6 +71,7 @@ import { YouTubeMediaConfiguration } from "./YouTubeMediaConfiguration"; const Resolvers: GQLResolver = { ApproveCommentPayload, + StaffConfiguration, AuthIntegrations, BanStatus, BanStatusHistory, diff --git a/src/core/server/graph/schema/schema.graphql b/src/core/server/graph/schema/schema.graphql index dbe0e35e3e..f6956257b7 100644 --- a/src/core/server/graph/schema/schema.graphql +++ b/src/core/server/graph/schema/schema.graphql @@ -1513,7 +1513,22 @@ type StaffConfiguration { """ label is the string used when displaying the STAFF badge to users. """ - label: String! + label: String! @deprecated(reason: "deprecated in favour of staffLabel") + + """ + staffLabel is the string used when displaying the STAFF badge to users. + """ + staffLabel: String! + + """ + moderatorLabel is the string used when displaying the MODERATOR badge to users. + """ + moderatorLabel: String! + + """ + adminLabel is the string used when displaying the ADMIN badge to users + """ + adminLabel: String! } type WebhookDelivery { @@ -2988,6 +3003,18 @@ enum TAG { """ STAFF + """ + ADMIN is used when a Comment is written by a User that has the ADMIN, + role. + """ + ADMIN + + """ + MODERATOR is used when a Comment is written by a User that has the MODERATOR, + role. + """ + MODERATOR + """ FEATURED is used when a Comment is marked as such by a staff member. """ @@ -4576,9 +4603,19 @@ assigned to users with any role above COMMENTER. """ input StaffConfigurationInput { """ - label is the string used when displaying the STAFF badge to users. + staffLabel is the string used when displaying the STAFF badge to users. """ - label: String + staffLabel: String + + """ + adminLabel is the string used when displaying the ADMIN badge to users. + """ + adminLabel: String + + """ + moderatorLabel is the string used when displaying the MODERATOR badge to users. + """ + moderatorLabel: String } """ diff --git a/src/core/server/models/settings/settings.ts b/src/core/server/models/settings/settings.ts index 3ddbc35749..e8cd27b7d6 100644 --- a/src/core/server/models/settings/settings.ts +++ b/src/core/server/models/settings/settings.ts @@ -77,6 +77,14 @@ export interface NewCommentersConfiguration { approvedCommentsThreshold: number; } +export interface StaffConfiguration { + staffLabel?: string; + // MIGRATE: plan to migrate this to `staffLabel` in 7.0.0. + label: string; + adminLabel?: string; + moderatorLabel?: string; +} + /** * Auth is the set of configured authentication integrations. */ @@ -198,7 +206,6 @@ export type Settings = GlobalModerationSettings & | "recentCommentHistory" | "wordList" | "reaction" - | "staff" | "editCommentWindowLength" | "customCSSURL" | "communityGuidelines" @@ -253,6 +260,11 @@ export type Settings = GlobalModerationSettings & * media is the configuration media content attached to Comment's. */ media?: Omit; + + /** + * staff configures the labels for staff members in comment stream. + */ + staff: StaffConfiguration; }; export const defaultRTEConfiguration: RTEConfiguration = { diff --git a/src/core/server/models/tenant/helpers.ts b/src/core/server/models/tenant/helpers.ts index b93c4e22f4..3f3cfeb3ee 100644 --- a/src/core/server/models/tenant/helpers.ts +++ b/src/core/server/models/tenant/helpers.ts @@ -30,6 +30,9 @@ export const getDefaultStaffConfiguration = ( bundle: FluentBundle ): GQLStaffConfiguration => ({ label: translate(bundle, "Staff", "staff-label"), + adminLabel: translate(bundle, "Staff", "staff-label"), + staffLabel: translate(bundle, "Staff", "staff-label"), + moderatorLabel: translate(bundle, "Staff", "staff-label"), }); /** diff --git a/src/core/server/services/comments/pipeline/phases/staff.ts b/src/core/server/services/comments/pipeline/phases/staff.ts index 62ecceb295..791c76c563 100755 --- a/src/core/server/services/comments/pipeline/phases/staff.ts +++ b/src/core/server/services/comments/pipeline/phases/staff.ts @@ -1,18 +1,34 @@ -import { hasStaffRole } from "coral-server/models/user/helpers"; import { IntermediateModerationPhase, IntermediatePhaseResult, } from "coral-server/services/comments/pipeline"; -import { GQLTAG } from "coral-server/graph/schema/__generated__/types"; +import { + GQLTAG, + GQLUSER_ROLE, +} from "coral-server/graph/schema/__generated__/types"; + +function roleAsTag(role: GQLUSER_ROLE) { + switch (role) { + case GQLUSER_ROLE.ADMIN: + return GQLTAG.ADMIN; + case GQLUSER_ROLE.MODERATOR: + return GQLTAG.MODERATOR; + case GQLUSER_ROLE.STAFF: + return GQLTAG.STAFF; + default: + return null; + } +} // If a given user is a staff member, always approve their comment. export const staff: IntermediateModerationPhase = ({ author, }): IntermediatePhaseResult | void => { - if (hasStaffRole(author)) { + const staffTag = roleAsTag(author.role); + if (staffTag) { return { - tags: [GQLTAG.STAFF], + tags: [staffTag], }; } }; diff --git a/src/locales/en-US/admin.ftl b/src/locales/en-US/admin.ftl index 67ac8ca82e..027b9d540d 100644 --- a/src/locales/en-US/admin.ftl +++ b/src/locales/en-US/admin.ftl @@ -1265,7 +1265,16 @@ configure-general-staff-explanation = configure-general-staff-label = Badge text configure-general-staff-input = .placeholder = E.g. Staff +configure-general-staff-moderator-input = + .placeholder = E.g. Moderator +configure-general-staff-admin-input = + .placeholder = E.g. Admin configure-general-staff-preview = Preview +configure-general-staff-moderator-preview = Preview +configure-general-staff-admin-preview = Preview +configure-general-staff-member-label = Staff member badge text +configure-general-staff-admin-label = Admin badge text +configure-general-staff-moderator-label = Moderator badge text configure-general-rte-title = Rich-text comments configure-general-rte-express = Give your community more ways to express themselves beyond plain text with rich-text formatting.