feat: add "blocks" section in workflow settings

src/background/workflowEngine/helper.js

@@ -19,8 +19,15 @@ export function attachDebugger(tabId, prevTab) {
 
 export function waitTabLoaded(tabId, ms = 10000) {
   return new Promise((resolve, reject) => {
-    const isResolved = false;
-    const timeout = setTimeout(resolve, ms);
+    const timeout = null;
+    let isResolved = false;
+
+    if (ms > 0) {
+      setTimeout(() => {
+        isResolved = true;
+        reject(new Error('Timeout'));
+      }, ms);
+    }
 
     const activeTabStatus = () => {
       if (isResolved) return;

src/background/workflowEngine/worker.js

@@ -311,7 +311,10 @@ class Worker {
         throw error;
       }
 
-      await waitTabLoaded(this.activeTab.id);
+      await waitTabLoaded(
+        this.activeTab.id,
+        this.settings?.tabLoadTimeout ?? 30000
+      );
       await executeContentScript(
         this.activeTab.id,
         this.activeTab.frameId || 0

src/components/newtab/workflow/WorkflowSettings.vue

@@ -11,7 +11,7 @@
       />
     </div>
     <div class="space-x-2 px-4 pt-2">
-      <ui-tabs v-model="activeTab">
+      <ui-tabs v-model="activeTab" class="space-x-2">
         <ui-tab v-for="tab in tabs" :key="tab.value" :value="tab.value">
           {{ tab.name }}
         </ui-tab>
@@ -19,127 +19,11 @@
     </div>
     <ui-tab-panels
       v-model="activeTab"
-      class="overflow-auto scroll pt-4 px-4 pb-4"
+      class="overflow-auto scroll pt-4 px-4 pb-4 settings-content"
       style="height: calc(100vh - 10rem); max-height: 600px"
     >
-      <ui-tab-panel
-        class="space-y-4 space-y-4 divide-y dark:divide-gray-700 divide-gray-100"
-        value="general"
-      >
-        <div class="flex items-center">
-          <div class="mr-4 flex-1">
-            <p>
-              {{ t('workflow.settings.onError.title') }}
-            </p>
-            <p class="text-gray-600 dark:text-gray-200 text-sm leading-tight">
-              {{ t('workflow.settings.onError.description') }}
-            </p>
-          </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>
-          </div>
-        </div>
-        <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
-          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
-              v-if="item.notSupport?.includes(browserType)"
-              class="text-sm leading-tight text-red-400 dark:text-red-300"
-            >
-              {{
-                t('log.messages.browser-not-supported', {
-                  browser: browserType,
-                })
-              }}
-            </p>
-            <p
-              v-else
-              class="text-gray-600 dark:text-gray-200 text-sm leading-tight"
-            >
-              {{ item.description }}
-            </p>
-          </div>
-          <ui-switch
-            v-if="!item.notSupport?.includes(browserType)"
-            v-model="settings[item.id]"
-          />
-        </div>
-        <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="onClearCacheClick">
-            {{ t('workflow.settings.clearCache.btn') }}
-          </ui-button>
-        </div>
-      </ui-tab-panel>
-      <ui-tab-panel
-        class="space-y-4 space-y-4 divide-y dark:divide-gray-700 divide-gray-100"
-        value="table"
-      >
-        <div class="flex items-center">
-          <div class="flex-grow">
-            <p>
-              {{ t('workflow.settings.defaultColumn.title') }}
-            </p>
-            <p class="text-gray-600 dark:text-gray-200 text-sm leading-tight">
-              {{ t('workflow.settings.defaultColumn.description') }}
-            </p>
-          </div>
-          <ui-switch v-model="settings.insertDefaultColumn" />
-        </div>
-        <transition-expand>
-          <div
-            v-if="settings.insertDefaultColumn"
-            class="flex pt-4 items-center"
-          >
-            <p class="flex-1">
-              {{ t('workflow.settings.defaultColumn.name') }}
-            </p>
-            <ui-input
-              v-model="settings.defaultColumnName"
-              :title="t('workflow.settings.defaultColumn.name')"
-            />
-          </div>
-        </transition-expand>
+      <ui-tab-panel v-for="tab in tabs" :key="tab.value" :value="tab.value">
+        <component :is="tab.component" :settings="settings" />
       </ui-tab-panel>
     </ui-tab-panels>
   </ui-card>
@@ -147,8 +31,10 @@
 <script setup>
 import { onMounted, ref, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useToast } from 'vue-toastification';
-import { clearCache, debounce } from '@/utils/helper';
+import { debounce } from '@/utils/helper';
+import SettingsTable from './settings/SettingsTable.vue';
+import SettingsBlocks from './settings/SettingsBlocks.vue';
+import SettingsGeneral from './settings/SettingsGeneral.vue';
 
 const props = defineProps({
   workflow: {
@@ -159,75 +45,34 @@ const props = defineProps({
 const emit = defineEmits(['update', 'close']);
 
 const { t } = useI18n();
-const toast = useToast();
 
-const browserType = BROWSER_TYPE;
-const onError = [
-  {
-    id: 'keep-running',
-    name: 'keepRunning',
-  },
-  {
-    id: 'stop-workflow',
-    name: 'stopWorkflow',
-  },
-  {
-    id: 'restart-workflow',
-    name: 'restartWorkflow',
-  },
-];
-const settingItems = [
-  {
-    id: 'debugMode',
-    notSupport: ['firefox'],
-    name: t('workflow.settings.debugMode.title'),
-    description: t('workflow.settings.debugMode.description'),
-  },
-  {
-    id: 'inputAutocomplete',
-    name: t('workflow.settings.autocomplete.title'),
-    description: t('workflow.settings.autocomplete.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 tabs = [
   {
     value: 'general',
+    component: SettingsGeneral,
     name: t('settings.menu.general'),
   },
   {
     value: 'table',
+    component: SettingsTable,
     name: t('workflow.table.title'),
   },
+  {
+    value: 'blocks',
+    component: SettingsBlocks,
+    name: t('workflow.blocks.base.title'),
+  },
 ];
 
 const activeTab = ref('general');
 const settings = reactive({
   restartTimes: 3,
+  tabLoadTimeout: 30000,
   inputAutocomplete: true,
   insertDefaultColumn: true,
   defaultColumnName: 'column',
 });
 
-async function onClearCacheClick() {
-  const cacheCleared = await clearCache(props.workflow);
-  if (cacheCleared) toast(t('workflow.settings.clearCache.info'));
-}
-
 watch(
   settings,
   debounce((newSettings) => {
@@ -242,3 +87,8 @@ onMounted(() => {
   Object.assign(settings, props.workflow.settings);
 });
 </script>
+<style>
+.settings-content .ui-tab-panel {
+  @apply space-y-4 space-y-4 divide-y dark:divide-gray-700 divide-gray-100;
+}
+</style>

src/locales/en/newtab.json

@@ -235,7 +235,11 @@
       "blockDelay": {
         "title": "Block delay (milliseconds)",
         "description": "Add delay before executing each of the blocks"
-      }
+      },
+      "tabLoadTimeout": {
+        "title": "Tab load timeout",
+        "description": "Maximum time to load tab in milliseconds, defaults to 30 seconds, pass 0 to disable the timeout."
+      },
     }
   },
   "collection": {