feat: notion OAuth setup (#11765)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/api/notion_auth.js

@@ -0,0 +1,14 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class NotionOAuthClient extends ApiClient {
+  constructor() {
+    super('notion', { accountScoped: true });
+  }
+
+  generateAuthorization() {
+    return axios.post(`${this.url}/authorization`);
+  }
+}
+
+export default new NotionOAuthClient();

app/javascript/dashboard/i18n/locale/en/integrations.json

@@ -328,6 +328,14 @@
         "DESCRIPTION": "Linear workspace is not connected. Click the button below to connect your workspace to use this integration.",
         "BUTTON_TEXT": "Connect Linear workspace"
       }
+    },
+    "NOTION": {
+      "DELETE": {
+        "TITLE": "Are you sure you want to delete the Notion integration?",
+        "MESSAGE": "Deleting this integration will remove access to your Notion workspace and stop all related functionality.",
+        "CONFIRM": "Yes, delete",
+        "CANCEL": "Cancel"
+      }
     }
   },
   "CAPTAIN": {

app/javascript/dashboard/routes/dashboard/settings/integrations/Notion.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import {
+  useFunctionGetter,
+  useMapGetter,
+  useStore,
+} from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+
+import ButtonNext from 'next/button/Button.vue';
+import notionClient from 'dashboard/api/notion_auth.js';
+
+import Integration from './Integration.vue';
+import Spinner from 'shared/components/Spinner.vue';
+
+const { t } = useI18n();
+const store = useStore();
+const integrationLoaded = ref(false);
+
+const integration = useFunctionGetter('integrations/getIntegration', 'notion');
+
+const uiFlags = useMapGetter('integrations/getUIFlags');
+
+const integrationAction = computed(() => {
+  if (integration.value.enabled) {
+    return 'disconnect';
+  }
+
+  return '';
+});
+
+const authorize = async () => {
+  const response = await notionClient.generateAuthorization();
+  const {
+    data: { url },
+  } = response;
+
+  window.location.href = url;
+};
+
+const initializeNotionIntegration = async () => {
+  await store.dispatch('integrations/get', 'notion');
+  integrationLoaded.value = true;
+};
+
+onMounted(() => {
+  initializeNotionIntegration();
+});
+</script>
+
+<template>
+  <div class="flex-grow flex-shrink p-4 overflow-auto mx-auto">
+    <div v-if="integrationLoaded && !uiFlags.isCreatingNotion">
+      <Integration
+        :integration-id="integration.id"
+        :integration-logo="integration.logo"
+        :integration-name="integration.name"
+        :integration-description="integration.description"
+        :integration-enabled="integration.enabled"
+        :integration-action="integrationAction"
+        :delete-confirmation-text="{
+          title: t('INTEGRATION_SETTINGS.NOTION.DELETE.TITLE'),
+          message: t('INTEGRATION_SETTINGS.NOTION.DELETE.MESSAGE'),
+        }"
+      >
+        <template #action>
+          <ButtonNext
+            faded
+            blue
+            :label="t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT')"
+            @click="authorize"
+          />
+        </template>
+      </Integration>
+    </div>
+    <div v-else class="flex items-center justify-center flex-1">
+      <Spinner size="" color-scheme="primary" />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js

@@ -8,6 +8,7 @@ import DashboardApps from './DashboardApps/Index.vue';
 import Slack from './Slack.vue';
 import SettingsContent from '../Wrapper.vue';
 import Linear from './Linear.vue';
+import Notion from './Notion.vue';
 import Shopify from './Shopify.vue';
 
 export default {
@@ -90,6 +91,15 @@ export default {
           },
           props: route => ({ code: route.query.code }),
         },
+        {
+          path: 'notion',
+          name: 'settings_integrations_notion',
+          component: Notion,
+          meta: {
+            permissions: ['administrator'],
+          },
+          props: route => ({ code: route.query.code }),
+        },
         {
           path: 'shopify',
           name: 'settings_integrations_shopify',