feat: auto update flow data in lowest version

package.json

@@ -27,6 +27,7 @@
     "@codemirror/theme-one-dark": "^0.19.1",
     "@medv/finder": "^2.1.0",
     "@vuex-orm/core": "^0.36.4",
+    "compare-versions": "^4.1.2",
     "dayjs": "^1.10.7",
     "drawflow": "^0.0.51",
     "idb": "^7.0.0",

src/components/newtab/workflow/WorkflowBuilder.vue

@@ -55,8 +55,9 @@
 <script>
 /* eslint-disable camelcase */
 import { onMounted, shallowRef, reactive, getCurrentInstance } from 'vue';
-import emitter from 'tiny-emitter/instance';
 import { useI18n } from 'vue-i18n';
+import { compare } from 'compare-versions';
+import emitter from 'tiny-emitter/instance';
 import { tasks } from '@/utils/shared';
 import { parseJSON } from '@/utils/helper';
 import { useGroupTooltip } from '@/composable/groupTooltip';
@@ -68,8 +69,12 @@ export default {
       type: [Object, String],
       default: null,
     },
+    version: {
+      type: String,
+      default: '',
+    },
   },
-  emits: ['load', 'deleteBlock'],
+  emits: ['load', 'deleteBlock', 'update'],
   setup(props, { emit }) {
     useGroupTooltip();
     const { t } = useI18n();
@@ -184,13 +189,50 @@ export default {
       emit('load', editor.value);
 
       if (props.data) {
-        const data =
+        let data =
           typeof props.data === 'string'
             ? parseJSON(props.data.replace(/BlockNewTab/g, 'BlockBasic'), null)
             : props.data;
 
         if (!data) return;
 
+        const currentExtVersion = chrome.runtime.getManifest().version;
+        const isOldWorkflow = compare(
+          currentExtVersion,
+          props.version || '0.0.0',
+          '>'
+        );
+
+        if (isOldWorkflow) {
+          const newDrawflowData = Object.entries(
+            data.drawflow.Home.data
+          ).reduce((obj, [key, value]) => {
+            const newBlockData = {
+              ...tasks[value.name],
+              ...value,
+              data: {
+                ...tasks[value.name].data,
+                ...value.data,
+              },
+            };
+
+            obj[key] = newBlockData;
+
+            return obj;
+          }, {});
+
+          const drawflowData = {
+            drawflow: { Home: { data: newDrawflowData } },
+          };
+
+          data = drawflowData;
+
+          emit('update', {
+            version: currentExtVersion,
+            drawflow: JSON.stringify(drawflowData),
+          });
+        }
+
         editor.value.import(data);
       } else {
         editor.value.addNode(

src/models/workflow.js

@@ -19,8 +19,8 @@ class Workflow extends Model {
       drawflow: this.attr(''),
       dataColumns: this.attr([]),
       description: this.string(''),
+      version: this.string(''),
       globalData: this.string('[{ "key": "value" }]'),
-      lastRunAt: this.number(),
       createdAt: this.number(),
       isDisabled: this.boolean(false),
       settings: this.attr({

src/newtab/pages/workflows/[id].vue

@@ -27,16 +27,7 @@
             {{ t('common.running') }}
             <span
               v-if="workflowState.length > 0"
-              class="
-                ml-2
-                p-1
-                text-center
-                inline-block
-                text-xs
-                rounded-full
-                bg-black
-                text-white
-              "
+              class="ml-2 p-1 text-center inline-block text-xs rounded-full bg-black text-white"
               style="min-width: 25px"
             >
               {{ workflowState.length }}
@@ -61,6 +52,8 @@
           v-if="activeTab === 'editor'"
           class="h-full w-full"
           :data="workflow.drawflow"
+          :version="workflow.version"
+          @update="updateWorkflow"
           @load="editor = $event"
           @deleteBlock="deleteBlock"
         />

src/utils/workflow-data.js

@@ -21,13 +21,14 @@ export function importWorkflow() {
 
 export function exportWorkflow(workflow) {
   const keys = [
-    'dataColumns',
-    'drawflow',
-    'icon',
     'name',
+    'icon',
+    'version',
+    'drawflow',
     'settings',
     'globalData',
     'description',
+    'dataColumns',
   ];
   const content = {
     extVersion: chrome.runtime.getManifest().version,

yarn.lock

@@ -2432,6 +2432,11 @@ commondir@^1.0.1:
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
 
+compare-versions@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-4.1.2.tgz#a7b1678c897000d03a70a0e01efee43e7b04dda7"
+  integrity sha512-LAfbAbAgjnIwPsr2fvJLfrSyqAhK5nj/ffIg7a5aigry9RXJfNzVnOu0Egw8Z+G8LMDu1Qig2q48bpBzjyjZoQ==
+
 component-emitter@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"