feat: add "clear cache" in workflow settings

src/background/workflow-engine/engine.js

@@ -214,13 +214,14 @@ class WorkflowEngine {
       detail.replacedValue ||
       (tasks[detail.name]?.refDataKeys && this.saveLog)
     ) {
-      const { activeTabUrl, loopData, prevBlockData } = JSON.parse(
+      const { activeTabUrl, variables, loopData, prevBlockData } = JSON.parse(
         JSON.stringify(this.referenceData)
       );
 
       this.historyCtxData[historyId] = {
         referenceData: {
           loopData,
+          variables,
           activeTabUrl,
           prevBlockData,
         },

src/components/newtab/workflow/WorkflowSettings.vue

@@ -1,67 +1,83 @@
 <template>
-  <div class="workflow-settings">
-    <div class="mb-4 flex">
-      <div class="flex-1">
-        <p class="mb-1 capitalize">
+  <div
+    class="workflow-settings space-y-4 divide-y dark:divide-gray-700 divide-gray-100"
+  >
+    <div class="flex items-center">
+      <div class="mr-4 flex-1">
+        <p>
           {{ t('workflow.settings.onError.title') }}
         </p>
-        <ui-select v-model="settings.onError" class="w-full max-w-sm">
-          <option v-for="item in onError" :key="item.id" :value="item.id">
-            {{ t(`workflow.settings.onError.items.${item.name}`) }}
-          </option>
-        </ui-select>
-      </div>
-      <label v-if="settings.onError === 'restart-workflow'" class="ml-2">
-        <p class="mb-1 capitalize">
-          {{ t('workflow.settings.restartWorkflow.for') }}
+        <p class="text-gray-600 dark:text-gray-200 text-sm leading-tight">
+          {{ t('workflow.settings.onError.description') }}
         </p>
-        <div class="flex items-center bg-input transition-colors rounded-lg">
-          <input
-            v-model.number="settings.restartTimes"
-            type="number"
-            class="py-2 px-4 w-32 rounded-lg bg-transparent"
-          />
-          <span class="px-2">
-            {{ t('workflow.settings.restartWorkflow.times') }}
-          </span>
-        </div>
-      </label>
-    </div>
-    <div>
-      <p class="mb-1 capitalize">
-        {{ t('workflow.settings.blockDelay.title') }}
-        <span :title="t('workflow.settings.blockDelay.description')">
-          &#128712;
+      </div>
+      <ui-select v-model="settings.onError">
+        <option v-for="item in onError" :key="item.id" :value="item.id">
+          {{ t(`workflow.settings.onError.items.${item.name}`) }}
+        </option>
+      </ui-select>
+      <div
+        v-if="settings.onError === 'restart-workflow'"
+        :title="t('workflow.settings.restartWorkflow.description')"
+        class="flex items-center bg-input transition-colors rounded-lg ml-4"
+      >
+        <input
+          v-model.number="settings.restartTimes"
+          type="number"
+          class="py-2 pl-2 text-right appearance-none w-12 rounded-lg bg-transparent"
+        />
+        <span class="px-2 text-sm">
+          {{ t('workflow.settings.restartWorkflow.times') }}
         </span>
-      </p>
-      <ui-input
-        v-model.number="settings.blockDelay"
-        type="number"
-        class="w-full max-w-sm"
-      />
-    </div>
-    <div class="flex mt-6">
-      <ui-switch v-model="settings.debugMode" class="mr-4" />
-      <p class="capitalize">{{ t('workflow.settings.debugMode') }}</p>
+      </div>
     </div>
-    <div class="flex mt-6">
-      <ui-switch v-model="settings.reuseLastState" class="mr-4" />
-      <p class="capitalize">{{ t('workflow.settings.reuseLastState') }}</p>
+    <div class="flex items-center pt-4">
+      <div class="mr-4 flex-1">
+        <p>
+          {{ t('workflow.settings.blockDelay.title') }}
+        </p>
+        <p class="text-gray-600 dark:text-gray-200 text-sm leading-tight">
+          {{ t('workflow.settings.blockDelay.description') }}
+        </p>
+      </div>
+      <ui-input v-model.number="settings.blockDelay" type="number" />
     </div>
-    <div class="flex mt-6">
-      <ui-switch v-model="settings.saveLog" class="mr-4" />
-      <p class="capitalize">{{ t('workflow.settings.saveLog') }}</p>
+    <div
+      v-for="item in settingItems"
+      :key="item.id"
+      class="flex items-center pt-4"
+    >
+      <div class="mr-4 flex-1">
+        <p>
+          {{ item.name }}
+        </p>
+        <p class="text-gray-600 dark:text-gray-200 text-sm leading-tight">
+          {{ item.description }}
+        </p>
+      </div>
+      <ui-switch v-model="settings[item.id]" class="mr-4" />
     </div>
-    <div class="flex mt-6">
-      <ui-switch v-model="settings.executedBlockOnWeb" class="mr-4" />
-      <p class="capitalize">{{ t('workflow.settings.executedBlockOnWeb') }}</p>
+    <div class="flex items-center pt-4">
+      <div class="mr-4 flex-1">
+        <p>
+          {{ t('workflow.settings.clearCache.title') }}
+        </p>
+        <p class="text-gray-600 dark:text-gray-200 text-sm leading-tight">
+          {{ t('workflow.settings.clearCache.description') }}
+        </p>
+      </div>
+      <ui-button @click="clearCache">
+        {{ t('workflow.settings.clearCache.btn') }}
+      </ui-button>
     </div>
   </div>
 </template>
 <script setup>
 import { onMounted, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { debounce } from '@/utils/helper';
+import { useToast } from 'vue-toastification';
+import browser from 'webextension-polyfill';
+import { debounce, parseJSON } from '@/utils/helper';
 
 const props = defineProps({
   workflow: {
@@ -72,6 +88,7 @@ const props = defineProps({
 const emit = defineEmits(['update']);
 
 const { t } = useI18n();
+const toast = useToast();
 
 const onError = [
   {
@@ -87,11 +104,54 @@ const onError = [
     name: 'restartWorkflow',
   },
 ];
+const settingItems = [
+  {
+    id: 'debugMode',
+    name: t('workflow.settings.debugMode.title'),
+    description: t('workflow.settings.debugMode.description'),
+  },
+  {
+    id: 'reuseLastState',
+    name: t('workflow.settings.reuseLastState.title'),
+    description: t('workflow.settings.reuseLastState.description'),
+  },
+  {
+    id: 'saveLog',
+    name: t('workflow.settings.saveLog'),
+    description: '',
+  },
+  {
+    id: 'executedBlockOnWeb',
+    name: t('workflow.settings.executedBlockOnWeb'),
+    description: '',
+  },
+];
 
 const settings = reactive({
   restartTimes: 3,
 });
 
+async function clearCache() {
+  try {
+    await browser.storage.local.remove(`last-state:${props.workflow.id}`);
+
+    const flows = parseJSON(props.workflow.drawflow, null);
+    const blocks = flows && flows.drawflow.Home.data;
+
+    if (blocks) {
+      Object.values(blocks).forEach(({ name, id }) => {
+        if (name !== 'loop-data') return;
+
+        localStorage.removeItem(`index:${id}`);
+      });
+    }
+
+    toast(t('workflow.settings.clearCache.info'));
+  } catch (error) {
+    console.error(error);
+  }
+}
+
 watch(
   settings,
   debounce((newSettings) => {

src/locales/en/newtab.json

@@ -163,15 +163,29 @@
     },
     "settings": {
       "saveLog": "Save workflow log",
-      "reuseLastState": "Reuse last workflow state",
       "executedBlockOnWeb": "Show executed block on web page",
-      "debugMode": "Debug mode",
+      "clearCache": {
+        "title": "Clear cache",
+        "description": "Clear cache (state and loop index) of the workflow",
+        "info": "Successful clear workflow cache",
+        "btn": "Clear"
+      },
+      "reuseLastState": {
+        "title": "Reuse last workflow state",
+        "description": "Use the state data (table, variables, and global data) from the last executed workflow"
+      },
+      "debugMode": {
+        "title": "Debug mode",
+        "description": "Execute the workflow using the Chrome DevTools Protocol"
+      },
       "restartWorkflow": {
         "for": "Restart for",
-        "times": "Times"
+        "times": "Times",
+        "description": "Max how many times the workflow will restart"
       },
       "onError": {
         "title": "On workflow error",
+        "description": "Set what to do when an error occurs in the workflow",
         "items": {
           "keepRunning": "Keep running",
           "stopWorkflow": "Stop workflow",

src/locales/fr/newtab.json

@@ -157,7 +157,10 @@
     "settings": {
       "saveLog": "Enregistrer les logs du workflow",
       "executedBlockOnWeb": "Afficher le bloc exécuté sur la page Web",
-      "debugMode": "Mode debug",
+      "debugMode": {
+        "title": "Mode debug",
+        "description": "Execute the workflow using the Chrome DevTools Protocol"
+      },
       "restartWorkflow": {
         "for": "Redémarrez pour",
         "times": "Fois"
@@ -282,4 +285,4 @@
       "of": "sur {page}"
     }
   }
-}
+}

src/locales/zh/newtab.json

@@ -156,9 +156,15 @@
     },
     "settings": {
       "saveLog": "保存工作流日志",
-      "reuseLastState": "重用上一个工作流状态",
+      "reuseLastState": {
+        "title": "重用上一个工作流状态",
+        "description": "Use the state data (table, variables, and global data) from the last executed"
+      },
       "executedBlockOnWeb": "在网页上显示已执行的模块",
-      "debugMode": "调试模式",
+      "debugMode": {
+        "title": "调试模式",
+        "description": "Execute the workflow using the Chrome DevTools Protocol"
+      },
       "restartWorkflow": {
         "for": "重新启动",
         "times": "次数"

src/newtab/pages/settings/index.vue

@@ -1,15 +1,29 @@
 <template>
   <div class="mb-8">
     <p class="font-semibold mb-1">{{ t('settings.theme') }}</p>
-    <ui-select
-      :model-value="theme.activeTheme.value"
-      class="w-80"
-      @change="theme.set($event)"
-    >
-      <option v-for="item in theme.themes" :key="item.id" :value="item.id">
-        {{ item.name }}
-      </option>
-    </ui-select>
+    <div class="flex items-center space-x-4">
+      <div
+        v-for="item in theme.themes"
+        :key="item.id"
+        class="cursor-pointer"
+        role="button"
+        @click="theme.set(item.id)"
+      >
+        <div
+          :class="{ 'ring ring-accent': item.id === theme.activeTheme.value }"
+          class="p-0.5 rounded-lg"
+        >
+          <img
+            :src="require(`@/assets/images/theme-${item.id}.png`).default"
+            width="140"
+            class="rounded-lg"
+          />
+        </div>
+        <span class="text-sm text-gray-600 dark:text-gray-200 ml-1">
+          {{ item.name }}
+        </span>
+      </div>
+    </div>
   </div>
   <div class="flex items-center">
     <div id="languages">

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

@@ -334,6 +334,7 @@ const workflowModals = {
     docs: 'https://docs.automa.site/api-reference/global-data.html',
   },
   settings: {
+    width: 'max-w-2xl',
     icon: 'riSettings3Line',
     component: WorkflowSettings,
     title: t('common.settings'),