From aedb1f90ef1f6268cba84ee00e3c641c2b51445b Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Tue, 11 Oct 2022 13:26:08 +0000 Subject: [PATCH 1/2] refactor: Add group badge to diff groups from users --- .../GroupAvatar/GroupAvatar.stories.tsx | 14 ++++++ .../components/GroupAvatar/GroupAvatar.tsx | 43 +++++++++++++++++++ site/src/pages/GroupsPage/GroupsPageView.tsx | 2 + .../TemplatePermissionsPageView.tsx | 2 + site/src/testHelpers/entities.ts | 2 +- 5 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 site/src/components/GroupAvatar/GroupAvatar.stories.tsx create mode 100644 site/src/components/GroupAvatar/GroupAvatar.tsx diff --git a/site/src/components/GroupAvatar/GroupAvatar.stories.tsx b/site/src/components/GroupAvatar/GroupAvatar.stories.tsx new file mode 100644 index 0000000000000..315a179c3ca28 --- /dev/null +++ b/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 = (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 new file mode 100644 index 0000000000000..de39dbfed71e7 --- /dev/null +++ b/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 React 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: React.FC = ({ name }) => { + return ( + } + > + {firstLetter(name)} + + ) +} diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx index fb25c93940c94..aea4a80632f8c 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.tsx +++ b/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 = ({ > } 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 index a423d503ea2e2..8beb0741d8945 100644 --- a/site/src/pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx +++ b/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< } title={group.name} subtitle={`${group.members.length} members`} highlightTitle diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts index c633b3e8fb88d..2d440bdbf4f8c 100644 --- a/site/src/testHelpers/entities.ts +++ b/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: "", } From cfb74c5421d51e1584085026b1aaae0fcc66b8ac Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Tue, 11 Oct 2022 11:30:51 -0300 Subject: [PATCH 2/2] Apply suggestions from code review Co-authored-by: Kira Pilot --- site/src/components/GroupAvatar/GroupAvatar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/components/GroupAvatar/GroupAvatar.tsx b/site/src/components/GroupAvatar/GroupAvatar.tsx index de39dbfed71e7..6f3b043db080d 100644 --- a/site/src/components/GroupAvatar/GroupAvatar.tsx +++ b/site/src/components/GroupAvatar/GroupAvatar.tsx @@ -2,7 +2,7 @@ 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 React from "react" +import { FC } from "react" import { firstLetter } from "util/firstLetter" const StyledBadge = withStyles((theme) => ({ @@ -27,7 +27,7 @@ export type GroupAvatarProps = { name: string } -export const GroupAvatar: React.FC = ({ name }) => { +export const GroupAvatar: FC = ({ name }) => { return (