From ca0864d0c01517445897ed9c91a560f8df061ee4 Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <60499540+chiragchhatrala@users.noreply.github.com>
Date: Fri, 7 Jun 2024 15:42:24 +0530
Subject: [PATCH] Improve google sheet integration (#437)

* fix integration modal error

* Provider card icon dynamic

* Google Sheets Integration Actions fetch integration data till interval

* fix show form tablist - params slug issue

* validation on delete connection

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 app/Policies/OAuthProviderPolicy.php          |  5 +++
 .../GoogleSheetsIntegrationActions.vue        | 32 +++++++++++++++++--
 .../components/IntegrationCard.vue            |  1 +
 .../components/IntegrationModal.vue           |  3 +-
 client/components/settings/ProviderCard.vue   |  3 +-
 client/components/settings/ProviderModal.vue  | 10 +-----
 client/pages/forms/[slug]/show.vue            |  6 +++-
 client/stores/oauth_providers.js              | 17 ++++++++++
 8 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/app/Policies/OAuthProviderPolicy.php b/app/Policies/OAuthProviderPolicy.php
index e3b0dce9..1102ee29 100644
--- a/app/Policies/OAuthProviderPolicy.php
+++ b/app/Policies/OAuthProviderPolicy.php
@@ -2,6 +2,7 @@
 
 namespace App\Policies;
 
+use App\Models\Integration\FormIntegration;
 use App\Models\OAuthProvider;
 use App\Models\User;
 use Illuminate\Auth\Access\HandlesAuthorization;
@@ -57,6 +58,10 @@ class OAuthProviderPolicy
      */
     public function delete(User $user, OAuthProvider $provider)
     {
+        $integrations = FormIntegration::where('oauth_id', $provider->id)->get();
+        if ($integrations->count() > 0) {
+            return $this->denyWithStatus(400, 'This connection cannot be removed because there is already an integration using it.');
+        }
         return $provider->user()->is($user);
     }
 
diff --git a/client/components/open/integrations/components/GoogleSheetsIntegrationActions.vue b/client/components/open/integrations/components/GoogleSheetsIntegrationActions.vue
index 6679a666..a6fa81fd 100644
--- a/client/components/open/integrations/components/GoogleSheetsIntegrationActions.vue
+++ b/client/components/open/integrations/components/GoogleSheetsIntegrationActions.vue
@@ -14,7 +14,10 @@
       </div>
     </div>
 
-    <div class="ml-auto">
+    <div
+      v-if="integration.data"
+      class="ml-auto"
+    >
       <v-button
         :href="integration.data.url"
         target="_blank"
@@ -27,7 +30,30 @@
 </template>
 
 <script setup>
-defineProps({
-  integration: Object,
+const props = defineProps({
+  integration: {
+    type: Object,
+    required: true,
+  },
+  form: {
+    type: Object,
+    required: true,
+  }
+})
+
+const formIntegrationsStore = useFormIntegrationsStore()
+let interval = null
+
+onMounted(() => {
+  if (!props.integration.data) {
+    interval = setInterval(() => formIntegrationsStore.fetchFormIntegrations(props.form.id), 3000)
+    setTimeout(() => { clearInterval(interval) }, 30000)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (interval) {
+    clearInterval(interval)
+  }
 })
 </script>
diff --git a/client/components/open/integrations/components/IntegrationCard.vue b/client/components/open/integrations/components/IntegrationCard.vue
index efd4ac4f..da84f11b 100644
--- a/client/components/open/integrations/components/IntegrationCard.vue
+++ b/client/components/open/integrations/components/IntegrationCard.vue
@@ -37,6 +37,7 @@
         :is="actionsComponent"
         v-if="actionsComponent"
         :integration="integration"
+        :form="form"
       />
 
       <div
diff --git a/client/components/open/integrations/components/IntegrationModal.vue b/client/components/open/integrations/components/IntegrationModal.vue
index e3880a10..3531861d 100644
--- a/client/components/open/integrations/components/IntegrationModal.vue
+++ b/client/components/open/integrations/components/IntegrationModal.vue
@@ -50,8 +50,7 @@ const props = defineProps({
   form: { type: Object, required: true },
   integrationKey: { type: String, required: true },
   integration: { type: Object, required: true },
-  formIntegrationId: { type: Number, required: false, default: null },
-  providers: { type: Array, required: true }
+  formIntegrationId: { type: Number, required: false, default: null }
 })
 
 const alert = useAlert()
diff --git a/client/components/settings/ProviderCard.vue b/client/components/settings/ProviderCard.vue
index 471e50b9..36d0e051 100644
--- a/client/components/settings/ProviderCard.vue
+++ b/client/components/settings/ProviderCard.vue
@@ -7,7 +7,7 @@
         class="mr-4 text-blue-500"
       >
         <Icon
-          name="mdi:google"
+          :name="service?.icon"
           size="32px"
         />
       </div>
@@ -87,6 +87,7 @@ const props = defineProps({
 })
 
 const providersStore = useOAuthProvidersStore()
+const service = computed(() => providersStore.getService(props.provider?.provider))
 const alert = useAlert()
 
 function disconnect() {
diff --git a/client/components/settings/ProviderModal.vue b/client/components/settings/ProviderModal.vue
index 4ca6ac5f..7b355eed 100644
--- a/client/components/settings/ProviderModal.vue
+++ b/client/components/settings/ProviderModal.vue
@@ -65,15 +65,7 @@ defineProps({
 const emit = defineEmits(['close'])
 
 const providersStore = useOAuthProvidersStore()
-
-const services = [
-  {
-    name: 'google',
-    title: 'Google',
-    icon: 'mdi:google',
-    enabled: true
-  },
-]
+const services = computed(() => providersStore.services)
 
 function connect(service) {
   providersStore.connect(service.name)
diff --git a/client/pages/forms/[slug]/show.vue b/client/pages/forms/[slug]/show.vue
index 7c7f250b..056c8771 100644
--- a/client/pages/forms/[slug]/show.vue
+++ b/client/pages/forms/[slug]/show.vue
@@ -200,7 +200,7 @@
                   class="mr-6"
                 >
                   <nuxt-link
-                    :to="{ name: tab.route }"
+                    :to="{ name: tab.route, params: tab.params ?? {} }"
                     class="hover:no-underline inline-block py-4 rounded-t-lg border-b-2 text-gray-500 hover:text-gray-600"
                     active-class="text-blue-600 hover:text-blue-900 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
                   >
@@ -277,18 +277,22 @@ const tabsList = [
   {
     name: "Submissions",
     route: "forms-slug-show-submissions",
+    params: { 'slug': slug }
   },
   {
     name: "Integrations",
     route: "forms-slug-show-integrations",
+    params: { 'slug': slug }
   },
   {
     name: "Analytics",
     route: "forms-slug-show-stats",
+    params: { 'slug': slug }
   },
   {
     name: "Share",
     route: "forms-slug-show-share",
+    params: { 'slug': slug }
   },
 ]
 
diff --git a/client/stores/oauth_providers.js b/client/stores/oauth_providers.js
index 126107a8..9ed53ad9 100644
--- a/client/stores/oauth_providers.js
+++ b/client/stores/oauth_providers.js
@@ -7,6 +7,21 @@ export const useOAuthProvidersStore = defineStore("oauth_providers", () => {
   const contentStore = useContentStore()
   const alert = useAlert()
 
+  const services = computed(() => {
+    return [
+      {
+        name: 'google',
+        title: 'Google',
+        icon: 'mdi:google',
+        enabled: true
+      }
+    ]
+  })
+
+  const getService = (service) => {
+    return services.value.find((item) => item.name === service)
+  }
+
   const fetchOAuthProviders = () => {
     contentStore.resetState()
     contentStore.startLoading()
@@ -50,6 +65,8 @@ export const useOAuthProvidersStore = defineStore("oauth_providers", () => {
 
   return {
     ...contentStore,
+    services,
+    getService,
     fetchOAuthProviders,
     providers,
     connect