[CORL-155] User Suspending and Banning (#2247)

* feat: suspending, banning, now propogation

* feat: adapting to `now`

* feat: support auth for suspension/banned

* feat: added trace-id to requests

* feat: new mutation api with hooks support

* feat: added user status filtering, current field

* feat: Implement filter by status, adapt to new USER_STATUS type, add lookup helper <3

* fix: typo

* fix: tests

* chore: rename banned status to ban status

* test: feature test + lots of test helper improvements e.g. types

* fix: add translation to ban user modal

* fix: translation

* fix: test

src/core/client/ui/components/Card/CloseButton.tsx

@@ -20,10 +20,14 @@ export interface CloseButtonProps
 }
 
 const CloseButton: StatelessComponent<CloseButtonProps> = props => {
-  const { classes, forwardRef, ...rest } = props;
+  const {
+    classes: { icon: iconClassName, ...restClasses },
+    forwardRef,
+    ...rest
+  } = props;
   return (
-    <BaseButton classes={classes} ref={forwardRef} {...rest}>
-      <Icon className={classes.icon} size="md">
+    <BaseButton classes={restClasses} ref={forwardRef} {...rest}>
+      <Icon className={iconClassName} size="md">
         close
       </Icon>
     </BaseButton>

src/core/client/ui/components/Modal/Modal.mdx

@@ -29,15 +29,14 @@ import styles from "./Modal.mdx.css";
         <Button variant="filled" color="primary" onClick={show}>
           Show Modal
         </Button>
-        <Modal open={open} onClose={hide} aria-labeledby="modal-title">
+        <Modal open={open} onClose={hide} aria-labelledby="modal-title">
           {({ firstFocusableRef, lastFocusableRef }) => (
             <Card className={styles.card}>
               <CardCloseButton onClick={hide} ref={firstFocusableRef} />
               <HorizontalGutter size="double">
                 <HorizontalGutter>
                   <Typography variant="header2" id="modal-title">
-                    Are you sure you want to ban <strong>ButFirstCoffee</strong>
-                    ?
+                    Are you sure you want to ban <strong>ButFirstCoffee</strong>?
                   </Typography>
                   <Typography>
                     Once banned, this user will no longer be able to comment,

src/core/client/ui/components/SelectField/SelectField.css

@@ -28,6 +28,7 @@
   appearance: none;
   outline: none;
   color: var(--palette-text-primary);
+  width: 100%;
 
   &::-moz-focus-inner {
     border: 0;

src/core/client/ui/components/Typography/Typography.css

@@ -122,6 +122,10 @@
   color: var(--palette-error-main);
 }
 
+.colorWarning {
+  color: var(--palette-warning-main);
+}
+
 .colorSuccess {
-  color: var(--palette-success-main);
+  color: var(--palette-success-darkest);
 }

src/core/client/ui/components/Typography/Typography.tsx

@@ -53,6 +53,7 @@ interface Props extends HTMLAttributes<any> {
     | "textPrimary"
     | "textSecondary"
     | "textLight"
+    | "warning"
     | "error"
     | "success";
   /**
@@ -114,6 +115,7 @@ const Typography: StatelessComponent<Props> = props => {
       [classes.colorPrimary]: color === "primary",
       [classes.colorError]: color === "error",
       [classes.colorSuccess]: color === "success",
+      [classes.colorWarning]: color === "warning",
       [classes.noWrap]: noWrap,
       [classes.gutterBottom]: gutterBottom,
       [classes.paragraph]: paragraph,

src/core/client/ui/components/index.ts

@@ -55,3 +55,4 @@ export {
 } from "./Dropdown";
 export { Table, TableBody, TableHead, TableRow, TableCell } from "./Table";
 export { default as Tag } from "./Tag";
+export { default as Modal } from "./Modal";

src/core/client/ui/hocs/withKeyboardFocus.tsx

@@ -17,6 +17,10 @@ const withKeyboardFocus: DefaultingInferableComponentEnhancer<
   InjectedProps
 > = hoistStatics<InjectedProps>(
   <T extends InjectedProps>(BaseComponent: React.ComponentType<T>) => {
+    // TODO: (cvle) This is a workaround for a typescript bug
+    // https://github.com/Microsoft/TypeScript/issues/30762
+    const Workaround = BaseComponent as React.ComponentType<InjectedProps>;
+
     class WithKeyboardFocus extends React.Component<any> {
       private lastMouseDownTime: number = 0;
       public state = {
@@ -55,7 +59,7 @@ const withKeyboardFocus: DefaultingInferableComponentEnhancer<
 
       public render() {
         return (
-          <BaseComponent
+          <Workaround
             {...this.props}
             onFocus={this.handleFocus}
             onBlur={this.handleBlur}

src/core/client/ui/hocs/withMouseHover.tsx

@@ -18,6 +18,10 @@ const withMouseHover: DefaultingInferableComponentEnhancer<
   InjectedProps
 > = hoistStatics<InjectedProps>(
   <T extends InjectedProps>(BaseComponent: React.ComponentType<T>) => {
+    // TODO: (cvle) This is a workaround for a typescript bug
+    // https://github.com/Microsoft/TypeScript/issues/30762
+    const Workaround = BaseComponent as React.ComponentType<InjectedProps>;
+
     class WithMouseHover extends React.Component<InjectedProps> {
       private lastTouchEndTime = 0;
       public state = {
@@ -50,7 +54,7 @@ const withMouseHover: DefaultingInferableComponentEnhancer<
 
       public render() {
         return (
-          <BaseComponent
+          <Workaround
             {...this.props}
             onMouseOver={this.handleMouseOver}
             onMouseOut={this.handleMouseOut}

src/core/client/ui/theme/variables.ts

@@ -44,6 +44,10 @@ const variables = {
       lighter: "#FC9795",
       lightest: "#FEF0EF",
     },
+    /* Warning colors */
+    warning: {
+      main: "#DC8400",
+    },
     /* Text colors */
     text: {
       primary: "#3B4A53",