diff --git a/apps/studio/components/interfaces/BranchManagement/EdgeFunctionsDiffPanel.tsx b/apps/studio/components/interfaces/BranchManagement/EdgeFunctionsDiffPanel.tsx index 2ab48ba9056..811151ec2a9 100644 --- a/apps/studio/components/interfaces/BranchManagement/EdgeFunctionsDiffPanel.tsx +++ b/apps/studio/components/interfaces/BranchManagement/EdgeFunctionsDiffPanel.tsx @@ -5,17 +5,7 @@ import { type EdgeFunctionBodyData, } from 'data/edge-functions/edge-function-body-query' import type { EdgeFunctionsData } from 'data/edge-functions/edge-functions-query' -import { - Card, - CardContent, - CardHeader, - CardTitle, - cn, - Skeleton, - Tabs_Shadcn_, - TabsList_Shadcn_, - TabsTrigger_Shadcn_, -} from 'ui' +import { Card, CardContent, CardHeader, CardTitle, cn, Skeleton } from 'ui' import { Code, Wind } from 'lucide-react' import Link from 'next/link' import { useEffect, useMemo, useState } from 'react' @@ -96,41 +86,56 @@ const FunctionDiff = ({ return ( - + {/* Function title */} - - - {functionSlug} - - - {/* File tabs */} - {diffFileKeys.length > 1 && ( - setActiveFileKey(v)} + + - - {diffFileKeys.map((key) => ( - - {key} - - ))} - - - )} + + {functionSlug} + + + + {/* File list sidebar will be shown instead of top tabs */} - +
+ {/* Sidebar file list */} +
+
    + {diffFileKeys.map((key) => ( +
  • + +
  • + ))} +
+
+ + {/* Diff viewer */} +
+ +
+
) diff --git a/apps/studio/components/layouts/PageLayout/PageHeader.tsx b/apps/studio/components/layouts/PageLayout/PageHeader.tsx index f32b0966888..98e3fef0f76 100644 --- a/apps/studio/components/layouts/PageLayout/PageHeader.tsx +++ b/apps/studio/components/layouts/PageLayout/PageHeader.tsx @@ -15,8 +15,8 @@ import { import { ScaffoldDescription, ScaffoldTitle } from '../Scaffold' interface PageHeaderProps { - title?: string - subtitle?: string + title?: string | ReactNode + subtitle?: string | ReactNode icon?: ReactNode breadcrumbs?: Array<{ label?: string diff --git a/apps/studio/components/layouts/PageLayout/PageLayout.tsx b/apps/studio/components/layouts/PageLayout/PageLayout.tsx index 54f230dcd66..2d71bd1d9ce 100644 --- a/apps/studio/components/layouts/PageLayout/PageLayout.tsx +++ b/apps/studio/components/layouts/PageLayout/PageLayout.tsx @@ -14,6 +14,7 @@ export interface NavigationItem { icon?: ReactNode onClick?: () => void badge?: string + active?: boolean } interface PageLayoutProps { @@ -102,38 +103,42 @@ export const PageLayout = ({ {/* Navigation section */} {navigationItems.length > 0 && ( - {navigationItems.map((item) => ( - - {item.href ? ( - - {item.icon && {item.icon}} - {item.label} - {item.badge && {item.badge}} - - ) : ( - - )} - - ))} + {navigationItems.map((item) => { + const isActive = + item.active !== undefined ? item.active : router.asPath.split('?')[0] === item.href + return ( + + {item.href ? ( + + {item.icon && {item.icon}} + {item.label} + {item.badge && {item.badge}} + + ) : ( + + )} + + ) + })} )} diff --git a/apps/studio/pages/project/[ref]/merge.tsx b/apps/studio/pages/project/[ref]/merge.tsx index 97d53a4f6c6..744b4658702 100644 --- a/apps/studio/pages/project/[ref]/merge.tsx +++ b/apps/studio/pages/project/[ref]/merge.tsx @@ -16,12 +16,6 @@ import { useEdgeFunctionsQuery } from 'data/edge-functions/edge-functions-query' import DatabaseDiffPanel from 'components/interfaces/BranchManagement/DatabaseDiffPanel' import EdgeFunctionsDiffPanel from 'components/interfaces/BranchManagement/EdgeFunctionsDiffPanel' import { Badge, Button } from 'ui' -import { - Tabs_Shadcn_ as Tabs, - TabsContent_Shadcn_ as TabsContent, - TabsList_Shadcn_ as TabsList, - TabsTrigger_Shadcn_ as TabsTrigger, -} from 'ui' import { toast } from 'sonner' import type { NextPageWithLayout } from 'types' import { ScaffoldContainer } from 'components/layouts/Scaffold' @@ -211,6 +205,32 @@ const MergePage: NextPageWithLayout = () => { [diffContent, currentBranchFunctions, mainBranchFunctions] ) + // Determine current active tab via query param (defaults to 'database') + const currentTab = (router.query.tab as string) || 'database' + + // Navigation items for PageLayout - updates the `tab` query param + const navigationItems = useMemo(() => { + const buildHref = (tab: string) => { + const query: Record = { tab } + if (workflowRunId) query.workflow_run_id = workflowRunId + const qs = new URLSearchParams(query).toString() + return `/project/[ref]/merge?${qs}` + } + + return [ + { + label: 'Database', + href: buildHref('database'), + active: currentTab === 'database', + }, + { + label: 'Edge Functions', + href: buildHref('edge-functions'), + active: currentTab === 'edge-functions', + }, + ] + }, [workflowRunId, currentTab]) + if (!isBranch || !currentBranch) { return ( @@ -283,8 +303,10 @@ const MergePage: NextPageWithLayout = () => { subtitle={pageSubtitle()} breadcrumbs={breadcrumbs} primaryActions={primaryActions} + size="full" + navigationItems={navigationItems} > - + {/* Merge workflow logs */} { mainBranchRef={mainBranch?.project_ref} /> - - - Database - Edge Functions - - - - refetchDiff()} - currentBranchRef={ref} - /> - - - - - - + {/* Content based on selected tab */} + {currentTab === 'database' ? ( + refetchDiff()} + currentBranchRef={ref} + /> + ) : ( + + )} )