From f497f8cd8fa3c29d00352b03db7b8caa1335a84d Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Tue, 2 May 2023 11:57:36 +0200
Subject: [PATCH] Better default avatar if none is set (#19804)

Closes #19681
---
 js/apps/account-ui/public/avatar.svg          |  33 ------
 .../keycloak-masthead/src/DefaultAvatar.tsx   | 109 ++++++++++++++++++
 js/libs/keycloak-masthead/src/Masthead.tsx    |   9 +-
 js/libs/keycloak-masthead/src/svg.d.ts        |   4 +
 js/package-lock.json                          |   6 +-
 5 files changed, 122 insertions(+), 39 deletions(-)
 delete mode 100644 js/apps/account-ui/public/avatar.svg
 create mode 100644 js/libs/keycloak-masthead/src/DefaultAvatar.tsx
 create mode 100644 js/libs/keycloak-masthead/src/svg.d.ts

diff --git a/js/apps/account-ui/public/avatar.svg b/js/apps/account-ui/public/avatar.svg
deleted file mode 100644
index 11c80b85ff..0000000000
--- a/js/apps/account-ui/public/avatar.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg enable-background="new 0 0 36 36" version="1.1" viewBox="0 0 36 36" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
-<style type="text/css">
-	/*stylelint-disable*/
-	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
-	.st1{filter:url(#b);}
-	.st2{mask:url(#a);}
-	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#BBBBBB;}
-	.st4{opacity:0.1;fill-rule:evenodd;clip-rule:evenodd;enable-background:new    ;}
-	.st5{opacity:8.000000e-02;fill-rule:evenodd;clip-rule:evenodd;fill:#231F20;enable-background:new    ;}
-	/*stylelint-enable*/
-</style>
-			<circle class="st0" cx="18" cy="18.5" r="18"/>
-		<defs>
-			<filter id="b" x="5.2" y="7.2" width="25.6" height="53.6" filterUnits="userSpaceOnUse">
-				<feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
-			</filter>
-		</defs>
-		<mask id="a" x="5.2" y="7.2" width="25.6" height="53.6" maskUnits="userSpaceOnUse">
-			<g class="st1">
-				<circle class="st0" cx="18" cy="18.5" r="18"/>
-			</g>
-		</mask>
-		<g class="st2">
-			<g transform="translate(5.04 6.88)">
-				<path class="st3" d="m22.6 18.1c-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-0.6-6.3-0.6-6.1 0.7-6.1 0.7 0 0 0 0c-1.2 0.4-2.4 1.2-3.4 2.6-2.3 2.8-3.2 12.3-3.2 14.8 0 3.2 0.4 12.3 0.6 15.4 0 0-0.4 5.5 4 5.5l-0.3-6.3-0.4-3.5 0.2-0.9c0.9 0.4 3.6 1.2 8.6 1.2 5.3 0 8-0.9 8.8-1.3l0.2 1-0.2 3.6-0.3 6.3c3 0.1 3.7-3 3.8-4.4s0.6-12.6 0.6-16.5c0.1-2.6-0.8-12.1-3.1-15z"/>
-				<path class="st4" d="m22.5 26c-0.1-2.1-1.5-2.8-4.8-2.8l2.2 9.6s1.8-1.7 3-1.8c0 0-0.4-4.6-0.4-5z"/>
-				<path class="st3" d="m12.7 13.2c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z"/>
-				<path class="st5" d="m9.4 6.8c0-3 2.1-5.5 4.9-6.3-0.5-0.1-1-0.2-1.6-0.2-3.5 0-6.4 2.9-6.4 6.4s2.9 6.4 6.4 6.4c0.6 0 1.1-0.1 1.6-0.2-2.8-0.6-4.9-3.1-4.9-6.1z"/>
-				<path class="st4" d="m8.3 22.4c-2 0.4-2.9 1.4-3.1 3.5l-0.6 18.6s1.7 0.7 3.6 0.9l0.1-23z"/>
-			</g>
-		</g>
-</svg>
diff --git a/js/libs/keycloak-masthead/src/DefaultAvatar.tsx b/js/libs/keycloak-masthead/src/DefaultAvatar.tsx
new file mode 100644
index 0000000000..6e7f8e906d
--- /dev/null
+++ b/js/libs/keycloak-masthead/src/DefaultAvatar.tsx
@@ -0,0 +1,109 @@
+import styles from "@patternfly/react-styles/css/components/Avatar/avatar";
+import { css } from "@patternfly/react-styles";
+
+type DefaultAvatarProps = {
+  className?: string;
+  border?: "light" | "dark";
+  size?: "sm" | "md" | "lg" | "xl";
+};
+
+export const DefaultAvatar = ({
+  className = "",
+  border,
+  size = "md",
+}: DefaultAvatarProps) => (
+  <svg
+    className={css(
+      styles.avatar,
+      styles.modifiers[size],
+      border === "light" && styles.modifiers.light,
+      border === "dark" && styles.modifiers.dark,
+      className
+    )}
+    enableBackground="new 0 0 36 36"
+    version="1.1"
+    viewBox="0 0 36 36"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      style={{ fillRule: "evenodd", clipRule: "evenodd", fill: "#FFFFFF" }}
+      cx="18"
+      cy="18.5"
+      r="18"
+    />
+    <defs>
+      <filter
+        id="b"
+        x="5.2"
+        y="7.2"
+        width="25.6"
+        height="53.6"
+        filterUnits="userSpaceOnUse"
+      >
+        <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" />
+      </filter>
+    </defs>
+    <mask
+      id="a"
+      x="5.2"
+      y="7.2"
+      width="25.6"
+      height="53.6"
+      maskUnits="userSpaceOnUse"
+    >
+      <g style={{ filter: 'url("#b")' }}>
+        <circle
+          style={{ fillRule: "evenodd", clipRule: "evenodd", fill: "#FFFFFF" }}
+          cx="18"
+          cy="18.5"
+          r="18"
+        />
+      </g>
+    </mask>
+    <g style={{ filter: 'url("#a")' }}>
+      <g transform="translate(5.04 6.88)">
+        <path
+          style={{
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            fill: "#BBBBBB",
+          }}
+          d="m22.6 18.1c-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-0.6-6.3-0.6-6.1 0.7-6.1 0.7 0 0 0 0c-1.2 0.4-2.4 1.2-3.4 2.6-2.3 2.8-3.2 12.3-3.2 14.8 0 3.2 0.4 12.3 0.6 15.4 0 0-0.4 5.5 4 5.5l-0.3-6.3-0.4-3.5 0.2-0.9c0.9 0.4 3.6 1.2 8.6 1.2 5.3 0 8-0.9 8.8-1.3l0.2 1-0.2 3.6-0.3 6.3c3 0.1 3.7-3 3.8-4.4s0.6-12.6 0.6-16.5c0.1-2.6-0.8-12.1-3.1-15z"
+        />
+        <path
+          style={{
+            opacity: 0.1,
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+          }}
+          d="m22.5 26c-0.1-2.1-1.5-2.8-4.8-2.8l2.2 9.6s1.8-1.7 3-1.8c0 0-0.4-4.6-0.4-5z"
+        />
+        <path
+          style={{
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            fill: "#BBBBBB",
+          }}
+          d="m12.7 13.2c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z"
+        />
+        <path
+          style={{
+            opacity: 8.0e-2,
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            fill: "#231F20",
+          }}
+          d="m9.4 6.8c0-3 2.1-5.5 4.9-6.3-0.5-0.1-1-0.2-1.6-0.2-3.5 0-6.4 2.9-6.4 6.4s2.9 6.4 6.4 6.4c0.6 0 1.1-0.1 1.6-0.2-2.8-0.6-4.9-3.1-4.9-6.1z"
+        />
+        <path
+          style={{
+            opacity: 0.1,
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+          }}
+          d="m8.3 22.4c-2 0.4-2.9 1.4-3.1 3.5l-0.6 18.6s1.7 0.7 3.6 0.9l0.1-23z"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/js/libs/keycloak-masthead/src/Masthead.tsx b/js/libs/keycloak-masthead/src/Masthead.tsx
index 72313c6cb2..b686106f94 100644
--- a/js/libs/keycloak-masthead/src/Masthead.tsx
+++ b/js/libs/keycloak-masthead/src/Masthead.tsx
@@ -16,6 +16,7 @@ import { ReactNode } from "react";
 import { KeycloakDropdown } from "./KeycloakDropdown";
 import { useTranslation } from "./translation/useTranslation";
 import { loggedInUserName } from "./util";
+import { DefaultAvatar } from "./DefaultAvatar";
 
 type BrandLogo = BrandProps & {
   onClick?: () => void;
@@ -109,9 +110,11 @@ const KeycloakMasthead = ({
               />
             </PageHeaderToolsItem>
           </PageHeaderToolsGroup>
-          <Avatar
-            {...{ src: picture || "/avatar.svg", alt: t("avatar"), ...avatar }}
-          />
+          {picture || avatar?.src ? (
+            <Avatar {...{ src: picture, alt: t("avatar"), ...avatar }} />
+          ) : (
+            <DefaultAvatar {...avatar} />
+          )}
         </PageHeaderTools>
       }
     />
diff --git a/js/libs/keycloak-masthead/src/svg.d.ts b/js/libs/keycloak-masthead/src/svg.d.ts
new file mode 100644
index 0000000000..3a982e1598
--- /dev/null
+++ b/js/libs/keycloak-masthead/src/svg.d.ts
@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: React.FC<React.SVGProps<SVGElement>>;
+  export default content;
+}
diff --git a/js/package-lock.json b/js/package-lock.json
index 0910ede86f..afb1044031 100644
--- a/js/package-lock.json
+++ b/js/package-lock.json
@@ -211,9 +211,9 @@
       "dev": true
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
-      "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==",
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
+      "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==",
       "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.18.6"