From b4c745bb0c4b5f091d5492fdbd1532168537dcb1 Mon Sep 17 00:00:00 2001 From: Mathias Fredriksson Date: Wed, 26 Nov 2025 10:43:25 +0000 Subject: [PATCH 1/3] refactor(site): swap emotion for tailwind in workspace batch delete dialogue References #20905 --- .../BatchDeleteConfirmation.tsx | 141 +++++------------- 1 file changed, 35 insertions(+), 106 deletions(-) diff --git a/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx b/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx index 587cecf25efdd..438aa130905ec 100644 --- a/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx +++ b/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx @@ -1,9 +1,6 @@ -import { type Interpolation, type Theme, useTheme } from "@emotion/react"; -import { visuallyHidden } from "@mui/utils"; import type { Workspace } from "api/typesGenerated"; import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; import { ExternalImage } from "components/ExternalImage/ExternalImage"; -import { Stack } from "components/Stack/Stack"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import { ClockIcon, UserIcon } from "lucide-react"; @@ -67,7 +64,7 @@ export const BatchDeleteConfirmation: FC = ({ ); } - // The flicker of these icons is quit noticeable if they aren't loaded in advance, + // The flicker of these icons is quite noticeable if they aren't loaded in advance, // so we insert them into the document without actually displaying them yet. const resourceIconPreloads = [ ...new Set( @@ -78,7 +75,7 @@ export const BatchDeleteConfirmation: FC = ({ ), ), ].map((url) => ( - + )); return ( @@ -118,7 +115,7 @@ const Consequences: FC = () => { return ( <>

Deleting workspaces is irreversible!

-
    +
    • Terraform resources belonging to deleted workspaces will be destroyed.
      • @@ -129,8 +126,6 @@ const Consequences: FC = () => { }; const Workspaces: FC = ({ workspaces }) => { - const theme = useTheme(); - const mostRecent = workspaces.reduce( (latestSoFar, against) => { if (!latestSoFar) { @@ -150,69 +145,47 @@ const Workspaces: FC = ({ workspaces }) => { return ( <> -
        +
          {workspaces.map((workspace) => ( -
        • - - +
        • +
          + {workspace.name} - - - + +
          +
          + {workspace.owner_name} - - - - + +
          +
          + {dayjs(workspace.last_used_at).fromNow()} - - - +
          +
          +
          • ))}
        - - - +
        +
        + {ownersCount} - +
        {mostRecent && ( - +
        Last used {dayjs(mostRecent.last_used_at).fromNow()} - +
        )} -         +
        ); }; @@ -233,66 +206,22 @@ const Resources: FC = ({ workspaces }) => { } return ( - +

        Deleting{" "} {workspaces.length === 1 ? "this workspace" : "these workspaces"} will also permanently destroy…

        - +
        {Object.entries(resources).map(([type, summary]) => ( - - +
        + {summary.count} {type} - +
        ))} -         - +
        +
        ); }; - -const PersonIcon: FC = () => { - // Using the Lucide icon with appropriate size class - return ; -}; - -const styles = { - summaryIcon: { width: 16, height: 16 }, - - consequences: { - display: "flex", - flexDirection: "column", - gap: 8, - paddingLeft: 16, - marginBottom: 0, - }, - - workspacesList: (theme) => ({ - listStyleType: "none", - padding: 0, - border: `1px solid ${theme.palette.divider}`, - borderRadius: 8, - overflow: "hidden auto", - maxHeight: 184, - }), - - workspace: (theme) => ({ - padding: "8px 16px", - borderBottom: `1px solid ${theme.palette.divider}`, - - "&:last-child": { - border: "none", - }, - }), -} satisfies Record>; From f6b609ab586644c0d57db4a496526df63805ca3c Mon Sep 17 00:00:00 2001 From: Mathias Fredriksson Date: Wed, 26 Nov 2025 10:48:07 +0000 Subject: [PATCH 2/3] fix button --- site/src/pages/WorkspacesPage/WorkspacesPageView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx index 0bd7c84df8f3f..06250c181789a 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx @@ -146,7 +146,7 @@ export const WorkspacesPageView: FC = ({ disabled={isRunningBatchAction} variant="outline" size="sm" - css={{ borderRadius: 9999, marginLeft: "auto" }} + className="ml-auto" > Bulk actions From a326dc1d623d8038fe39adb6e654bf090c5b0916 Mon Sep 17 00:00:00 2001 From: Mathias Fredriksson Date: Thu, 4 Dec 2025 08:53:06 +0000 Subject: [PATCH 3/3] fix(site): use theme border color and standard max-height in batch delete dialogs - Replace border-zinc-200 dark:border-zinc-700 with border-border - Replace max-h-[184px] with max-h-48 utility class - Add cancel button to workspaces batch delete dialog --- site/src/pages/TasksPage/BatchDeleteConfirmation.tsx | 4 ++-- site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx | 5 ++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/site/src/pages/TasksPage/BatchDeleteConfirmation.tsx b/site/src/pages/TasksPage/BatchDeleteConfirmation.tsx index 825f98bfb4f95..f6b76b3b4305a 100644 --- a/site/src/pages/TasksPage/BatchDeleteConfirmation.tsx +++ b/site/src/pages/TasksPage/BatchDeleteConfirmation.tsx @@ -113,11 +113,11 @@ const Tasks: FC = ({ tasks }) => { return ( <> -
          +
            {tasks.map((task) => (
          • diff --git a/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx b/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx index 438aa130905ec..c37d88d7f0525 100644 --- a/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx +++ b/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx @@ -87,7 +87,6 @@ export const BatchDeleteConfirmation: FC = ({ onClose(); }} title={`Delete ${workspaceCount}`} - hideCancel confirmLoading={isLoading} confirmText={confirmText} onConfirm={onProceed} @@ -145,11 +144,11 @@ const Workspaces: FC = ({ workspaces }) => { return ( <> -
              +
                {workspaces.map((workspace) => (