Commita64731e

authored

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

1 parent934777d commita64731eCopy full SHA for a64731e

File tree

+62

-1

lines changed

+62

-1

lines changed

Lines changed: 14 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,14 @@`
	`1`	`+import{Story}from"@storybook/react"`
	`2`	`+import{GroupAvatar,GroupAvatarProps}from"./GroupAvatar"`
	`3`	`+`
	`4`	`+exportdefault{`
	`5`	`+title:"components/GroupAvatar",`
	`6`	`+component:GroupAvatar,`
	`7`	`+}`
	`8`	`+`
	`9`	`+constTemplate:Story<GroupAvatarProps>=(args)=><GroupAvatar{...args}/>`
	`10`	`+`
	`11`	`+exportconstExample=Template.bind({})`
	`12`	`+Example.args={`
	`13`	`+name:"My Group",`
	`14`	`+}`

Lines changed: 43 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,43 @@`
	`1`	`+importAvatarfrom"@material-ui/core/Avatar"`
	`2`	`+importBadgefrom"@material-ui/core/Badge"`
	`3`	`+import{withStyles}from"@material-ui/core/styles"`
	`4`	`+importGroupfrom"@material-ui/icons/Group"`
	`5`	`+import{FC}from"react"`
	`6`	`+import{firstLetter}from"util/firstLetter"`
	`7`	`+`
	`8`	`+constStyledBadge=withStyles((theme)=>({`
	`9`	`+badge:{`
	`10`	`+backgroundColor:theme.palette.background.paper,`
	`11`	+border:`1px solid${theme.palette.divider}`,
	`12`	`+borderRadius:"100%",`
	`13`	`+width:24,`
	`14`	`+height:24,`
	`15`	`+display:"flex",`
	`16`	`+alignItems:"center",`
	`17`	`+justifyContent:"center",`
	`18`	`+`
	`19`	`+"& svg":{`
	`20`	`+width:14,`
	`21`	`+height:14,`
	`22`	`+},`
	`23`	`+},`
	`24`	`+}))(Badge)`
	`25`	`+`
	`26`	`+exporttypeGroupAvatarProps={`
	`27`	`+name:string`
	`28`	`+}`
	`29`	`+`
	`30`	`+exportconstGroupAvatar:FC<GroupAvatarProps>=({ name})=>{`
	`31`	`+return(`
	`32`	`+<StyledBadge`
	`33`	`+overlap="circular"`
	`34`	`+anchorOrigin={{`
	`35`	`+vertical:"bottom",`
	`36`	`+horizontal:"right",`
	`37`	`+}}`
	`38`	`+badgeContent={<Group/>}`
	`39`	`+>`
	`40`	`+<Avatar>{firstLetter(name)}</Avatar>`
	`41`	`+</StyledBadge>`
	`42`	`+)`
	`43`	`+}`

Lines changed: 2 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,7 @@ import React from "react"`
`21`	`21`	`import{LinkasRouterLink,useNavigate}from"react-router-dom"`
`22`	`22`	`import{Paywall}from"components/Paywall/Paywall"`
`23`	`23`	`import{Group}from"api/typesGenerated"`
	`24`	`+import{GroupAvatar}from"components/GroupAvatar/GroupAvatar"`
`24`	`25`
`25`	`26`	`exporttypeGroupsPageViewProps={`
`26`	`27`	`groups:Group[]\|undefined`
`@@ -135,6 +136,7 @@ export const GroupsPageView: React.FC<GroupsPageViewProps> = ({`
`135`	`136`	`>`
`136`	`137`	`<TableCell>`
`137`	`138`	`<AvatarData`
	`139`	`+avatar={<GroupAvatarname={group.name}/>}`
`138`	`140`	`title={group.name}`
`139`	`141`	subtitle={`${group.members.length} members`}
`140`	`142`	`highlightTitle`

Lines changed: 2 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,7 @@ import {`
`28`	`28`	`}from"components/UserOrGroupAutocomplete/UserOrGroupAutocomplete"`
`29`	`29`	`import{FC,useState}from"react"`
`30`	`30`	`import{Maybe}from"components/Conditionals/Maybe"`
	`31`	`+import{GroupAvatar}from"components/GroupAvatar/GroupAvatar"`
`31`	`32`
`32`	`33`	`typeAddTemplateUserOrGroupProps={`
`33`	`34`	`organizationId:string`
`@@ -208,6 +209,7 @@ export const TemplatePermissionsPageView: FC<`
`208`	`209`	`<TableRowkey={group.id}>`
`209`	`210`	`<TableCell>`
`210`	`211`	`<AvatarData`
	`212`	`+avatar={<GroupAvatarname={group.name}/>}`
`211`	`213`	`title={group.name}`
`212`	`214`	subtitle={`${group.members.length} members`}
`213`	`215`	`highlightTitle`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,7 @@ export const MockUser: TypesGen.User = {`
`73`	`73`	`status:"active",`
`74`	`74`	`organization_ids:["fc0774ce-cc9e-48d4-80ae-88f7a4d4a8b0"],`
`75`	`75`	`roles:[MockOwnerRole],`
`76`		`-avatar_url:"https://github.com/coder.png",`
	`76`	`+avatar_url:"https://avatars.githubusercontent.com/u/95932066?s=200&v=4",`
`77`	`77`	`last_seen_at:"",`
`78`	`78`	`}`
`79`	`79`

Comments

(0)