feat: option to reuse the new tab

src/background/workflow-engine/blocks-handler.js

@@ -187,47 +187,56 @@ export function forwardPage(block) {
   });
 }
 
-export function newTab(block) {
+function tabUpdatedListener(tab) {
   return new Promise((resolve, reject) => {
-    browser.tabs
-      .create(block.data)
-      .then((tab) => {
-        this.tabId = tab.id;
-        this.windowId = tab.windowId;
-
-        this._listener({
-          name: 'tab-updated',
-          id: tab.id,
-          once: true,
-          callback: async (tabId, changeInfo, deleteListener) => {
-            if (changeInfo.status !== 'complete') return;
-
-            try {
-              await browser.tabs.executeScript(tabId, {
-                file: './contentScript.bundle.js',
-              });
+    this._listener({
+      name: 'tab-updated',
+      id: tab.id,
+      once: true,
+      callback: async (tabId, changeInfo, deleteListener) => {
+        if (changeInfo.status !== 'complete') return;
 
-              this._connectTab(tabId);
+        try {
+          await browser.tabs.executeScript(tabId, {
+            file: './contentScript.bundle.js',
+          });
 
-              deleteListener();
+          deleteListener();
+          this._connectTab(tabId);
 
-              resolve({
-                nextBlockId: getBlockConnection(block),
-                data: block.data.url,
-              });
-            } catch (error) {
-              console.error(error);
-              reject(error);
-            }
-          },
-        });
-      })
-      .catch((error) => {
-        console.error(error);
-        reject(error);
-      });
+          resolve();
+        } catch (error) {
+          console.error(error);
+          reject(error);
+        }
+      },
+    });
   });
 }
+export async function newTab(block) {
+  try {
+    const { updatePrevTab, url, active } = block.data;
+
+    if (updatePrevTab && this.tabId) {
+      await browser.tabs.update(this.tabId, { url, active });
+    } else {
+      const { id, windowId } = await browser.tabs.create({ url, active });
+
+      this.tabId = id;
+      this.windowId = windowId;
+    }
+
+    await tabUpdatedListener.call(this, { id: this.tabId });
+
+    return {
+      data: url,
+      nextBlockId: getBlockConnection(block),
+    };
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
 
 export async function activeTab(block) {
   const nextBlockId = getBlockConnection(block);

src/components/block/BlockNewTab.vue

@@ -1,70 +0,0 @@
-<template>
-  <div :id="componentId" class="p-4">
-    <div class="flex items-center mb-2">
-      <div
-        :class="block.category.color"
-        class="inline-block text-sm mr-4 p-2 rounded-lg"
-      >
-        <v-remixicon name="riGlobalLine" size="20" class="inline-block mr-1" />
-        <span>{{ block.details.name }}</span>
-      </div>
-      <div class="flex-grow"></div>
-      <v-remixicon
-        name="riDeleteBin7Line"
-        class="cursor-pointer"
-        @click="editor.removeNodeId(`node-${block.id}`)"
-      />
-    </div>
-    <input
-      :value="block.data.url"
-      class="px-4 py-2 mb-1 rounded-lg block w-48 bg-input"
-      placeholder="http://example.com"
-      type="url"
-      required
-      @blur="checkInputValue"
-      @input="handleInput"
-    />
-    <ui-checkbox :model-value="block.data.active" @change="handleCheckbox">
-      Set as active tab
-    </ui-checkbox>
-  </div>
-</template>
-<script setup>
-import emitter from 'tiny-emitter/instance';
-import { debounce } from '@/utils/helper';
-import { useComponentId } from '@/composable/componentId';
-import { useEditorBlock } from '@/composable/editorBlock';
-
-const props = defineProps({
-  editor: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const componentId = useComponentId('new-tab');
-const block = useEditorBlock(`#${componentId}`, props.editor);
-
-const isValidURL = (url) => /^(https?):\/\//i.test(url);
-const handleInput = debounce(({ target }) => {
-  target.reportValidity();
-
-  block.data.url = isValidURL(target.value) ? target.value : '';
-
-  props.editor.updateNodeDataFromId(block.id, {
-    ...block.data,
-    url: block.data.url,
-  });
-  emitter.emit('editor:data-changed', block.id);
-}, 250);
-function handleCheckbox(value) {
-  props.editor.updateNodeDataFromId(block.id, { ...block.data, active: value });
-  block.data.active = value;
-  emitter.emit('editor:data-changed', block.id);
-}
-function checkInputValue({ target }) {
-  if (!isValidURL(target.value)) {
-    target.value = '';
-  }
-}
-</script>

src/components/newtab/workflow/WorkflowDetailsCard.vue

@@ -157,6 +157,16 @@
             $event.dataTransfer.setData('block', JSON.stringify(block))
           "
         >
+          <a
+            v-if="block.docs"
+            :href="`https://github.com/Kholid060/automa/wiki/Blocks#${block.id}`"
+            target="_blank"
+            title="Documentation"
+            rel="noopener"
+            class="absolute top-px right-2"
+          >
+            &#128712;
+          </a>
           <v-remixicon :name="block.icon" size="24" class="mb-2" />
           <p class="leading-tight text-overflow">
             {{ block.name }}

src/utils/reference-data.js

@@ -31,7 +31,7 @@ function parseKey(key) {
 }
 
 export default function (block, data) {
-  const replaceKeys = ['url', 'fileName', 'name', 'value', 'body'];
+  const replaceKeys = ['url', 'fileName', 'name', 'value', 'body', 'selector'];
   let replacedBlock = block;
 
   replaceKeys.forEach((blockDataKey) => {