fix: notifications block permission

package.json

@@ -1,6 +1,6 @@
 {
   "name": "automa",
-  "version": "1.12.0",
+  "version": "1.12.1",
   "description": "An extension for automating your browser by connecting blocks",
   "license": "MIT",
   "repository": {

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

@@ -6,44 +6,59 @@
       class="w-full mb-2"
       @change="updateData({ description: $event })"
     />
-    <edit-autocomplete class="mb-2">
-      <ui-input
-        :model-value="data.title"
-        :label="t('workflow.blocks.notification.title')"
-        placeholder="Hello world!"
-        class="w-full"
-        @change="updateData({ title: $event })"
-      />
-    </edit-autocomplete>
-    <label class="input-label" for="notification-message">
-      {{ t('workflow.blocks.notification.message') }}
-    </label>
-    <edit-autocomplete>
-      <ui-textarea
-        id="notification-message"
-        :model-value="data.message"
-        placeholder="Notification message"
-        class="w-full"
-        @change="updateData({ message: $event })"
-      />
-    </edit-autocomplete>
-    <edit-autocomplete
-      v-for="type in ['iconUrl', 'imageUrl']"
-      :key="type"
-      class="mt-2"
-    >
-      <ui-input
-        :model-value="data[type]"
-        :label="t(`workflow.blocks.notification.${type}`)"
-        class="w-full"
-        placeholder="https://example.com/image.png"
-        @change="updateData({ [type]: $event })"
-      />
-    </edit-autocomplete>
+    <template v-if="permission.has.notifications">
+      <edit-autocomplete class="mb-2">
+        <ui-input
+          :model-value="data.title"
+          :label="t('workflow.blocks.notification.title')"
+          placeholder="Hello world!"
+          class="w-full"
+          @change="updateData({ title: $event })"
+        />
+      </edit-autocomplete>
+      <label class="input-label" for="notification-message">
+        {{ t('workflow.blocks.notification.message') }}
+      </label>
+      <edit-autocomplete>
+        <ui-textarea
+          id="notification-message"
+          :model-value="data.message"
+          placeholder="Notification message"
+          class="w-full"
+          @change="updateData({ message: $event })"
+        />
+      </edit-autocomplete>
+      <edit-autocomplete
+        v-for="type in ['iconUrl', 'imageUrl']"
+        :key="type"
+        class="mt-2"
+      >
+        <ui-input
+          :model-value="data[type]"
+          :label="t(`workflow.blocks.notification.${type}`)"
+          class="w-full"
+          placeholder="https://example.com/image.png"
+          @change="updateData({ [type]: $event })"
+        />
+      </edit-autocomplete>
+    </template>
+    <template v-else>
+      <p class="mt-4">
+        {{ t('workflow.blocks.base.noPermission') }}
+      </p>
+      <ui-button
+        variant="accent"
+        class="mt-2"
+        @click="permission.request(true)"
+      >
+        {{ t('workflow.blocks.base.grantPermission') }}
+      </ui-button>
+    </template>
   </div>
 </template>
 <script setup>
 import { useI18n } from 'vue-i18n';
+import { useHasPermissions } from '@/composable/hasPermissions';
 import EditAutocomplete from './EditAutocomplete.vue';
 
 const props = defineProps({
@@ -55,6 +70,7 @@ const props = defineProps({
 const emit = defineEmits(['update:data']);
 
 const { t } = useI18n();
+const permission = useHasPermissions(['notifications']);
 
 function updateData(value) {
   emit('update:data', { ...props.data, ...value });

src/locales/en/blocks.json

@@ -15,6 +15,8 @@
         "selector": "Element selector",
         "selectorOptions": "Selector options",
         "timeout": "Timeout (milliseconds)",
+        "noPermission": "Automa don't have enough permission to do this action",
+        "grantPermission": "Grant permission",
         "toggle": {
           "enable": "Enable block",
           "disable": "Disable block",