From 6d6510c337f397709c1a91ad39f868779ae67476 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Thu, 5 Feb 2026 19:10:08 +0800 Subject: [PATCH] Fix new home page recent branch stat (#42497) ## Context Small fix for the new home page "Recent branch" stat to add some truncate Before: image After: image Unrelated but I also set a max width to the project and branch dropdowns in the layout header image ## Summary by CodeRabbit * **Style** * Enhanced display of branch and project names with improved truncation and wider max-widths. * Added hover tooltips (title attributes) for branch and project names to improve accessibility. * Refined text overflow handling and styling across dropdowns and stat components. * **Tests** * Adjusted clipboard test timing to await the resolved promise before asserting write() was called. --- .../interfaces/HomeNew/ActivityStats.tsx | 9 +++++---- .../layouts/AppLayout/BranchDropdown.tsx | 20 ++++++++++--------- .../layouts/AppLayout/ProjectDropdown.tsx | 18 +++++++++-------- .../ui/OrganizationProjectSelector.tsx | 1 - apps/studio/components/ui/SingleStat.tsx | 12 +++++------ apps/studio/lib/helpers.test.ts | 3 ++- 6 files changed, 34 insertions(+), 29 deletions(-) diff --git a/apps/studio/components/interfaces/HomeNew/ActivityStats.tsx b/apps/studio/components/interfaces/HomeNew/ActivityStats.tsx index 0c7cf0d0f97..f48c89c90fe 100644 --- a/apps/studio/components/interfaces/HomeNew/ActivityStats.tsx +++ b/apps/studio/components/interfaces/HomeNew/ActivityStats.tsx @@ -1,16 +1,16 @@ -import dayjs from 'dayjs' -import { Archive, Database, GitBranch } from 'lucide-react' -import { useMemo } from 'react' - import { useParams } from 'common' import { SingleStat } from 'components/ui/SingleStat' import { useBranchesQuery } from 'data/branches/branches-query' import { useBackupsQuery } from 'data/database/backups-query' import { DatabaseMigration, useMigrationsQuery } from 'data/database/migrations-query' +import dayjs from 'dayjs' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { parseMigrationVersion } from 'lib/migration-utils' +import { Archive, Database, GitBranch } from 'lucide-react' +import { useMemo } from 'react' import { cn, Skeleton } from 'ui' import { TimestampInfo } from 'ui-patterns' + import { ServiceStatus } from './ServiceStatus' export const ActivityStats = () => { @@ -143,6 +143,7 @@ export const ActivityStats = () => { 'truncate', !latestNonDefaultBranch && 'text-foreground-lighter truncate' )} + title={latestNonDefaultBranch?.name ?? 'No branches'} > {latestNonDefaultBranch?.name ?? 'No branches'}

diff --git a/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx b/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx index 3529b54fd67..8bf383693e8 100644 --- a/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx +++ b/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx @@ -1,3 +1,6 @@ +import { useParams } from 'common' +import { Branch, useBranchesQuery } from 'data/branches/branches-query' +import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { AlertCircle, Check, @@ -10,30 +13,26 @@ import { import Link from 'next/link' import { useRouter } from 'next/router' import { useState } from 'react' - -import { useParams } from 'common' -import { Branch, useBranchesQuery } from 'data/branches/branches-query' -import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { useAppStateSnapshot } from 'state/app-state' import { Badge, Button, + cn, + Command_Shadcn_, CommandEmpty_Shadcn_, CommandGroup_Shadcn_, CommandInput_Shadcn_, CommandItem_Shadcn_, CommandList_Shadcn_, CommandSeparator_Shadcn_, - Command_Shadcn_, + Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_, - Popover_Shadcn_, ScrollArea, - cn, } from 'ui' import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' + import { sanitizeRoute } from './ProjectDropdown' -import { partition } from 'lodash' const BranchLink = ({ branch, @@ -128,7 +127,10 @@ export const BranchDropdown = () => { {isSuccess && ( <> - + {isBranchingEnabled ? selectedBranch?.name : 'main'} {isBranchingEnabled ? ( diff --git a/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx b/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx index 6c25562f360..0cdc1850dcc 100644 --- a/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx +++ b/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx @@ -1,9 +1,4 @@ -import { Box, Check, ChevronsUpDown, Plus } from 'lucide-react' -import Link from 'next/link' -import { useRouter } from 'next/router' import { ParsedUrlQuery } from 'querystring' -import { useState } from 'react' - import { useParams } from 'common' import { OrganizationProjectSelector } from 'components/ui/OrganizationProjectSelector' import { useProjectDetailQuery } from 'data/projects/project-detail-query' @@ -11,7 +6,11 @@ import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { IS_PLATFORM } from 'lib/constants' -import { Badge, Button, CommandGroup_Shadcn_, CommandItem_Shadcn_, cn } from 'ui' +import { Box, Check, ChevronsUpDown, Plus } from 'lucide-react' +import Link from 'next/link' +import { useRouter } from 'next/router' +import { useState } from 'react' +import { Badge, Button, cn, CommandGroup_Shadcn_, CommandItem_Shadcn_ } from 'ui' import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' export const sanitizeRoute = (route: string, routerQueries: ParsedUrlQuery) => { @@ -60,8 +59,11 @@ export const ProjectDropdown = () => { className="flex items-center gap-2 flex-shrink-0 text-sm" > - - {selectedProject?.name} + + {selectedProject.name} diff --git a/apps/studio/components/ui/OrganizationProjectSelector.tsx b/apps/studio/components/ui/OrganizationProjectSelector.tsx index 8105ceb42f0..f53cfa2bfbf 100644 --- a/apps/studio/components/ui/OrganizationProjectSelector.tsx +++ b/apps/studio/components/ui/OrganizationProjectSelector.tsx @@ -4,7 +4,6 @@ import { OrgProject, useOrgProjectsInfiniteQuery } from 'data/projects/org-proje import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' import { Check, ChevronsUpDown, HelpCircle } from 'lucide-react' import { ReactNode, useEffect, useMemo, useRef, useState } from 'react' - import { Button, cn, diff --git a/apps/studio/components/ui/SingleStat.tsx b/apps/studio/components/ui/SingleStat.tsx index 7869aa695bb..371f4965c28 100644 --- a/apps/studio/components/ui/SingleStat.tsx +++ b/apps/studio/components/ui/SingleStat.tsx @@ -1,9 +1,9 @@ -import Link from 'next/link' -import type { ReactNode } from 'react' - import { useSendEventMutation } from 'data/telemetry/send-event-mutation' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' +import Link from 'next/link' +import type { ReactNode } from 'react' +import { cn } from 'ui' type SingleStatProps = { icon: ReactNode @@ -44,11 +44,11 @@ export const SingleStat = ({ } } const content = ( -
-
+
+
{icon}
-
+
{label}
{value} diff --git a/apps/studio/lib/helpers.test.ts b/apps/studio/lib/helpers.test.ts index 4ce0dfe4f62..43442a64dab 100644 --- a/apps/studio/lib/helpers.test.ts +++ b/apps/studio/lib/helpers.test.ts @@ -206,8 +206,9 @@ describe('copyToClipboard', () => { }) it('uses clipboard.write if available', async () => { - await copyToClipboard('hello') + const promise = copyToClipboard('hello') vi.runAllTimers() + await promise expect(writeMock).toHaveBeenCalled() })