[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/ui/components/Tag/Tag.css

@@ -2,7 +2,7 @@
   composes: tagText from "coral-ui/shared/typography.css";
   color: var(--palette-text-light);
   line-height: 1;
-  padding: 2px 4px;
+  padding: var(--spacing-1);
   white-space: nowrap;
   border-radius: 1px;
   display: inline-block;
@@ -20,6 +20,10 @@
   background-color: var(--palette-error-dark);
 }
 
+.colorDarkest {
+  background-color: var(--palette-primary-darkest);
+}
+
 .variantPill {
   border-radius: 20px;
   padding: 2px 6px;

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

@@ -12,7 +12,7 @@ interface Props {
    */
   classes: typeof styles;
   children: React.ReactNode;
-  color?: "grey" | "primary" | "error";
+  color?: "grey" | "primary" | "error" | "dark";
 
   variant?: "regular" | "pill";
 }
@@ -25,6 +25,7 @@ const Tag: FunctionComponent<Props> = props => {
     [classes.colorPrimary]: color === "primary",
     [classes.colorError]: color === "error",
     [classes.colorGrey]: color === "grey",
+    [classes.colorDarkest]: color === "dark",
   });
 
   return (