feat(Git Sync): enhance migration view with best practices note and UI improvements (#9900)

This commit is contained in:
Pavlos Koutoglou authored and GitHub committed 2026-05-06 18:52:39 +03:00
1 parent 1c3aded03a
commit b9d1e2cd16
1 file changed
+29 -7
@@ -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);
}}