Skip to content

Commit 6f93acd

Browse files
AbhineetJainAbhineetJain
authored
feat: make template pages responsive (#3232)
1 parent 991b4f7 commit 6f93acd

File tree

7 files changed

+192
-181
lines changed

7 files changed

+192
-181
lines changed

‎site/src/components/TableContainer/TableContainer.tsx

-16
This file was deleted.

‎site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx

+64-61
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
22
import Table from "@material-ui/core/Table"
33
import TableBody from "@material-ui/core/TableBody"
44
import TableCell from "@material-ui/core/TableCell"
5+
import TableContainer from "@material-ui/core/TableContainer"
56
import TableHead from "@material-ui/core/TableHead"
67
import TableRow from "@material-ui/core/TableRow"
78
import { AvatarData } from "components/AvatarData/AvatarData"
@@ -26,70 +27,72 @@ export const TemplateResourcesTable: FC<TemplateResourcesProps> = ({ resources }
2627
const styles = useStyles()
2728

2829
return (
29-
<Table className={styles.table}>
30-
<TableHead>
31-
<TableHeaderRow>
32-
<TableCell>
33-
<Stack direction="row" spacing={0.5} alignItems="center">
34-
{Language.resourceLabel}
35-
<ResourcesHelpTooltip />
36-
</Stack>
37-
</TableCell>
38-
<TableCell className={styles.agentColumn}>
39-
<Stack direction="row" spacing={0.5} alignItems="center">
40-
{Language.agentLabel}
41-
<AgentHelpTooltip />
42-
</Stack>
43-
</TableCell>
44-
</TableHeaderRow>
45-
</TableHead>
46-
<TableBody>
47-
{resources.map((resource) => {
48-
// We need to initialize the agents to display the resource
49-
const agents = resource.agents ?? [null]
50-
return agents.map((agent, agentIndex) => {
51-
// If there is no agent, just display the resource name
52-
if (!agent) {
30+
<TableContainer className={styles.tableContainer}>
31+
<Table>
32+
<TableHead>
33+
<TableHeaderRow>
34+
<TableCell>
35+
<Stack direction="row" spacing={0.5} alignItems="center">
36+
{Language.resourceLabel}
37+
<ResourcesHelpTooltip />
38+
</Stack>
39+
</TableCell>
40+
<TableCell className={styles.agentColumn}>
41+
<Stack direction="row" spacing={0.5} alignItems="center">
42+
{Language.agentLabel}
43+
<AgentHelpTooltip />
44+
</Stack>
45+
</TableCell>
46+
</TableHeaderRow>
47+
</TableHead>
48+
<TableBody>
49+
{resources.map((resource) => {
50+
// We need to initialize the agents to display the resource
51+
const agents = resource.agents ?? [null]
52+
return agents.map((agent, agentIndex) => {
53+
// If there is no agent, just display the resource name
54+
if (!agent) {
55+
return (
56+
<TableRow>
57+
<TableCell className={styles.resourceNameCell}>
58+
<AvatarData
59+
title={resource.name}
60+
subtitle={resource.type}
61+
highlightTitle
62+
avatar={<ResourceAvatar type={resource.type} />}
63+
/>
64+
</TableCell>
65+
<TableCell colSpan={3}></TableCell>
66+
</TableRow>
67+
)
68+
}
69+
5370
return (
54-
<TableRow>
55-
<TableCell className={styles.resourceNameCell}>
56-
<AvatarData
57-
title={resource.name}
58-
subtitle={resource.type}
59-
highlightTitle
60-
avatar={<ResourceAvatar type={resource.type} />}
61-
/>
71+
<TableRow key={`${resource.id}-${agent.id}`}>
72+
{/* We only want to display the name in the first row because we are using rowSpan */}
73+
{/* The rowspan should be the same than the number of agents */}
74+
{agentIndex === 0 && (
75+
<TableCell className={styles.resourceNameCell} rowSpan={agents.length}>
76+
<AvatarData
77+
title={resource.name}
78+
subtitle={resource.type}
79+
highlightTitle
80+
avatar={<ResourceAvatar type={resource.type} />}
81+
/>
82+
</TableCell>
83+
)}
84+
85+
<TableCell className={styles.agentColumn}>
86+
{agent.name}
87+
<span className={styles.operatingSystem}>{agent.operating_system}</span>
6288
</TableCell>
63-
<TableCell colSpan={3}></TableCell>
6489
</TableRow>
6590
)
66-
}
67-
68-
return (
69-
<TableRow key={`${resource.id}-${agent.id}`}>
70-
{/* We only want to display the name in the first row because we are using rowSpan */}
71-
{/* The rowspan should be the same than the number of agents */}
72-
{agentIndex === 0 && (
73-
<TableCell className={styles.resourceNameCell} rowSpan={agents.length}>
74-
<AvatarData
75-
title={resource.name}
76-
subtitle={resource.type}
77-
highlightTitle
78-
avatar={<ResourceAvatar type={resource.type} />}
79-
/>
80-
</TableCell>
81-
)}
82-
83-
<TableCell className={styles.agentColumn}>
84-
{agent.name}
85-
<span className={styles.operatingSystem}>{agent.operating_system}</span>
86-
</TableCell>
87-
</TableRow>
88-
)
89-
})
90-
})}
91-
</TableBody>
92-
</Table>
91+
})
92+
})}
93+
</TableBody>
94+
</Table>
95+
</TableContainer>
9396
)
9497
}
9598

@@ -98,7 +101,7 @@ const useStyles = makeStyles((theme) => ({
98101
margin: 0,
99102
},
100103

101-
table: {
104+
tableContainer: {
102105
border: 0,
103106
},
104107

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import Table from "@material-ui/core/Table"
22
import TableBody from "@material-ui/core/TableBody"
33
import TableCell from "@material-ui/core/TableCell"
4+
import TableContainer from "@material-ui/core/TableContainer"
45
import TableHead from "@material-ui/core/TableHead"
56
import TableRow from "@material-ui/core/TableRow"
6-
import { TableContainer } from "components/TableContainer/TableContainer"
77
import { FC } from "react"
88
import * as TypesGen from "../../api/typesGenerated"
99
import { UsersTableBody } from "./UsersTableBody"

‎site/src/components/VersionsTable/VersionsTable.tsx

+44-41
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Theme } from "@material-ui/core/styles"
33
import Table from "@material-ui/core/Table"
44
import TableBody from "@material-ui/core/TableBody"
55
import TableCell from "@material-ui/core/TableCell"
6+
import TableContainer from "@material-ui/core/TableContainer"
67
import TableHead from "@material-ui/core/TableHead"
78
import TableRow from "@material-ui/core/TableRow"
89
import useTheme from "@material-ui/styles/useTheme"
@@ -27,48 +28,50 @@ export const VersionsTable: FC<VersionsTableProps> = ({ versions }) => {
2728
const theme: Theme = useTheme()
2829

2930
return (
30-
<Table data-testid="versions-table">
31-
<TableHead>
32-
<TableRow>
33-
<TableCell width="30%">{Language.nameLabel}</TableCell>
34-
<TableCell width="30%">{Language.createdAtLabel}</TableCell>
35-
<TableCell width="40%">{Language.createdByLabel}</TableCell>
36-
</TableRow>
37-
</TableHead>
38-
<TableBody>
39-
{isLoading && <TableLoader />}
40-
{versions &&
41-
versions
42-
.slice()
43-
.reverse()
44-
.map((version) => {
45-
return (
46-
<TableRow key={version.id} data-testid={`version-${version.id}`}>
47-
<TableCell>{version.name}</TableCell>
48-
<TableCell>
49-
<span style={{ color: theme.palette.text.secondary }}>
50-
{new Date(version.created_at).toLocaleString()}
51-
</span>
52-
</TableCell>
53-
<TableCell>
54-
<span style={{ color: theme.palette.text.secondary }}>
55-
{version.created_by_name}
56-
</span>
57-
</TableCell>
58-
</TableRow>
59-
)
60-
})}
61-
62-
{versions && versions.length === 0 && (
31+
<TableContainer>
32+
<Table data-testid="versions-table">
33+
<TableHead>
6334
<TableRow>
64-
<TableCell colSpan={999}>
65-
<Box p={4}>
66-
<EmptyState message={Language.emptyMessage} />
67-
</Box>
68-
</TableCell>
35+
<TableCell width="30%">{Language.nameLabel}</TableCell>
36+
<TableCell width="30%">{Language.createdAtLabel}</TableCell>
37+
<TableCell width="40%">{Language.createdByLabel}</TableCell>
6938
</TableRow>
70-
)}
71-
</TableBody>
72-
</Table>
39+
</TableHead>
40+
<TableBody>
41+
{isLoading && <TableLoader />}
42+
{versions &&
43+
versions
44+
.slice()
45+
.reverse()
46+
.map((version) => {
47+
return (
48+
<TableRow key={version.id} data-testid={`version-${version.id}`}>
49+
<TableCell>{version.name}</TableCell>
50+
<TableCell>
51+
<span style={{ color: theme.palette.text.secondary }}>
52+
{new Date(version.created_at).toLocaleString()}
53+
</span>
54+
</TableCell>
55+
<TableCell>
56+
<span style={{ color: theme.palette.text.secondary }}>
57+
{version.created_by_name}
58+
</span>
59+
</TableCell>
60+
</TableRow>
61+
)
62+
})}
63+
64+
{versions && versions.length === 0 && (
65+
<TableRow>
66+
<TableCell colSpan={999}>
67+
<Box p={4}>
68+
<EmptyState message={Language.emptyMessage} />
69+
</Box>
70+
</TableCell>
71+
</TableRow>
72+
)}
73+
</TableBody>
74+
</Table>
75+
</TableContainer>
7376
)
7477
}

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

+8
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,14 @@ AllStates.args = {
2626
],
2727
}
2828

29+
export const SmallViewport = Template.bind({})
30+
SmallViewport.args = {
31+
...AllStates.args,
32+
}
33+
SmallViewport.parameters = {
34+
chromatic: { viewports: [600] },
35+
}
36+
2937
export const EmptyCanCreate = Template.bind({})
3038
EmptyCanCreate.args = {
3139
canCreateTemplate: true,

0 commit comments

Comments
 (0)