Dynamic OauthDriver scope (#544)

* Dynamic OauthDriver scope

* support migration for mysql

* Refactor default scopes for integrations

* Small UI changes

* fix flet select tooltip

* fix linter

* Fix google token size in DB

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/forms/FlatSelectInput.vue

@@ -33,6 +33,9 @@
             theme.FlatSelectInput.spacing.vertical,
             theme.FlatSelectInput.fontSize,
             theme.FlatSelectInput.option,
+            {
+              '!cursor-not-allowed !bg-gray-200': disableOptions.includes(option[optionKey]),
+            },
           ]"
           @click="onSelect(option[optionKey])"
         >
@@ -50,9 +53,15 @@
               :theme="theme"
             />
           </template>
-          <p class="flex-grow">
-            {{ option[displayKey] }}
-          </p>
+          <UTooltip
+            :text="disableOptionsTooltip"
+            :prevent="!disableOptions.includes(option[optionKey])"
+            class="w-full"
+          >
+            <p class="flex-grow">
+              {{ option[displayKey] }}
+            </p>
+          </UTooltip>
         </div>
       </template>
       <div
@@ -98,7 +107,9 @@ export default {
     emitKey: {type: String, default: "value"},
     displayKey: {type: String, default: "name"},
     loading: {type: Boolean, default: false},
-    multiple: {type: Boolean, default: false},
+    multiple: { type: Boolean, default: false },
+    disableOptions: { type: Array, default: () => [] },
+    disableOptionsTooltip: {type: String, default: "Not allowed"},
   },
   setup(props, context) {
     return {
@@ -111,7 +122,7 @@ export default {
   computed: {},
   methods: {
     onSelect(value) {
-      if (this.disabled) {
+      if (this.disabled || this.disableOptions.includes(value)) {
         return
       }
 

client/components/open/integrations/GoogleSheetsIntegration.vue

@@ -4,12 +4,17 @@
     :integration="props.integration"
     :form="form"
   >
-    <div class="my-5">
-      <select-input
+    <div class="mb-4">
+      <p class="text-gray-500 mb-4">
+        Adds new entry to spreadsheets on each form submission.
+      </p>
+      <FlatSelectInput
         v-if="providers.length"
         v-model="integrationData.oauth_id"
         name="provider"
         :options="providers"
+        :disable-options="disableProviders"
+        disable-options-tooltip="Re-connect account to fix permissions"
         display-key="email"
         option-key="id"
         emit-key="id"
@@ -19,8 +24,8 @@
         <template #help>
           <InputHelp>
             <span>
-              Add an entry to spreadsheets on each form submission.
               <NuxtLink
+                class="text-blue-500"
                 :to="{ name: 'settings-connections' }"
               >
                 Click here
@@ -29,7 +34,7 @@
             </span>
           </InputHelp>
         </template>
-      </select-input>
+      </FlatSelectInput>
 
       <v-button
         v-else
@@ -44,6 +49,7 @@
 </template>
 
 <script setup>
+import FlatSelectInput from '~/components/forms/FlatSelectInput.vue'
 import IntegrationWrapper from './components/IntegrationWrapper.vue'
 
 const props = defineProps({
@@ -55,6 +61,7 @@ const props = defineProps({
 
 const providersStore = useOAuthProvidersStore()
 const providers = computed(() => providersStore.getAll.filter(provider => provider.provider == 'google'))
+const disableProviders = computed(() => providersStore.getAll.filter(provider => !provider.scopes.includes(providersStore.googleDrivePermission)).map((provider) => provider.id))
 
 function connect () {
   providersStore.connect('google', true)

client/pages/settings/connections.vue

@@ -8,7 +8,7 @@
         <small class="text-gray-600">Manage your external connections.</small>
       </div>
       <UButton
-        label="Connect new account"
+        label="Connect account"
         icon="i-heroicons-plus"
         :loading="loading"
         @click="providerModal = true"

client/stores/oauth_providers.js

@@ -7,6 +7,8 @@ export const useOAuthProvidersStore = defineStore("oauth_providers", () => {
   const contentStore = useContentStore()
   const alert = useAlert()
 
+  const googleDrivePermission = 'https://www.googleapis.com/auth/drive.file'
+
   const services = computed(() => {
     return [
       {
@@ -92,6 +94,7 @@ export const useOAuthProvidersStore = defineStore("oauth_providers", () => {
 
   return {
     ...contentStore,
+    googleDrivePermission,
     services,
     getService,
     fetchOAuthProviders,