Skip to content

Commit d26b3b7

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor: Remove avatar from workspace name (#3006)
1 parent 680e24a commit d26b3b7

File tree

7 files changed

+81
-35
lines changed

7 files changed

+81
-35
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,13 @@ Example.args = {
1414
subtitle: "coder@coder.com",
1515
}
1616

17+
export const WithHighlightTitle = Template.bind({})
18+
WithHighlightTitle.args = {
19+
title: "coder",
20+
subtitle: "coder@coder.com",
21+
highlightTitle: true,
22+
}
23+
1724
export const WithLink = Template.bind({})
1825
WithLink.args = {
1926
title: "coder",

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

Lines changed: 16 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,39 @@ import Link from "@material-ui/core/Link"
33
import { makeStyles } from "@material-ui/core/styles"
44
import { FC } from "react"
55
import { Link as RouterLink } from "react-router-dom"
6-
import { combineClasses } from "../../util/combineClasses"
76
import { firstLetter } from "../../util/firstLetter"
7+
import {
8+
TableCellData,
9+
TableCellDataPrimary,
10+
TableCellDataSecondary,
11+
} from "../TableCellData/TableCellData"
812

913
export interface AvatarDataProps {
1014
title: string
1115
subtitle: string
16+
highlightTitle?: boolean
1217
link?: string
1318
}
1419

15-
export const AvatarData: FC<AvatarDataProps> = ({ title, subtitle, link }) => {
20+
export const AvatarData: FC<AvatarDataProps> = ({ title, subtitle, link, highlightTitle }) => {
1621
const styles = useStyles()
1722

1823
return (
1924
<div className={styles.root}>
2025
<Avatar className={styles.avatar}>{firstLetter(title)}</Avatar>
2126

2227
{link ? (
23-
<Link
24-
component={RouterLink}
25-
to={link}
26-
className={combineClasses([styles.info, styles.link])}
27-
>
28-
<b>{title}</b>
29-
<span>{subtitle}</span>
28+
<Link to={link} underline="none" component={RouterLink}>
29+
<TableCellData>
30+
<TableCellDataPrimary highlight={highlightTitle}>{title}</TableCellDataPrimary>
31+
<TableCellDataSecondary>{subtitle}</TableCellDataSecondary>
32+
</TableCellData>
3033
</Link>
3134
) : (
32-
<div className={styles.info}>
33-
<b>{title}</b>
34-
<span>{subtitle}</span>
35-
</div>
35+
<TableCellData>
36+
<TableCellDataPrimary highlight={highlightTitle}>{title}</TableCellDataPrimary>
37+
<TableCellDataSecondary>{subtitle}</TableCellDataSecondary>
38+
</TableCellData>
3639
)}
3740
</div>
3841
)
@@ -46,20 +49,4 @@ const useStyles = makeStyles((theme) => ({
4649
avatar: {
4750
marginRight: theme.spacing(1.5),
4851
},
49-
info: {
50-
display: "flex",
51-
flexDirection: "column",
52-
color: theme.palette.text.primary,
53-
54-
"& span": {
55-
fontSize: 12,
56-
color: theme.palette.text.secondary,
57-
},
58-
},
59-
link: {
60-
textDecoration: "none",
61-
"&:hover": {
62-
textDecoration: "underline",
63-
},
64-
},
6552
}))

‎site/src/components/TableCellData/TableCellData.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { makeStyles } from "@material-ui/core/styles"
2+
import React from "react"
3+
import { Stack } from "../Stack/Stack"
4+
5+
interface StyleProps {
6+
highlight?: boolean
7+
}
8+
9+
export const TableCellData: React.FC = ({ children }) => {
10+
return <Stack spacing={0}>{children}</Stack>
11+
}
12+
13+
export const TableCellDataPrimary: React.FC<{ highlight?: boolean }> = ({
14+
children,
15+
highlight,
16+
}) => {
17+
const styles = useStyles({ highlight })
18+
19+
return <span className={styles.primary}>{children}</span>
20+
}
21+
22+
export const TableCellDataSecondary: React.FC = ({ children }) => {
23+
const styles = useStyles()
24+
25+
return <span className={styles.secondary}>{children}</span>
26+
}
27+
28+
const useStyles = makeStyles((theme) => ({
29+
primary: {
30+
color: ({ highlight }: StyleProps) =>
31+
highlight ? theme.palette.text.primary : theme.palette.text.secondary,
32+
fontWeight: ({ highlight }: StyleProps) => (highlight ? 600 : undefined),
33+
},
34+
35+
secondary: {
36+
fontSize: 12,
37+
color: theme.palette.text.secondary,
38+
},
39+
}))

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const UsersTableBody: FC<UsersTableBodyProps> = ({
7272
return (
7373
<TableRow key={user.id}>
7474
<TableCell>
75-
<AvatarData title={user.username} subtitle={user.email} />
75+
<AvatarData title={user.username} subtitle={user.email} highlightTitle />
7676
</TableCell>
7777
<TableCell
7878
className={combineClasses([

‎site/src/components/WorkspacesTable/WorkspacesRow.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ import { useNavigate } from "react-router-dom"
1010
import { getDisplayStatus, getDisplayWorkspaceBuildInitiatedBy } from "../../util/workspace"
1111
import { WorkspaceItemMachineRef } from "../../xServices/workspaces/workspacesXService"
1212
import { AvatarData } from "../AvatarData/AvatarData"
13+
import {
14+
TableCellData,
15+
TableCellDataPrimary,
16+
TableCellDataSecondary,
17+
} from "../TableCellData/TableCellData"
1318
import { TableCellLink } from "../TableCellLink/TableCellLink"
1419
import { OutdatedHelpTooltip } from "../Tooltips"
1520

@@ -43,15 +48,19 @@ export const WorkspacesRow: FC<{ workspaceRef: WorkspaceItemMachineRef }> = ({ w
4348
className={styles.clickableTableRow}
4449
>
4550
<TableCellLink to={workspacePageLink}>
46-
<AvatarData title={workspace.name} subtitle={workspace.owner_name} />
51+
<TableCellData>
52+
<TableCellDataPrimary highlight>{workspace.name}</TableCellDataPrimary>
53+
<TableCellDataSecondary>{workspace.owner_name}</TableCellDataSecondary>
54+
</TableCellData>
4755
</TableCellLink>
56+
57+
<TableCellLink to={workspacePageLink}>{workspace.template_name}</TableCellLink>
4858
<TableCellLink to={workspacePageLink}>
4959
<AvatarData
5060
title={initiatedBy}
5161
subtitle={dayjs().to(dayjs(workspace.latest_build.created_at))}
5262
/>
5363
</TableCellLink>
54-
<TableCellLink to={workspacePageLink}>{workspace.template_name}</TableCellLink>
5564
<TableCellLink to={workspacePageLink}>
5665
{workspace.outdated ? (
5766
<span className={styles.outdatedLabel}>

‎site/src/components/WorkspacesTable/WorkspacesTable.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({ isLoading, workspace
2727
<TableHead>
2828
<TableRow>
2929
<TableCell width="25%">{Language.name}</TableCell>
30-
<TableCell width="20%">{Language.lastBuiltBy}</TableCell>
3130
<TableCell width="20%">{Language.template}</TableCell>
32-
<TableCell width="20%">{Language.version}</TableCell>
31+
<TableCell width="25%">{Language.lastBuiltBy}</TableCell>
32+
<TableCell width="15%">{Language.version}</TableCell>
3333
<TableCell width="15%">{Language.status}</TableCell>
3434
<TableCell width="1%"></TableCell>
3535
</TableRow>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,11 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
139139
className={styles.clickableTableRow}
140140
>
141141
<TableCellLink to={templatePageLink}>
142-
<AvatarData title={template.name} subtitle={template.description} />
142+
<AvatarData
143+
title={template.name}
144+
subtitle={template.description}
145+
highlightTitle
146+
/>
143147
</TableCellLink>
144148

145149
<TableCellLink to={templatePageLink}>

0 commit comments

Comments
 (0)