Skip to content

Commit 7007eb9

Browse files
mafredrimafredri
committed
refactor(site): swap emotion for tailwind in workspace batch delete dialogue
References #20905
1 parent e7dbbcd commit 7007eb9

File tree

1 file changed

+35
-106
lines changed

1 file changed

+35
-106
lines changed

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

Lines changed: 35 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
2-
import { visuallyHidden } from "@mui/utils";
31
import type { Workspace } from "api/typesGenerated";
42
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
53
import { ExternalImage } from "components/ExternalImage/ExternalImage";
6-
import { Stack } from "components/Stack/Stack";
74
import dayjs from "dayjs";
85
import relativeTime from "dayjs/plugin/relativeTime";
96
import { ClockIcon, UserIcon } from "lucide-react";
@@ -67,7 +64,7 @@ export const BatchDeleteConfirmation: FC<BatchDeleteConfirmationProps> = ({
6764
);
6865
}
6966

70-
// The flicker of these icons is quit noticeable if they aren't loaded in advance,
67+
// The flicker of these icons is quite noticeable if they aren't loaded in advance,
7168
// so we insert them into the document without actually displaying them yet.
7269
const resourceIconPreloads = [
7370
...new Set(
@@ -78,7 +75,7 @@ export const BatchDeleteConfirmation: FC<BatchDeleteConfirmationProps> = ({
7875
),
7976
),
8077
].map((url) => (
81-
<img key={url} alt="" aria-hidden css={{ ...visuallyHidden }} src={url} />
78+
<img key={url} alt="" aria-hidden className="sr-only" src={url} />
8279
));
8380

8481
return (
@@ -118,7 +115,7 @@ const Consequences: FC = () => {
118115
return (
119116
<>
120117
<p>Deleting workspaces is irreversible!</p>
121-
<ul css={styles.consequences}>
118+
<ul className="flex flex-col gap-2 pl-4 mb-0">
122119
<li>
123120
Terraform resources belonging to deleted workspaces will be destroyed.
124121
</li>
@@ -129,8 +126,6 @@ const Consequences: FC = () => {
129126
};
130127

131128
const Workspaces: FC<StageProps> = ({ workspaces }) => {
132-
const theme = useTheme();
133-
134129
const mostRecent = workspaces.reduce(
135130
(latestSoFar, against) => {
136131
if (!latestSoFar) {
@@ -150,69 +145,47 @@ const Workspaces: FC<StageProps> = ({ workspaces }) => {
150145

151146
return (
152147
<>
153-
<ul css={styles.workspacesList}>
148+
<ul className="list-none p-0 border border-solid border-zinc-200 dark:border-zinc-700 rounded-lg overflow-x-hidden overflow-y-auto max-h-[184px]">
154149
{workspaces.map((workspace) => (
155-
<li key={workspace.id} css={styles.workspace}>
156-
<Stack
157-
direction="row"
158-
alignItems="center"
159-
justifyContent="space-between"
160-
spacing={3}
161-
>
162-
<span
163-
css={{ fontWeight: 500, color: theme.experimental.l1.text }}
164-
>
150+
<li
151+
key={workspace.id}
152+
className="py-2 px-4 border-solid border-0 border-b border-zinc-200 dark:border-zinc-700 last:border-b-0"
153+
>
154+
<div className="flex items-center justify-between gap-6">
155+
<span className="font-medium text-content-primary max-w-[400px] overflow-hidden text-ellipsis whitespace-nowrap">
165156
{workspace.name}
166157
</span>
167-
<Stack css={{ gap: 0, fontSize: 14 }} justifyContent="flex-end">
168-
<Stack
169-
direction="row"
170-
alignItems="center"
171-
justifyContent="flex-end"
172-
spacing={1}
173-
>
174-
<span
175-
css={{ whiteSpace: "nowrap", textOverflow: "ellipsis" }}
176-
>
158+
159+
<div className="flex flex-col text-sm items-end">
160+
<div className="flex items-center gap-2">
161+
<span className="whitespace-nowrap">
177162
{workspace.owner_name}
178163
</span>
179-
<PersonIcon />
180-
</Stack>
181-
<Stack
182-
direction="row"
183-
alignItems="center"
184-
spacing={1}
185-
justifyContent="flex-end"
186-
>
187-
<span
188-
css={{ whiteSpace: "nowrap", textOverflow: "ellipsis" }}
189-
>
164+
<UserIcon className="size-icon-sm -m-px" />
165+
</div>
166+
<div className="flex items-center gap-2">
167+
<span className="whitespace-nowrap">
190168
{dayjs(workspace.last_used_at).fromNow()}
191169
</span>
192170
<ClockIcon className="size-icon-xs" />
193-
</Stack>
194-
</Stack>
195-
</Stack>
171+
</div>
172+
</div>
173+
</div>
196174
</li>
197175
))}
198176
</ul>
199-
<Stack
200-
justifyContent="center"
201-
direction="row"
202-
wrap="wrap"
203-
css={{ gap: "6px 20px", fontSize: 14 }}
204-
>
205-
<Stack direction="row" alignItems="center" spacing={1}>
206-
<PersonIcon />
177+
<div className="flex flex-wrap justify-center gap-x-5 gap-y-1.5 text-sm">
178+
<div className="flex items-center gap-2">
179+
<UserIcon className="size-icon-sm -m-px" />
207180
<span>{ownersCount}</span>
208-
</Stack>
181+
</div>
209182
{mostRecent && (
210-
<Stack direction="row" alignItems="center" spacing={1}>
183+
<div className="flex items-center gap-2">
211184
<ClockIcon className="size-icon-xs" />
212185
<span>Last used {dayjs(mostRecent.last_used_at).fromNow()}</span>
213-
</Stack>
186+
</div>
214187
)}
215-
</Stack>
188+
</div>
216189
</>
217190
);
218191
};
@@ -233,66 +206,22 @@ const Resources: FC<StageProps> = ({ workspaces }) => {
233206
}
234207

235208
return (
236-
<Stack>
209+
<div className="flex flex-col gap-4">
237210
<p>
238211
Deleting{" "}
239212
{workspaces.length === 1 ? "this workspace" : "these workspaces"} will
240213
also permanently destroy&hellip;
241214
</p>
242-
<Stack
243-
direction="row"
244-
justifyContent="center"
245-
wrap="wrap"
246-
css={{ gap: "6px 20px", fontSize: 14 }}
247-
>
215+
<div className="flex flex-wrap justify-center gap-x-5 gap-y-1.5 text-sm">
248216
{Object.entries(resources).map(([type, summary]) => (
249-
<Stack key={type} direction="row" alignItems="center" spacing={1}>
250-
<ExternalImage
251-
src={summary.icon}
252-
width={styles.summaryIcon.width}
253-
height={styles.summaryIcon.height}
254-
/>
217+
<div key={type} className="flex items-center gap-2">
218+
<ExternalImage src={summary.icon} width={16} height={16} />
255219
<span>
256220
{summary.count} <code>{type}</code>
257221
</span>
258-
</Stack>
222+
</div>
259223
))}
260-
</Stack>
261-
</Stack>
224+
</div>
225+
</div>
262226
);
263227
};
264-
265-
const PersonIcon: FC = () => {
266-
// Using the Lucide icon with appropriate size class
267-
return <UserIcon className="size-icon-sm" css={{ margin: -1 }} />;
268-
};
269-
270-
const styles = {
271-
summaryIcon: { width: 16, height: 16 },
272-
273-
consequences: {
274-
display: "flex",
275-
flexDirection: "column",
276-
gap: 8,
277-
paddingLeft: 16,
278-
marginBottom: 0,
279-
},
280-
281-
workspacesList: (theme) => ({
282-
listStyleType: "none",
283-
padding: 0,
284-
border: `1px solid ${theme.palette.divider}`,
285-
borderRadius: 8,
286-
overflow: "hidden auto",
287-
maxHeight: 184,
288-
}),
289-
290-
workspace: (theme) => ({
291-
padding: "8px 16px",
292-
borderBottom: `1px solid ${theme.palette.divider}`,
293-
294-
"&:last-child": {
295-
border: "none",
296-
},
297-
}),
298-
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)