v1.23.3

AutomaApp · Nov 4, 2022 · 0f0398e · 0f0398e
2 parents 44e48c0 + 16c21c1
commit 0f0398e
Show file tree

Hide file tree

Showing 28 changed files with 1,553 additions and 250 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "automa",
-  "version": "1.23.0",
+  "version": "1.23.3",
   "description": "An extension for automating your browser by connecting blocks",
   "repository": {
     "type": "git",

diff --git a/src/background/index.js b/src/background/index.js
@@ -116,6 +116,7 @@ message.on('workflow:execute', async (workflowData, sender) => {
   if (!isMV2 && (!context || context === 'popup')) {
     await BackgroundUtils.openDashboard('', false);
     await sleep(1000);
+    console.log('halo', workflowData);
     await BackgroundUtils.sendMessageToDashboard('workflow:execute', {
       data: workflowData,
       options: workflowData.option,

diff --git a/src/components/block/BlockBasic.vue b/src/components/block/BlockBasic.vue
@@ -28,6 +28,16 @@
         />
       </span>
       <div class="overflow-hidden flex-1">
+        <span
+          v-if="blockErrors"
+          v-tooltip="{
+            allowHTML: true,
+            content: blockErrors,
+          }"
+          class="absolute top-2 right-2 text-red-500 dark:text-red-400"
+        >
+          <v-remixicon name="riAlertLine" size="20" />
+        </span>
         <p
           v-if="block.details.id"
           class="font-semibold leading-tight text-overflow whitespace-nowrap"
@@ -78,6 +88,7 @@
 </template>
 <script setup>
 import { computed, shallowReactive } from 'vue';
+import { useBlockValidation } from '@/composable/blockValidation';
 import { Handle, Position } from '@vue-flow/core';
 import { useI18n } from 'vue-i18n';
 import { useEditorBlock } from '@/composable/editorBlock';
@@ -117,6 +128,10 @@ const loopBlocks = ['loop-data', 'loop-elements'];
 const { t, te } = useI18n();
 const block = useEditorBlock(props.label);
 const componentId = useComponentId('block-base');
+const { errors: blockErrors } = useBlockValidation(
+  props.label,
+  () => props.data
+);
 
 const state = shallowReactive({
   isCopied: false,

diff --git a/src/components/block/BlockBasicWithFallback.vue b/src/components/block/BlockBasicWithFallback.vue
@@ -30,6 +30,16 @@
         </p>
       </div>
     </div>
+    <span
+      v-if="blockErrors"
+      v-tooltip="{
+        allowHTML: true,
+        content: blockErrors,
+      }"
+      class="absolute top-2 right-2 text-red-500 dark:text-red-400"
+    >
+      <v-remixicon name="riAlertLine" size="20" />
+    </span>
     <slot :block="block"></slot>
     <div class="fallback flex items-center justify-end">
       <v-remixicon
@@ -54,6 +64,7 @@
 <script setup>
 import { Handle, Position } from '@vue-flow/core';
 import { useI18n } from 'vue-i18n';
+import { useBlockValidation } from '@/composable/blockValidation';
 import { useEditorBlock } from '@/composable/editorBlock';
 import { useComponentId } from '@/composable/componentId';
 import BlockBase from './BlockBase.vue';
@@ -77,4 +88,8 @@ defineEmits(['delete', 'edit', 'update', 'settings']);
 const { t } = useI18n();
 const block = useEditorBlock(props.label);
 const componentId = useComponentId('block-base');
+const { errors: blockErrors } = useBlockValidation(
+  props.label,
+  () => props.data
+);
 </script>
diff --git a/src/components/newtab/workflow/edit/EditExportData.vue b/src/components/newtab/workflow/edit/EditExportData.vue
@@ -6,93 +6,102 @@
       :placeholder="t('common.description')"
       @change="updateData({ description: $event })"
     />
-    <ui-select
-      :model-value="data.dataToExport"
-      :label="t('workflow.blocks.export-data.dataToExport.placeholder')"
-      class="w-full mt-2"
-      @change="updateData({ dataToExport: $event })"
-    >
-      <option v-for="option in dataToExport" :key="option" :value="option">
-        {{ t(`workflow.blocks.export-data.dataToExport.options.${option}`) }}
-      </option>
-    </ui-select>
-    <ui-input
-      v-if="data.dataToExport === 'google-sheets'"
-      :model-value="data.refKey"
-      :title="t('workflow.blocks.export-data.refKey')"
-      :placeholder="t('workflow.blocks.export-data.refKey')"
-      class="w-full mt-2"
-      @change="updateData({ refKey: $event })"
-    />
-    <ui-input
-      v-if="data.dataToExport === 'variable'"
-      :model-value="data.variableName"
-      :title="t('workflow.variables.name')"
-      :placeholder="t('workflow.variables.name')"
-      class="w-full mt-2"
-      @change="updateData({ variableName: $event })"
-    />
-    <edit-autocomplete class="mt-2">
+    <template v-if="!permission.has.downloads">
+      <p class="mt-4">
+        {{ t('workflow.blocks.handle-download.noPermission') }}
+      </p>
+      <ui-button variant="accent" class="mt-2" @click="permission.request">
+        {{ t('workflow.blocks.clipboard.grantPermission') }}
+      </ui-button>
+    </template>
+    <template v-else>
+      <ui-select
+        :model-value="data.dataToExport"
+        :label="t('workflow.blocks.export-data.dataToExport.placeholder')"
+        class="w-full mt-2"
+        @change="updateData({ dataToExport: $event })"
+      >
+        <option v-for="option in dataToExport" :key="option" :value="option">
+          {{ t(`workflow.blocks.export-data.dataToExport.options.${option}`) }}
+        </option>
+      </ui-select>
       <ui-input
-        :model-value="data.name"
-        autocomplete="off"
-        label="File name"
-        class="w-full"
-        placeholder="unnamed"
-        @change="updateData({ name: $event })"
+        v-if="data.dataToExport === 'google-sheets'"
+        :model-value="data.refKey"
+        :title="t('workflow.blocks.export-data.refKey')"
+        :placeholder="t('workflow.blocks.export-data.refKey')"
+        class="w-full mt-2"
+        @change="updateData({ refKey: $event })"
       />
-    </edit-autocomplete>
-    <ui-select
-      v-if="permission.has.downloads"
-      :model-value="data.onConflict"
-      :label="t('workflow.blocks.handle-download.onConflict')"
-      class="mt-2 w-full"
-      @change="updateData({ onConflict: $event })"
-    >
-      <option v-for="item in onConflict" :key="item" :value="item">
-        {{ t(`workflow.blocks.base.downloads.onConflict.${item}`) }}
-      </option>
-    </ui-select>
-    <ui-select
-      :model-value="data.type"
-      :label="t('workflow.blocks.export-data.exportAs')"
-      class="w-full mt-2"
-      @change="updateData({ type: $event })"
-    >
-      <option v-for="type in dataExportTypes" :key="type.id" :value="type.id">
-        {{ type.name }}
-      </option>
-    </ui-select>
-    <ui-expand
-      v-if="data.type === 'csv'"
-      hide-header-icon
-      header-class="flex items-center focus:ring-0 w-full"
-    >
-      <template #header="{ show }">
-        <v-remixicon
-          :rotate="show ? 270 : 180"
-          name="riArrowLeftSLine"
-          class="transition-transform text-gray-600 dark:text-gray-300"
-        />
-        {{ t('common.options') }}
-      </template>
-      <div class="pl-6 mt-1">
-        <ui-checkbox
-          v-if="data.type === 'csv'"
-          :model-value="data.addBOMHeader"
-          @change="updateData({ addBOMHeader: $event })"
-        >
-          {{ t('workflow.blocks.export-data.bomHeader') }}
-        </ui-checkbox>
+      <ui-input
+        v-if="data.dataToExport === 'variable'"
+        :model-value="data.variableName"
+        :title="t('workflow.variables.name')"
+        :placeholder="t('workflow.variables.name')"
+        class="w-full mt-2"
+        @change="updateData({ variableName: $event })"
+      />
+      <edit-autocomplete class="mt-2">
         <ui-input
-          :model-value="data.csvDelimiter"
-          label="Delimiter"
-          class="mt-1"
-          placeholder=","
-          @change="updateData({ csvDelimiter: $event })"
+          :model-value="data.name"
+          autocomplete="off"
+          label="File name"
+          class="w-full"
+          placeholder="unnamed"
+          @change="updateData({ name: $event })"
         />
-      </div>
-    </ui-expand>
+      </edit-autocomplete>
+      <ui-select
+        :model-value="data.onConflict"
+        :label="t('workflow.blocks.handle-download.onConflict')"
+        class="mt-2 w-full"
+        @change="updateData({ onConflict: $event })"
+      >
+        <option v-for="item in onConflict" :key="item" :value="item">
+          {{ t(`workflow.blocks.base.downloads.onConflict.${item}`) }}
+        </option>
+      </ui-select>
+      <ui-select
+        :model-value="data.type"
+        :label="t('workflow.blocks.export-data.exportAs')"
+        class="w-full mt-2"
+        @change="updateData({ type: $event })"
+      >
+        <option v-for="type in dataExportTypes" :key="type.id" :value="type.id">
+          {{ type.name }}
+        </option>
+      </ui-select>
+      <ui-expand
+        v-if="data.type === 'csv'"
+        hide-header-icon
+        header-class="flex items-center focus:ring-0 w-full"
+      >
+        <template #header="{ show }">
+          <v-remixicon
+            :rotate="show ? 270 : 180"
+            name="riArrowLeftSLine"
+            class="transition-transform text-gray-600 dark:text-gray-300"
+          />
+          {{ t('common.options') }}
+        </template>
+        <div class="pl-6 mt-1">
+          <ui-checkbox
+            v-if="data.type === 'csv'"
+            :model-value="data.addBOMHeader"
+            @change="updateData({ addBOMHeader: $event })"
+          >
+            {{ t('workflow.blocks.export-data.bomHeader') }}
+          </ui-checkbox>
+          <ui-input
+            :model-value="data.csvDelimiter"
+            label="Delimiter"
+            class="mt-1"
+            placeholder=","
+            @change="updateData({ csvDelimiter: $event })"
+          />
+        </div>
+      </ui-expand>
+    </template>
   </div>
 </template>
 <script setup>

diff --git a/src/components/newtab/workflow/edit/EditWebhook.vue b/src/components/newtab/workflow/edit/EditWebhook.vue
@@ -172,10 +172,11 @@ const { t } = useI18n();
 
 const methods = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];
 const notHaveBody = ['GET', 'DELETE'];
+const copyHeaders = JSON.parse(JSON.stringify(props.data.headers));
 
 const activeTab = ref('headers');
 const showBodyModal = ref(false);
-const headers = ref(JSON.parse(JSON.stringify(props.data.headers)));
+const headers = ref(Array.isArray(copyHeaders) ? copyHeaders : []);
 
 function updateData(value) {
   emit('update:data', { ...props.data, ...value });

diff --git a/src/composable/blockValidation.js b/src/composable/blockValidation.js
@@ -0,0 +1,40 @@
+import { onMounted, watch, shallowRef } from 'vue';
+import blocksValidation from '@/newtab/utils/blocksValidation';
+
+export function useBlockValidation(blockId, data) {
+  const errors = shallowRef('');
+
+  onMounted(() => {
+    const blockValidation = blocksValidation[blockId];
+    if (!blockValidation) return;
+
+    const unwatch = watch(
+      data,
+      (newData) => {
+        blockValidation
+          .func(newData)
+          .then((blockErrors) => {
+            let errorsStr = '';
+            blockErrors.forEach((error) => {
+              errorsStr += `<li>${error}</li>\n`;
+            });
+
+            errors.value =
+              errorsStr.trim() &&
+              `Issues: <ol class='list-disc list-inside'>${errorsStr}</ol>`;
+          })
+          .catch((error) => {
+            console.error(error);
+          })
+          .finally(() => {
+            if (blockValidation.once) {
+              unwatch();
+            }
+          });
+      },
+      { deep: true, immediate: true }
+    );
+  });
+
+  return { errors };
+}
diff --git a/src/lib/vRemixicon.js b/src/lib/vRemixicon.js
@@ -49,6 +49,7 @@ import {
   riToggleFill,
   riToggleLine,
   riFolderLine,
+  riAlertLine,
   riGithubFill,
   riEyeOffLine,
   riWindowLine,
@@ -184,6 +185,7 @@ export const icons = {
   riToggleFill,
   riToggleLine,
   riFolderLine,
+  riAlertLine,
   riGithubFill,
   riEyeOffLine,
   riWindowLine,