Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 7eacab8

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor: Update users page to looks like others (coder#1850)
1 parent e2030bb commit 7eacab8

File tree

12 files changed

+149
-262
lines changed

12 files changed

+149
-262
lines changed

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

+23
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: "[email protected]",
16+
}
17+
18+
export const WithLink = Template.bind({})
19+
WithLink.args = {
20+
title: "coder",
21+
subtitle: "[email protected]",
22+
link: "/users/coder",
23+
}

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

+67
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

-28
This file was deleted.

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

-118
This file was deleted.

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

-35
This file was deleted.

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

+5
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

+2-2
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

+6-32
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)