From dfa100df135dff481790f6887b9e7280d1dcbf00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20Flor=C3=AAncio?= Date: Sat, 15 Aug 2026 12:42:17 +0100 Subject: [PATCH] fix: refine GitHub rate limit card (#2668) --- apps/web/components/github/github-access-help.tsx | 4 +++- apps/web/components/github/github-rate-limit.tsx | 3 ++- apps/web/components/github/github-settings.tsx | 2 +- .../tests/integrations/github-workspace-settings.spec.ts | 9 +++++++++ .../mobile-github-workspace-settings.spec.ts | 9 +++++++++ .../settings/mobile-github-integration-layout.spec.ts | 4 ++++ 6 files changed, 28 insertions(+), 3 deletions(-) diff --git a/apps/web/components/github/github-access-help.tsx b/apps/web/components/github/github-access-help.tsx index fdc51984bd..3510e5862d 100644 --- a/apps/web/components/github/github-access-help.tsx +++ b/apps/web/components/github/github-access-help.tsx @@ -19,12 +19,14 @@ export function GitHubAccessHelp({ title, description, content, + icon, onOpen, }: { label: string; title: string; description: string; content?: ReactNode; + icon?: ReactNode; onOpen?: () => void; }) { const usesTouchDrawer = useTouchDrawer(); @@ -43,7 +45,7 @@ export function GitHubAccessHelp({ aria-expanded={usesTouchDrawer ? open : undefined} aria-label={label} > - + {icon ?? } ); const trigger = usesTouchDrawer ? ( diff --git a/apps/web/components/github/github-rate-limit.tsx b/apps/web/components/github/github-rate-limit.tsx index d51a8136f2..0500324592 100644 --- a/apps/web/components/github/github-rate-limit.tsx +++ b/apps/web/components/github/github-rate-limit.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from "react"; import type { Locale } from "date-fns"; -import { IconAlertTriangle } from "@tabler/icons-react"; +import { IconAlertTriangle, IconGauge } from "@tabler/icons-react"; import { Alert, AlertDescription } from "@kandev/ui/alert"; import type { GitHubRateLimitInfo, GitHubRateLimitSnapshot } from "@/lib/types/github"; import { GitHubAccessHelp } from "./github-access-help"; @@ -75,6 +75,7 @@ export function GitHubRateLimitDisplay({ label={t("github:showGithubApiLimits")} title={t("github:githubApiLimits")} description={t("github:currentGithubApiRateAndQuery")} + icon={} content={ snapshots.length > 0 ? ( diff --git a/apps/web/components/github/github-settings.tsx b/apps/web/components/github/github-settings.tsx index c3eeeb1214..96d5a3f1f3 100644 --- a/apps/web/components/github/github-settings.tsx +++ b/apps/web/components/github/github-settings.tsx @@ -261,7 +261,7 @@ export function GitHubConnectionSection({ workspaceId }: { workspaceId: string } description={t("github:credentialUsedForRepositorySyncWatches")} > - + diff --git a/apps/web/e2e/tests/integrations/github-workspace-settings.spec.ts b/apps/web/e2e/tests/integrations/github-workspace-settings.spec.ts index b2bdc4d5ac..9ec57fab8c 100644 --- a/apps/web/e2e/tests/integrations/github-workspace-settings.spec.ts +++ b/apps/web/e2e/tests/integrations/github-workspace-settings.spec.ts @@ -86,6 +86,12 @@ test.describe("GitHub workspace settings", () => { ]); await stubGitHubRateLimits(testPage, workspaceId); await testPage.goto(`/settings/workspaces/${workspaceId}/integrations/github`); + const accessCard = testPage.getByTestId("github-workspace-access-card"); + const accessContent = accessCard.locator('[data-slot="card-content"]'); + const accessContentPaddingTop = await accessContent.evaluate( + (element) => getComputedStyle(element).paddingTop, + ); + expect(Number.parseFloat(accessContentPaddingTop)).toBeLessThan(24); const automation = testPage.getByTestId("github-workspace-automation"); await expect(automation.getByTestId("github-task-access-summary")).toContainText( "Inherit executor Git credentials", @@ -114,6 +120,9 @@ test.describe("GitHub workspace settings", () => { ).toBeVisible(); const rateLimitHelp = automation.getByRole("button", { name: "Show GitHub API limits" }); await expect(rateLimitHelp).toBeVisible(); + await expect(rateLimitHelp.getByTestId("github-rate-limit-icon")).toHaveClass( + /tabler-icon-gauge/, + ); await rateLimitHelp.hover(); const rateLimitTooltip = testPage.getByRole("tooltip", { name: /API rate limit/ }); await expect(rateLimitTooltip).toContainText( diff --git a/apps/web/e2e/tests/integrations/mobile-github-workspace-settings.spec.ts b/apps/web/e2e/tests/integrations/mobile-github-workspace-settings.spec.ts index a7a50c6182..e6a1e183c4 100644 --- a/apps/web/e2e/tests/integrations/mobile-github-workspace-settings.spec.ts +++ b/apps/web/e2e/tests/integrations/mobile-github-workspace-settings.spec.ts @@ -18,6 +18,12 @@ test.describe("GitHub workspace settings on mobile", () => { ]); await stubGitHubRateLimits(testPage, workspaceId); await testPage.goto(`/settings/workspaces/${workspaceId}/integrations/github`); + const accessCard = testPage.getByTestId("github-workspace-access-card"); + const accessContent = accessCard.locator('[data-slot="card-content"]'); + const accessContentPaddingTop = await accessContent.evaluate( + (element) => getComputedStyle(element).paddingTop, + ); + expect(Number.parseFloat(accessContentPaddingTop)).toBeLessThan(24); const automation = testPage.getByTestId("github-workspace-automation"); await expect(automation.getByTestId("github-task-access-summary")).toContainText( "Inherit executor Git credentials", @@ -50,6 +56,9 @@ test.describe("GitHub workspace settings on mobile", () => { await testPage.keyboard.press("Escape"); const rateLimitHelp = automation.getByRole("button", { name: "Show GitHub API limits" }); await expect(rateLimitHelp).toBeVisible(); + await expect(rateLimitHelp.getByTestId("github-rate-limit-icon")).toHaveClass( + /tabler-icon-gauge/, + ); const rateLimitHelpBox = await rateLimitHelp.boundingBox(); expect(rateLimitHelpBox?.height).toBeGreaterThanOrEqual(44); await rateLimitHelp.tap(); diff --git a/apps/web/e2e/tests/settings/mobile-github-integration-layout.spec.ts b/apps/web/e2e/tests/settings/mobile-github-integration-layout.spec.ts index cb6d147886..4433a6a6ca 100644 --- a/apps/web/e2e/tests/settings/mobile-github-integration-layout.spec.ts +++ b/apps/web/e2e/tests/settings/mobile-github-integration-layout.spec.ts @@ -12,6 +12,10 @@ test.describe("Mobile GitHub integration settings", () => { const accessCard = testPage.getByTestId("github-workspace-access-card"); await expect(accessCard).toBeVisible(); await expect(accessCard).toHaveAttribute("data-slot", "card"); + const accessContentPaddingTop = await accessCard + .locator('[data-slot="card-content"]') + .evaluate((element) => getComputedStyle(element).paddingTop); + expect(Number.parseFloat(accessContentPaddingTop)).toBeLessThan(24); await expect(testPage.locator("#github-enabled")).toHaveAttribute("aria-checked", "true"); expect( await testPage.evaluate(