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

Skip to content

Commit d2aa75d

Browse files
BrunoQuaresmaBrunoQuaresma
authored
fix: Responsive for workspaces and workspace page (#3189)
1 parent fbd1a27 commit d2aa75d

File tree

16 files changed

+287
-459
lines changed

16 files changed

+287
-459
lines changed

‎site/src/components/BuildsTable/BuildsTable.tsx‎

Lines changed: 67 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { fade, makeStyles, 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 KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
@@ -37,72 +38,74 @@ export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
3738
const styles = useStyles()
3839

3940
return (
40-
<Table className={className} data-testid="builds-table">
41-
<TableHead>
42-
<TableRow>
43-
<TableCell width="20%">{Language.actionLabel}</TableCell>
44-
<TableCell width="20%">{Language.durationLabel}</TableCell>
45-
<TableCell width="40%">{Language.startedAtLabel}</TableCell>
46-
<TableCell width="20%">{Language.statusLabel}</TableCell>
47-
<TableCell></TableCell>
48-
</TableRow>
49-
</TableHead>
50-
<TableBody>
51-
{isLoading && <TableLoader />}
52-
{builds &&
53-
builds.map((build) => {
54-
const status = getDisplayWorkspaceBuildStatus(theme, build)
55-
const buildPageLink = `/@${username}/${workspaceName}/builds/${build.build_number}`
56-
57-
return (
58-
<TableRow
59-
hover
60-
key={build.id}
61-
data-testid={`build-${build.id}`}
62-
tabIndex={0}
63-
onKeyDown={(event) => {
64-
if (event.key === "Enter") {
65-
navigate(buildPageLink)
66-
}
67-
}}
68-
className={styles.clickableTableRow}
69-
>
70-
<TableCellLink to={buildPageLink}>{build.transition}</TableCellLink>
71-
<TableCellLink to={buildPageLink}>
72-
<span style={{ color: theme.palette.text.secondary }}>
73-
{displayWorkspaceBuildDuration(build)}
74-
</span>
75-
</TableCellLink>
76-
<TableCellLink to={buildPageLink}>
77-
<span style={{ color: theme.palette.text.secondary }}>
78-
{new Date(build.created_at).toLocaleString()}
79-
</span>
80-
</TableCellLink>
81-
<TableCellLink to={buildPageLink}>
82-
<span style={{ color: status.color }} className={styles.status}>
83-
{status.status}
84-
</span>
85-
</TableCellLink>
86-
<TableCellLink to={buildPageLink}>
87-
<div className={styles.arrowCell}>
88-
<KeyboardArrowRight className={styles.arrowRight} />
89-
</div>
90-
</TableCellLink>
91-
</TableRow>
92-
)
93-
})}
94-
95-
{builds && builds.length === 0 && (
41+
<TableContainer className={className}>
42+
<Table data-testid="builds-table" aria-describedby="builds table">
43+
<TableHead>
9644
<TableRow>
97-
<TableCell colSpan={999}>
98-
<Box p={4}>
99-
<EmptyState message={Language.emptyMessage} />
100-
</Box>
101-
</TableCell>
45+
<TableCell width="20%">{Language.actionLabel}</TableCell>
46+
<TableCell width="20%">{Language.durationLabel}</TableCell>
47+
<TableCell width="40%">{Language.startedAtLabel}</TableCell>
48+
<TableCell width="20%">{Language.statusLabel}</TableCell>
49+
<TableCell></TableCell>
10250
</TableRow>
103-
)}
104-
</TableBody>
105-
</Table>
51+
</TableHead>
52+
<TableBody>
53+
{isLoading && <TableLoader />}
54+
{builds &&
55+
builds.map((build) => {
56+
const status = getDisplayWorkspaceBuildStatus(theme, build)
57+
const buildPageLink = `/@${username}/${workspaceName}/builds/${build.build_number}`
58+
59+
return (
60+
<TableRow
61+
hover
62+
key={build.id}
63+
data-testid={`build-${build.id}`}
64+
tabIndex={0}
65+
onKeyDown={(event) => {
66+
if (event.key === "Enter") {
67+
navigate(buildPageLink)
68+
}
69+
}}
70+
className={styles.clickableTableRow}
71+
>
72+
<TableCellLink to={buildPageLink}>{build.transition}</TableCellLink>
73+
<TableCellLink to={buildPageLink}>
74+
<span style={{ color: theme.palette.text.secondary }}>
75+
{displayWorkspaceBuildDuration(build)}
76+
</span>
77+
</TableCellLink>
78+
<TableCellLink to={buildPageLink}>
79+
<span style={{ color: theme.palette.text.secondary }}>
80+
{new Date(build.created_at).toLocaleString()}
81+
</span>
82+
</TableCellLink>
83+
<TableCellLink to={buildPageLink}>
84+
<span style={{ color: status.color }} className={styles.status}>
85+
{status.status}
86+
</span>
87+
</TableCellLink>
88+
<TableCellLink to={buildPageLink}>
89+
<div className={styles.arrowCell}>
90+
<KeyboardArrowRight className={styles.arrowRight} />
91+
</div>
92+
</TableCellLink>
93+
</TableRow>
94+
)
95+
})}
96+
97+
{builds && builds.length === 0 && (
98+
<TableRow>
99+
<TableCell colSpan={999}>
100+
<Box p={4}>
101+
<EmptyState message={Language.emptyMessage} />
102+
</Box>
103+
</TableCell>
104+
</TableRow>
105+
)}
106+
</TableBody>
107+
</Table>
108+
</TableContainer>
106109
)
107110
}
108111

‎site/src/components/PageHeader/PageHeader.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,11 @@ export const PageHeader: React.FC<PageHeaderProps> = ({ children, actions, class
1313
return (
1414
<div className={combineClasses([styles.root, className])}>
1515
<hgroup>{children}</hgroup>
16-
<Stack direction="row" className={styles.actions}>
17-
{actions}
18-
</Stack>
16+
{actions && (
17+
<Stack direction="row" className={styles.actions}>
18+
{actions}
19+
</Stack>
20+
)}
1921
</div>
2022
)
2123
}
@@ -38,6 +40,11 @@ const useStyles = makeStyles((theme) => ({
3840
alignItems: "center",
3941
paddingTop: theme.spacing(6),
4042
paddingBottom: theme.spacing(5),
43+
44+
[theme.breakpoints.down("sm")]: {
45+
flexDirection: "column",
46+
alignItems: "flex-start",
47+
},
4148
},
4249

4350
title: {
@@ -60,5 +67,11 @@ const useStyles = makeStyles((theme) => ({
6067

6168
actions: {
6269
marginLeft: "auto",
70+
71+
[theme.breakpoints.down("sm")]: {
72+
marginTop: theme.spacing(3),
73+
marginLeft: "initial",
74+
width: "100%",
75+
},
6376
},
6477
}))

‎site/src/components/Resources/Resources.tsx‎

Lines changed: 93 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { makeStyles, Theme } 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 useTheme from "@material-ui/styles/useTheme"
@@ -46,101 +47,103 @@ export const Resources: FC<ResourcesProps> = ({
4647
{getResourcesError ? (
4748
{ getResourcesError }
4849
) : (
49-
<Table className={styles.table}>
50-
<TableHead>
51-
<TableHeaderRow>
52-
<TableCell>
53-
<Stack direction="row" spacing={0.5} alignItems="center">
54-
{Language.resourceLabel}
55-
<ResourcesHelpTooltip />
56-
</Stack>
57-
</TableCell>
58-
<TableCell className={styles.agentColumn}>
59-
<Stack direction="row" spacing={0.5} alignItems="center">
60-
{Language.agentLabel}
61-
<AgentHelpTooltip />
62-
</Stack>
63-
</TableCell>
64-
{canUpdateWorkspace && <TableCell></TableCell>}
65-
</TableHeaderRow>
66-
</TableHead>
67-
<TableBody>
68-
{resources?.map((resource) => {
69-
{
70-
/* We need to initialize the agents to display the resource */
71-
}
72-
const agents = resource.agents ?? [null]
73-
const resourceName = (
74-
<AvatarData
75-
avatar={<ResourceAvatar type={resource.type} />}
76-
title={resource.name}
77-
subtitle={resource.type}
78-
highlightTitle
79-
/>
80-
)
81-
82-
return agents.map((agent, agentIndex) => {
50+
<TableContainer className={styles.tableContainer}>
51+
<Table>
52+
<TableHead>
53+
<TableHeaderRow>
54+
<TableCell>
55+
<Stack direction="row" spacing={0.5} alignItems="center">
56+
{Language.resourceLabel}
57+
<ResourcesHelpTooltip />
58+
</Stack>
59+
</TableCell>
60+
<TableCell className={styles.agentColumn}>
61+
<Stack direction="row" spacing={0.5} alignItems="center">
62+
{Language.agentLabel}
63+
<AgentHelpTooltip />
64+
</Stack>
65+
</TableCell>
66+
{canUpdateWorkspace && <TableCell></TableCell>}
67+
</TableHeaderRow>
68+
</TableHead>
69+
<TableBody>
70+
{resources?.map((resource) => {
8371
{
84-
/* If there is no agent, just display the resource name */
85-
}
86-
if (!agent) {
87-
return (
88-
<TableRow key={`${resource.id}-${agentIndex}`}>
89-
<TableCell>{resourceName}</TableCell>
90-
<TableCell colSpan={3}></TableCell>
91-
</TableRow>
92-
)
72+
/* We need to initialize the agents to display the resource */
9373
}
74+
const agents = resource.agents ?? [null]
75+
const resourceName = (
76+
<AvatarData
77+
avatar={<ResourceAvatar type={resource.type} />}
78+
title={resource.name}
79+
subtitle={resource.type}
80+
highlightTitle
81+
/>
82+
)
9483

95-
const agentStatus = getDisplayAgentStatus(theme, agent)
96-
return (
97-
<TableRow key={`${resource.id}-${agent.id}`}>
98-
{/* We only want to display the name in the first row because we are using rowSpan */}
99-
{/* The rowspan should be the same than the number of agents */}
100-
{agentIndex === 0 && (
101-
<TableCell className={styles.resourceNameCell} rowSpan={agents.length}>
102-
{resourceName}
84+
return agents.map((agent, agentIndex) => {
85+
{
86+
/* If there is no agent, just display the resource name */
87+
}
88+
if (!agent) {
89+
return (
90+
<TableRow key={`${resource.id}-${agentIndex}`}>
91+
<TableCell>{resourceName}</TableCell>
92+
<TableCell colSpan={3}></TableCell>
93+
</TableRow>
94+
)
95+
}
96+
97+
const agentStatus = getDisplayAgentStatus(theme, agent)
98+
return (
99+
<TableRow key={`${resource.id}-${agent.id}`}>
100+
{/* We only want to display the name in the first row because we are using rowSpan */}
101+
{/* The rowspan should be the same than the number of agents */}
102+
{agentIndex === 0 && (
103+
<TableCell className={styles.resourceNameCell} rowSpan={agents.length}>
104+
{resourceName}
105+
</TableCell>
106+
)}
107+
108+
<TableCell className={styles.agentColumn}>
109+
{agent.name}
110+
<div className={styles.agentInfo}>
111+
<span className={styles.operatingSystem}>{agent.operating_system}</span>
112+
<span style={{ color: agentStatus.color }} className={styles.status}>
113+
{agentStatus.status}
114+
</span>
115+
</div>
103116
</TableCell>
104-
)}
105-
106-
<TableCell className={styles.agentColumn}>
107-
{agent.name}
108-
<div className={styles.agentInfo}>
109-
<span className={styles.operatingSystem}>{agent.operating_system}</span>
110-
<span style={{ color: agentStatus.color }} className={styles.status}>
111-
{agentStatus.status}
112-
</span>
113-
</div>
114-
</TableCell>
115-
<TableCell>
116-
<>
117-
{canUpdateWorkspace && agent.status === "connected" && (
118-
<div className={styles.accessLinks}>
119-
<SSHButton workspaceName={workspace.name} agentName={agent.name} />
120-
<TerminalLink
121-
workspaceName={workspace.name}
122-
agentName={agent.name}
123-
userName={workspace.owner_name}
124-
/>
125-
{agent.apps.map((app) => (
126-
<AppLink
127-
key={app.name}
128-
appIcon={app.icon}
129-
appName={app.name}
130-
userName={workspace.owner_name}
117+
<TableCell>
118+
<>
119+
{canUpdateWorkspace && agent.status === "connected" && (
120+
<div className={styles.accessLinks}>
121+
<SSHButton workspaceName={workspace.name} agentName={agent.name} />
122+
<TerminalLink
131123
workspaceName={workspace.name}
124+
agentName={agent.name}
125+
userName={workspace.owner_name}
132126
/>
133-
))}
134-
</div>
135-
)}
136-
</>
137-
</TableCell>
138-
</TableRow>
139-
)
140-
})
141-
})}
142-
</TableBody>
143-
</Table>
127+
{agent.apps.map((app) => (
128+
<AppLink
129+
key={app.name}
130+
appIcon={app.icon}
131+
appName={app.name}
132+
userName={workspace.owner_name}
133+
workspaceName={workspace.name}
134+
/>
135+
))}
136+
</div>
137+
)}
138+
</>
139+
</TableCell>
140+
</TableRow>
141+
)
142+
})
143+
})}
144+
</TableBody>
145+
</Table>
146+
</TableContainer>
144147
)}
145148
</div>
146149
)
@@ -152,7 +155,7 @@ const useStyles = makeStyles((theme) => ({
152155
border: `1px solid ${theme.palette.divider}`,
153156
},
154157

155-
table: {
158+
tableContainer: {
156159
border: 0,
157160
},
158161

0 commit comments

Comments
 (0)