feat: add description to blocks

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

@@ -35,7 +35,7 @@
         :model-value="data.tabLoadedUrl"
         type="url"
         class="w-full mt-1"
-        placeholder="*://*.example.org/*"
+        placeholder="https://example.org/*"
         @change="updateData({ tabLoadedUrl: $event })"
       >
         <template #label>

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

@@ -1,9 +1,15 @@
 <template>
   <div class="mb-2 mt-4">
+    <ui-textarea
+      :model-value="data.description"
+      :placeholder="t('common.description')"
+      class="w-full"
+      @change="updateData({ description: $event })"
+    />
     <ui-select
       :model-value="data.closeType"
-      placeholder="Close"
-      class="w-full mb-4"
+      :placeholder="Close"
+      class="w-full mt-2"
       @change="updateData({ closeType: $event })"
     >
       <option
@@ -16,7 +22,7 @@
       </option>
     </ui-select>
     <template v-if="data.closeType === 'tab'">
-      <div class="mb-2">
+      <div class="mt-1">
         <ui-checkbox
           :model-value="data.activeTab"
           @change="updateData({ activeTab: $event })"
@@ -27,25 +33,30 @@
       <ui-input
         v-if="!data.activeTab"
         :model-value="data.url"
-        class="w-full"
+        class="w-full mt-1"
         placeholder="http://example.com/*"
         @change="updateData({ url: $event })"
       >
         <template #label>
           {{ t('workflow.blocks.close-tab.url') }}
           <a
-            href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns"
-            target="_blank"
+            :title="t('common.example', 2)"
             rel="noopener"
-            title="More info"
+            target="_blank"
+            href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns#examples"
           >
-            &#9432;
+            <v-remixicon
+              name="riInformationLine"
+              size="18"
+              class="inline-block"
+            />
           </a>
         </template>
       </ui-input>
     </template>
     <ui-checkbox
       v-else
+      class="mt-1"
       :model-value="data.allWindows"
       @change="updateData({ allWindows: $event })"
     >

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

@@ -3,7 +3,7 @@
     <ui-select
       :model-value="data.findBy || 'cssSelector'"
       :placeholder="t('workflow.blocks.base.findElement.placeholder')"
-      class="w-full mb-2"
+      class="w-full mb-1"
       @change="updateData({ findBy: $event })"
     >
       <option v-for="type in selectorTypes" :key="type" :value="type">
@@ -13,6 +13,7 @@
     <ui-input
       :model-value="data.selector"
       :label="t('workflow.blocks.element-exists.selector')"
+      placeholder=".element"
       class="mb-1 w-full"
       @change="updateData({ selector: $event })"
     />

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

@@ -1,9 +1,16 @@
 <template>
   <div>
+    <ui-textarea
+      :model-value="data.description"
+      :placeholder="t('common.description')"
+      autoresize
+      class="w-full mb-2"
+      @change="updateData({ description: $event })"
+    />
     <ui-select
       :model-value="data.workflowId"
       :placeholder="t('workflow.blocks.execute-workflow.select')"
-      class="w-full mb-4"
+      class="w-full mb-2"
       @change="updateData({ workflowId: $event })"
     >
       <option
@@ -16,17 +23,20 @@
     </ui-select>
     <ui-input
       :model-value="data.executeId"
-      :placeholder="t('workflow.blocks.execute-workflow.executeId')"
+      :label="t('workflow.blocks.execute-workflow.executeId')"
       :title="t('workflow.blocks.execute-workflow.executeId')"
-      class="mb-2 w-full"
+      placeholder="abc123"
+      class="mb-3 w-full"
       @change="updateData({ executeId: $event })"
     />
-    <p>{{ t('common.globalData') }}</p>
+    <p class="text-sm text-gray-600 dark:text-gray-200 ml-1 mb-1">
+      {{ t('common.globalData') }}
+    </p>
     <pre
       v-if="!state.showGlobalData"
       class="rounded-lg text-gray-200 p-4 max-h-80 bg-gray-900 overflow-auto"
       @click="state.showGlobalData = true"
-      v-text="data.globalData"
+      v-text="data.globalData || '____'"
     />
     <ui-modal
       v-model="state.showGlobalData"

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

@@ -8,7 +8,7 @@
     />
     <ui-select
       :model-value="data.dataToExport"
-      :placeholder="t('workflow.blocks.export-data.dataToExport.placeholder')"
+      :label="t('workflow.blocks.export-data.dataToExport.placeholder')"
       class="w-full mt-2"
       @change="updateData({ dataToExport: $event })"
     >
@@ -18,9 +18,9 @@
     </ui-select>
     <ui-input
       :model-value="data.name"
+      label="File name"
       class="w-full mt-2"
-      title="File name"
-      placeholder="File name"
+      placeholder="My file"
       @change="updateData({ name: $event })"
     />
     <ui-input
@@ -33,7 +33,7 @@
     />
     <ui-select
       :model-value="data.type"
-      :placeholder="t('workflow.blocks.export-data.exportAs')"
+      :label="t('workflow.blocks.export-data.exportAs')"
       class="w-full mt-2"
       @change="updateData({ type: $event })"
     >

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

@@ -2,7 +2,7 @@
   <edit-interaction-base v-bind="{ data, hide: hideBase }" @change="updateData">
     <ui-checkbox
       :model-value="data.getValue"
-      class="my-2"
+      class="mt-2"
       @change="updateData({ getValue: $event })"
     >
       {{ t('workflow.blocks.forms.getValue') }}
@@ -42,7 +42,7 @@
     <template v-else>
       <ui-select
         :model-value="data.type"
-        class="block w-full mb-3"
+        class="block w-full mb-2 mt-4"
         :placeholder="t('workflow.blocks.forms.type')"
         @change="updateData({ type: $event })"
       >
@@ -66,7 +66,7 @@
         />
         <ui-checkbox
           :model-value="data.clearValue"
-          class="mb-1 ml-1"
+          class="mb-2 ml-1"
           @change="updateData({ clearValue: $event })"
         >
           {{ t('workflow.blocks.forms.text-field.clearValue') }}

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

@@ -78,7 +78,7 @@
     </ui-checkbox>
     <ui-checkbox
       :model-value="data.addExtraRow"
-      class="mt-3"
+      class="mt-2"
       @change="updateData({ addExtraRow: $event })"
     >
       {{ t('workflow.blocks.get-text.extraRow.checkbox') }}

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

@@ -4,17 +4,20 @@
       :model-value="data.description"
       autoresize
       :placeholder="t('common.description')"
-      class="w-full mb-2"
+      class="w-full mb-1"
       @change="updateData({ description: $event })"
     />
     <ui-input
-      type="number"
       :model-value="data.timeout"
-      class="mb-2 w-full"
-      :placeholder="t('workflow.blocks.javascript-code.timeout.placeholder')"
+      :label="t('workflow.blocks.javascript-code.timeout.placeholder')"
       :title="t('workflow.blocks.javascript-code.timeout.title')"
+      type="number"
+      class="mb-2 w-full"
       @change="updateData({ timeout: +$event })"
     />
+    <p class="text-sm ml-1 text-gray-600 dark:text-gray-200">
+      {{ t('workflow.blocks.javascript-code.name') }}
+    </p>
     <pre
       v-if="!state.showCodeModal"
       class="rounded-lg overflow-auto text-gray-200 p-4 max-h-80 bg-gray-900"

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

@@ -3,19 +3,19 @@
     <ui-textarea
       :model-value="data.description"
       :placeholder="t('common.description')"
-      class="w-full"
+      class="w-full mb-1"
       @change="updateData({ description: $event })"
     />
     <ui-input
       :model-value="data.loopId"
-      class="w-full mb-3"
+      class="w-full mb-2"
       :label="t('workflow.blocks.loop-data.loopId')"
       :placeholder="t('workflow.blocks.loop-data.loopId')"
       @change="updateLoopID"
     />
     <ui-select
       :model-value="data.loopThrough"
-      :placeholder="t('workflow.blocks.loop-data.loopThrough.placeholder')"
+      :label="t('workflow.blocks.loop-data.loopThrough.placeholder')"
       class="w-full mb-2"
       @change="
         updateData({

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-2 mt-4 space-y-2">
+  <div class="mb-2 mt-4">
     <ui-textarea
       :model-value="data.description"
       :placeholder="t('common.description')"
@@ -10,22 +10,13 @@
       v-if="!data.activeTab"
       :model-value="data.url"
       title="URL"
-      class="w-full"
+      class="w-full mt-2"
       placeholder="http://example.com/"
       @change="updateData({ url: $event })"
     />
-    <a
-      href="https://docs.automa.site/api-reference/reference-data.html"
-      rel="noopener"
-      class="text-primary inline-block text-sm"
-      target="_blank"
-      style="margin-top: 0"
-    >
-      {{ t('message.useDynamicData') }}
-    </a>
     <ui-checkbox
       :model-value="data.updatePrevTab"
-      class="leading-tight"
+      class="leading-tight mt-2"
       :title="t('workflow.blocks.new-tab.updatePrevTab.title')"
       @change="updateData({ updatePrevTab: $event })"
     >
@@ -33,6 +24,7 @@
     </ui-checkbox>
     <ui-checkbox
       :model-value="data.active"
+      class="my-2"
       @change="updateData({ active: $event })"
     >
       {{ t('workflow.blocks.new-tab.activeTab') }}

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-2 mt-4 space-y-2">
+  <div class="mb-2 mt-4">
     <ui-textarea
       :model-value="data.description"
       class="w-full"
@@ -8,7 +8,7 @@
     />
     <ui-select
       :model-value="data.windowState"
-      class="w-full"
+      class="w-full mt-4"
       :placeholder="t('workflow.blocks.new-window.windowState.placeholder')"
       @change="updateData({ windowState: $event })"
     >
@@ -19,7 +19,7 @@
     <ui-checkbox
       :model-value="data.incognito"
       :disabled="!allowInIncognito"
-      class="mb-4"
+      class="mt-1"
       @change="updateData({ incognito: $event })"
     >
       {{ t('workflow.blocks.new-window.incognito.text') }}
@@ -27,8 +27,11 @@
         &#128712;
       </span>
     </ui-checkbox>
-    <template v-if="data.windowState === 'normal'">
-      <div class="flex items-center space-x-2">
+    <div v-if="data.windowState === 'normal'" class="mt-2">
+      <div
+        :title="t('workflow.blocks.new-window.position')"
+        class="flex items-center space-x-2 mb-1"
+      >
         <ui-input
           :model-value="data.top"
           :label="t('workflow.blocks.new-window.top')"
@@ -40,7 +43,10 @@
           @change="updateData({ left: +$event })"
         />
       </div>
-      <div class="flex items-center space-x-2">
+      <div
+        :title="t('workflow.blocks.new-window.size')"
+        class="flex items-center space-x-2"
+      >
         <ui-input
           :model-value="data.height"
           :label="t('workflow.blocks.new-window.height')"
@@ -52,10 +58,10 @@
           @change="updateData({ width: +$event })"
         />
       </div>
-      <p class="mt-4 text-gray-600 dark:text-gray-200">
+      <p class="mt-2 text-gray-600 dark:text-gray-200">
         {{ t('workflow.blocks.new-window.note') }}
       </p>
-    </template>
+    </div>
   </div>
 </template>
 <script setup>

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

@@ -25,7 +25,7 @@
     </ui-input>
     <ui-checkbox
       :model-value="data.createIfNoMatch"
-      class="mt-2"
+      class="mt-1"
       @change="updateData({ createIfNoMatch: $event })"
     >
       {{ t('workflow.blocks.switch-tab.createIfNoMatch') }}

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

@@ -1,4 +1,17 @@
 <template>
+  <p class="text-sm text-gray-600 dark:text-gray-200 ml-2">Image quality</p>
+  <div class="bg-box-transparent px-4 mb-2 py-2 rounded-lg flex items-center">
+    <input
+      :value="data.quality"
+      :title="t('workflow.blocks.take-screenshot.imageQuality')"
+      class="focus:outline-none flex-1"
+      type="range"
+      min="0"
+      max="100"
+      @change="updateQuality"
+    />
+    <span class="w-12 text-right">{{ data.quality }}%</span>
+  </div>
   <div class="take-screenshot">
     <ui-checkbox
       :model-value="data.fullPage"
@@ -9,12 +22,11 @@
     </ui-checkbox>
     <ui-checkbox
       :model-value="data.saveToComputer"
-      class="mb-2"
       @change="updateData({ saveToComputer: $event })"
     >
       {{ t('workflow.blocks.take-screenshot.saveToComputer') }}
     </ui-checkbox>
-    <div v-if="data.saveToComputer" class="flex items-center my-2">
+    <div v-if="data.saveToComputer" class="flex items-center mb-2 mt-1">
       <ui-input
         :model-value="data.fileName"
         :placeholder="t('common.fileName')"
@@ -31,22 +43,9 @@
         <option value="jpeg">JPEG</option>
       </ui-select>
     </div>
-    <p class="text-sm text-gray-600 dark:text-gray-200 ml-2">Image quality:</p>
-    <div class="bg-box-transparent px-4 mb-2 py-2 rounded-lg flex items-center">
-      <input
-        :value="data.quality"
-        :title="t('workflow.blocks.take-screenshot.imageQuality')"
-        class="focus:outline-none flex-1"
-        type="range"
-        min="0"
-        max="100"
-        @change="updateQuality"
-      />
-      <span class="w-12 text-right">{{ data.quality }}%</span>
-    </div>
     <ui-checkbox
       :model-value="data.saveToColumn"
-      class="mt-3"
+      class="mt-2"
       @change="updateData({ saveToColumn: $event })"
     >
       {{ t('workflow.blocks.take-screenshot.saveToColumn') }}

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

@@ -3,7 +3,7 @@
     <ui-select
       :model-value="data.eventName"
       :placeholder="t('workflow.blocks.trigger-event.selectEvent')"
-      class="w-full mt-2"
+      class="w-full mt-4"
       @change="handleSelectChange"
     >
       <option v-for="event in eventList" :key="event.id" :value="event.id">
@@ -11,7 +11,7 @@
       </option>
     </ui-select>
     <button
-      class="mb-2 block flex items-center w-full text-left mt-4 focus:ring-0"
+      class="mb-2 block flex items-center w-full text-left mt-2 focus:ring-0"
       @click="showOptions = !showOptions"
     >
       <v-remixicon
@@ -21,6 +21,7 @@
       />
       <span class="flex-1">{{ t('common.options') }}</span>
       <a
+        v-if="data.eventName"
         :href="getEventDetailsUrl()"
         rel="noopener"
         target="_blank"

src/components/ui/UiInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="inline-block input-ui">
     <label v-if="label || $slots.label" :for="componentId">
-      <span class="text-sm dark:text-gray-200 text-gray-600 mb-1 ml-1">
+      <span class="text-sm dark:text-gray-200 text-gray-600 ml-1">
         <slot name="label">{{ label }}</slot>
       </span>
     </label>

src/lib/v-remixicon.js

@@ -166,6 +166,8 @@ export const icons = {
   riFlashlightLine,
   riFlagLine,
   mdiEqual: 'M19,10H5V8H19V10M19,16H5V14H19V16Z',
+  mdiVariable:
+    'M20.41,3C21.8,5.71 22.35,8.84 22,12C21.8,15.16 20.7,18.29 18.83,21L17.3,20C18.91,17.57 19.85,14.8 20,12C20.34,9.2 19.89,6.43 18.7,4L20.41,3M5.17,3L6.7,4C5.09,6.43 4.15,9.2 4,12C3.66,14.8 4.12,17.57 5.3,20L3.61,21C2.21,18.29 1.65,15.17 2,12C2.2,8.84 3.3,5.71 5.17,3M12.08,10.68L14.4,7.45H16.93L13.15,12.45L15.35,17.37H13.09L11.71,14L9.28,17.33H6.76L10.66,12.21L8.53,7.45H10.8L12.08,10.68Z',
   mdiDrag:
     'M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z',
   webhookIcon:

src/locales/en/blocks.json

@@ -153,6 +153,8 @@
         "height": "Height",
         "width": "Width",
         "note": "Note: use 0 to disable",
+        "position": "Window position",
+        "size": "Window size",
         "windowState": {
           "placeholder": "Window state",
           "options": {
@@ -178,7 +180,7 @@
       "close-tab": {
         "name": "Close tab/window",
         "description": "",
-        "url": "URL or match pattern",
+        "url": "Match Patterns",
         "activeTab": "Close active tab",
         "allWindows": "Close all windows"
       },
@@ -314,7 +316,7 @@
           }
         },
         "timeout": {
-          "placeholder": "Timeout",
+          "placeholder": "Timeout (milliseconds)",
           "title": "Javascript code execution timeout"
         }
       },
@@ -342,7 +344,7 @@
         "selector": "Element selector",
         "fallbackTitle": "Execute when element doesn't exists",
         "tryFor": {
-          "title": "Try to check if element exist",
+          "title": "How many times to try to check if element exist",
           "label": "Try for"
         },
         "timeout": {
@@ -370,7 +372,7 @@
       "loop-data": {
         "name": "Loop data",
         "description": "Iterate through data columns or your custom data",
-        "loopId": "Loop ID",
+        "loopId": "Loop id",
         "refKey": "Reference key",
         "modal": {
           "fileTooLarge": "File too large to edit",

src/utils/shared.js

@@ -42,9 +42,10 @@ export const tasks = {
     maxConnection: 1,
     refDataKeys: ['globalData'],
     data: {
-      workflowId: '',
       executeId: '',
+      workflowId: '',
       globalData: '',
+      description: '',
     },
   },
   'active-tab': {
@@ -178,6 +179,7 @@ export const tasks = {
     refDataKeys: ['url'],
     data: {
       url: '',
+      description: '',
       activeTab: true,
       closeType: 'tab',
       allWindows: false,