feat: add avatar urls to groups (#4525)

site/src/api/typesGenerated.ts

@@ -169,6 +169,7 @@ export interface CreateFirstUserResponse {
 // From codersdk/groups.go
 export interface CreateGroupRequest {
   readonly name: string
+  readonly avatar_url: string
 }
 
 // From codersdk/users.go
@@ -376,6 +377,7 @@ export interface Group {
   readonly name: string
   readonly organization_id: string
   readonly members: User[]
+  readonly avatar_url: string
 }
 
 // From codersdk/workspaceapps.go
@@ -491,6 +493,7 @@ export interface PatchGroupRequest {
   readonly add_users: string[]
   readonly remove_users: string[]
   readonly name: string
+  readonly avatar_url?: string
 }
 
 // From codersdk/provisionerdaemons.go

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

@@ -11,4 +11,5 @@ const Template: Story<GroupAvatarProps> = (args) => <GroupAvatar {...args} />
 export const Example = Template.bind({})
 Example.args = {
   name: "My Group",
+  avatarURL: "",
 }

site/src/components/GroupAvatar/GroupAvatar.tsx

@@ -25,9 +25,10 @@ const StyledBadge = withStyles((theme) => ({
 
 export type GroupAvatarProps = {
   name: string
+  avatarURL?: string
 }
 
-export const GroupAvatar: FC<GroupAvatarProps> = ({ name }) => {
+export const GroupAvatar: FC<GroupAvatarProps> = ({ name, avatarURL }) => {
   return (
     <StyledBadge
       overlap="circular"
@@ -37,7 +38,7 @@ export const GroupAvatar: FC<GroupAvatarProps> = ({ name }) => {
       }}
       badgeContent={<Group />}
     >
-      <Avatar>{firstLetter(name)}</Avatar>
+      <Avatar src={avatarURL}>{firstLetter(name)}</Avatar>
     </StyledBadge>
   )
 }

site/src/pages/GroupsPage/CreateGroupPageView.tsx

@@ -28,6 +28,7 @@ export const CreateGroupPageView: React.FC<CreateGroupPageViewProps> = ({
   const form = useFormik<CreateGroupRequest>({
     initialValues: {
       name: "",
+      avatar_url: "",
     },
     validationSchema,
     onSubmit,
@@ -48,6 +49,14 @@ export const CreateGroupPageView: React.FC<CreateGroupPageViewProps> = ({
             label="Name"
             variant="outlined"
           />
+          <TextField
+            {...getFieldHelpers("avatar_url")}
+            onChange={onChangeTrimmed(form)}
+            autoComplete="avatar url"
+            fullWidth
+            label="Avatar URL"
+            variant="outlined"
+          />
           <FormFooter onCancel={onCancel} isLoading={isLoading} />
         </form>
       </FullPageForm>

site/src/pages/GroupsPage/GroupsPageView.tsx

@@ -136,7 +136,12 @@ export const GroupsPageView: React.FC<GroupsPageViewProps> = ({
                         >
                           <TableCell>
                             <AvatarData
-                              avatar={<GroupAvatar name={group.name} />}
+                              avatar={
+                                <GroupAvatar
+                                  name={group.name}
+                                  avatarURL={group.avatar_url}
+                                />
+                              }
                               title={group.name}
                               subtitle={`${group.members.length} members`}
                               highlightTitle

site/src/pages/GroupsPage/SettingsGroupPageView.tsx

@@ -12,6 +12,7 @@ import * as Yup from "yup"
 
 type FormData = {
   name: string
+  avatar_url: string
 }
 
 const validationSchema = Yup.object({
@@ -28,6 +29,7 @@ const UpdateGroupForm: React.FC<{
   const form = useFormik<FormData>({
     initialValues: {
       name: group.name,
+      avatar_url: group.avatar_url,
     },
     validationSchema,
     onSubmit,
@@ -46,6 +48,14 @@ const UpdateGroupForm: React.FC<{
           label="Name"
           variant="outlined"
         />
+        <TextField
+          {...getFieldHelpers("avatar_url")}
+          onChange={onChangeTrimmed(form)}
+          autoFocus
+          fullWidth
+          label="Avatar URL"
+          variant="outlined"
+        />
         <FormFooter onCancel={onCancel} isLoading={isLoading} />
       </form>
     </FullPageForm>

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

@@ -241,7 +241,12 @@ export const TemplatePermissionsPageView: FC<
                   <TableRow key={group.id}>
                     <TableCell>
                       <AvatarData
-                        avatar={<GroupAvatar name={group.name} />}
+                        avatar={
+                          <GroupAvatar
+                            name={group.name}
+                            avatarURL={group.avatar_url}
+                          />
+                        }
                         title={group.name}
                         subtitle={getGroupSubtitle(group)}
                         highlightTitle

site/src/testHelpers/entities.ts

@@ -929,6 +929,7 @@ export const MockWorkspaceQuota: TypesGen.WorkspaceQuota = {
 export const MockGroup: TypesGen.Group = {
   id: "fbd2116a-8961-4954-87ae-e4575bd29ce0",
   name: "Front-End",
+  avatar_url: "https://example.com",
   organization_id: MockOrganization.id,
   members: [MockUser, MockUser2],
 }

site/src/util/groups.ts

@@ -5,6 +5,7 @@ export const everyOneGroup = (organizationId: string): Group => ({
   name: "Everyone",
   organization_id: organizationId,
   members: [],
+  avatar_url: "",
 })
 
 export const getGroupSubtitle = (group: Group): string => {

site/src/xServices/groups/editGroupXService.ts

@@ -29,7 +29,7 @@ export const editGroupMachine = createMachine(
       },
       events: {} as {
         type: "UPDATE"
-        data: { name: string }
+        data: { name: string; avatar_url: string }
       },
     },
     tsTypes: {} as import("./editGroupXService.typegen").Typegen0,