feat: add close-tab block

src/background/blocks-handler.js

@@ -34,6 +34,35 @@ function generateBlockError(block) {
   return error;
 }
 
+export async function closeTab(block) {
+  const nextBlockId = getBlockConnection(block);
+
+  try {
+    const { data } = block;
+    let tabIds;
+
+    if (data.activeTab && this.tabId) {
+      tabIds = this.tabId;
+    } else if (data.url) {
+      tabIds = (await browser.tabs.query({ url: data.url })).map(
+        (tab) => tab.id
+      );
+    }
+
+    console.log(tabIds);
+    if (tabIds) await browser.tabs.remove(tabIds);
+
+    return {
+      nextBlockId,
+      data: '',
+    };
+  } catch (error) {
+    const errorInstance = typeof error === 'string' ? new Error(error) : error;
+    errorInstance.nextBlockId = nextBlockId;
+
+    throw error;
+  }
+}
 export async function trigger(block) {
   const nextBlockId = getBlockConnection(block);
   try {

src/components/newtab/workflow/WorkflowCard.vue

@@ -25,7 +25,7 @@
           </ui-list-item>
           <ui-list-item
             v-close-popover
-            class="text-red-500 cursor-pointer"
+            class="cursor-pointer"
             @click="$emit('delete', workflow)"
           >
             <v-remixicon name="riDeleteBin7Line" class="mr-2 -ml-1" />

src/components/newtab/workflow/WorkflowEditBlock.vue

@@ -20,6 +20,7 @@ import { computed } from 'vue';
 import EditForms from './edit/EditForms.vue';
 import EditTrigger from './edit/EditTrigger.vue';
 import EditGetText from './edit/EditGetText.vue';
+import EditCloseTab from './edit/EditCloseTab.vue';
 import EditTriggerEvent from './edit/EditTriggerEvent.vue';
 import EditElementExists from './edit/EditElementExists.vue';
 import EditScrollElement from './edit/EditScrollElement.vue';
@@ -32,6 +33,7 @@ export default {
     EditForms,
     EditTrigger,
     EditGetText,
+    EditCloseTab,
     EditTriggerEvent,
     EditElementExists,
     EditScrollElement,

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

@@ -0,0 +1,43 @@
+<template>
+  <div class="mb-2 mt-4">
+    <div class="mb-2">
+      <ui-checkbox
+        :model-value="data.activeTab"
+        @change="updateData({ activeTab: $event })"
+      >
+        Close active tab
+      </ui-checkbox>
+    </div>
+    <ui-input
+      v-if="!data.activeTab"
+      :model-value="data.url"
+      placeholder="http://example.com/*"
+      @change="updateData({ url: $event })"
+    >
+      <template #label>
+        URL or match pattern
+        <a
+          href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns"
+          target="_blank"
+          rel="noopener"
+          title="More info"
+        >
+          &#9432;
+        </a>
+      </template>
+    </ui-input>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(['update:data']);
+
+function updateData(value) {
+  emit('update:data', { ...props.data, ...value });
+}
+</script>

src/components/ui/UiInput.vue

@@ -2,10 +2,10 @@
   <div class="inline-block input-ui">
     <label class="relative">
       <span
-        v-if="label"
+        v-if="label || $slots.label"
         class="text-sm dark:text-gray-200 text-gray-600 mb-1 ml-1"
       >
-        {{ label }}
+        <slot name="label">{{ label }}</slot>
       </span>
       <div class="flex items-center">
         <slot name="prepend">

src/lib/v-remixicon.js

@@ -50,6 +50,7 @@ import {
   riParagraph,
   riImageLine,
   riCloseLine,
+  riCloseCircleLine,
   riDragDropLine,
   riCheckLine,
   riFocus3Line,
@@ -110,6 +111,7 @@ export const icons = {
   riParagraph,
   riImageLine,
   riCloseLine,
+  riCloseCircleLine,
   riDragDropLine,
   riCheckLine,
   riFocus3Line,

src/newtab/App.vue

@@ -6,7 +6,7 @@
   <ui-dialog />
 </template>
 <script setup>
-/* to-do add tooltip */
+/* to-do add empty-state */
 import { ref } from 'vue';
 import { useStore } from 'vuex';
 import browser from 'webextension-polyfill';

src/newtab/pages/Workflows.vue

@@ -63,7 +63,6 @@ const dialog = useDialog();
 const sorts = [
   { name: 'Name', id: 'name' },
   { name: 'Created date', id: 'createdAt' },
-  { name: 'Running date', id: 'lastRunAt' },
 ];
 const state = shallowReactive({
   query: '',

src/utils/shared.js

@@ -79,6 +79,21 @@ export const tasks = {
     allowedInputs: true,
     data: {},
   },
+  'close-tab': {
+    name: 'Close tab',
+    icon: 'riCloseCircleLine',
+    component: 'BlockBasic',
+    category: 'browser',
+    editComponent: 'EditCloseTab',
+    inputs: 1,
+    outputs: 1,
+    maxConnection: 1,
+    allowedInputs: true,
+    data: {
+      url: '',
+      activeTab: true,
+    },
+  },
   'take-screenshot': {
     name: 'Take screenshot',
     description: 'Take a screenshot of current active tab',