IndexedDB migration: implement the migrations differently

src/views/DatabaseMigration.vue

@@ -169,11 +169,64 @@
             icon-name="check"
             svg-class="-ml-1 mr-3 h-5 w-5"
           />
-          Migrate All (Recommended)
+          Migrate All
         </button>
 
         <div class="w-full border-t border-gray-200 my-4"></div>
 
+        <!-- Error State -->
+        <div
+          v-if="error"
+          class="mb-6 bg-red-50 border border-red-200 rounded-lg p-4"
+        >
+          <div class="flex">
+            <div class="flex-shrink-0">
+              <IconRenderer
+                icon-name="warning"
+                svg-class="h-5 w-5 text-red-400"
+                fill="currentColor"
+              />
+            </div>
+            <div class="ml-3">
+              <h3 class="text-sm font-medium text-red-800">Error</h3>
+              <div class="mt-2 text-sm text-red-700">
+                <p>{{ error }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Success State -->
+        <div
+          v-if="successMessage"
+          class="mb-6 bg-green-50 border border-green-200 rounded-lg p-4"
+        >
+          <div class="flex">
+            <div class="flex-shrink-0">
+              <IconRenderer
+                icon-name="check"
+                svg-class="h-5 w-5 text-green-400"
+              />
+            </div>
+            <div class="ml-3">
+              <h3 class="text-sm font-medium text-green-800">Success</h3>
+              <div class="mt-2 text-sm text-green-700">
+                <p>{{ successMessage }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="w-full border-t border-gray-200 my-4"></div>
+
+        <button
+          class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          @click="exportComparison"
+        >
+          <IconRenderer icon-name="download" svg-class="-ml-1 mr-3 h-5 w-5" />
+          Export Comparison
+        </button>
+
         <button
           :disabled="isLoading"
           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
@@ -194,25 +247,7 @@
         </button>
 
         <button
-          :disabled="isLoading || !downloadSettingsContactsBlob || !comparison"
-          class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
-          @click="migrateContacts"
-        >
-          <IconRenderer icon-name="plus" svg-class="-ml-1 mr-3 h-5 w-5" />
-          Migrate Contacts
-        </button>
-
-        <button
-          :disabled="isLoading || !downloadSettingsContactsBlob || !comparison"
-          class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 disabled:opacity-50 disabled:cursor-not-allowed"
-          @click="migrateSettings"
-        >
-          <IconRenderer icon-name="settings" svg-class="-ml-1 mr-3 h-5 w-5" />
-          Migrate Settings
-        </button>
-
-        <button
-          :disabled="isLoading || !downloadMnemonic || !comparison"
+          :disabled="isLoading"
           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 disabled:opacity-50 disabled:cursor-not-allowed"
           @click="migrateAccounts"
         >
@@ -221,12 +256,21 @@
         </button>
 
         <button
-          :disabled="!comparison"
-          class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
-          @click="exportComparison"
+          :disabled="isLoading"
+          class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          @click="migrateSettings"
         >
-          <IconRenderer icon-name="download" svg-class="-ml-1 mr-3 h-5 w-5" />
-          Export Comparison
+          <IconRenderer icon-name="settings" svg-class="-ml-1 mr-3 h-5 w-5" />
+          Migrate Settings
+        </button>
+
+        <button
+          :disabled="isLoading"
+          class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          @click="migrateContacts"
+        >
+          <IconRenderer icon-name="plus" svg-class="-ml-1 mr-3 h-5 w-5" />
+          Migrate Contacts
         </button>
       </div>
 
@@ -287,49 +331,6 @@
         </div>
       </div>
 
-      <!-- Error State -->
-      <div
-        v-if="error"
-        class="mb-6 bg-red-50 border border-red-200 rounded-lg p-4"
-      >
-        <div class="flex">
-          <div class="flex-shrink-0">
-            <IconRenderer
-              icon-name="warning"
-              svg-class="h-5 w-5 text-red-400"
-              fill="currentColor"
-            />
-          </div>
-          <div class="ml-3">
-            <h3 class="text-sm font-medium text-red-800">Error</h3>
-            <div class="mt-2 text-sm text-red-700">
-              <p>{{ error }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Success State -->
-      <div
-        v-if="successMessage"
-        class="mb-6 bg-green-50 border border-green-200 rounded-lg p-4"
-      >
-        <div class="flex">
-          <div class="flex-shrink-0">
-            <IconRenderer
-              icon-name="check"
-              svg-class="h-5 w-5 text-green-400"
-            />
-          </div>
-          <div class="ml-3">
-            <h3 class="text-sm font-medium text-green-800">Success</h3>
-            <div class="mt-2 text-sm text-green-700">
-              <p>{{ successMessage }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
       <!-- Comparison Results -->
       <div v-if="comparison" class="space-y-6">
         <!-- Summary Cards -->
@@ -945,6 +946,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
+import { Router } from "vue-router";
 
 import IconRenderer from "../components/IconRenderer.vue";
 import {
@@ -989,6 +991,8 @@ import { logger } from "../utils/logger";
   },
 })
 export default class DatabaseMigration extends Vue {
+  $router!: Router;
+
   // Component state
   private comparison: DataComparison | null = null;
   private cannotfindMainAccount = false;
@@ -1148,6 +1152,7 @@ export default class DatabaseMigration extends Vue {
         if (result.warnings.length > 0) {
           this.successMessage += ` ${result.warnings.length} warnings.`;
         }
+        this.successMessage += " Now finish by migrating contacts.";
         logger.info(
           "[DatabaseMigration] Complete migration successful",
           result,
@@ -1211,39 +1216,15 @@ export default class DatabaseMigration extends Vue {
    * @returns {Promise<void>}
    */
   async migrateContacts(): Promise<void> {
-    this.setLoading("Migrating contacts...");
-    this.clearMessages();
-
-    try {
-      const result: MigrationResult = await migrateContacts(
-        this.overwriteExisting,
-      );
-
-      if (result.success) {
-        this.successMessage = `Successfully migrated ${result.contactsMigrated} contacts.`;
-        if (result.warnings.length > 0) {
-          this.successMessage += ` ${result.warnings.length} warnings.`;
-        }
-        logger.info(
-          "[DatabaseMigration] Contact migration completed successfully",
-          result,
-        );
-
-        // Refresh comparison data after successful migration
-        this.comparison = await compareDatabases();
-      } else {
-        this.error = `Migration failed: ${result.errors.join(", ")}`;
-        logger.error(
-          "[DatabaseMigration] Contact migration failed:",
-          result.errors,
-        );
-      }
-    } catch (error) {
-      this.error = `Failed to migrate contacts: ${error}`;
-      logger.error("[DatabaseMigration] Contact migration failed:", error);
-    } finally {
-      this.setLoading("");
-    }
+    // load all contacts from indexedDB
+    const dexieContacts = await getDexieContacts();
+    // now reroute to the contact import view with query parameter of contacts
+    this.$router.push({
+      name: "contact-import",
+      query: {
+        contacts: JSON.stringify(dexieContacts),
+      },
+    });
   }
 
   /**
@@ -1306,9 +1287,7 @@ export default class DatabaseMigration extends Vue {
     this.clearMessages();
 
     try {
-      const result: MigrationResult = await migrateAccounts(
-        this.overwriteExisting,
-      );
+      const result: MigrationResult = await migrateAccounts();
 
       if (result.success) {
         this.successMessage = `Successfully migrated ${result.accountsMigrated} accounts.`;