fix: fix migration dialog does not show the correct content in some edge cases (#48239)

## 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 -->

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

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'