refactor: Add group badge to diff groups from users (#4478)

site/src/components/GroupAvatar/GroupAvatar.stories.tsx

@@ -0,0 +1,14 @@
+import { Story } from "@storybook/react"
+import { GroupAvatar, GroupAvatarProps } from "./GroupAvatar"
+
+export default {
+  title: "components/GroupAvatar",
+  component: GroupAvatar,
+}
+
+const Template: Story<GroupAvatarProps> = (args) => <GroupAvatar {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  name: "My Group",
+}

site/src/components/GroupAvatar/GroupAvatar.tsx

@@ -0,0 +1,43 @@
+import Avatar from "@material-ui/core/Avatar"
+import Badge from "@material-ui/core/Badge"
+import { withStyles } from "@material-ui/core/styles"
+import Group from "@material-ui/icons/Group"
+import { FC } from "react"
+import { firstLetter } from "util/firstLetter"
+
+const StyledBadge = withStyles((theme) => ({
+  badge: {
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: "100%",
+    width: 24,
+    height: 24,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+
+    "& svg": {
+      width: 14,
+      height: 14,
+    },
+  },
+}))(Badge)
+
+export type GroupAvatarProps = {
+  name: string
+}
+
+export const GroupAvatar: FC<GroupAvatarProps> = ({ name }) => {
+  return (
+    <StyledBadge
+      overlap="circular"
+      anchorOrigin={{
+        vertical: "bottom",
+        horizontal: "right",
+      }}
+      badgeContent={<Group />}
+    >
+      <Avatar>{firstLetter(name)}</Avatar>
+    </StyledBadge>
+  )
+}

site/src/pages/GroupsPage/GroupsPageView.tsx

@@ -21,6 +21,7 @@ import React from "react"
 import { Link as RouterLink, useNavigate } from "react-router-dom"
 import { Paywall } from "components/Paywall/Paywall"
 import { Group } from "api/typesGenerated"
+import { GroupAvatar } from "components/GroupAvatar/GroupAvatar"
 
 export type GroupsPageViewProps = {
   groups: Group[] | undefined
@@ -135,6 +136,7 @@ export const GroupsPageView: React.FC<GroupsPageViewProps> = ({
                         >
                           <TableCell>
                             <AvatarData
+                              avatar={<GroupAvatar name={group.name} />}
                               title={group.name}
                               subtitle={`${group.members.length} members`}
                               highlightTitle

site/src/pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx

@@ -28,6 +28,7 @@ import {
 } from "components/UserOrGroupAutocomplete/UserOrGroupAutocomplete"
 import { FC, useState } from "react"
 import { Maybe } from "components/Conditionals/Maybe"
+import { GroupAvatar } from "components/GroupAvatar/GroupAvatar"
 
 type AddTemplateUserOrGroupProps = {
   organizationId: string
@@ -208,6 +209,7 @@ export const TemplatePermissionsPageView: FC<
                   <TableRow key={group.id}>
                     <TableCell>
                       <AvatarData
+                        avatar={<GroupAvatar name={group.name} />}
                         title={group.name}
                         subtitle={`${group.members.length} members`}
                         highlightTitle

site/src/testHelpers/entities.ts

@@ -73,7 +73,7 @@ export const MockUser: TypesGen.User = {
   status: "active",
   organization_ids: ["fc0774ce-cc9e-48d4-80ae-88f7a4d4a8b0"],
   roles: [MockOwnerRole],
-  avatar_url: "https://github.com/coder.png",
+  avatar_url: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
   last_seen_at: "",
 }