Skip to content

Commit eb410b9

Browse files
BrunoQuaresmakylecarbs
BrunoQuaresma
authored and
kylecarbs
committed
refactor: Update users page to looks like others (#1850)
1 parent 4cae96e commit eb410b9

File tree

12 files changed

+149
-262
lines changed

12 files changed

+149
-262
lines changed

‎site/src/components/AvatarData/AvatarData.stories.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Story } from "@storybook/react"
2+
import React from "react"
3+
import { AvatarData, AvatarDataProps } from "./AvatarData"
4+
5+
export default {
6+
title: "components/AvatarData",
7+
component: AvatarData,
8+
}
9+
10+
const Template: Story<AvatarDataProps> = (args: AvatarDataProps) => <AvatarData {...args} />
11+
12+
export const Example = Template.bind({})
13+
Example.args = {
14+
title: "coder",
15+
subtitle: "coder@coder.com",
16+
}
17+
18+
export const WithLink = Template.bind({})
19+
WithLink.args = {
20+
title: "coder",
21+
subtitle: "coder@coder.com",
22+
link: "/users/coder",
23+
}

‎site/src/components/AvatarData/AvatarData.tsx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import Avatar from "@material-ui/core/Avatar"
2+
import Link from "@material-ui/core/Link"
3+
import { makeStyles } from "@material-ui/core/styles"
4+
import React from "react"
5+
import { Link as RouterLink } from "react-router-dom"
6+
import { combineClasses } from "../../util/combineClasses"
7+
import { firstLetter } from "../../util/firstLetter"
8+
9+
export interface AvatarDataProps {
10+
title: string
11+
subtitle: string
12+
link?: string
13+
}
14+
15+
export const AvatarData: React.FC<AvatarDataProps> = ({ title, subtitle, link }) => {
16+
const styles = useStyles()
17+
18+
return (
19+
<div className={styles.root}>
20+
<Avatar variant="square" className={styles.avatar}>
21+
{firstLetter(title)}
22+
</Avatar>
23+
24+
{link ? (
25+
<Link component={RouterLink} to={link} className={combineClasses([styles.info, styles.link])}>
26+
<b>{title}</b>
27+
<span>{subtitle}</span>
28+
</Link>
29+
) : (
30+
<div className={styles.info}>
31+
<b>{title}</b>
32+
<span>{subtitle}</span>
33+
</div>
34+
)}
35+
</div>
36+
)
37+
}
38+
39+
const useStyles = makeStyles((theme) => ({
40+
root: {
41+
display: "flex",
42+
alignItems: "center",
43+
},
44+
avatar: {
45+
borderRadius: 2,
46+
marginRight: theme.spacing(1),
47+
width: 24,
48+
height: 24,
49+
fontSize: 16,
50+
},
51+
info: {
52+
display: "flex",
53+
flexDirection: "column",
54+
color: theme.palette.text.primary,
55+
56+
"& span": {
57+
fontSize: 12,
58+
color: theme.palette.text.secondary,
59+
},
60+
},
61+
link: {
62+
textDecoration: "none",
63+
"&:hover": {
64+
textDecoration: "underline",
65+
},
66+
},
67+
}))

‎site/src/components/Header/Header.test.tsx

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎site/src/components/Header/Header.tsx

Lines changed: 0 additions & 118 deletions
This file was deleted.

‎site/src/components/HeaderButton/HeaderButton.tsx

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎site/src/components/RoleSelect/RoleSelect.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,5 +55,10 @@ const useStyles = makeStyles((theme: Theme) => ({
5555
// Set a fixed width for the select. It avoids selects having different sizes
5656
// depending on how many roles they have selected.
5757
width: theme.spacing(25),
58+
"& .MuiSelect-root": {
59+
// Adjusting padding because it does not have label
60+
paddingTop: theme.spacing(1.5),
61+
paddingBottom: theme.spacing(1.5),
62+
},
5863
},
5964
}))

‎site/src/components/UsersTable/UsersTable.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ import TableHead from "@material-ui/core/TableHead"
66
import TableRow from "@material-ui/core/TableRow"
77
import React from "react"
88
import * as TypesGen from "../../api/typesGenerated"
9+
import { AvatarData } from "../AvatarData/AvatarData"
910
import { EmptyState } from "../EmptyState/EmptyState"
1011
import { RoleSelect } from "../RoleSelect/RoleSelect"
1112
import { TableLoader } from "../TableLoader/TableLoader"
1213
import { TableRowMenu } from "../TableRowMenu/TableRowMenu"
13-
import { UserCell } from "../UserCell/UserCell"
1414

1515
export const Language = {
1616
pageTitle: "Users",
@@ -60,7 +60,7 @@ export const UsersTable: React.FC<UsersTableProps> = ({
6060
users.map((u) => (
6161
<TableRow key={u.id}>
6262
<TableCell>
63-
<UserCell Avatar={{ username: u.username }} primaryText={u.username} caption={u.email} />{" "}
63+
<AvatarData title={u.username} subtitle={u.email} />
6464
</TableCell>
6565
<TableCell>
6666
{canEditUsers ? (

‎site/src/pages/TemplatesPage/TemplatesPageView.tsx

Lines changed: 6 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import Avatar from "@material-ui/core/Avatar"
2-
import Box from "@material-ui/core/Box"
31
import Link from "@material-ui/core/Link"
42
import { makeStyles } from "@material-ui/core/styles"
53
import Table from "@material-ui/core/Table"
@@ -12,10 +10,10 @@ import relativeTime from "dayjs/plugin/relativeTime"
1210
import React from "react"
1311
import { Link as RouterLink } from "react-router-dom"
1412
import * as TypesGen from "../../api/typesGenerated"
13+
import { AvatarData } from "../../components/AvatarData/AvatarData"
1514
import { Margins } from "../../components/Margins/Margins"
1615
import { Stack } from "../../components/Stack/Stack"
1716
import { TableLoader } from "../../components/TableLoader/TableLoader"
18-
import { firstLetter } from "../../util/firstLetter"
1917

2018
dayjs.extend(relativeTime)
2119

@@ -73,15 +71,11 @@ export const TemplatesPageView: React.FC<TemplatesPageViewProps> = (props) => {
7371
{props.templates?.map((template) => (
7472
<TableRow key={template.id}>
7573
<TableCell>
76-
<Box alignItems="center" display="flex">
77-
<Avatar variant="square" className={styles.templateAvatar}>
78-
{firstLetter(template.name)}
79-
</Avatar>
80-
<Link component={RouterLink} to={`/templates/${template.name}`} className={styles.templateLink}>
81-
<b>{template.name}</b>
82-
<span>{template.description}</span>
83-
</Link>
84-
</Box>
74+
<AvatarData
75+
title={template.name}
76+
subtitle={template.description}
77+
link={`/templates/${template.name}`}
78+
/>
8579
</TableCell>
8680

8781
<TableCell>{Language.developerCount(template.workspace_owner_count)}</TableCell>
@@ -114,24 +108,4 @@ const useStyles = makeStyles((theme) => ({
114108
lineHeight: `${theme.spacing(3)}px`,
115109
},
116110
},
117-
templateAvatar: {
118-
borderRadius: 2,
119-
marginRight: theme.spacing(1),
120-
width: 24,
121-
height: 24,
122-
fontSize: 16,
123-
},
124-
templateLink: {
125-
display: "flex",
126-
flexDirection: "column",
127-
color: theme.palette.text.primary,
128-
textDecoration: "none",
129-
"&:hover": {
130-
textDecoration: "underline",
131-
},
132-
"& span": {
133-
fontSize: 12,
134-
color: theme.palette.text.secondary,
135-
},
136-
},
137111
}))

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy