From e541719345ede5b96b2438815726d35d0fda6d0e Mon Sep 17 00:00:00 2001
From: Jordi Enric <37541088+jordienr@users.noreply.github.com>
Date: Mon, 13 Apr 2026 10:34:39 +0200
Subject: [PATCH] fix: handle undefined columns in wrapper table display
 (#44801)

## Summary

- Adds null check for `table.columns` in `CreateWrapperSheet` and
`EditWrapperSheet` to prevent runtime errors when columns are undefined
- Fixes TypeError: "can't access property 'map', e.columns is undefined"
on `/dashboard/project/[ref]/integrations/stripe_wrapper/overview`

## Problem

When viewing the Stripe wrapper integration overview page, users
encounter a JavaScript error because `table.columns` can be undefined in
some cases, but the code attempts to call `.map()` on it directly.

## Solution

Changed `table.columns.map(...)` to `(table.columns ?? []).map(...)` to
safely handle cases where columns is undefined by defaulting to an empty
array.

## Test plan

- [ ] Navigate to
`/dashboard/project/[ref]/integrations/stripe_wrapper/overview` with a
wrapper that has tables with undefined columns
- [ ] Verify no JavaScript error occurs
- [ ] Verify tables without columns display correctly (showing "Columns:
" with nothing after)

---

Slack thread:
https://supabase.slack.com/archives/C063LNYJJKS/p1776067210776939?thread_ts=1776067141.988569&cid=C063LNYJJKS

https://claude.ai/code/session_01N6nyTggA68yktWg4b46ssL

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Fixed a stability issue in wrapper integrations where missing or
undefined column information from foreign tables could cause display
problems. The interface now safely handles these edge cases with
improved spacing and more reliable column rendering, ensuring consistent
and predictable presentation of integration data regardless of data
availability or table configuration.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Claude <noreply@anthropic.com>
---
 .../interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx    | 3 ++-
 .../interfaces/Integrations/Wrappers/EditWrapperSheet.tsx      | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
index db48446860..a3ea1b2931 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
@@ -387,7 +387,8 @@ export const CreateWrapperSheet = ({
                               {table.schema_name}.{table.table_name}
                             </p>
                             <p className="text-sm text-foreground-light">
-                              Columns: {table.columns.map((column: any) => column.name).join(', ')}
+                              Columns:{' '}
+                              {(table.columns ?? []).map((column: any) => column.name).join(', ')}
                             </p>
                           </div>
                           <div className="flex items-center space-x-2">
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx
index 91da61224f..3ab33ef202 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx
@@ -291,7 +291,8 @@ export const EditWrapperSheet = ({
                             {table.schema_name}.{table.table_name}
                           </p>
                           <p className="text-sm text-foreground-light">
-                            Columns: {table.columns.map((column: any) => column.name).join(', ')}
+                            Columns:{' '}
+                            {(table.columns ?? []).map((column: any) => column.name).join(', ')}
                           </p>
                         </div>
                         <div className="flex items-center space-x-2">