Fix rendering segment and metric revision history (#24097)

* Fix rendering segment and metric revision history

* Address Alexander's feedback

* Remove unused styled-system props

frontend/src/metabase/components/UserAvatar/UserAvatar.jsx

-/* eslint-disable react/prop-types */
-import React from "react";
-import styled from "@emotion/styled";
-import { color, height, width } from "styled-system";
-
-import { color as brandColor } from "metabase/lib/colors";
-
-const Avatar = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 999px;
-  font-weight: 900;
-  line-height: 1;
-  ${height};
-  ${width};
-  ${color};
-  background-color: ${({ bg = brandColor("brand") }) => bg};
-`;
-
-Avatar.defaultProps = {
-  color: "white",
-  height: ["3em"],
-  width: ["3em"],
-};
-
-function initial(name) {
-  return typeof name === "string" ? name.charAt(0).toUpperCase() : "";
-}
-
-function userInitials(user) {
-  if (user) {
-    return nameInitials(user) || emailInitials(user);
-  }
-
-  return null;
-}
-
-function nameInitials(user) {
-  return initial(user.first_name) + initial(user.last_name);
-}
-
-function emailInitials(user) {
-  const emailUsername = user.email.split("@")[0];
-  return emailUsername.slice(0, 2).toUpperCase();
-}
-
-const UserAvatar = ({ user, ...props }) => (
-  <Avatar {...props}>{userInitials(user) || "?"}</Avatar>
-);
-
-UserAvatar.displayName = "UserAvatar";
-
-export default UserAvatar;

frontend/src/metabase/components/UserAvatar/UserAvatar.styled.tsx

+import styled from "@emotion/styled";
+import { color as brandColor, color } from "metabase/lib/colors";
+
+export interface AvatarProps {
+  color?: string;
+  height?: string[];
+  width?: string[];
+  bg?: string;
+}
+
+export const Avatar = styled.div<AvatarProps>`
+  color: ${color("white")};
+  width: 3em;
+  height: 3em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 999px;
+  font-weight: 900;
+  line-height: 1;
+  background-color: ${({ bg = brandColor("brand") }) => bg};
+`;

frontend/src/metabase/components/UserAvatar/UserAvatar.tsx

+/* eslint-disable react/prop-types */
+import React from "react";
+
+import MetabaseUtils from "metabase/lib/utils";
+import { Avatar, AvatarProps } from "./UserAvatar.styled";
+
+interface UserAvatarProps extends AvatarProps {
+  user: User;
+}
+
+interface GroupProps {
+  user: Group;
+}
+
+interface User {
+  first_name: string | null;
+  last_name: string | null;
+  common_name: string;
+  email?: string;
+}
+
+interface Group {
+  first_name: string;
+}
+
+export default function UserAvatar({
+  user,
+  ...props
+}: UserAvatarProps | GroupProps) {
+  return <Avatar {...props}>{userInitials(user) || "?"}</Avatar>;
+}
+
+function initial(name?: string | null) {
+  return name ? name.charAt(0).toUpperCase() : "";
+}
+
+function userInitials(user: User | Group) {
+  if (user) {
+    return nameInitials(user) || emailInitials(user as User);
+  }
+
+  return null;
+}
+
+function nameInitials(user: User | Group) {
+  if ("common_name" in user) {
+    return initial(user.first_name) + initial(user.last_name);
+  }
+
+  // render group
+  return initial(user.first_name);
+}
+
+function emailInitials(user: User) {
+  const email = [user.email, user.common_name].find(maybeEmail =>
+    MetabaseUtils.isEmail(maybeEmail),
+  );
+  if (email) {
+    const emailUsername = email.split("@")[0];
+    return emailUsername.slice(0, 2).toUpperCase();
+  }
+
+  return null;
+}

frontend/src/metabase/components/UserAvatar/UserAvatar.unit.spec.tsx

+import React from "react";
+import { render } from "@testing-library/react";
+import UserAvatar from "./UserAvatar";
+
+describe("UserAvatar", () => {
+  describe("Users", () => {
+    test("render user with name", async () => {
+      const revisionUser = {
+        first_name: "Testy",
+        last_name: "Tableton",
+        common_name: "Testy Tableton",
+        email: "user@metabase.test",
+      };
+
+      const { findByText } = render(<UserAvatar user={revisionUser} />);
+
+      expect(await findByText("TT")).toBeInTheDocument();
+    });
+
+    test("render user without name", async () => {
+      const revisionUser = {
+        first_name: null,
+        last_name: null,
+        common_name: "user@metabase.test",
+        email: "user@metabase.test",
+      };
+
+      const { findByText } = render(<UserAvatar user={revisionUser} />);
+
+      expect(await findByText("US")).toBeInTheDocument();
+    });
+  });
+
+  describe("Revision history", () => {
+    test("render user with name", async () => {
+      const revisionUser = {
+        first_name: "Testy",
+        last_name: "Tableton",
+        common_name: "Testy Tableton",
+      };
+
+      const { findByText } = render(<UserAvatar user={revisionUser} />);
+
+      expect(await findByText("TT")).toBeInTheDocument();
+    });
+
+    test("render user without name", async () => {
+      const revisionUser = {
+        first_name: null,
+        last_name: null,
+        common_name: "user@metabase.test",
+      };
+
+      const { findByText } = render(<UserAvatar user={revisionUser} />);
+
+      expect(await findByText("US")).toBeInTheDocument();
+    });
+  });
+
+  describe("Admin > Groups", () => {
+    test("render group name", async () => {
+      const revisionUser = {
+        first_name: "Admin",
+      };
+
+      const { findByText } = render(<UserAvatar user={revisionUser} />);
+
+      expect(await findByText("A")).toBeInTheDocument();
+    });
+  });
+});