From 3161e5372e850f1b75c95ec424097a731bf8dce3 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 30 Dec 2024 23:13:05 +0300
Subject: [PATCH] Add migration assistant for designer

---
 .../components/layout/AppDesigner.vue         |  2 +-
 .../designer/create/DesignCreateTheme.vue     |  2 +-
 .../designer/dashboard/DesignDashboard.vue    |  5 +-
 .../editor/settings/DesignSettings.vue        | 93 ++++++++++++++++++-
 4 files changed, 94 insertions(+), 8 deletions(-)

diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
index 6df1ec6f4..17a157967 100644
--- a/apps/showcase/components/layout/AppDesigner.vue
+++ b/apps/showcase/components/layout/AppDesigner.vue
@@ -28,6 +28,7 @@
             <DesignEditorFooter v-if="$appState.designer.activeView === 'editor'" />
         </template>
     </Drawer>
+    <ConfirmDialog group="designer"></ConfirmDialog>
 </template>
 
 <script>
@@ -120,7 +121,6 @@ export default {
         },
         generateACTokens(parentPath, obj) {
             for (let key in obj) {
-
                 if (key === 'dark' || key === 'components' || key === 'directives') {
                     continue;
                 }
diff --git a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
index 5193add55..4d52b3a83 100644
--- a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
+++ b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
@@ -139,7 +139,7 @@ export default {
                     if (error) {
                         this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
                     } else {
-                        this.loadThemeEditor(data.t_key, newPreset);
+                        this.loadThemeEditor(data.t_key, data.t_preset);
                     }
                 } else {
                     this.$toast.add({ severity: 'error', summary: 'An error occured', detail: 'A valid license required', life: 3000 });
diff --git a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
index 8b86daf8a..d989e883b 100644
--- a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
+++ b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
@@ -53,8 +53,6 @@
             </div>
         </template>
         <Menu ref="themeMenu" :model="themeOptions" :popup="true" />
-
-        <ConfirmDialog group="designer"></ConfirmDialog>
     </div>
 </template>
 
@@ -86,6 +84,9 @@ export default {
                             message: 'Are you sure you want to delete this theme?',
                             header: 'Confirmation',
                             icon: 'pi pi-exclamation-triangle',
+                            acceptProps: {
+                                severity: 'contrast'
+                            },
                             rejectProps: {
                                 severity: 'secondary'
                             },
diff --git a/apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue b/apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue
index b1562e4cb..663634c81 100644
--- a/apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue
+++ b/apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue
@@ -20,24 +20,62 @@
     </section>
     <section class="mb-6">
         <div class="block text-lg font-semibold mb-2">Migration Assistant</div>
-        <span class="block text-muted-color leading-6 mb-4">Automatically update your themes to the latest version by adding any missing tokens.</span>
-        <div>
+        <span class="block text-muted-color leading-6 mb-4"
+            >Automatically update your themes to the latest version. This tool does not override the values of existing tokens, and only adds missing tokens if necessary. Still, it is recommended to duplicate your theme as a backup and run a preview
+            before the migration.
+        </span>
+        <div class="flex justify-between">
             <button
                 type="button"
-                @click="checkForUpdates"
+                @click="preview"
                 class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
             >
-                Check for Updates
+                Preview
             </button>
+            <button
+                type="button"
+                :disabled="status !== 'preview'"
+                @click="confirmMigration"
+                class="px-3 py-2 bg-zinc-950 disabled:hover:bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:disabled:hover:bg-white dark:text-black rounded-md font-medium cursor-pointer disabled:cursor-auto transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60"
+            >
+                Migrate
+            </button>
+        </div>
+        <div v-if="status === 'preview'">
+            <div v-if="missingTokens.length" class="p-3 bg-yellow-100 text-yellow-950 dark:bg-amber-600 dark:text-black font-medium mt-4 rounded-md leading-normal">
+                There are missing tokens, you may add them automatically using the migrate option with placeholder values. After migration, visit the corresponding section to define the actual values for your theme.
+            </div>
+            <div v-else class="p-3 bg-green-100 text-green-950 dark:bg-green-500 dark:text-black font-medium mt-4 rounded-md leading-normal">Your theme is up to date.</div>
+        </div>
+        <div v-else-if="status === 'updated'">
+            <div class="p-3 bg-green-100 text-green-950 dark:bg-green-500 dark:text-black font-medium mt-4 rounded-md leading-normal">Your theme is successfully updated.</div>
+        </div>
+
+        <div v-if="missingTokens.length" class="max-h-60 overflow-auto mt-4 px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 w-full">
+            <ul class="flex flex-col gap-1">
+                <li v-for="token of missingTokens" :key="token.value" class="flex justify-between">
+                    <span class="bg-red-50 text-red-950 text-sm font-medium px-2 py-1 rounded-lg">{{ token.value }}</span>
+                    <span class="bg-zinc-950 text-white dark:bg-white dark:text-black rounded-full px-2 text-xs inline-flex items-center font-medium">{{ token.type }}</span>
+                </li>
+            </ul>
         </div>
     </section>
 </template>
 
 <script>
 export default {
+    setup() {
+        const runtimeConfig = useRuntimeConfig();
+
+        return {
+            designerApiBase: runtimeConfig.public.designerApiBase
+        };
+    },
     inject: ['designerService'],
     data() {
         return {
+            missingTokens: [],
+            status: null,
             fontSizes: ['12px', '13px', '14px', '15px', '16px'],
             fonts: ['DM Sans', 'Inter var', 'Figtree', 'Lato', 'Lexend', 'Poppins', 'Public Sans', 'Raleway', 'Roboto', 'Open Sans', 'Quicksand']
         };
@@ -50,6 +88,53 @@ export default {
         changeBaseFontSize() {
             document.documentElement.style.fontSize = this.$appState.designer.theme.config.font_family;
             this.designerService.saveTheme(this.$appState.designer.theme);
+        },
+        async preview() {
+            const { data, error } = await $fetch(this.designerApiBase + '/theme/migrate/preview/' + this.$appState.designer.theme.key, {
+                method: 'PATCH',
+                body: {
+                    license_key: this.$appState.designer.licenseKey
+                }
+            });
+
+            if (error) {
+                this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
+            } else {
+                this.missingTokens = data;
+                this.status = 'preview';
+            }
+        },
+        confirmMigration() {
+            this.$confirm.require({
+                group: 'designer',
+                message: 'Are you sure you want to migrate?',
+                header: 'Confirmation',
+                icon: 'pi pi-exclamation-triangle',
+                acceptProps: {
+                    severity: 'contrast'
+                },
+                rejectProps: {
+                    severity: 'secondary'
+                },
+                accept: () => {
+                    this.migrate();
+                }
+            });
+        },
+        async migrate() {
+            const { error } = await $fetch(this.designerApiBase + '/theme/migrate/execute/' + this.$appState.designer.theme.key, {
+                method: 'PATCH',
+                body: {
+                    license_key: this.$appState.designer.licenseKey
+                }
+            });
+
+            if (error) {
+                this.$toast.add({ severity: 'error', summary: 'An error occured', detail: error.message, life: 3000 });
+            } else {
+                this.status = 'updated';
+                this.missingTokens = [];
+            }
         }
     }
 };