feat(ui): add alerts

Author: fiftin

web/src/lang/en.js

@@ -298,10 +298,13 @@ export default {
   deleteRunner: 'Delete Runner',
   newRunnerToken: 'New Runner',
   askDeleteRunner: 'Do you really want to delete runner {runner}?',
+  roles_only_enterprise: 'Roles are only available in <b>Enterprise</b> edition.',
   project_runners_only_pro: 'Project-level runners are only available for <b>PRO</b> users.',
   secret_storage_only_pro: 'Secret storages are only available for <b>PRO</b> users.',
   foss_runners_limited: 'The open-source version has limited functionality; full functionality is in the <b>PRO</b> version.',
   learn_more_about_pro: 'Learn more',
+  upgrade_to_pro: 'Upgrade',
+  contact_admin_to_upgrade: 'Contact your Semaphore administrator to upgrade to PRO.',
 
   projectRestoreResult: 'Project restore results',
   projectWithNameRestored: 'Project {projectName} successfully restored.',

web/src/views/Runners.vue

@@ -239,13 +239,18 @@
       <span v-html="$t('project_runners_only_pro')"></span>
 
       <v-btn
-        class="ml-2 pr-2"
+        v-if="isAdmin"
+        class="ml-2"
         color="hsl(348deg, 86%, 61%)"
         href="https://semaphoreui.com/pro#runners"
       >
-        {{ $t('learn_more_about_pro') }}
-        <v-icon>mdi-chevron-right</v-icon>
+        {{ $t('upgrade_to_pro') }}
       </v-btn>
+      <v-else>
+        <span>
+          {{ $t('contact_admin_to_upgrade') }}
+        </span>
+      </v-else>
     </v-alert>
 
     <v-alert

web/src/views/project/SecretStorages.vue

@@ -104,12 +104,11 @@
       <span v-html="$t('secret_storage_only_pro')"></span>
 
       <v-btn
-        class="ml-2 pr-2"
+        class="ml-2"
         color="hsl(348deg, 86%, 61%)"
         href="https://semaphoreui.com/pro#secret_storages"
       >
-        {{ $t('learn_more_about_pro') }}
-        <v-icon>mdi-chevron-right</v-icon>
+        {{ $t('upgrade_to_pro') }}
       </v-btn>
     </v-alert>