feat: add backup workflow to cloud

src/components/ui/UiTabs.vue

@@ -37,7 +37,7 @@ const props = defineProps({
   small: Boolean,
   fill: Boolean,
 });
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'change']);
 
 const tabTypes = {
   default: 'border-b',
@@ -48,6 +48,7 @@ const hoverIndicator = ref(null);
 const showHoverIndicator = ref(false);
 
 function updateActive(id) {
+  emit('change', id);
   emit('update:modelValue', id);
 }
 function hoverHandler({ target }) {

src/content/services/record-workflow.js

@@ -144,11 +144,13 @@ function clickListener(event) {
     }
   }
 
+  const elText = target.innerText || target.ariaLabel || target.title;
+
   addBlock({
     isClickLink,
     id: 'event-click',
     data: { selector },
-    description: target.innerText.slice(0, 64) || selector,
+    description: elText.slice(0, 64) || selector,
   });
 }
 

src/locales/en/newtab.json

@@ -27,14 +27,16 @@
       "reloadPage": "Reload the page to take effect"
     },
     "menu": {
+      "backup": "Backup Workflows",
       "general": "General",
       "shortcuts": "Shortcuts",
       "about": "About"
     },
     "backupWorkflows": {
-      "title": "Backup Workflows",
+      "title": "Local Backup",
       "invalidPassword": "Invalid password",
       "workflowsAdded": "{count} workflows have been added",
+      "name": "Backup workflows",
       "backup": {
         "button": "Backup",
         "encrypt": "Encrypt with password"
@@ -43,6 +45,24 @@
         "title": "Restore workflows",
         "button": "Restore",
         "update": "Update if the workflow exists"
+      },
+      "cloud": {
+        "buttons": {
+          "local": "Local",
+          "cloud": "Cloud"
+        },
+        "delete": "Delete backup",
+        "title": "Cloud Backup",
+        "sync": "Sync",
+        "lastSync": "Last sync",
+        "lastBackup": "Last backup",
+        "select": "Select workflows",
+        "storedWorkflows": "Workflows that are stored in the cloud",
+        "selected": "Selected",
+        "selectText": "Select workflows that you want to backup",
+        "selectAll": "Select all",
+        "deselectAll": "Deselect all",
+        "needSelectWorkflow": "You need to select workflows that you want to backup"
       }
     }
   },

src/models/workflow.js

@@ -1,5 +1,6 @@
 import { Model } from '@vuex-orm/core';
 import { nanoid } from 'nanoid';
+import browser from 'webextension-polyfill';
 import Log from './log';
 import { cleanWorkflowTriggers } from '@/utils/workflow-trigger';
 import { fetchApi } from '@/utils/api';
@@ -14,6 +15,7 @@ class Workflow extends Model {
 
   static fields() {
     return {
+      __id: this.attr(null),
       id: this.uid(() => nanoid()),
       name: this.string(''),
       icon: this.string('riGlobalLine'),
@@ -66,26 +68,26 @@ class Workflow extends Model {
   static async afterDelete({ id }) {
     try {
       await cleanWorkflowTriggers(id);
+      const hostedWorkflow = this.store().state.hostWorkflows[id];
+      const { backupIds } = await browser.storage.local.get('backupIds');
+      const isBackup = (backupIds || []).includes(id);
 
-      try {
-        const hostedWorkflow = this.store().state.hostWorkflows[id];
+      if (hostedWorkflow || isBackup) {
+        const response = await fetchApi(`/me/workflows?id=${id}`, {
+          method: 'DELETE',
+        });
 
-        if (hostedWorkflow) {
-          const response = await fetchApi(
-            `/me/workflows/host?id=${hostedWorkflow.hostId}`,
-            {
-              method: 'DELETE',
-            }
-          );
+        if (!response.ok) {
+          throw new Error(response.statusText);
+        }
 
-          if (response.status !== 200) {
-            throw new Error(response.statusText);
-          }
+        if (isBackup) {
+          backupIds.splice(backupIds.indexOf(id), 1);
+          await browser.storage.local.set({ backupIds });
         }
-      } catch (error) {
-        console.error(error);
+
+        await browser.storage.local.set({ clearCache: true });
       }
-      /* delete host workflow */
     } catch (error) {
       console.error(error);
     }

src/newtab/App.vue

@@ -58,7 +58,8 @@ import { compare } from 'compare-versions';
 import browser from 'webextension-polyfill';
 import { useTheme } from '@/composable/theme';
 import { loadLocaleMessages, setI18nLanguage } from '@/lib/vue-i18n';
-import { fetchApi, getSharedWorkflows, getHostWorkflows } from '@/utils/api';
+import { fetchApi, getSharedWorkflows, getUserWorkflows } from '@/utils/api';
+import Workflow from '@/models/workflow';
 import AppSidebar from '@/components/newtab/app/AppSidebar.vue';
 
 const { t } = useI18n();
@@ -100,30 +101,81 @@ async function fetchUserData() {
     if (response.status !== 200) {
       throw new Error(response.statusText);
     }
-    if (!user) {
-      sessionStorage.removeItem('shared-workflows');
-      sessionStorage.removeItem('host-workflows');
 
-      return;
+    const username = localStorage.getItem('username');
+
+    if (!user || username !== user.username) {
+      sessionStorage.removeItem('shared-workflows');
+      sessionStorage.removeItem('user-workflows');
+      sessionStorage.removeItem('backup-workflows');
+
+      await browser.storage.local.remove([
+        'backupIds',
+        'lastBackup',
+        'lastSync',
+      ]);
+
+      if (username !== user.username) {
+        await Workflow.update({
+          where: ({ __id }) => __id !== null,
+          data: { __id: null },
+        });
+      }
+
+      if (!user) return;
     }
 
     store.commit('updateState', {
       key: 'user',
       value: user,
     });
 
-    const mapPromises = { 0: 'sharedWorkflows', 1: 'hostWorkflows' };
-    const promises = await Promise.allSettled([
+    const [sharedWorkflows, userWorkflows] = await Promise.allSettled([
       getSharedWorkflows(),
-      getHostWorkflows(),
+      getUserWorkflows(),
     ]);
-    promises.forEach(({ status, value }, index) => {
-      if (status !== 'fulfilled') return;
+    localStorage.setItem('username', user.username);
+
+    if (sharedWorkflows.status === 'fulfilled') {
+      store.commit('updateState', {
+        key: 'sharedWorkflows',
+        value: sharedWorkflows.value,
+      });
+    }
+
+    if (userWorkflows.status === 'fulfilled') {
+      console.log(userWorkflows);
+      const { backup, hosted } = userWorkflows.value;
 
       store.commit('updateState', {
-        value,
-        key: mapPromises[index],
+        key: 'hostWorkflows',
+        value: hosted,
       });
+
+      if (backup.length > 0) {
+        const { lastBackup } = browser.storage.local.get('lastBackup');
+        if (!lastBackup) {
+          const backupIds = backup.map(({ id }) => id);
+
+          store.commit('updateState', {
+            key: 'backupIds',
+            value: backupIds,
+          });
+          await browser.storage.local.set({
+            backupIds,
+            lastBackup: new Date().toISOString(),
+          });
+        }
+
+        await Workflow.insertOrUpdate({
+          data: backup,
+        });
+      }
+    }
+
+    store.commit('updateState', {
+      key: 'userDataRetrieved',
+      value: true,
     });
   } catch (error) {
     console.error(error);

src/newtab/pages/Settings.vue

@@ -38,6 +38,7 @@ const { t } = useI18n();
 
 const menus = [
   { id: 'general', path: '/settings', icon: 'riSettings3Line' },
+  { id: 'backup', path: '/backup', icon: 'riDatabase2Line' },
   { id: 'shortcuts', path: '/shortcuts', icon: 'riKeyboardLine' },
   { id: 'about', path: '/about', icon: 'riInformationLine' },
 ];