8000 refactor: Update users page to looks like others (#1850) · coder/coder@eb410b9 · GitHub
[go: up one dir, main page]
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
  • site/src
    • components
      • AvatarData
  • HeaderButton
  • Header
  • RoleSelect
  • UsersTable
  • pages

    • 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/Tab 527E leLoader"
    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)
    0