From 99dcbfe3dc6c067ab8f8606170d063f3cc779579 Mon Sep 17 00:00:00 2001
From: Jordi Enric <37541088+jordienr@users.noreply.github.com>
Date: Fri, 15 Aug 2025 13:22:40 +0200
Subject: [PATCH 1/4] add etl logs (#37930)

* add etl logs

* fix missing desc

* rename to etl-replication-logs

* rename sidebar

* Add links to ETL logs

* Fix

* Smol

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
---
 .../Database/Replication/Pipeline.utils.ts    | 22 +++++++--------
 .../Database/Replication/PipelineStatus.tsx   | 16 ++++++++++-
 .../Replication/ReplicationPipelineStatus.tsx |  3 +++
 .../Settings/Logs/Logs.constants.ts           |  3 +++
 .../interfaces/Settings/Logs/Logs.types.ts    |  1 +
 .../layouts/LogsLayout/LogsSidebarMenuV2.tsx  | 22 +++++++++++++++
 .../[ref]/logs/etl-replication-logs.tsx       | 27 +++++++++++++++++++
 7 files changed, 82 insertions(+), 12 deletions(-)
 create mode 100644 apps/studio/pages/project/[ref]/logs/etl-replication-logs.tsx

diff --git a/apps/studio/components/interfaces/Database/Replication/Pipeline.utils.ts b/apps/studio/components/interfaces/Database/Replication/Pipeline.utils.ts
index d15fe8040cc2a..2d3efaf233770 100644
--- a/apps/studio/components/interfaces/Database/Replication/Pipeline.utils.ts
+++ b/apps/studio/components/interfaces/Database/Replication/Pipeline.utils.ts
@@ -22,44 +22,44 @@ export const getStatusName = (
   return undefined
 }
 
-export const PIPELINE_STATE_MESSAGES = {
+const PIPELINE_STATE_MESSAGES = {
   enabling: {
-    title: 'Pipeline Enabling',
+    title: 'Pipeline enabling',
     message: 'Starting the pipeline. Table replication will resume once enabled.',
     badge: 'Enabling',
   },
   disabling: {
-    title: 'Pipeline Disabling',
+    title: 'Pipeline disabling',
     message: 'Stopping the pipeline. Table replication will be paused once disabled.',
     badge: 'Disabling',
   },
   failed: {
-    title: 'Pipeline Failed',
-    message: 'Replication has encountered an error. Check the logs for details.',
+    title: 'Pipeline failed',
+    message: 'Replication has encountered an error.',
     badge: 'Failed',
   },
   stopped: {
-    title: 'Pipeline Stopped',
+    title: 'Pipeline stopped',
     message: 'Replication is paused. Enable the pipeline to resume data synchronization.',
     badge: 'Stopped',
   },
   starting: {
-    title: 'Pipeline Starting',
+    title: 'Pipeline starting',
     message: 'Initializing replication. Table status will be available once running.',
     badge: 'Starting',
   },
   running: {
-    title: 'Pipeline Running',
+    title: 'Pipeline running',
     message: 'Replication is active and processing data',
     badge: 'Running',
   },
   unknown: {
-    title: 'Pipeline Status Unknown',
-    message: 'Unable to determine replication status. Check the logs for more information.',
+    title: 'Pipeline status unknown',
+    message: 'Unable to determine replication status.',
     badge: 'Unknown',
   },
   notRunning: {
-    title: 'Pipeline Not Running',
+    title: 'Pipeline not running',
     message: 'Replication is not active. Enable the pipeline to start data synchronization.',
     badge: 'Disabled',
   },
diff --git a/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx b/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx
index c33087468ad2a..69a988996d7d9 100644
--- a/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx
@@ -1,3 +1,5 @@
+import { useParams } from 'common'
+import { InlineLink } from 'components/ui/InlineLink'
 import { ReplicationPipelineStatusData } from 'data/replication/pipeline-status-query'
 import { AlertTriangle, Loader2 } from 'lucide-react'
 import { PipelineStatusRequestStatus } from 'state/replication-pipeline-request-status'
@@ -31,6 +33,8 @@ export const PipelineStatus = ({
   isSuccess,
   requestStatus,
 }: PipelineStatusProps) => {
+  const { ref } = useParams()
+
   // Map backend statuses to UX-friendly display
   const getStatusConfig = () => {
     const statusName =
@@ -138,7 +142,17 @@ export const PipelineStatus = ({
               <span>{statusConfig.label}</span>
             </div>
           </TooltipTrigger>
-          <TooltipContent side="bottom">{statusConfig.tooltip}</TooltipContent>
+          <TooltipContent side="bottom">
+            {statusConfig.tooltip}
+            {['unknown', 'failed'].includes(pipelineStatus?.name ?? '') && (
+              <>
+                {' '}
+                Check the{' '}
+                <InlineLink href={`/project/${ref}/logs/etl-replication-logs`}>logs</InlineLink> for
+                more information.
+              </>
+            )}
+          </TooltipContent>
         </Tooltip>
       )}
     </>
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus.tsx
index 6205fdfb4b90b..dd098652c769a 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus.tsx
@@ -174,6 +174,9 @@ export const ReplicationPipelineStatus = () => {
               }
             />
           </div>
+          <Button asChild type="default">
+            <Link href={`/project/${projectRef}/logs/etl-replication-logs`}>View logs</Link>
+          </Button>
           <Button
             type={statusName === 'stopped' ? 'primary' : 'default'}
             onClick={() => onTogglePipeline()}
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.constants.ts b/apps/studio/components/interfaces/Settings/Logs/Logs.constants.ts
index 807688e4e832b..6431378f3781f 100644
--- a/apps/studio/components/interfaces/Settings/Logs/Logs.constants.ts
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.constants.ts
@@ -372,6 +372,7 @@ export enum LogsTableName {
   PGBOUNCER = 'pgbouncer_logs',
   PG_UPGRADE = 'pg_upgrade_logs',
   PG_CRON = 'pg_cron_logs',
+  ETL = 'etl_replication_logs',
 }
 
 export const LOGS_TABLES = {
@@ -387,6 +388,7 @@ export const LOGS_TABLES = {
   pg_upgrade: LogsTableName.PG_UPGRADE,
   pg_cron: LogsTableName.POSTGRES,
   pgbouncer: LogsTableName.PGBOUNCER,
+  etl: LogsTableName.ETL,
 }
 
 export const LOGS_SOURCE_DESCRIPTION = {
@@ -402,6 +404,7 @@ export const LOGS_SOURCE_DESCRIPTION = {
   [LogsTableName.PGBOUNCER]: 'Dedicated connection pooler for PostgreSQL',
   [LogsTableName.PG_UPGRADE]: 'Logs generated by the Postgres version upgrade process',
   [LogsTableName.PG_CRON]: 'Postgres logs from pg_cron cron jobs',
+  [LogsTableName.ETL]: 'Logs from the ETL replication process',
 }
 
 export const FILTER_OPTIONS: FilterTableSet = {
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.types.ts b/apps/studio/components/interfaces/Settings/Logs/Logs.types.ts
index 377f542ebb966..5deab72a95379 100644
--- a/apps/studio/components/interfaces/Settings/Logs/Logs.types.ts
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.types.ts
@@ -93,6 +93,7 @@ export type QueryType =
   | 'pg_upgrade'
   | 'pg_cron'
   | 'pgbouncer'
+  | 'etl'
 
 export type Mode = 'simple' | 'custom'
 
diff --git a/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx b/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx
index 785bb992b6824..c321490e436ab 100644
--- a/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx
+++ b/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx
@@ -33,6 +33,7 @@ import {
 } from 'ui-patterns/InnerSideMenu'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 import { FeaturePreviewSidebarPanel } from '../../ui/FeaturePreviewSidebarPanel'
+import { useReplicationSourcesQuery } from 'data/replication/sources-query'
 
 const SupaIcon = ({ className }: { className?: string }) => {
   return (
@@ -91,6 +92,19 @@ export function LogsSidebarMenuV2() {
     realtimeAll: realtimeEnabled,
   } = useIsFeatureEnabled(['project_storage:all', 'project_auth:all', 'realtime:all'])
 
+  const enablePgReplicate = useFlag('enablePgReplicate')
+  const { data: etlData, isLoading: isETLLoading } = useReplicationSourcesQuery(
+    {
+      projectRef: ref,
+    },
+    {
+      enabled: enablePgReplicate,
+    }
+  )
+
+  // [Jordi] We only want to show ETL logs if the user has the feature enabled AND they're using the feature aka they've created a source.
+  const showETLLogs = enablePgReplicate && (etlData?.sources?.length ?? 0) > 0 && !isETLLoading
+
   const { plan: orgPlan, isLoading: isOrgPlanLoading } = useCurrentOrgPlan()
   const isFreePlan = !isOrgPlanLoading && orgPlan?.id === 'free'
 
@@ -183,6 +197,14 @@ export function LogsSidebarMenuV2() {
       url: `/project/${ref}/logs/pgcron-logs`,
       items: [],
     },
+    showETLLogs
+      ? {
+          name: 'ETL Replication',
+          key: 'etl_replication_logs',
+          url: `/project/${ref}/logs/etl-replication-logs`,
+          items: [],
+        }
+      : null,
   ].filter((x) => x !== null)
 
   const OPERATIONAL_COLLECTIONS = IS_PLATFORM
diff --git a/apps/studio/pages/project/[ref]/logs/etl-replication-logs.tsx b/apps/studio/pages/project/[ref]/logs/etl-replication-logs.tsx
new file mode 100644
index 0000000000000..e80111dc90eea
--- /dev/null
+++ b/apps/studio/pages/project/[ref]/logs/etl-replication-logs.tsx
@@ -0,0 +1,27 @@
+import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
+import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer'
+import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
+import DefaultLayout from 'components/layouts/DefaultLayout'
+import type { NextPageWithLayout } from 'types'
+import { useParams } from 'common'
+
+export const LogPage: NextPageWithLayout = () => {
+  const { ref } = useParams()
+
+  return (
+    <LogsPreviewer
+      condensedLayout
+      queryType="etl"
+      projectRef={ref!}
+      tableName={LogsTableName.ETL}
+    />
+  )
+}
+
+LogPage.getLayout = (page) => (
+  <DefaultLayout>
+    <LogsLayout title="ETL Replication Logs">{page}</LogsLayout>
+  </DefaultLayout>
+)
+
+export default LogPage

From e790c9205992af0092b1716a0cc5551ae4ac35c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AF=B8=E5=B2=B3?= <dengfuping_private@163.com>
Date: Fri, 15 Aug 2025 20:18:29 +0800
Subject: [PATCH 2/4] fix(design-system): @import rules order should be correct
 (#37825)

---
 apps/design-system/styles/globals.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/design-system/styles/globals.css b/apps/design-system/styles/globals.css
index 2f2e162c7a249..0b8e85d7e22b6 100644
--- a/apps/design-system/styles/globals.css
+++ b/apps/design-system/styles/globals.css
@@ -1,12 +1,12 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 @import './../../../packages/ui/build/css/source/global.css';
 @import './../../../packages/ui/build/css/themes/dark.css';
 @import './../../../packages/ui/build/css/themes/classic-dark.css';
 @import './../../../packages/ui/build/css/themes/light.css';
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @layer base {
   :root {
     --chart-1: 12 76% 61%;

From 35b09ac55c9f287c55e96b6ee5276935991b8338 Mon Sep 17 00:00:00 2001
From: Ivan Vasilov <vasilov.ivan@gmail.com>
Date: Fri, 15 Aug 2025 15:24:54 +0200
Subject: [PATCH 3/4] chore: Add lint warning on using default exports in the
 apps (except in app and pages folder) (#37952)

Add lint warning on using default exports in the apps (except in app and pages folders).
---
 packages/eslint-config-supabase/next.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/eslint-config-supabase/next.js b/packages/eslint-config-supabase/next.js
index d9a36a7bd92e8..f3f39c45b6639 100644
--- a/packages/eslint-config-supabase/next.js
+++ b/packages/eslint-config-supabase/next.js
@@ -3,5 +3,14 @@ module.exports = {
   rules: {
     '@next/next/no-html-link-for-pages': 'off',
     'react/jsx-key': 'off',
+    'no-restricted-exports': ['warn', { restrictDefaultExports: { direct: true } }],
   },
+  overrides: [
+    {
+      files: ['pages/**', 'app/**'],
+      rules: {
+        'no-restricted-exports': 'off',
+      },
+    },
+  ],
 }

From 2cca945908bcdda257936cde81cc5a31feaf436e Mon Sep 17 00:00:00 2001
From: "kemal.earth" <606977+kemaldotearth@users.noreply.github.com>
Date: Fri, 15 Aug 2025 16:51:42 +0100
Subject: [PATCH 4/4] fix(www): alignment of edge functions page highlights
 (#37954)

fix: add footerPosition prop for edge functions highlights

footerPosition prop was missing thus breaking the page layout.
---
 apps/www/pages/edge-functions.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/www/pages/edge-functions.tsx b/apps/www/pages/edge-functions.tsx
index 6142ff119773a..6846bed35ab8d 100644
--- a/apps/www/pages/edge-functions.tsx
+++ b/apps/www/pages/edge-functions.tsx
@@ -50,6 +50,7 @@ function EdgeFunctions() {
         <ProductHeader
           {...pageData.heroSection}
           footer={<HighlightColumns highlights={pageData.highlightsSection.highlights} />}
+          footerPosition="bottom"
         />
         <SingleQuote
           id="quote"