[CORL-476] Add badges to user from SSO token (#2470)

* fix: bug in lookup not checking object properly before accessing

* fix: Recursive types not handling optional arrays

* add user badges component

* create user badges from sso token

* update badges type

* revert src/core/client/embed/index.html

* remove duplicated line

* add user badges component

* create user badges from sso token

* revert src/core/client/embed/index.html

* remove duplicated line

* fix types

* fix tests and snaps

* add user badges to user drawer

* update snaps

* update readme

* [CORL-476] add user role from SSO token (#2475)

* add role from token

* use joi to validate role values

Co-Authored-By: Wyatt Johnson <wyattjoh@gmail.com>

* simplify sso.role validation

* add test for invalid role in sso token

src/core/client/admin/components/UserHistoryDrawer/UserBadgesContainer.tsx

@@ -0,0 +1,37 @@
+import React, { FunctionComponent } from "react";
+import { graphql } from "react-relay";
+
+import { UserBadgesContainer_user as UserData } from "coral-admin/__generated__/UserBadgesContainer_user.graphql";
+import withFragmentContainer from "coral-framework/lib/relay/withFragmentContainer";
+
+import CLASSES from "coral-stream/classes";
+import { Tag } from "coral-ui/components";
+
+interface Props {
+  user: UserData;
+}
+
+const UserBadgesContainer: FunctionComponent<Props> = ({ user }) => {
+  if (!user.badges) {
+    return null;
+  }
+  return (
+    <>
+      {user.badges.map(badge => (
+        <Tag key={badge} color="dark" className={CLASSES.comment.userBadge}>
+          {badge}
+        </Tag>
+      ))}
+    </>
+  );
+};
+
+const enhanced = withFragmentContainer<Props>({
+  user: graphql`
+    fragment UserBadgesContainer_user on User {
+      badges
+    }
+  `,
+})(UserBadgesContainer);
+
+export default enhanced;

src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.tsx

@@ -11,6 +11,7 @@ import { Button, Flex, Icon, Typography } from "coral-ui/components";
 
 import RecentHistoryContainer from "./RecentHistoryContainer";
 import Tabs from "./Tabs";
+import UserBadgesContainer from "./UserBadgesContainer";
 import UserStatusDetailsContainer from "./UserStatusDetailsContainer";
 
 import styles from "./UserHistoryDrawerContainer.css";
@@ -38,8 +39,11 @@ const UserHistoryDrawerContainer: FunctionComponent<Props> = ({
       <Button className={styles.close} onClick={onClose}>
         <Icon size="md">close</Icon>
       </Button>
-      <Flex className={styles.username}>
+      <Flex className={styles.username} itemGutter>
         <span>{user.username}</span>
+        <div>
+          <UserBadgesContainer user={user} />
+        </div>
       </Flex>
       <div className={styles.userStatus}>
         <Flex alignItems="center" itemGutter="half">
@@ -130,6 +134,7 @@ const UserHistoryDrawerContainer: FunctionComponent<Props> = ({
 const enhanced = withFragmentContainer<Props>({
   user: graphql`
     fragment UserHistoryDrawerContainer_user on User {
+      ...UserBadgesContainer_user
       ...UserStatusChangeContainer_user
       ...UserStatusDetailsContainer_user
       ...RecentHistoryContainer_user