From b9d1e2cd16949fe7466752b9d0c2685ebd100b77 Mon Sep 17 00:00:00 2001
From: Pavlos Koutoglou <pkoutoglou@gmail.com>
Date: Wed, 6 May 2026 18:52:39 +0300
Subject: [PATCH] feat(Git Sync): enhance migration view with best practices
 note and UI improvements (#9900)

---
 .../insomnia/src/routes/git-migration.$.tsx   | 36 +++++++++++++++----
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/packages/insomnia/src/routes/git-migration.$.tsx b/packages/insomnia/src/routes/git-migration.$.tsx
index c340f06ff9..1681ba1000 100644
--- a/packages/insomnia/src/routes/git-migration.$.tsx
+++ b/packages/insomnia/src/routes/git-migration.$.tsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router';
 
 import { Button } from '~/basic-components/button';
 import { CopyButton } from '~/ui/components/base/copy-button';
+import { Link as ExternalLink } from '~/ui/components/base/link';
 import { InsomniaLogo } from '~/ui/components/insomnia-icon';
 import { TrailLinesContainer } from '~/ui/components/trail-lines-container';
 import git_migration from '~/ui/images/git-migration/git.png';
@@ -89,9 +90,9 @@ const MigrationView = () => {
               <p className="text-sm">We hit an unexpected error while updating your file system. Please try again.</p>
               <p className="text-sm text-[#828282]">
                 Having trouble and need to contact us, or back up to an old version? See our{' '}
-                <Link className="underline" to="https://developer.konghq.com/insomnia/git-sync/">
+                <ExternalLink className="underline" href="https://developer.konghq.com/insomnia/git-sync/">
                   docs.
-                </Link>
+                </ExternalLink>
               </p>
             </>
           ) : (
@@ -100,6 +101,13 @@ const MigrationView = () => {
                 In order to continue with this update, we need to adjust your local projects. This is required to enable
                 managing Insomnia changes using git on the CLI.
               </p>
+              <p className="text-sm">
+                Note: This change is backwards compatible, but we strongly recommend{' '}
+                <ExternalLink className="underline" href="https://developer.konghq.com/insomnia/git-sync/">
+                  following these best practices
+                </ExternalLink>{' '}
+                when returning to an earlier version of Insomnia.
+              </p>
               <p className="text-sm">
                 {isUpdateRunning
                   ? 'Note: Your data is safe and the update only takes seconds.'
@@ -110,7 +118,10 @@ const MigrationView = () => {
 
           <div className="flex h-[32px] w-full justify-end">
             {isUpdateCompletedSuccessfully ? (
-              <Link className="border border-solid border-(--hl-md) bg-(--color-surprise) font-semibold text-(--color-font-surprise) flex h-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm ring-1 ring-transparent transition-all focus:ring-(--hl-md) focus:ring-inset aria-pressed:opacity-80" to="/organization">
+              <Link
+                className="flex h-full items-center justify-center gap-2 rounded-md border border-solid border-(--hl-md) bg-(--color-surprise) px-4 py-2 text-sm font-semibold text-(--color-font-surprise) ring-1 ring-transparent transition-all focus:ring-(--hl-md) focus:ring-inset aria-pressed:opacity-80"
+                to="/organization"
+              >
                 Open Insomnia
               </Link>
             ) : isUpdateCompletedWithErrors ? (
@@ -123,7 +134,10 @@ const MigrationView = () => {
                   <i className="fa fa-copy" />
                   Copy Error Logs
                 </CopyButton>
-                <Link className="border border-solid border-(--hl-md) bg-(--color-surprise) font-semibold text-(--color-font-surprise) flex h-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm ring-1 ring-transparent transition-all focus:ring-(--hl-md) focus:ring-inset aria-pressed:opacity-80" to="/organization">
+                <Link
+                  className="flex h-full items-center justify-center gap-2 rounded-md border border-solid border-(--hl-md) bg-(--color-surprise) px-4 py-2 text-sm font-semibold text-(--color-font-surprise) ring-1 ring-transparent transition-all focus:ring-(--hl-md) focus:ring-inset aria-pressed:opacity-80"
+                  to="/organization"
+                >
                   Open Insomnia
                 </Link>
               </div>
@@ -137,12 +151,20 @@ const MigrationView = () => {
                   <i className="fa fa-copy" />
                   Copy Error Logs
                 </CopyButton>
-                <Button className="border border-solid border-(--hl-md) bg-(--color-surprise) font-semibold text-(--color-font-surprise) flex h-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm ring-1 ring-transparent transition-all focus:ring-(--hl-md) focus:ring-inset aria-pressed:opacity-80" onClick={handleMigration} isDisabled={isUpdateRunning}>
+                <Button
+                  className="flex h-full items-center justify-center gap-2 rounded-md border border-solid border-(--hl-md) bg-(--color-surprise) px-4 py-2 text-sm font-semibold text-(--color-font-surprise) ring-1 ring-transparent transition-all focus:ring-(--hl-md) focus:ring-inset aria-pressed:opacity-80"
+                  onClick={handleMigration}
+                  isDisabled={isUpdateRunning}
+                >
                   {isUpdateRunning ? 'Updating...' : 'Retry Update'}
                 </Button>
               </div>
             ) : (
-              <Button className="border border-solid border-(--hl-md) bg-(--color-surprise) font-semibold text-(--color-font-surprise) flex h-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm ring-1 ring-transparent transition-all focus:ring-(--hl-md) focus:ring-inset aria-pressed:opacity-80" onClick={handleMigration} isDisabled={isUpdateRunning}>
+              <Button
+                className="flex h-full items-center justify-center gap-2 rounded-md border border-solid border-(--hl-md) bg-(--color-surprise) px-4 py-2 text-sm font-semibold text-(--color-font-surprise) ring-1 ring-transparent transition-all focus:ring-(--hl-md) focus:ring-inset aria-pressed:opacity-80"
+                onClick={handleMigration}
+                isDisabled={isUpdateRunning}
+              >
                 {isUpdateRunning ? 'Updating...' : 'Update Now'}
               </Button>
             )}
@@ -182,7 +204,7 @@ const Component = () => {
                 </div>
                 <div className="flex w-full justify-end">
                   <Button
-                    className="border border-solid border-(--hl-md) bg-(--color-surprise) font-semibold text-(--color-font-surprise) flex h-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm ring-1 ring-transparent transition-all focus:ring-(--hl-md) focus:ring-inset aria-pressed:opacity-80"
+                    className="flex h-full items-center justify-center gap-2 rounded-md border border-solid border-(--hl-md) bg-(--color-surprise) px-4 py-2 text-sm font-semibold text-(--color-font-surprise) ring-1 ring-transparent transition-all focus:ring-(--hl-md) focus:ring-inset aria-pressed:opacity-80"
                     onClick={() => {
                       setShowMigrationView(true);
                     }}