feat: add first workflow

src/background/index.js

@@ -62,12 +62,19 @@ browser.alarms.onAlarm.addListener(({ name }) => {
 
 browser.runtime.onInstalled.addListener((details) => {
   if (details.reason === 'install') {
-    browser.storage.local.set({
-      logs: [],
-      workflows: [],
-      workflowState: [],
-      visitWebTriggers: [],
-    });
+    browser.storage.local
+      .set({
+        logs: [],
+        workflows: [],
+        workflowState: [],
+        visitWebTriggers: [],
+      })
+      .then(() => {
+        browser.tabs.create({
+          active: true,
+          url: browser.runtime.getURL('newtab.html#/workflows'),
+        });
+      });
   }
 });
 

src/components/block/BlockExportData.vue

@@ -24,11 +24,7 @@
       class="w-full bg-input rounded-lg transition mb-2 py-2 px-4 block"
       placeholder="File name"
     />
-    <ui-select
-      v-model="block.data.type"
-      class="px-4 py-2 rounded-lg w-40 bg-input"
-      placeholder="Export as"
-    >
+    <ui-select v-model="block.data.type" class="w-40" placeholder="Export as">
       <option v-for="type in dataExportTypes" :key="type.id" :value="type.id">
         {{ type.name }}
       </option>

src/components/newtab/workflow/WorkflowDetailsCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="px-4 mb-2">
+  <div class="px-4 flex items-center mb-2">
     <ui-popover>
       <template #trigger>
         <span
@@ -30,7 +30,17 @@
         </span>
       </div>
     </ui-popover>
-    <p class="font-semibold inline-block text-lg flex-1 mr-4 align-middle">
+    <p
+      class="
+        font-semibold
+        text-overflow
+        inline-block
+        text-lg
+        flex-1
+        mr-4
+        align-middle
+      "
+    >
       {{ workflow.name }}
     </p>
   </div>

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

@@ -1,6 +1,5 @@
 <template>
   <edit-interaction-base v-bind="{ data }" @change="updateData">
-    {{ data }}
     <div class="flex rounded-lg bg-input px-4 items-center transition mt-2">
       <span>/</span>
       <input

src/components/popup/home/HomeWorkflowCard.vue

@@ -3,11 +3,10 @@
     class="w-full flex items-center space-x-2 hover:ring-2 hover:ring-gray-900"
   >
     <div
-      to="/workflow/anu/edit"
-      class="flex-1 cursor-pointer"
+      class="flex-1 text-overflow cursor-pointer"
       @click="$emit('details', workflow)"
     >
-      <p class="leading-tight">{{ workflow.name }}</p>
+      <p class="leading-tight text-overflow">{{ workflow.name }}</p>
       <p class="leading-none text-gray-500">
         {{ dayjs(workflow.createdAt).fromNow() }}
       </p>

src/manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "name": "Chrome Extension with React & Webpack",
+  "name": "Automa",
   "background": {
     "scripts": [
       "background.bundle.js"

src/models/workflow.js

@@ -22,7 +22,7 @@ class Workflow extends Model {
       createdAt: this.number(),
       settings: this.attr({
         timeout: 120000,
-        onError: 'keep-running',
+        onError: 'stop-workflow',
       }),
       logs: this.hasMany(Log, 'workflowId'),
     };

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

@@ -48,52 +48,54 @@
           </ui-tab>
         </ui-tabs>
       </div>
-      <workflow-builder
-        v-if="activeTab === 'editor'"
-        class="h-full w-full"
-        :data="workflow.drawflow"
-        @load="editor = $event"
-        @deleteBlock="deleteBlock"
-      />
-      <div v-else class="container pb-4 mt-24 px-4">
-        <template v-if="activeTab === 'logs'">
-          <div v-if="logs.length === 0" class="text-center">
-            <img
-              src="@/assets/svg/files-and-folder.svg"
-              class="mx-auto max-w-sm"
-            />
-            <p class="text-xl font-semibold">No data to show</p>
-          </div>
-          <shared-logs-table :logs="logs" class="w-full">
-            <template #item-append="{ log: itemLog }">
-              <td class="text-right">
-                <v-remixicon
-                  name="riDeleteBin7Line"
-                  class="inline-block text-red-500 cursor-pointer"
-                  @click="deleteLog(itemLog.id)"
-                />
-              </td>
-            </template>
-          </shared-logs-table>
-        </template>
-        <template v-else-if="activeTab === 'running'">
-          <div v-if="workflowState.length === 0" class="text-center">
-            <img
-              src="@/assets/svg/files-and-folder.svg"
-              class="mx-auto max-w-sm"
-            />
-            <p class="text-xl font-semibold">No data to show</p>
-          </div>
-          <div class="grid grid-cols-2 gap-4">
-            <shared-workflow-state
-              v-for="item in workflowState"
-              :id="item.id"
-              :key="item.id"
-              :state="item.state"
-            />
-          </div>
-        </template>
-      </div>
+      <keep-alive>
+        <workflow-builder
+          v-if="activeTab === 'editor'"
+          class="h-full w-full"
+          :data="workflow.drawflow"
+          @load="editor = $event"
+          @deleteBlock="deleteBlock"
+        />
+        <div v-else class="container pb-4 mt-24 px-4">
+          <template v-if="activeTab === 'logs'">
+            <div v-if="logs.length === 0" class="text-center">
+              <img
+                src="@/assets/svg/files-and-folder.svg"
+                class="mx-auto max-w-sm"
+              />
+              <p class="text-xl font-semibold">No data to show</p>
+            </div>
+            <shared-logs-table :logs="logs" class="w-full">
+              <template #item-append="{ log: itemLog }">
+                <td class="text-right">
+                  <v-remixicon
+                    name="riDeleteBin7Line"
+                    class="inline-block text-red-500 cursor-pointer"
+                    @click="deleteLog(itemLog.id)"
+                  />
+                </td>
+              </template>
+            </shared-logs-table>
+          </template>
+          <template v-else-if="activeTab === 'running'">
+            <div v-if="workflowState.length === 0" class="text-center">
+              <img
+                src="@/assets/svg/files-and-folder.svg"
+                class="mx-auto max-w-sm"
+              />
+              <p class="text-xl font-semibold">No data to show</p>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+              <shared-workflow-state
+                v-for="item in workflowState"
+                :id="item.id"
+                :key="item.id"
+                :state="item.state"
+              />
+            </div>
+          </template>
+        </div>
+      </keep-alive>
     </div>
   </div>
   <ui-modal v-model="state.showDataColumnsModal" content-class="max-w-xl">

src/store/index.js

@@ -2,6 +2,7 @@ import { createStore } from 'vuex';
 import browser from 'webextension-polyfill';
 import vuexORM from '@/lib/vuex-orm';
 import * as models from '@/models';
+import { firstWorkflows } from '@/utils/shared';
 
 const store = createStore({
   plugins: [vuexORM(models)],
@@ -31,6 +32,15 @@ const store = createStore({
             data: data[entity],
           });
         });
+        const isFirstTime =
+          (await browser.storage.local.get('isFirstTime')?.isFirstTime) ?? true;
+
+        if (isFirstTime) {
+          await dispatch('entities/insert', {
+            entity: 'workflows',
+            data: firstWorkflows,
+          });
+        }
 
         return await Promise.allSettled(promises);
       } catch (error) {

webpack.config.js

@@ -130,12 +130,7 @@ const options = {
           },
         },
         {
-          from: 'src/assets/img/icon-128.png',
-          to: path.join(__dirname, 'build'),
-          force: true,
-        },
-        {
-          from: 'src/assets/img/icon-34.png',
+          from: 'src/assets/images/icon-128.png',
           to: path.join(__dirname, 'build'),
           force: true,
         },