feat: add i18n

package.json

@@ -1,6 +1,6 @@
 {
   "name": "automa",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "An extension for automating your browser by connecting blocks",
   "license": "MIT",
   "repository": {
@@ -35,6 +35,7 @@
     "tippy.js": "^6.3.1",
     "v-remixicon": "^0.1.1",
     "vue": "3.2.19",
+    "vue-i18n": "^9.2.0-beta.20",
     "vue-prism-editor": "^2.0.0-alpha.2",
     "vue-router": "^4.0.11",
     "vue-virtual-scroller": "^2.0.0-alpha.1",
@@ -47,6 +48,7 @@
     "@babel/eslint-parser": "7.15.7",
     "@babel/plugin-proposal-class-properties": "7.14.5",
     "@babel/preset-env": "7.15.6",
+    "@intlify/vue-i18n-loader": "^4.0.1",
     "@vue/compiler-sfc": "3.2.19",
     "archiver": "^5.3.0",
     "autoprefixer": "10.3.6",

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

@@ -1,12 +1,10 @@
 /* eslint-disable no-underscore-dangle */
 import browser from 'webextension-polyfill';
 import { objectHasKey, fileSaver, isObject } from '@/utils/helper';
-import { tasks } from '@/utils/shared';
 import { executeWebhook } from '@/utils/webhookUtil';
 import executeContentScript from '@/utils/execute-content-script';
 import dataExporter, { generateJSON } from '@/utils/data-exporter';
 import compareBlockValue from '@/utils/compare-block-value';
-import errorMessage from './error-message';
 
 function getBlockConnection(block, index = 1) {
   const blockId = block.outputs[`output_${index}`]?.connections[0]?.node;
@@ -31,13 +29,6 @@ function convertData(data, type) {
 
   return result;
 }
-function generateBlockError(block, code) {
-  const message = errorMessage(code || 'no-tab', tasks[block.name]);
-  const error = new Error(message);
-  error.nextBlockId = getBlockConnection(block);
-
-  return error;
-}
 
 export async function closeTab(block) {
   const nextBlockId = getBlockConnection(block);
@@ -142,7 +133,10 @@ export function goBack(block) {
     const nextBlockId = getBlockConnection(block);
 
     if (!this.tabId) {
-      reject(generateBlockError(block));
+      const error = new Error('no-tab');
+      error.nextBlockId = nextBlockId;
+
+      reject(error);
 
       return;
     }
@@ -167,7 +161,10 @@ export function forwardPage(block) {
     const nextBlockId = getBlockConnection(block);
 
     if (!this.tabId) {
-      reject(generateBlockError(block));
+      const error = new Error('no-tab');
+      error.nextBlockId = nextBlockId;
+
+      reject(nextBlockId);
 
       return;
     }
@@ -349,7 +346,7 @@ export async function takeScreenshot(block) {
 
     if (captureActiveTab) {
       if (!this.tabId) {
-        throw new Error(errorMessage('no-tab', block));
+        throw new Error('no-tab');
       }
 
       const [tab] = await browser.tabs.query({
@@ -407,7 +404,11 @@ export async function switchTo(block) {
         nextBlockId,
       };
     }
-    throw new Error(errorMessage('no-iframe-id', block.data));
+
+    const error = new Error('no-iframe-id');
+    error.data = { selector: block.selector };
+
+    throw error;
   } catch (error) {
     error.nextBlockId = nextBlockId;
 

src/background/workflow-engine/index.js

@@ -160,7 +160,7 @@ class WorkflowEngine {
     this.logs.push({
       message,
       type: 'stop',
-      name: 'Workflow is stopped',
+      name: 'stop',
     });
     this.destroy('stopped');
   }
@@ -252,7 +252,7 @@ class WorkflowEngine {
 
     if (!disableTimeoutKeys.includes(block.name)) {
       this.workflowTimeout = setTimeout(() => {
-        if (!this.isDestroyed) this.stop('Workflow stopped because of timeout');
+        if (!this.isDestroyed) this.stop('stop-timeout');
       }, this.workflow.settings.timeout || 120000);
     }
 
@@ -283,8 +283,7 @@ class WorkflowEngine {
           this.workflowTimeout = null;
           this.logs.push({
             type: 'success',
-            name: tasks[block.name].name,
-            data: result.data,
+            name: block.name,
             duration: Math.round(Date.now() - started),
           });
 
@@ -293,8 +292,7 @@ class WorkflowEngine {
           } else {
             this.logs.push({
               type: 'finish',
-              message: 'Workflow finished running',
-              name: 'Finish',
+              name: 'finish',
             });
             this.dispatchEvent('finish');
             this.destroy('success');
@@ -304,7 +302,7 @@ class WorkflowEngine {
           this.logs.push({
             type: 'error',
             message: error.message,
-            name: tasks[block.name].name,
+            name: block.name,
           });
 
           if (
@@ -332,9 +330,9 @@ class WorkflowEngine {
   _sendMessageToTab(block, options = {}) {
     return new Promise((resolve, reject) => {
       if (!this.tabId) {
-        const message = errorMessage('no-tab', tasks[block.name]);
-
-        reject(new Error(message));
+        /* eslint-disable-next-line */
+        reject('no-tab');
+        return;
       }
 
       browser.tabs

src/components/newtab/app/AppSidebar.vue

@@ -36,12 +36,12 @@
       <router-link
         v-for="tab in tabs"
         v-slot="{ href, navigate, isActive }"
-        :key="tab.name"
+        :key="tab.id"
         :to="tab.path"
         custom
       >
         <a
-          v-tooltip:right.group="tab.name"
+          v-tooltip:right.group="t(`common.${tab.id}`, 2)"
           :class="{ 'is-active': isActive }"
           :href="href"
           class="
@@ -64,52 +64,67 @@
       </router-link>
     </div>
     <div class="flex-grow"></div>
-    <a
-      v-tooltip:right="'Documentation'"
-      href="https://github.com/kholid060/automa/wiki"
-      rel="noopener"
-      class="mb-8"
-      target="_blank"
-    >
-      <v-remixicon name="riBookOpenLine" />
-    </a>
-    <a
-      v-tooltip:right="'Github'"
-      href="https://github.com/kholid060/automa"
-      rel="noopener"
-      target="_blank"
-    >
-      <v-remixicon name="riGithubFill" />
-    </a>
+    <ui-popover placement="right" trigger="mouseenter click">
+      <template #trigger>
+        <v-remixicon class="cursor-pointer" name="riInformationLine" />
+      </template>
+      <ui-list class="space-y-1">
+        <ui-list-item
+          tag="a"
+          href="https://github.com/kholid060/automa/wiki"
+          rel="noopener"
+          target="_blank"
+        >
+          <v-remixicon name="riBookOpenLine" class="-ml-1 mr-2" />
+          <span>{{ t('common.docs', 2) }}</span>
+        </ui-list-item>
+        <ui-list-item
+          tag="a"
+          href="https://github.com/kholid060/automa"
+          rel="noopener"
+          target="_blank"
+        >
+          <v-remixicon name="riGithubFill" class="-ml-1 mr-2" />
+          <span>GitHub</span>
+        </ui-list-item>
+      </ui-list>
+    </ui-popover>
   </aside>
 </template>
 <script setup>
 import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useGroupTooltip } from '@/composable/groupTooltip';
 
 useGroupTooltip();
+const { t } = useI18n();
 
 const tabs = [
   {
-    name: 'Dashboard',
+    id: 'dashboard',
     icon: 'riHome5Line',
     path: '/',
   },
   {
-    name: 'Workflows',
+    id: 'workflow',
     icon: 'riFlowChart',
     path: '/workflows',
   },
   {
-    name: 'Collections',
+    id: 'collection',
     icon: 'riFolderLine',
     path: '/collections',
   },
   {
-    name: 'Logs',
+    id: 'log',
     icon: 'riHistoryLine',
     path: '/logs',
   },
+  {
+    id: 'settings',
+    icon: 'riSettings3Line',
+    path: '/settings',
+  },
 ];
 const hoverIndicator = ref(null);
 const showHoverIndicator = ref(false);

src/components/newtab/logs/LogsDataViewer.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="flex items-center">
-    <ui-input v-model="fileName" placeholder="File name" title="File name" />
+    <ui-input
+      v-model="fileName"
+      :placeholder="t('common.fileName')"
+      :title="t('common.fileName')"
+    />
     <div class="flex-grow"></div>
     <ui-popover>
       <template #trigger>
         <ui-button variant="accent">
-          <span>Export data</span>
+          <span>{{ t('log.exportData.title') }}</span>
           <v-remixicon name="riArrowDropDownLine" class="ml-2 -mr-1" />
         </ui-button>
       </template>
@@ -17,7 +21,7 @@
           class="cursor-pointer"
           @click="exportData(type.id)"
         >
-          as {{ type.name }}
+          {{ t(`log.exportData.types.${type.id}`) }}
         </ui-list-item>
       </ui-list>
     </ui-popover>
@@ -32,6 +36,7 @@
 </template>
 <script setup>
 import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { PrismEditor } from 'vue-prism-editor';
 import { highlighter } from '@/lib/prism';
 import { dataExportTypes } from '@/utils/shared';
@@ -48,6 +53,8 @@ const props = defineProps({
   },
 });
 
+const { t } = useI18n();
+
 const data = Array.isArray(props.log.data)
   ? props.log.data
   : generateJSON(Object.keys(props.log.data), props.log.data);

src/components/newtab/logs/LogsFilters.vue

@@ -2,8 +2,8 @@
   <div class="flex items-center mb-6 space-x-4">
     <ui-input
       :model-value="filters.query"
+      :placeholder="`${t('common.search')}...`"
       prepend-icon="riSearch2Line"
-      placeholder="Search..."
       class="flex-1"
       @change="updateFilters('query', $event)"
     />
@@ -19,7 +19,7 @@
       </ui-button>
       <ui-select
         :model-value="sorts.by"
-        placeholder="Sort by"
+        :placeholder="t('sort.sortBy')"
         @change="updateSorts('by', $event)"
       >
         <option v-for="sort in sortsList" :key="sort.id" :value="sort.id">
@@ -31,25 +31,27 @@
       <template #trigger>
         <ui-button>
           <v-remixicon name="riFilter2Line" class="mr-2 -ml-1" />
-          <span>Filters</span>
+          <span>{{ t('log.filter.title') }}</span>
         </ui-button>
       </template>
       <div class="w-48">
-        <p class="flex-1 mb-2 font-semibold">Filters</p>
-        <p class="mb-2 text-sm text-gray-600">By status</p>
+        <p class="flex-1 mb-2 font-semibold">{{ t('log.filter.title') }}</p>
+        <p class="mb-2 text-sm text-gray-600">{{ t('log.filter.byStatus') }}</p>
         <div class="grid grid-cols-2 gap-2">
           <ui-radio
             v-for="status in filterByStatus"
-            :key="status"
+            :key="status.id"
             :model-value="filters.byStatus"
-            :value="status"
+            :value="status.id"
             class="capitalize text-sm"
             @change="updateFilters('byStatus', $event)"
           >
-            {{ status }}
+            {{ status.name }}
           </ui-radio>
         </div>
-        <p class="mb-1 text-sm text-gray-600 mt-3">By date</p>
+        <p class="mb-1 text-sm text-gray-600 mt-3">
+          {{ t('log.filter.byDate.title') }}
+        </p>
         <ui-select
           :model-value="filters.byDate"
           class="w-full"
@@ -64,6 +66,8 @@
   </div>
 </template>
 <script setup>
+import { useI18n } from 'vue-i18n';
+
 defineProps({
   filters: {
     type: Object,
@@ -76,16 +80,23 @@ defineProps({
 });
 const emit = defineEmits(['updateSorts', 'updateFilters']);
 
-const filterByStatus = ['all', 'success', 'stopped', 'error'];
+const { t } = useI18n();
+
+const filterByStatus = [
+  { id: 'all', name: t('common.all') },
+  { id: 'success', name: t('logStatus.success') },
+  { id: 'stopped', name: t('logStatus.stopped') },
+  { id: 'error', name: t('logStatus.error') },
+];
 const filterByDate = [
-  { id: 0, name: 'All' },
-  { id: 1, name: 'Last day' },
-  { id: 7, name: 'Last 7 days' },
-  { id: 30, name: 'Last 30 days' },
+  { id: 0, name: t('common.all') },
+  { id: 1, name: t('log.filter.byDate.items.lastDay') },
+  { id: 7, name: t('log.filter.byDate.items.last7Days') },
+  { id: 30, name: t('log.filter.byDate.items.last30Days') },
 ];
 const sortsList = [
-  { id: 'name', name: 'Name' },
-  { id: 'startedAt', name: 'Created date' },
+  { id: 'name', name: t('sort.name') },
+  { id: 'startedAt', name: t('sort.createdAt') },
 ];
 
 function updateFilters(key, value) {