From efc0ad3fcee33d146f3ce38dd2e6f39cd1029ae7 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Thu, 23 Jul 2026 12:38:10 +0200
Subject: [PATCH] fix: fix migration dialog does not show the correct content
 in some edge cases (#48239)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem

When two projects have migrations with the same version but different
content, the details panel does not update the content and shows the
first loaded migration one.

## Solution

This is because the CodeEditor does not react to content only changes.
Settings its `key` ensures it does.
Unfortunately, we can't unit test that the CodeEditor content changes
correctly.

## How to test

- create two projects and push a migration with the same version but
different content on them
- open the _Database/Migrations_ page for the first project
- click the _View migration SQL_ and ensure its content matches the
migration for this project
- select the other project using the top bar
- click the _View migration SQL_ and ensure its content matches the
migration for this project

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

## Summary by CodeRabbit

* **Bug Fixes**
* Improved migration SQL display when switching between migrations or
projects.
* Ensured the code editor consistently refreshes with the currently
selected migration’s statements.
  * Improved type safety for the migration search input.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../interfaces/Database/Migrations/Migrations.tsx    | 12 +++++++-----
 .../pages/project/[ref]/database/migrations.tsx      |  2 +-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx b/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx
index 24f4763fa21..b893c62e324 100644
--- a/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx
+++ b/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx
@@ -32,7 +32,7 @@ import { formatMigrationVersionLabel, parseMigrationVersion } from '@/lib/migrat
 import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
 import { useShortcut } from '@/state/shortcuts/useShortcut'
 
-const Migrations = () => {
+export const Migrations = () => {
   const [search, setSearch] = useState('')
   const [selectedMigration, setSelectedMigration] = useState<DatabaseMigration>()
   const searchInputRef = useRef<HTMLInputElement>(null)
@@ -116,7 +116,7 @@ const Migrations = () => {
                   placeholder="Search for a migration"
                   value={search}
                   className="w-full lg:w-52"
-                  onChange={(e: any) => setSearch(e.target.value)}
+                  onChange={(e) => setSearch(e.target.value)}
                   icon={<Search />}
                 />
                 <Card>
@@ -221,10 +221,14 @@ const Migrations = () => {
         <div className="h-full">
           <div className="relative h-full">
             <CodeEditor
+              // The CodeEditor does not react to content only changes,
+              // specifically when two projects have migrations with the same version but different content.
+              // Setting the key ensure it always update when the migration changes
+              key={`${project?.ref}-${selectedMigration?.version}`}
               isReadOnly
               id={selectedMigration?.version ?? ''}
               language="pgsql"
-              defaultValue={
+              value={
                 selectedMigration?.statements?.join(';\n') +
                 (selectedMigration?.statements?.length ? ';' : '')
               }
@@ -235,5 +239,3 @@ const Migrations = () => {
     </>
   )
 }
-
-export default Migrations
diff --git a/apps/studio/pages/project/[ref]/database/migrations.tsx b/apps/studio/pages/project/[ref]/database/migrations.tsx
index e57b15dd6fd..425a6ec8762 100644
--- a/apps/studio/pages/project/[ref]/database/migrations.tsx
+++ b/apps/studio/pages/project/[ref]/database/migrations.tsx
@@ -9,7 +9,7 @@ import {
 } from 'ui-patterns/PageHeader'
 import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
 
-import Migrations from '@/components/interfaces/Database/Migrations/Migrations'
+import { Migrations } from '@/components/interfaces/Database/Migrations/Migrations'
 import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
 import { DefaultLayout } from '@/components/layouts/DefaultLayout'
 import { DocsButton } from '@/components/ui/DocsButton'