feat: toggles enable and disable the block

src/background/workflow-engine/engine.js

@@ -407,7 +407,10 @@ class WorkflowEngine {
     const replacedBlock = referenceData({
       block,
       data: this.referenceData,
-      refKeys: isRetry ? null : tasks[block.name].refDataKeys,
+      refKeys:
+        isRetry || block.data.disableBlock
+          ? null
+          : tasks[block.name].refDataKeys,
     });
     const blockDelay = this.workflow.settings?.blockDelay || 0;
     const addBlockLog = (status, obj = {}) => {
@@ -422,18 +425,27 @@ class WorkflowEngine {
     };
 
     try {
-      const result = await handler.call(this, replacedBlock, {
-        prevBlockData,
-        refData: this.referenceData,
-      });
+      let result;
+
+      if (block.data.disableBlock) {
+        result = {
+          data: '',
+          nextBlockId: getBlockConnection(block),
+        };
+      } else {
+        result = await handler.call(this, replacedBlock, {
+          prevBlockData,
+          refData: this.referenceData,
+        });
+
+        addBlockLog(result.status || 'success', {
+          logId: result.logId,
+        });
+      }
 
       if (result.replacedValue)
         replacedBlock.replacedValue = result.replacedValue;
 
-      addBlockLog(result.status || 'success', {
-        logId: result.logId,
-      });
-
       if (result.nextBlockId) {
         setTimeout(() => {
           this.executeBlock(this.blocks[result.nextBlockId], result.data);

src/components/block/BlockBasic.vue

@@ -9,7 +9,9 @@
   >
     <div class="flex items-center">
       <span
-        :class="block.category.color"
+        :class="
+          block.data.disableBlock ? 'bg-box-transparent' : block.category.color
+        "
         class="inline-block p-2 mr-2 rounded-lg dark:text-black"
       >
         <v-remixicon :name="block.details.icon || 'riGlobalLine'" />

src/components/newtab/workflow/WorkflowEditBlock.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="workflow-edit-block" class="px-4 overflow-auto scroll pb-1">
     <div
-      class="sticky top-0 z-20 bg-white dark:bg-gray-800 pb-4 mb-2 flex items-center"
+      class="sticky top-0 z-20 bg-white dark:bg-gray-800 pb-4 mb-2 flex items-center space-x-2"
     >
-      <button class="mr-2" @click="$emit('close')">
+      <button @click="$emit('close')">
         <v-remixicon name="riArrowLeftLine" />
       </button>
-      <p class="font-semibold inline-block flex-1 capitalize">
+      <p class="font-semibold inline-block capitalize">
         {{ t(`workflow.blocks.${data.id}.name`) }}
       </p>
       <a
@@ -14,9 +14,23 @@
         :href="`https://docs.automa.site/blocks/${data.id}.html`"
         rel="noopener"
         target="_blank"
+        class="text-gray-600 dark:text-gray-200"
       >
-        <v-remixicon name="riInformationLine" />
+        <v-remixicon name="riInformationLine" size="20" />
       </a>
+      <div class="flex-grow"></div>
+      <ui-switch
+        v-if="data.id !== 'trigger'"
+        v-tooltip="
+          t(
+            `workflow.blocks.base.toggle.${
+              blockData.disableBlock ? 'enable' : 'disable'
+            }`
+          )
+        "
+        :model-value="!blockData.disableBlock"
+        @change="$emit('update', { ...blockData, disableBlock: !$event })"
+      />
     </div>
     <component
       :is="data.editComponent"
@@ -204,15 +218,12 @@ export default {
           workflowGlobalData,
           workflowGlobalData
         );
-
-        console.log(autocompleteData.value);
       },
       { immediate: true }
     );
     watch(
       autocompleteData,
       () => {
-        console.log(autocompleteData.value);
         emit('update:autocomplete', autocompleteData.value);
       },
       { deep: true }

src/locales/en/blocks.json

@@ -12,6 +12,10 @@
       "base": {
         "moveToGroup": "Move block to blocks group",
         "selector": "Element selector",
+        "toggle": {
+          "enable": "Enable block",
+          "disable": "Disable block",
+        },
         "onError": {
           "info": "These rules will apply when an error occurs on the block",
           "button": "On error",

src/utils/shared.js

@@ -14,6 +14,7 @@ export const tasks = {
     maxConnection: 1,
     refDataKeys: ['url'],
     data: {
+      disableBlock: false,
       description: '',
       type: 'manual',
       interval: 60,
@@ -40,6 +41,7 @@ export const tasks = {
     maxConnection: 1,
     refDataKeys: ['globalData'],
     data: {
+      disableBlock: false,
       executeId: '',
       workflowId: '',
       globalData: '',
@@ -57,7 +59,9 @@ export const tasks = {
     outputs: 1,
     allowedInputs: true,
     maxConnection: 1,
-    data: {},
+    data: {
+      disableBlock: false,
+    },
   },
   'new-tab': {
     name: 'New tab',
@@ -72,6 +76,7 @@ export const tasks = {
     maxConnection: 1,
     refDataKeys: ['url'],
     data: {
+      disableBlock: false,
       description: '',
       url: '',
       userAgent: '',
@@ -94,6 +99,7 @@ export const tasks = {
     maxConnection: 1,
     refDataKeys: ['url', 'matchPattern'],
     data: {
+      disableBlock: false,
       description: '',
       url: '',
       matchPattern: '',
@@ -112,6 +118,7 @@ export const tasks = {
     allowedInputs: true,
     maxConnection: 1,
     data: {
+      disableBlock: false,
       description: '',
       top: 0,
       left: 0,
@@ -133,6 +140,7 @@ export const tasks = {
     maxConnection: 1,
     allowedInputs: true,
     data: {
+      disableBlock: false,
       scheme: 'https',
       host: '',
       port: 443,
@@ -151,7 +159,9 @@ export const tasks = {
     maxConnection: 1,
     disableEdit: true,
     allowedInputs: true,
-    data: {},
+    data: {
+      disableBlock: false,
+    },
   },
   'forward-page': {
     name: 'Go forward',
@@ -164,7 +174,9 @@ export const tasks = {
     maxConnection: 1,
     disableEdit: true,
     allowedInputs: true,
-    data: {},
+    data: {
+      disableBlock: false,
+    },
   },
   'close-tab': {
     name: 'Close tab/window',
@@ -178,6 +190,7 @@ export const tasks = {
     allowedInputs: true,
     refDataKeys: ['url'],
     data: {
+      disableBlock: false,
       url: '',
       description: '',
       activeTab: true,
@@ -199,6 +212,7 @@ export const tasks = {
     refDataKeys: ['fileName'],
     autocomplete: ['variableName'],
     data: {
+      disableBlock: false,
       fileName: '',
       ext: 'png',
       quality: 100,
@@ -223,6 +237,7 @@ export const tasks = {
     maxConnection: 1,
     allowedInputs: true,
     data: {
+      disableBlock: false,
       description: '',
       timeout: 10000,
       eventName: 'tab:loaded',
@@ -245,6 +260,7 @@ export const tasks = {
     maxConnection: 1,
     refDataKeys: ['selector'],
     data: {
+      disableBlock: false,
       description: '',
       findBy: 'cssSelector',
       waitForSelector: false,
@@ -267,6 +283,7 @@ export const tasks = {
     maxConnection: 1,
     refDataKeys: ['time'],
     data: {
+      disableBlock: false,
       time: 500,
     },
   },
@@ -284,6 +301,7 @@ export const tasks = {
     refDataKeys: ['selector', 'prefixText', 'suffixText', 'extraRowValue'],
     autocomplete: ['variableName'],
     data: {
+      disableBlock: false,
       description: '',
       findBy: 'cssSelector',
       waitForSelector: false,
@@ -317,6 +335,7 @@ export const tasks = {
     maxConnection: 1,
     refDataKeys: ['name'],
     data: {
+      disableBlock: false,
       name: '',
       refKey: '',
       type: 'json',
@@ -339,6 +358,7 @@ export const tasks = {
     maxConnection: 1,
     refDataKeys: ['selector'],
     data: {
+      disableBlock: false,
       description: '',
       findBy: 'cssSelector',
       waitForSelector: false,
@@ -367,6 +387,7 @@ export const tasks = {
     maxConnection: 1,
     refDataKeys: ['selector'],
     data: {
+      disableBlock: false,
       description: '',
       findBy: 'cssSelector',
       waitForSelector: false,
@@ -390,6 +411,7 @@ export const tasks = {
     refDataKeys: ['selector', 'attributeName', 'extraRowValue'],
     autocomplete: ['variableName'],
     data: {
+      disableBlock: false,
       description: '',
       findBy: 'cssSelector',
       waitForSelector: false,
@@ -421,6 +443,7 @@ export const tasks = {
     refDataKeys: ['selector', 'value'],
     autocomplete: ['variableName'],
     data: {
+      disableBlock: false,
       description: '',
       findBy: 'cssSelector',
       waitForSelector: false,
@@ -452,6 +475,7 @@ export const tasks = {
     allowedInputs: true,
     maxConnection: 1,
     data: {
+      disableBlock: false,
       repeatFor: 1,
     },
   },
@@ -467,6 +491,7 @@ export const tasks = {
     allowedInputs: true,
     maxConnection: 1,
     data: {
+      disableBlock: false,
       description: '',
       timeout: 20000,
       code: 'console.log("Hello world!");\nautomaNextBlock()',
@@ -487,6 +512,7 @@ export const tasks = {
     maxConnection: 1,
     refDataKeys: ['selector', 'eventParams.clientX', 'eventParams.clientY'],
     data: {
+      disableBlock: false,
       description: '',
       findBy: 'cssSelector',
       waitForSelector: false,
@@ -513,6 +539,7 @@ export const tasks = {
     refDataKeys: ['customData', 'range', 'spreadsheetId'],
     autocomplete: ['refKey'],
     data: {
+      disableBlock: false,
       range: '',
       refKey: '',
       type: 'get',
@@ -537,6 +564,7 @@ export const tasks = {
     allowedInputs: true,
     maxConnection: 1,
     data: {
+      disableBlock: false,
       conditions: [],
     },
   },
@@ -553,6 +581,7 @@ export const tasks = {
     maxConnection: 1,
     refDataKeys: ['selector'],
     data: {
+      disableBlock: false,
       findBy: 'cssSelector',
       selector: '',
       tryCount: 1,
@@ -575,6 +604,7 @@ export const tasks = {
     refDataKeys: ['body', 'url'],
     autocomplete: ['variableName'],
     data: {
+      disableBlock: false,
       description: '',
       url: '',
       body: '{}',
@@ -602,6 +632,7 @@ export const tasks = {
     allowedInputs: true,
     maxConnection: 1,
     data: {
+      disableBlock: false,
       description: '',
       conditions: null,
     },
@@ -624,6 +655,7 @@ export const tasks = {
     ],
     autocomplete: ['variableName', 'loopId'],
     data: {
+      disableBlock: false,
       loopId: '',
       maxLoop: 0,
       toNumber: 10,
@@ -650,6 +682,7 @@ export const tasks = {
     allowedInputs: true,
     maxConnection: 1,
     data: {
+      disableBlock: false,
       loopId: '',
     },
   },
@@ -665,6 +698,7 @@ export const tasks = {
     allowedInputs: true,
     maxConnection: 1,
     data: {
+      disableBlock: false,
       name: '',
       blocks: [],
     },
@@ -682,6 +716,7 @@ export const tasks = {
     maxConnection: 1,
     autocomplete: ['variableName'],
     data: {
+      disableBlock: false,
       description: '',
       assignVariable: false,
       variableName: '',
@@ -701,6 +736,7 @@ export const tasks = {
     allowedInputs: true,
     maxConnection: 1,
     data: {
+      disableBlock: false,
       description: '',
       dataList: [],
     },
@@ -718,6 +754,7 @@ export const tasks = {
     maxConnection: 1,
     refDataKeys: ['selector'],
     data: {
+      disableBlock: false,
       findBy: 'cssSelector',
       selector: '',
       windowType: 'main-window',
@@ -736,6 +773,7 @@ export const tasks = {
     maxConnection: 1,
     refDataKeys: ['selector', 'filePaths'],
     data: {
+      disableBlock: false,
       findBy: 'cssSelector',
       waitForSelector: false,
       waitSelectorTimeout: 5000,
@@ -756,6 +794,7 @@ export const tasks = {
     maxConnection: 1,
     refDataKeys: ['selector'],
     data: {
+      disableBlock: false,
       description: '',
       findBy: 'cssSelector',
       waitForSelector: false,
@@ -779,6 +818,7 @@ export const tasks = {
     maxConnection: 1,
     refDataKeys: ['selector', 'url', 'filename'],
     data: {
+      disableBlock: false,
       description: '',
       findBy: 'cssSelector',
       waitForSelector: false,
@@ -806,6 +846,7 @@ export const tasks = {
     maxConnection: 1,
     refDataKeys: ['promptText'],
     data: {
+      disableBlock: false,
       description: '',
       accept: true,
       promptText: '',
@@ -825,6 +866,7 @@ export const tasks = {
     refDataKeys: ['filename'],
     autocomplete: ['variableName'],
     data: {
+      disableBlock: false,
       description: '',
       filename: '',
       timeout: 20000,
@@ -847,7 +889,9 @@ export const tasks = {
     allowedInputs: true,
     maxConnection: 1,
     disableEdit: true,
-    data: {},
+    data: {
+      disableBlock: false,
+    },
   },
   'delete-data': {
     name: 'Delete data',
@@ -862,6 +906,7 @@ export const tasks = {
     maxConnection: 1,
     disableEdit: true,
     data: {
+      disableBlock: false,
       description: '',
       deleteList: [],
     },