Set github alert modal

frontend/src/integrations/github/components/github-connect.vue

@@ -3,8 +3,10 @@
 </template>
 
 <script setup>
-import { defineProps, computed } from 'vue';
+import { computed } from 'vue';
 import config from '@/config';
+import ConfirmDialog from '@/shared/dialog/confirm-dialog';
+import { useRouter } from 'vue-router';
 
 defineProps({
   integration: {
@@ -13,11 +15,38 @@ defineProps({
   },
 });
 
+const router = useRouter();
+
 // We have 3 GitHub apps: test, test-local and prod
 // Getting the proper URL from config file
 const githubConnectUrl = computed(() => config.gitHubInstallationUrl);
 const connect = () => {
-  window.open(githubConnectUrl.value, '_self');
+  ConfirmDialog({
+    type: 'notification',
+    title:
+      'Are you the admin of your GitHub organization?',
+    titleClass: 'text-lg pt-2',
+    message:
+      `Only GitHub users with admin permissions are able to connect crowd.dev's GitHub integration.
+      If you are an organization member, you will need an approval from the GitHub workspace admin. <a href="https://docs.crowd.dev/docs/github-integration" target="_blank">Read more</a>`,
+    icon: 'ri-information-line',
+    confirmButtonText: 'I\'m the GitHub organization admin',
+    cancelButtonText: 'Invite organization admin to this workspace',
+    verticalCancelButtonClass: 'btn btn--md btn--primary w-full',
+    verticalConfirmButtonClass: 'btn btn--md btn--bordered w-full !mb-2',
+    vertical: true,
+    distinguishCancelAndClose: true,
+    autofocus: false,
+    messageClass: 'text-xs !leading-5 !mt-1 text-gray-600',
+  }).then(() => {
+    window.open(githubConnectUrl.value, '_self');
+  }).catch((action) => {
+    if (action === 'cancel') {
+      router.push({
+        name: 'settings',
+      });
+    }
+  });
 };
 
 </script>

frontend/src/shared/dialog/confirm-dialog.js

@@ -17,6 +17,12 @@ export default ({
   confirmButtonText = 'Discard',
   confirmButtonClass = 'btn btn--md btn--primary',
   icon = 'ri-error-warning-line',
+  distinguishCancelAndClose = false,
+  autofocus = true,
+  titleClass,
+  messageClass,
+  verticalCancelButtonClass,
+  verticalConfirmButtonClass,
 }) => {
   let iconColorClass = 'text-yellow-600';
   let iconBgColorClass = 'bg-yellow-100';
@@ -59,7 +65,7 @@ export default ({
       h('div', [
         h('p', {
           innerHTML: message,
-          class: 'text-gray-500 text-sm',
+          class: `text-gray-500 text-sm ${messageClass}`,
         }),
         highlightedInfo
           ? h(
@@ -133,7 +139,7 @@ export default ({
         ),
         h('h6', {
           innerHTML: title,
-          class: 'text-black mb-3',
+          class: `text-black mb-3 ${titleClass}`,
         }),
         badgeContent
           ? h('div', {
@@ -144,7 +150,7 @@ export default ({
           : undefined,
         h('p', {
           innerHTML: message,
-          class: 'text-gray-500 text-sm',
+          class: `text-gray-500 text-sm ${messageClass}`,
         }),
         highlightedInfo
           ? h(
@@ -181,9 +187,11 @@ export default ({
       showCancelButton,
       customClass: overrideCustomClass,
       confirmButtonText,
-      confirmButtonClass: overrideConfirmButtonClass,
+      confirmButtonClass: verticalConfirmButtonClass || overrideConfirmButtonClass,
       cancelButtonText,
-      cancelButtonClass: overrideCancelButtonClass,
+      cancelButtonClass: verticalCancelButtonClass || overrideCancelButtonClass,
+      distinguishCancelAndClose,
+      autofocus,
     });
   }
 
@@ -197,5 +205,7 @@ export default ({
     cancelButtonClass,
     confirmButtonText,
     confirmButtonClass,
+    distinguishCancelAndClose,
+    autofocus,
   });
 };