feat: add description to blocks

src/background/blocks-handler.js

@@ -34,7 +34,7 @@ export function trigger(block) {
   });
 }
 
-export function openWebsite(block) {
+export function newTab(block) {
   return new Promise((resolve, reject) => {
     browser.tabs
       .create(block.data)

src/background/index.js

@@ -39,9 +39,11 @@ browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
     const visitWebTriggers =
       (await browser.storage.local.get('visitWebTriggers'))?.visitWebTriggers ??
       [];
-    const trigger = visitWebTriggers.find(({ url, isRegex }) =>
-      tab.url.match(isRegex ? new RegExp(url, 'g') : url)
-    );
+    const trigger = visitWebTriggers.find(({ url, isRegex }) => {
+      if (url.trim() === '') return false;
+
+      return tab.url.match(isRegex ? new RegExp(url, 'g') : url);
+    });
 
     if (trigger) {
       const workflow = await getWorkflow(trigger.id);

src/components/block/BlockOpenWebsite.vue → src/components/block/BlockNewTab.vue

@@ -10,7 +10,7 @@
           size="20"
           class="inline-block mr-1"
         />
-        <span>Open website</span>
+        <span>{{ block.details.name }}</span>
       </div>
       <div class="flex-grow"></div>
       <v-remixicon
@@ -48,7 +48,7 @@ const props = defineProps({
   },
 });
 
-const componentId = useComponentId('open-website');
+const componentId = useComponentId('new-tab');
 const block = useEditorBlock(`#${componentId}`, props.editor);
 
 const handleInput = debounce(({ target }) => {

src/components/newtab/workflow/WorkflowBuilder.vue

@@ -96,8 +96,16 @@ export default {
       emit('load', editor.value);
 
       if (props.data) {
+        console.log(props.data);
+        /* to-do delete replace method */
         const data =
-          typeof props.data === 'string' ? JSON.parse(props.data) : props.data;
+          typeof props.data === 'string'
+            ? JSON.parse(
+                props.data
+                  .replace(/open-website/g, 'new-tab')
+                  .replace(/BlockOpenWebsite/g, 'BlockNewTab')
+              )
+            : props.data;
 
         editor.value.import(data);
       } else {

src/components/newtab/workflow/WorkflowDetailsCard.vue

@@ -103,9 +103,9 @@
       </div>
       <div class="grid grid-cols-2 gap-2 mb-4">
         <div
-          v-for="task in items"
-          :key="task.id"
-          :title="task.name"
+          v-for="block in items"
+          :key="block.id"
+          :title="block.description || block.name"
           draggable="true"
           class="
             select-none
@@ -117,12 +117,12 @@
             transition
           "
           @dragstart="
-            $event.dataTransfer.setData('block', JSON.stringify(task))
+            $event.dataTransfer.setData('block', JSON.stringify(block))
           "
         >
-          <v-remixicon :name="task.icon" size="24" class="mb-2" />
+          <v-remixicon :name="block.icon" size="24" class="mb-2" />
           <p class="leading-tight text-overflow">
-            {{ task.name }}
+            {{ block.name }}
           </p>
         </div>
       </div>

src/newtab/pages/workflows/[id].vue

@@ -135,7 +135,7 @@ async function handleWorkflowTrigger({ data }) {
       }
 
       if (alarmInfo) await browser.alarms.create(workflowId, alarmInfo);
-    } else if (data.type === 'visit-web') {
+    } else if (data.type === 'visit-web' && data.url.trim() !== '') {
       const payload = {
         id: workflowId,
         url: data.url,

src/utils/shared.js

@@ -5,6 +5,7 @@
 export const tasks = {
   trigger: {
     name: 'Trigger',
+    description: 'Block where workflow will start executing',
     icon: 'riFlashlightLine',
     component: 'BlockBasic',
     editComponent: 'EditTrigger',
@@ -43,6 +44,7 @@ export const tasks = {
   },
   delay: {
     name: 'Delay',
+    description: 'Add delay before executing the next block',
     icon: 'riTimerLine',
     component: 'BlockDelay',
     editComponent: 'EditTrigger',
@@ -57,6 +59,7 @@ export const tasks = {
   },
   'get-text': {
     name: 'Get text',
+    description: 'Get text from an element',
     icon: 'riParagraph',
     component: 'BlockBasic',
     editComponent: 'EditGetText',
@@ -114,6 +117,7 @@ export const tasks = {
   },
   link: {
     name: 'Link',
+    description: 'Open link element',
     icon: 'riLink',
     component: 'BlockBasic',
     editComponent: 'EditInteractionBase',
@@ -131,6 +135,7 @@ export const tasks = {
   },
   'attribute-value': {
     name: 'Attribute value',
+    description: 'Get attribute value of an element',
     icon: 'riBracketsLine',
     component: 'BlockBasic',
     editComponent: 'EditAttributeValue',
@@ -148,10 +153,11 @@ export const tasks = {
       dataColumn: '',
     },
   },
-  'open-website': {
-    name: 'Open website',
+  'new-tab': {
+    name: 'New tab',
+    description: 'Create a new tab',
     icon: 'riGlobalLine',
-    component: 'BlockOpenWebsite',
+    component: 'BlockNewTab',
     editComponent: 'EditTrigger',
     category: 'general',
     inputs: 1,
@@ -166,6 +172,7 @@ export const tasks = {
   forms: {
     name: 'Forms',
     icon: 'riInputCursorMove',
+    description: 'Manipulate form(input, select, checkbox, and radio) element',
     component: 'BlockBasic',
     editComponent: 'EditForms',
     category: 'interaction',
@@ -213,6 +220,7 @@ export const tasks = {
   // },
   'trigger-event': {
     name: 'Trigger event',
+    description: 'Trigger event',
     icon: 'riLightbulbFlashLine',
     component: 'BlockBasic',
     editComponent: 'EditTriggerEvent',
@@ -233,6 +241,7 @@ export const tasks = {
   },
   conditions: {
     name: 'Conditions',
+    description: 'Conditional block',
     icon: 'riAB',
     component: 'BlockConditions',
     category: 'conditions',
@@ -246,6 +255,7 @@ export const tasks = {
   },
   'element-exists': {
     name: 'Element exists',
+    description: 'Check if an element is exists',
     icon: 'riFocus3Line',
     component: 'BlockElementExists',
     category: 'conditions',