feat: add condition block settings

src/background/workflowEngine/blocksHandler/handlerConditions.js

@@ -3,13 +3,52 @@ import mustacheReplacer from '@/utils/referenceData/mustacheReplacer';
 import testConditions from '@/utils/testConditions';
 import { getBlockConnection } from '../helper';
 
+function checkConditions(data, conditionOptions) {
+  return new Promise((resolve, reject) => {
+    let retryCount = 1;
+    const replacedValue = {};
+
+    const testAllConditions = async () => {
+      try {
+        for (let index = 0; index < data.conditions.length; index += 1) {
+          const result = await testConditions(
+            data.conditions[index].conditions,
+            conditionOptions
+          );
+
+          Object.assign(replacedValue, result?.replacedValue || {});
+
+          if (result.isMatch) {
+            resolve({ match: true, index, replacedValue });
+            return;
+          }
+        }
+
+        if (data.retryConditions && retryCount <= data.retryCount) {
+          retryCount += 1;
+
+          setTimeout(() => {
+            testAllConditions();
+          }, data.retryTimeout);
+        } else {
+          resolve({ match: false, replacedValue });
+        }
+      } catch (error) {
+        reject(error);
+      }
+    };
+
+    testAllConditions();
+  });
+}
+
 async function conditions({ data, outputs }, { prevBlockData, refData }) {
   if (data.conditions.length === 0) {
     throw new Error('conditions-empty');
   }
 
   let resultData = '';
-  let isConditionMatch = false;
+  let isConditionMet = false;
   let outputIndex = data.conditions.length + 1;
 
   const replacedValue = {};
@@ -26,24 +65,18 @@ async function conditions({ data, outputs }, { prevBlockData, refData }) {
         this._sendMessageToTab({ ...payload, isBlock: false }),
     };
 
-    for (let index = 0; index < data.conditions.length; index += 1) {
-      const result = await testConditions(
-        data.conditions[index].conditions,
-        conditionPayload
-      );
-
-      Object.assign(replacedValue, result?.replacedValue || {});
+    const conditionsResult = await checkConditions(data, conditionPayload);
 
-      if (result.isMatch) {
-        isConditionMatch = true;
-        outputIndex = index + 1;
-
-        break;
-      }
+    if (conditionsResult.replacedValue) {
+      Object.assign(replacedValue, conditionsResult.replacedValue);
+    }
+    if (conditionsResult.match) {
+      isConditionMet = true;
+      outputIndex = conditionsResult.index + 1;
     }
   } else {
     data.conditions.forEach(({ type, value, compareValue }, index) => {
-      if (isConditionMatch) return;
+      if (isConditionMet) return;
 
       const firstValue = mustacheReplacer(compareValue ?? prevData, refData);
       const secondValue = mustacheReplacer(value, refData);
@@ -59,7 +92,7 @@ async function conditions({ data, outputs }, { prevBlockData, refData }) {
       if (isMatch) {
         resultData = value;
         outputIndex = index + 1;
-        isConditionMatch = true;
+        isConditionMet = true;
       }
     });
   }

src/components/block/BlockConditions.vue

@@ -64,7 +64,7 @@
   </div>
 </template>
 <script setup>
-import { watch, toRaw, onBeforeUnmount } from 'vue';
+import { watch, onBeforeUnmount } from 'vue';
 import { useI18n } from 'vue-i18n';
 import emitter from '@/lib/mitt';
 import { debounce } from '@/utils/helper';
@@ -135,10 +135,6 @@ function refreshConnections({ id }) {
 watch(
   () => block.data.conditions,
   debounce((newValue, oldValue) => {
-    props.editor.updateNodeDataFromId(block.id, {
-      conditions: toRaw(newValue),
-    });
-
     props.editor.updateConnectionNodes(`node-${block.id}`);
 
     if (!oldValue) return;

src/components/newtab/workflow/edit/EditConditions.vue

@@ -1,7 +1,11 @@
 <template>
   <div>
-    <div class="mb-4 flex items-center justify-between">
+    <div class="mb-4 flex items-center space-x-2">
+      <p v-if="state.showSettings" class="font-semibold">
+        {{ t('common.settings') }}
+      </p>
       <ui-button
+        v-else
         :disabled="conditions.length >= 20"
         variant="accent"
         class="mr-2"
@@ -9,6 +13,7 @@
       >
         {{ t('workflow.blocks.conditions.add') }}
       </ui-button>
+      <div class="flex-grow"></div>
       <ui-button
         v-tooltip:bottom="t('workflow.blocks.conditions.refresh')"
         icon
@@ -16,8 +21,49 @@
       >
         <v-remixicon name="riRefreshLine" />
       </ui-button>
+      <ui-button
+        v-tooltip:bottom="t('common.settings')"
+        icon
+        @click="state.showSettings = !state.showSettings"
+      >
+        <v-remixicon
+          :name="state.showSettings ? 'riCloseLine' : 'riSettings3Line'"
+        />
+      </ui-button>
     </div>
+    <template v-if="state.showSettings">
+      <label class="flex items-center mt-6">
+        <ui-switch
+          :model-value="data.retryConditions"
+          @change="updateData({ retryConditions: $event })"
+        />
+        <span class="ml-2 leading-tight">
+          {{ t('workflow.blocks.conditions.retryConditions') }}
+        </span>
+      </label>
+      <div v-if="data.retryConditions" class="mt-2">
+        <ui-input
+          :model-value="data.retryCount"
+          :title="t('workflow.blocks.element-exists.tryFor.title')"
+          :label="t('workflow.blocks.element-exists.tryFor.label')"
+          class="w-full mb-1"
+          type="number"
+          min="1"
+          @change="updateData({ retryCount: +$event })"
+        />
+        <ui-input
+          :model-value="data.retryTimeout"
+          :label="t('workflow.blocks.element-exists.timeout.label')"
+          :title="t('workflow.blocks.element-exists.timeout.title')"
+          class="w-full"
+          type="number"
+          min="200"
+          @change="updateData({ retryTimeout: +$event })"
+        />
+      </div>
+    </template>
     <draggable
+      v-else
       v-model="conditions"
       item-key="id"
       tag="ui-list"
@@ -108,6 +154,7 @@ const conditions = ref(props.data.conditions);
 const state = shallowReactive({
   showModal: false,
   conditionsIndex: 0,
+  showSettings: false,
 });
 
 function editCondition(index) {
@@ -140,13 +187,14 @@ function refreshConnections() {
     id: props.blockId,
   });
 }
+function updateData(value) {
+  emit('update:data', { ...props.data, ...value });
+}
 
 watch(
   conditions,
   () => {
-    emit('update:data', {
-      conditions: conditions.value,
-    });
+    updateData({ conditions: conditions.value });
   },
   { deep: true }
 );

src/content/services/recordWorkflow/recordEvents.js

@@ -81,12 +81,6 @@ function changeListener({ target }) {
     if (block.id === 'upload-file' && lastFlow.id === 'event-click') {
       recording.flows.pop();
     }
-    console.log(
-      block.data.type === 'text-field' &&
-        block.data.selector === lastFlow?.data?.selector,
-      lastFlow,
-      block.data
-    );
 
     if (
       block.data.type === 'text-field' &&

src/locales/en/blocks.json

@@ -449,6 +449,7 @@
       "conditions": {
         "name": "Conditions",
         "add": "Add condition",
+        "retryConditions": "Retry if all conditions are not met",
         "description": "Conditional block",
         "refresh": "Refresh conditions connections",
         "fallbackTitle": "Execute when all comparisons don't meet the requirement",

src/utils/shared.js

@@ -573,6 +573,9 @@ export const tasks = {
     data: {
       disableBlock: false,
       conditions: [],
+      retryConditions: false,
+      retryCount: 10,
+      retryTimeout: 1000,
     },
   },
   'element-exists': {