feat: make template pages responsive (#3232)

This commit is contained in:
Abhineet Jain
2022-07-26 16:31:58 -04:00
committed by GitHub
parent 991b4f7480
commit 6f93acd964
7 changed files with 193 additions and 182 deletions

View File

@ -1,16 +0,0 @@
import { makeStyles } from "@material-ui/core/styles"
import { FC } from "react"
export const TableContainer: FC = ({ children }) => {
const styles = useStyles()
return <div className={styles.wrapper}>{children}</div>
}
const useStyles = makeStyles((theme) => ({
wrapper: {
overflowX: "auto",
borderRadius: theme.shape.borderRadius,
border: `1px solid ${theme.palette.divider}`,
},
}))

View File

@ -2,6 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
import Table from "@material-ui/core/Table" import Table from "@material-ui/core/Table"
import TableBody from "@material-ui/core/TableBody" import TableBody from "@material-ui/core/TableBody"
import TableCell from "@material-ui/core/TableCell" import TableCell from "@material-ui/core/TableCell"
import TableContainer from "@material-ui/core/TableContainer"
import TableHead from "@material-ui/core/TableHead" import TableHead from "@material-ui/core/TableHead"
import TableRow from "@material-ui/core/TableRow" import TableRow from "@material-ui/core/TableRow"
import { AvatarData } from "components/AvatarData/AvatarData" import { AvatarData } from "components/AvatarData/AvatarData"
@ -26,7 +27,8 @@ export const TemplateResourcesTable: FC<TemplateResourcesProps> = ({ resources }
const styles = useStyles() const styles = useStyles()
return ( return (
<Table className={styles.table}> <TableContainer className={styles.tableContainer}>
<Table>
<TableHead> <TableHead>
<TableHeaderRow> <TableHeaderRow>
<TableCell> <TableCell>
@ -90,6 +92,7 @@ export const TemplateResourcesTable: FC<TemplateResourcesProps> = ({ resources }
})} })}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer>
) )
} }
@ -98,7 +101,7 @@ const useStyles = makeStyles((theme) => ({
margin: 0, margin: 0,
}, },
table: { tableContainer: {
border: 0, border: 0,
}, },

View File

@ -1,9 +1,9 @@
import Table from "@material-ui/core/Table" import Table from "@material-ui/core/Table"
import TableBody from "@material-ui/core/TableBody" import TableBody from "@material-ui/core/TableBody"
import TableCell from "@material-ui/core/TableCell" import TableCell from "@material-ui/core/TableCell"
import TableContainer from "@material-ui/core/TableContainer"
import TableHead from "@material-ui/core/TableHead" import TableHead from "@material-ui/core/TableHead"
import TableRow from "@material-ui/core/TableRow" import TableRow from "@material-ui/core/TableRow"
import { TableContainer } from "components/TableContainer/TableContainer"
import { FC } from "react" import { FC } from "react"
import * as TypesGen from "../../api/typesGenerated" import * as TypesGen from "../../api/typesGenerated"
import { UsersTableBody } from "./UsersTableBody" import { UsersTableBody } from "./UsersTableBody"

View File

@ -3,6 +3,7 @@ import { Theme } from "@material-ui/core/styles"
import Table from "@material-ui/core/Table" import Table from "@material-ui/core/Table"
import TableBody from "@material-ui/core/TableBody" import TableBody from "@material-ui/core/TableBody"
import TableCell from "@material-ui/core/TableCell" import TableCell from "@material-ui/core/TableCell"
import TableContainer from "@material-ui/core/TableContainer"
import TableHead from "@material-ui/core/TableHead" import TableHead from "@material-ui/core/TableHead"
import TableRow from "@material-ui/core/TableRow" import TableRow from "@material-ui/core/TableRow"
import useTheme from "@material-ui/styles/useTheme" import useTheme from "@material-ui/styles/useTheme"
@ -27,6 +28,7 @@ export const VersionsTable: FC<VersionsTableProps> = ({ versions }) => {
const theme: Theme = useTheme() const theme: Theme = useTheme()
return ( return (
<TableContainer>
<Table data-testid="versions-table"> <Table data-testid="versions-table">
<TableHead> <TableHead>
<TableRow> <TableRow>
@ -70,5 +72,6 @@ export const VersionsTable: FC<VersionsTableProps> = ({ versions }) => {
)} )}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer>
) )
} }

View File

@ -26,6 +26,14 @@ AllStates.args = {
], ],
} }
export const SmallViewport = Template.bind({})
SmallViewport.args = {
...AllStates.args,
}
SmallViewport.parameters = {
chromatic: { viewports: [600] },
}
export const EmptyCanCreate = Template.bind({}) export const EmptyCanCreate = Template.bind({})
EmptyCanCreate.args = { EmptyCanCreate.args = {
canCreateTemplate: true, canCreateTemplate: true,

View File

@ -3,6 +3,7 @@ import { fade, makeStyles } from "@material-ui/core/styles"
import Table from "@material-ui/core/Table" import Table from "@material-ui/core/Table"
import TableBody from "@material-ui/core/TableBody" import TableBody from "@material-ui/core/TableBody"
import TableCell from "@material-ui/core/TableCell" import TableCell from "@material-ui/core/TableCell"
import TableContainer from "@material-ui/core/TableContainer"
import TableHead from "@material-ui/core/TableHead" import TableHead from "@material-ui/core/TableHead"
import TableRow from "@material-ui/core/TableRow" import TableRow from "@material-ui/core/TableRow"
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight" import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
@ -94,6 +95,7 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
)} )}
</PageHeader> </PageHeader>
<TableContainer>
<Table> <Table>
<TableHead> <TableHead>
<TableRow> <TableRow>
@ -112,7 +114,9 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
<EmptyState <EmptyState
message={Language.emptyMessage} message={Language.emptyMessage}
description={ description={
props.canCreateTemplate ? Language.emptyDescription : Language.emptyViewNoPerms props.canCreateTemplate
? Language.emptyDescription
: Language.emptyViewNoPerms
} }
descriptionClassName={styles.emptyDescription} descriptionClassName={styles.emptyDescription}
cta={<CodeExample code="coder template init" />} cta={<CodeExample code="coder template init" />}
@ -161,6 +165,7 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
})} })}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer>
</Margins> </Margins>
) )
} }

View File

@ -17,6 +17,14 @@ Admin.args = {
canEditUsers: true, canEditUsers: true,
} }
export const SmallViewport = Template.bind({})
SmallViewport.args = {
...Admin.args,
}
SmallViewport.parameters = {
chromatic: { viewports: [600] },
}
export const Member = Template.bind({}) export const Member = Template.bind({})
Member.args = { ...Admin.args, canCreateUser: false, canEditUsers: false } Member.args = { ...Admin.args, canCreateUser: false, canEditUsers: false }