From 901a0e2c39f9010ec533fbeae0c395aec2ad75b2 Mon Sep 17 00:00:00 2001 From: Shawn <5414767+playcations@users.noreply.github.com> Date: Mon, 1 Sep 2025 10:53:39 -0400 Subject: [PATCH] Switched to tailwind for FilesChangedOverview - Reduced from 21 to 4 inline styles (only dynamic ones remain) - Converted static styles to Tailwind CSS classes: - Container styles: border, px-2.5, py-1.5, m-0, etc. - Flexbox layouts: flex, justify-between, items-center, gap-2 - Button styles: Consistent classes for primary/secondary/icon buttons - Text styles: font-mono, text-xs, font-medium, etc. - Preserved dynamic styles for runtime calculations: - Virtualization: height, transform - State-based: opacity, borderBottom - Updated tests to check for CSS classes instead of inline styles --- .../file-changes/FilesChangedOverview.tsx | 144 +++--------------- .../__tests__/FilesChangedOverview.spec.tsx | 26 +--- 2 files changed, 29 insertions(+), 141 deletions(-) diff --git a/webview-ui/src/components/file-changes/FilesChangedOverview.tsx b/webview-ui/src/components/file-changes/FilesChangedOverview.tsx index 78a3a8e364..70d7268c74 100644 --- a/webview-ui/src/components/file-changes/FilesChangedOverview.tsx +++ b/webview-ui/src/components/file-changes/FilesChangedOverview.tsx @@ -140,7 +140,7 @@ const FilesChangedOverview: React.FC = () => { setChangeset(null) } break - case "checkpoint_created": + case "checkpointCreated": handleCheckpointCreated(message.checkpoint, message.previousCheckpoint) break case "checkpointRestored": @@ -206,28 +206,13 @@ const FilesChangedOverview: React.FC = () => { return (
+ className="files-changed-overview border border-[var(--vscode-panel-border)] border-t-0 rounded-none px-2.5 py-1.5 m-0 bg-[var(--vscode-editor-background)]" + data-testid="files-changed-overview"> {/* Collapsible header */}
setIsCollapsed(!isCollapsed)} onKeyDown={(e) => { @@ -246,15 +231,11 @@ const FilesChangedOverview: React.FC = () => { : t("file-changes:accessibility.expanded"), })} title={isCollapsed ? t("file-changes:header.expand") : t("file-changes:header.collapse")}> -
+
-

+

{t("file-changes:summary.count_with_changes", { count: files.length, changes: totalChanges, @@ -264,7 +245,7 @@ const FilesChangedOverview: React.FC = () => { {/* Action buttons always visible for quick access */}
e.stopPropagation()} // Prevent collapse toggle when clicking buttons > @@ -290,16 +262,7 @@ const FilesChangedOverview: React.FC = () => { disabled={isProcessing} tabIndex={0} data-testid="accept-all-button" - style={{ - backgroundColor: "var(--vscode-button-background)", - color: "var(--vscode-button-foreground)", - border: "none", - borderRadius: "3px", - padding: "4px 8px", - fontSize: "13px", - cursor: isProcessing ? "not-allowed" : "pointer", - opacity: isProcessing ? 0.6 : 1, - }} + className="bg-[var(--vscode-button-background)] text-[var(--vscode-button-foreground)] border-none rounded px-2 py-1 text-xs disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer" title={t("file-changes:actions.accept_all")}> {t("file-changes:actions.accept_all")} @@ -309,13 +272,9 @@ const FilesChangedOverview: React.FC = () => { {/* Collapsible content area */} {!isCollapsed && (
{shouldVirtualize && ( @@ -388,68 +347,27 @@ const FileItem: React.FC = React.memo( ({ file, formatLineChanges, onViewDiff, onAcceptFile, onRejectFile, handleWithDebounce, isProcessing, t }) => (
-
-
+ className="flex justify-between items-center px-2 py-1.5 mb-1 bg-[var(--vscode-list-hoverBackground)] rounded text-xs min-h-[32px] leading-tight"> +
+
{file.uri}
-
+
{t(`file-changes:file_types.${file.type}`)}
-
-
+
+
{formatLineChanges(file)}
-
+
diff --git a/webview-ui/src/components/file-changes/__tests__/FilesChangedOverview.spec.tsx b/webview-ui/src/components/file-changes/__tests__/FilesChangedOverview.spec.tsx index abadb7fd6e..baa78965f1 100644 --- a/webview-ui/src/components/file-changes/__tests__/FilesChangedOverview.spec.tsx +++ b/webview-ui/src/components/file-changes/__tests__/FilesChangedOverview.spec.tsx @@ -1181,14 +1181,10 @@ describe("FilesChangedOverview (Self-Managing)", () => { const fcoContainer = screen.getByTestId("files-changed-overview") - // FCO should have proper styling that doesn't interfere with other floating elements - expect(fcoContainer).toHaveStyle({ - border: "1px solid var(--vscode-panel-border)", - borderRadius: "0", - padding: "6px 10px", - margin: "0", - backgroundColor: "var(--vscode-editor-background)", - }) + // FCO should have proper styling classes that don't interfere with other floating elements + expect(fcoContainer).toHaveClass("border", "border-[var(--vscode-panel-border)]") + expect(fcoContainer).toHaveClass("rounded-none", "px-2.5", "py-1.5", "m-0") + expect(fcoContainer).toHaveClass("bg-[var(--vscode-editor-background)]") // FCO should not have high z-index values that could cause layering issues // In test environment, z-index might be empty string instead of "auto" @@ -1277,9 +1273,7 @@ describe("FilesChangedOverview (Self-Managing)", () => { const fcoContainer = screen.getByTestId("files-changed-overview") // FCO should have consistent margins that don't cause layout jumps - expect(fcoContainer).toHaveStyle({ - margin: "0", - }) + expect(fcoContainer).toHaveClass("m-0") // Remove files to test clean disappearance simulateMessage({ @@ -1297,10 +1291,8 @@ describe("FilesChangedOverview (Self-Managing)", () => { const fcoContainer = screen.getByTestId("files-changed-overview") - // Container should have proper padding - expect(fcoContainer).toHaveStyle({ - padding: "6px 10px", - }) + // Container should have proper padding classes + expect(fcoContainer).toHaveClass("px-2.5", "py-1.5") // Expand to check internal spacing const header = screen.getByTestId("files-changed-header") @@ -1315,9 +1307,7 @@ describe("FilesChangedOverview (Self-Managing)", () => { const fileItems = screen.getAllByTestId(/^file-item-/) fileItems.forEach((item) => { // Each file item should have margin bottom for spacing - expect(item).toHaveStyle({ - marginBottom: "3px", - }) + expect(item).toHaveClass("mb-1") }) }) })