Oct 11, 2022 · Oct 11, 2022 · Oct 11, 2022 · Oct 11, 2022 · Oct 11, 2022
diff --git a/site/src/components/GroupAvatar/GroupAvatar.stories.tsx b/site/src/components/GroupAvatar/GroupAvatar.stories.tsx
 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",
 }
diff --git a/site/src/components/GroupAvatar/GroupAvatar.tsx b/site/src/components/GroupAvatar/GroupAvatar.tsx
 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>
  )
 }
diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx
 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
                        >
                          <TableCell>
                            <AvatarData
                              avatar={<GroupAvatar name={group.name} />}
                              title={group.name}
                              subtitle={`${group.members.length} members`}
                              highlightTitle
diff --git a/site/src/pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx b/site/src/pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx
 } 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
                  <TableRow key={group.id}>
                    <TableCell>
                      <AvatarData
                        avatar={<GroupAvatar name={group.name} />}
                        title={group.name}
                        subtitle={`${group.members.length} members`}
                        highlightTitle
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
  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: "",
 }
Original file line number	Diff line number	Diff line change
		@@ -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",
		}
Original file line number	Diff line number	Diff line change
		@@ -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)
Copy link Member Kira-PilotOct 11, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. What does`(Badge)` do here? Is that applying the styles for`Badge` as well? Copy link CollaboratorAuthor BrunoQuaresmaOct 11, 2022• edited Loading Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Yes, it is a better way, IMO, to modify component styles. So what it does is extend the`Badge` component with the new styles. Kira-Pilot reacted with thumbs up emoji

		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>
		)
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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
Expand DownExpand Up		@@ -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
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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
Expand DownExpand Up		@@ -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
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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: "",
		}

Expand Down