Google Sheet - OAuth "client" powered integrations (#415)

* fix `helpers.php` * fix `.eslintrc.cjs` * spreadsheet manager * fetch providers. set `oauth_id` for integrations * create spreadsheet on integration create event * connect OAuth accounts * display actions. connect account if missing * cleanup * handle form field change * map integration data object to `SpreadsheetData` * validate request * wip * redirect to integrations page * fix refresh token * add helper text * add extra integration info * refactor * refresh google token * fix validation * add tests * Fix linting issue * Update composer lock file --------- Co-authored-by: Julien Nahum <julien@nahum.net>
2024-06-05 06:35:46 -07:00
parent 03d695c74e
commit 24d33a9ebb
53 changed files with 3383 additions and 298 deletions
--- a/client/components/open/integrations/GoogleSheetsIntegration.vue
+++ b/client/components/open/integrations/GoogleSheetsIntegration.vue
@@ -5,7 +5,39 @@
    :form="form"
  >
    <div class="my-5">
-      Coming Soon...
+      <select-input
+        v-if="providers.length"
+        v-model="integrationData.oauth_id"
+        name="provider"
+        :options="providers"
+        option-key="id"
+        emit-key="id"
+        :required="true"
+        label="Select Google Account"
+      >
+        <template #help>
+          <InputHelp>
+            <span>
+              Add an entry to spreadsheets on each form submission.
+              <NuxtLink
+                :to="{ name: 'settings-connections' }"
+              >
+                Click here
+              </NuxtLink>
+              to connect another account.
+            </span>
+          </InputHelp>
+        </template>
+      </select-input>
+
+      <v-button
+        v-else
+        color="white"
+        :loading="providersStore.loading"
+        @click.prevent="connect"
+      >
+        Connect Google account
+      </v-button>
    </div>
  </IntegrationWrapper>
 </template>
@@ -19,4 +51,11 @@ const props = defineProps({
  integrationData: { type: Object, required: true },
  formIntegrationId: { type: Number, required: false, default: null },
 })
+
+const providersStore = useOAuthProvidersStore()
+const providers = computed(() => providersStore.getAll.filter(provider => provider.provider == 'google'))
+
+function connect() {
+  providersStore.connect('google', true)
+}
 </script>
--- a/client/components/open/integrations/components/GoogleSheetsIntegrationActions.vue
+++ b/client/components/open/integrations/components/GoogleSheetsIntegrationActions.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="flex flex-1 items-center">
+    <div class="space-y-1">
+      <div class="font-medium mr-2">
+        {{ integration.provider.user.name }}
+      </div>
+      <div class="text-sm">
+        {{ integration.provider.user.email }}
+      </div>
+    </div>
+
+    <div class="ml-auto">
+      <v-button
+        :href="integration.data.url"
+        target="_blank"
+        color="white"
+      >
+        Open spreadsheet
+      </v-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  integration: Object,
+})
+</script>
--- a/client/components/open/integrations/components/IntegrationCard.vue
+++ b/client/components/open/integrations/components/IntegrationCard.vue
@@ -2,7 +2,7 @@
  <div
    class="text-gray-500 border shadow rounded-md p-5 mt-4 relative flex items-center"
  >
-    <div class="flex-grow flex items-center">
+    <div class="flex items-center">
      <div
        class="mr-4"
        :class="{
@@ -32,97 +32,106 @@
      </div>
    </div>

-    <div
-      v-if="loadingDelete"
-      class="pr-4 pt-2"
-    >
-      <Loader class="h-6 w-6 mx-auto" />
-    </div>
-    <dropdown
-      v-else
-      class="inline"
-    >
-      <template #trigger="{ toggle }">
-        <v-button
-          color="white"
-          @click="toggle"
-        >
-          <svg
-            class="w-4 h-4 inline -mt-1"
-            viewBox="0 0 16 4"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M8.00016 2.83366C8.4604 2.83366 8.8335 2.46056 8.8335 2.00033C8.8335 1.54009 8.4604 1.16699 8.00016 1.16699C7.53993 1.16699 7.16683 1.54009 7.16683 2.00033C7.16683 2.46056 7.53993 2.83366 8.00016 2.83366Z"
-              stroke="#344054"
-              stroke-width="1.66667"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-            <path
-              d="M13.8335 2.83366C14.2937 2.83366 14.6668 2.46056 14.6668 2.00033C14.6668 1.54009 14.2937 1.16699 13.8335 1.16699C13.3733 1.16699 13.0002 1.54009 13.0002 2.00033C13.0002 2.46056 13.3733 2.83366 13.8335 2.83366Z"
-              stroke="#344054"
-              stroke-width="1.66667"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-            <path
-              d="M2.16683 2.83366C2.62707 2.83366 3.00016 2.46056 3.00016 2.00033C3.00016 1.54009 2.62707 1.16699 2.16683 1.16699C1.70659 1.16699 1.3335 1.54009 1.3335 2.00033C1.3335 2.46056 1.70659 2.83366 2.16683 2.83366Z"
-              stroke="#344054"
-              stroke-width="1.66667"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-        </v-button>
-      </template>
-      <a
-        v-track.edit_form_integration_click="{
-          form_slug: form.slug,
-          form_integration_id: integration.id,
-        }"
-        href="#"
-        class="flex px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:no-underline hover:text-gray-900 items-center"
-        @click.prevent="showIntegrationModal = true"
-      >
-        <Icon
-          name="heroicons:pencil"
-          class="w-5 h-5 mr-2"
-        />
-        Edit
-      </a>
-      <a
-        v-track.past_events_form_integration_click="{
-          form_slug: form.slug,
-          form_integration_id: integration.id,
-        }"
-        href="#"
-        class="flex px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:no-underline hover:text-gray-900 items-center"
-        @click.prevent="showIntegrationEventsModal = true"
-      >
-        <Icon
-          name="heroicons:clock"
-          class="w-5 h-5 mr-2"
-        />
-        Past Events
-      </a>
-      <a
-        v-track.delete_form_integration_click="{
-          form_integration_id: integration.id,
-        }"
-        href="#"
-        class="flex px-4 py-2 text-md text-red-600 hover:bg-red-50 hover:no-underline items-center"
-        @click.prevent="deleteFormIntegration(integration.id)"
-      >
-        <Icon
-          name="heroicons:trash"
-          class="w-5 h-5 mr-2"
-        />
+    <div class="grow flex items-center gap-4 pl-4">
+      <component
+        :is="actionsComponent"
+        v-if="actionsComponent"
+        :integration="integration"
+      />
+
+      <div
+        v-if="loadingDelete"
+        class="pr-4 pt-2 ml-auto"
+      >
+        <Loader class="h-6 w-6 mx-auto" />
+      </div>
+      <dropdown
+        v-else
+        class="inline"
+      >
+        <template #trigger="{ toggle }">
+          <v-button
+            color="white"
+            @click="toggle"
+          >
+            <svg
+              class="w-4 h-4 inline -mt-1"
+              viewBox="0 0 16 4"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8.00016 2.83366C8.4604 2.83366 8.8335 2.46056 8.8335 2.00033C8.8335 1.54009 8.4604 1.16699 8.00016 1.16699C7.53993 1.16699 7.16683 1.54009 7.16683 2.00033C7.16683 2.46056 7.53993 2.83366 8.00016 2.83366Z"
+                stroke="#344054"
+                stroke-width="1.66667"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M13.8335 2.83366C14.2937 2.83366 14.6668 2.46056 14.6668 2.00033C14.6668 1.54009 14.2937 1.16699 13.8335 1.16699C13.3733 1.16699 13.0002 1.54009 13.0002 2.00033C13.0002 2.46056 13.3733 2.83366 13.8335 2.83366Z"
+                stroke="#344054"
+                stroke-width="1.66667"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M2.16683 2.83366C2.62707 2.83366 3.00016 2.46056 3.00016 2.00033C3.00016 1.54009 2.62707 1.16699 2.16683 1.16699C1.70659 1.16699 1.3335 1.54009 1.3335 2.00033C1.3335 2.46056 1.70659 2.83366 2.16683 2.83366Z"
+                stroke="#344054"
+                stroke-width="1.66667"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </v-button>
+        </template>
+        <a
+          v-track.edit_form_integration_click="{
+            form_slug: form.slug,
+            form_integration_id: integration.id,
+          }"
+          href="#"
+          class="flex px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:no-underline hover:text-gray-900 items-center"
+          @click.prevent="showIntegrationModal = true"
+        >
+          <Icon
+            name="heroicons:pencil"
+            class="w-5 h-5 mr-2"
+          />
+          Edit
+        </a>
+        <a
+          v-track.past_events_form_integration_click="{
+            form_slug: form.slug,
+            form_integration_id: integration.id,
+          }"
+          href="#"
+          class="flex px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:no-underline hover:text-gray-900 items-center"
+          @click.prevent="showIntegrationEventsModal = true"
+        >
+          <Icon
+            name="heroicons:clock"
+            class="w-5 h-5 mr-2"
+          />
+          Past Events
+        </a>
+        <a
+          v-track.delete_form_integration_click="{
+            form_integration_id: integration.id,
+          }"
+          href="#"
+          class="flex px-4 py-2 text-md text-red-600 hover:bg-red-50 hover:no-underline items-center"
+          @click.prevent="deleteFormIntegration(integration.id)"
+        >
+          <Icon
+            name="heroicons:trash"
+            class="w-5 h-5 mr-2"
+          />
+
+          Delete Integration
+        </a>
+      </dropdown>
+    </div>

-        Delete Integration
-      </a>
-    </dropdown>
    <IntegrationModal
      v-if="form && integration && integrationTypeInfo"
      :form="form"
@@ -170,6 +179,14 @@ const showIntegrationModal = ref(false)
 const showIntegrationEventsModal = ref(false)
 const loadingDelete = ref(false)

+const actionsComponent = computed(() => {
+  if(integrationTypeInfo.value.actions_file_name) {
+    return resolveComponent(integrationTypeInfo.value.actions_file_name)
+  }
+
+  return null
+})
+
 const deleteFormIntegration = (integrationid) => {
  alert.confirm("Do you really want to delete this form integration?", () => {
    opnFetch(
--- a/client/components/open/integrations/components/IntegrationModal.vue
+++ b/client/components/open/integrations/components/IntegrationModal.vue
@@ -51,6 +51,7 @@ const props = defineProps({
  integrationKey: { type: String, required: true },
  integration: { type: Object, required: true },
  formIntegrationId: { type: Number, required: false, default: null },
+  providers: { type: Array, required: true }
 })

 const alert = useAlert()
@@ -92,6 +93,7 @@ const initIntegrationData = () => {
        ? formIntegration.value.logic
        : null
      : null,
+    oauth_id: formIntegration.value?.oauth_id ?? null,
  })
 }
 initIntegrationData()