Skip to content

Commit db1201b

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Minor UI improvements
1 parent e8a4f18 commit db1201b

File tree

2 files changed

+125
-92
lines changed

2 files changed

+125
-92
lines changed

‎site/src/pages/WorkspacesPage/WorkspacesTable.tsx

Lines changed: 116 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -128,104 +128,116 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
128128
</ChooseOne>
129129
)}
130130
{workspaces &&
131-
workspaces.map((workspace) => (
132-
<WorkspacesRow workspace={workspace} key={workspace.id}>
133-
<TableCell
134-
sx={{
135-
paddingLeft: (theme) =>
136-
isWorkspaceBatchActionsEnabled
137-
? `${theme.spacing(1.5)} !important`
138-
: undefined,
139-
}}
131+
workspaces.map((workspace) => {
132+
const checked = checkedWorkspaces.some(
133+
(w) => w.id === workspace.id,
134+
)
135+
return (
136+
<WorkspacesRow
137+
workspace={workspace}
138+
key={workspace.id}
139+
checked={checked}
140140
>
141-
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
142-
{isWorkspaceBatchActionsEnabled && (
143-
<Checkbox
144-
size="small"
145-
checked={checkedWorkspaces.some(
146-
(w) => w.id === workspace.id,
147-
)}
148-
onClick={(e) => {
149-
e.stopPropagation()
150-
}}
151-
onChange={(e) => {
152-
if (e.currentTarget.checked) {
153-
onCheckChange([...checkedWorkspaces, workspace])
154-
} else {
155-
onCheckChange(
156-
checkedWorkspaces.filter(
157-
(w) => w.id !== workspace.id,
158-
),
159-
)
160-
}
161-
}}
141+
<TableCell
142+
sx={{
143+
paddingLeft: (theme) =>
144+
isWorkspaceBatchActionsEnabled
145+
? `${theme.spacing(1.5)} !important`
146+
: undefined,
147+
}}
148+
>
149+
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
150+
{isWorkspaceBatchActionsEnabled && (
151+
<Checkbox
152+
size="small"
153+
disabled={cantBeChecked(workspace)}
154+
checked={checked}
155+
onClick={(e) => {
156+
e.stopPropagation()
157+
}}
158+
onChange={(e) => {
159+
if (e.currentTarget.checked) {
160+
onCheckChange([...checkedWorkspaces, workspace])
161+
} else {
162+
onCheckChange(
163+
checkedWorkspaces.filter(
164+
(w) => w.id !== workspace.id,
165+
),
166+
)
167+
}
168+
}}
169+
/>
170+
)}
171+
<AvatarData
172+
title={
173+
<Stack
174+
direction="row"
175+
spacing={0}
176+
alignItems="center"
177+
>
178+
{workspace.name}
179+
{workspace.outdated && (
180+
<WorkspaceOutdatedTooltip
181+
templateName={workspace.template_name}
182+
templateId={workspace.template_id}
183+
onUpdateVersion={() => {
184+
onUpdateWorkspace(workspace)
185+
}}
186+
/>
187+
)}
188+
</Stack>
189+
}
190+
subtitle={workspace.owner_name}
191+
avatar={
192+
<Avatar
193+
src={workspace.template_icon}
194+
variant={
195+
workspace.template_icon ? "square" : undefined
196+
}
197+
fitImage={Boolean(workspace.template_icon)}
198+
>
199+
{workspace.name}
200+
</Avatar>
201+
}
162202
/>
163-
)}
164-
<AvatarData
165-
title={
166-
<Stack direction="row" spacing={0} alignItems="center">
167-
{workspace.name}
168-
{workspace.outdated && (
169-
<WorkspaceOutdatedTooltip
170-
templateName={workspace.template_name}
171-
templateId={workspace.template_id}
172-
onUpdateVersion={() => {
173-
onUpdateWorkspace(workspace)
174-
}}
175-
/>
176-
)}
177-
</Stack>
178-
}
179-
subtitle={workspace.owner_name}
180-
avatar={
181-
<Avatar
182-
src={workspace.template_icon}
183-
variant={
184-
workspace.template_icon ? "square" : undefined
185-
}
186-
fitImage={Boolean(workspace.template_icon)}
187-
>
188-
{workspace.name}
189-
</Avatar>
190-
}
191-
/>
192-
</Box>
193-
</TableCell>
203+
</Box>
204+
</TableCell>
194205

195-
<TableCell>
196-
{getDisplayWorkspaceTemplateName(workspace)}
197-
</TableCell>
206+
<TableCell>
207+
{getDisplayWorkspaceTemplateName(workspace)}
208+
</TableCell>
198209

199-
<TableCell>
200-
<LastUsed lastUsedAt={workspace.last_used_at} />
201-
</TableCell>
210+
<TableCell>
211+
<LastUsed lastUsedAt={workspace.last_used_at} />
212+
</TableCell>
202213

203-
<TableCell>
204-
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
205-
<WorkspaceStatusBadge workspace={workspace} />
206-
{workspace.latest_build.status === "running" &&
207-
!workspace.health.healthy && <UnhealthyTooltip />}
208-
</Box>
209-
</TableCell>
214+
<TableCell>
215+
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
216+
<WorkspaceStatusBadge workspace={workspace} />
217+
{workspace.latest_build.status === "running" &&
218+
!workspace.health.healthy && <UnhealthyTooltip />}
219+
</Box>
220+
</TableCell>
210221

211-
<TableCell>
212-
<Box
213-
sx={{
214-
display: "flex",
215-
paddingLeft: (theme) => theme.spacing(2),
216-
}}
217-
>
218-
<KeyboardArrowRight
222+
<TableCell>
223+
<Box
219224
sx={{
220-
color: (theme) => theme.palette.text.secondary,
221-
width: 20,
222-
height: 20,
225+
display: "flex",
226+
paddingLeft: (theme) => theme.spacing(2),
223227
}}
224-
/>
225-
</Box>
226-
</TableCell>
227-
</WorkspacesRow>
228-
))}
228+
>
229+
<KeyboardArrowRight
230+
sx={{
231+
color: (theme) => theme.palette.text.secondary,
232+
width: 20,
233+
height: 20,
234+
}}
235+
/>
236+
</Box>
237+
</TableCell>
238+
</WorkspacesRow>
239+
)
240+
})}
229241
</TableBody>
230242
</Table>
231243
</TableContainer>
@@ -235,15 +247,23 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
235247
const WorkspacesRow: FC<{
236248
workspace: Workspace
237249
children: ReactNode
238-
}> = ({ workspace, children }) => {
250+
checked: boolean
251+
}> = ({ workspace, children, checked }) => {
239252
const navigate = useNavigate()
240253
const workspacePageLink = `/@${workspace.owner_name}/${workspace.name}`
241254
const clickable = useClickableTableRow(() => {
242255
navigate(workspacePageLink)
243256
})
244257

245258
return (
246-
<TableRow data-testid={`workspace-${workspace.id}`} {...clickable}>
259+
<TableRow
260+
data-testid={`workspace-${workspace.id}`}
261+
{...clickable}
262+
sx={{
263+
backgroundColor: (theme) =>
264+
checked ? theme.palette.action.hover : undefined,
265+
}}
266+
>
247267
{children}
248268
</TableRow>
249269
)
@@ -267,6 +287,10 @@ export const UnhealthyTooltip = () => {
267287
)
268288
}
269289

290+
const cantBeChecked = (workspace: Workspace) => {
291+
return ["deleting", "pending"].includes(workspace.latest_build.status)
292+
}
293+
270294
const useUnhealthyTooltipStyles = makeStyles(() => ({
271295
unhealthyIcon: {
272296
color: colors.yellow[5],

‎site/src/theme/theme.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -384,6 +384,15 @@ dark = createTheme(dark, {
384384
disableRipple: true,
385385
},
386386
},
387+
MuiCheckbox: {
388+
styleOverrides: {
389+
root: {
390+
"&.Mui-disabled": {
391+
color: colors.gray[11],
392+
},
393+
},
394+
},
395+
},
387396
MuiSwitch: {
388397
defaultProps: {
389398
color: "primary",

0 commit comments

Comments
 (0)