Merge pull request #497 from panoratech/feat/test-zendesk-realtime-we…

…bhook ✅ Testing zendesk realtime webhook
panoratech · Jun 15, 2024 · 8be572c · 8be572c
2 parents 5e2a969 + 403977a
commit 8be572c
Show file tree

Hide file tree

Showing 41 changed files with 1,715 additions and 1,405 deletions.
diff --git a/.env.example b/.env.example
@@ -29,7 +29,8 @@ POSTGRES_USER=my_user
 POSTGRES_DB=panora_db
 POSTGRES_HOST=postgres
 POSTGRES_PASSWORD=my_password
-
+# Endpoint on which realtime webhooks are sent to 
+WEBHOOK_INGRESS=http://localhost:3000
 
 # Each Provider is of form PROVIDER_VERTICAL_SOFTWAREMODE_ATTRIBUTE
 # ================================================

diff --git a/.gitignore b/.gitignore
@@ -12,4 +12,3 @@ redis_data
 .pnpm-store/
 .npmrc
 .vscode
-ngrok.yml
diff --git a/apps/client-ts/src/components/Configuration/Connector/ConnectorDisplay.tsx b/apps/client-ts/src/components/Configuration/Connector/ConnectorDisplay.tsx
@@ -8,7 +8,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { PasswordInput } from "@/components/ui/password-input"
 import { z } from "zod"
 import config from "@/lib/config"
-import { AuthStrategy, providerToType, Provider, extractProvider, extractVertical } from "@panora/shared"
+import { AuthStrategy, providerToType, Provider, extractProvider, extractVertical, needsSubdomain } from "@panora/shared"
 import { useEffect, useState } from "react"
 import useProjectStore from "@/state/projectStore"
 import { usePostHog } from 'posthog-js/react'
@@ -26,24 +26,27 @@ interface ItemDisplayProps {
 }
 
 const formSchema = z.object({
+  subdomain: z.string({
+    required_error: "Please Enter a Subdomain",
+  }).optional(),
   client_id : z.string({
     required_error: "Please Enter a Client ID",
-  }),
+  }).optional(),
   client_secret : z.string({
     required_error: "Please Enter a Client Secret",
-  }),
+  }).optional(),
   scope : z.string({
     required_error: "Please Enter a scope",
-  }),
+  }).optional(),
   api_key: z.string({
     required_error: "Please Enter a API Key",
-  }),
+  }).optional(),
   username: z.string({
     required_error: "Please Enter Username",
-  }),
+  }).optional(),
   secret: z.string({
     required_error: "Please Enter Secret",
-  }),
+  }).optional(),
 })
 
 export function ConnectorDisplay({ item }: ItemDisplayProps) {
@@ -62,6 +65,7 @@ export function ConnectorDisplay({ item }: ItemDisplayProps) {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
+      subdomain: "",
       client_id: "",
       client_secret: "",
       scope: "",
@@ -88,10 +92,11 @@ export function ConnectorDisplay({ item }: ItemDisplayProps) {
   };
 
   function onSubmit(values: z.infer<typeof formSchema>) {
-    const { client_id, client_secret, scope, api_key, secret, username } = values;
+    const { client_id, client_secret, scope, api_key, secret, username, subdomain } = values;
     const performUpdate = mappingConnectionStrategies && mappingConnectionStrategies.length > 0;
     switch (item?.authStrategy) {
       case AuthStrategy.oauth2:
+        const needs_subdomain = needsSubdomain(item.name.toLowerCase(), item.vertical!.toLowerCase());
         if (client_id === "" || client_secret === "" || scope === "") {
           if (client_id === "") {
             form.setError("client_id", { "message": "Please Enter Client ID" });
@@ -104,15 +109,27 @@ export function ConnectorDisplay({ item }: ItemDisplayProps) {
           }
           break;
         }
+        if(needs_subdomain && subdomain == ""){
+          form.setError("subdomain", { "message": "Please Enter Subdomain" });
+        }
+        let ATTRIBUTES = [];
+        let VALUES = [];
+        if(needs_subdomain){
+          ATTRIBUTES = ["subdomain", "client_id", "client_secret", "scope"],
+          VALUES = [subdomain!, client_id!, client_secret!, scope!]
+        }else{
+          ATTRIBUTES = ["client_id", "client_secret", "scope"],
+          VALUES = [client_id!, client_secret!, scope!]
+        }
         if (performUpdate) {
           const dataToUpdate = mappingConnectionStrategies[0];
           toast.promise(
             updateCsPromise({
               id_cs: dataToUpdate.id_connection_strategy,
               updateToggle: false,
               status: dataToUpdate.status,
-              attributes: ["client_id", "client_secret", "scope"],
-              values: [client_id, client_secret, scope]
+              attributes: ATTRIBUTES,
+              values: VALUES
             }), 
               {
               loading: 'Loading...',
@@ -140,8 +157,8 @@ export function ConnectorDisplay({ item }: ItemDisplayProps) {
           toast.promise(
             createCsPromise({
               type: providerToType(item?.name, item?.vertical!, AuthStrategy.oauth2),
-              attributes: ["client_id", "client_secret", "scope"],
-              values: [client_id, client_secret, scope]
+              attributes: ATTRIBUTES,
+              values: VALUES
             }), 
               {
               loading: 'Loading...',
@@ -183,7 +200,7 @@ export function ConnectorDisplay({ item }: ItemDisplayProps) {
               updateToggle: false,
               status: dataToUpdate.status,
               attributes: ["api_key"],
-              values: [api_key]
+              values: [api_key!]
             }), 
               {
               loading: 'Loading...',
@@ -212,7 +229,7 @@ export function ConnectorDisplay({ item }: ItemDisplayProps) {
             createCsPromise({
               type: providerToType(item?.name, item?.vertical!, AuthStrategy.api_key),
               attributes: ["api_key"],
-              values: [api_key]
+              values: [api_key!]
             }), 
               {
               loading: 'Loading...',
@@ -259,7 +276,7 @@ export function ConnectorDisplay({ item }: ItemDisplayProps) {
               updateToggle: false,
               status: dataToUpdate.status,
               attributes: ["username", "secret"],
-              values: [username, secret]
+              values: [username!, secret!]
             }), 
               {
               loading: 'Loading...',
@@ -289,7 +306,7 @@ export function ConnectorDisplay({ item }: ItemDisplayProps) {
             createCsPromise({
               type: providerToType(item?.name, item?.vertical!, AuthStrategy.basic),
               attributes: ["username", "secret"],
-              values: [username, secret]
+              values: [username!, secret!]
             }), 
               {
               loading: 'Loading...',
@@ -324,14 +341,19 @@ export function ConnectorDisplay({ item }: ItemDisplayProps) {
     if (mappingConnectionStrategies && mappingConnectionStrategies.length > 0) {
       fetchCredentials({
         type: mappingConnectionStrategies[0].type,
-        attributes: item?.authStrategy === AuthStrategy.oauth2 ? ["client_id", "client_secret", "scope"]
+        attributes: item?.authStrategy === AuthStrategy.oauth2 ? needsSubdomain(item.name.toLowerCase(), item.vertical!.toLowerCase()) ? ["subdomain", "client_id", "client_secret", "scope"] : ["client_id", "client_secret", "scope"]
           : item?.authStrategy === AuthStrategy.api_key ? ["api_key"] : ["username", "secret"]
       }, {
         onSuccess(data) {
           if (item?.authStrategy === AuthStrategy.oauth2) {
-            form.setValue("client_id", data[0]);
-            form.setValue("client_secret", data[1]);
-            form.setValue("scope", data[2]);
+            let i = 0;
+            if(needsSubdomain(item.name.toLowerCase(), item.vertical!.toLowerCase())){
+              form.setValue("subdomain", data[i]);
+              i = 1;
+            }
+            form.setValue("client_id", data[i]);
+            form.setValue("client_secret", data[i + 1]);
+            form.setValue("scope", data[i + 2]);
           }
           if (item?.authStrategy === AuthStrategy.api_key) {
             form.setValue("api_key", data[0]);
@@ -415,6 +437,23 @@ export function ConnectorDisplay({ item }: ItemDisplayProps) {
               <form onSubmit={form.handleSubmit(onSubmit)}>
                 { item.authStrategy == AuthStrategy.oauth2 &&
                   <>
+                  { needsSubdomain(item.name.toLowerCase(), item.vertical!.toLowerCase()) &&
+                      <div className="flex flex-col">
+                        <FormField
+                        name="subdomain"
+                        control={form.control}
+                        render={({field}) => (
+                            <FormItem>
+                                <FormLabel className="flex flex-col">Subdomain</FormLabel>
+                                <FormControl>
+                                <PasswordInput {...field} placeholder="Enter Subdomain (such as https://my-zendesk.com)" />
+                                </FormControl>
+                                <FormMessage/>
+                            </FormItem>
+                        )}
+                        />
+                      </div>
+                    }
                     <div className="flex flex-col">
                       <FormField
                         name="client_id"

diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
@@ -32,6 +32,7 @@ services:
     environment:
       DATABASE_URL: postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:5432/${POSTGRES_DB}?ssl=false
       DISTRIBUTION: ${DISTRIBUTION}
+      WEBHOOK_INGRESS: ${WEBHOOK_INGRESS}
       JWT_SECRET: ${JWT_SECRET}
       REDIS_HOST: ${REDIS_HOST}
       REDIS_PASS: ${REDIS_PASS}
@@ -188,22 +189,22 @@ services:
     volumes:
       - .:/app
 
-  #ngrok:
-    #image: ngrok/ngrok:latest
-    #restart: always
-    #command:
-     # - "start"
-     # - "--all"
-     # - "--config"
-     # - "/etc/ngrok.yml"
-    #volumes:
-    #  - ./ngrok.yml:/etc/ngrok.yml
-    #ports:
-     # - 4040:4040
-    #depends_on:
-    #  api:
-    #    condition: service_healthy
-    #network_mode: "host"
+  ngrok:
+    image: ngrok/ngrok:latest
+    restart: always
+    command:
+      - "start"
+      - "--all"
+      - "--config"
+      - "/etc/ngrok.yml"
+    volumes:
+      - ./ngrok.yml:/etc/ngrok.yml
+    ports:
+      - 4040:4040
+    depends_on:
+      api:
+        condition: service_healthy
+    network_mode: "host"
 
   docs:
     build:

diff --git a/docker-compose.source.yml b/docker-compose.source.yml
@@ -33,6 +33,7 @@ services:
       DOPPLER_TOKEN: ${DOPPLER_TOKEN_API}
       DATABASE_URL: postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:5432/${POSTGRES_DB}?ssl=false
       DISTRIBUTION: ${DISTRIBUTION}
+      WEBHOOK_INGRESS: ${WEBHOOK_INGRESS}
       JWT_SECRET: ${JWT_SECRET}
       REDIS_HOST: ${REDIS_HOST}
       REDIS_USER: ${REDIS_USER}

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -27,6 +27,7 @@ services:
     environment:
       DATABASE_URL: postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:5432/${POSTGRES_DB}?ssl=false
       DISTRIBUTION: ${DISTRIBUTION}
+      WEBHOOK_INGRESS: ${WEBHOOK_INGRESS}
       JWT_SECRET: ${JWT_SECRET}
       REDIS_HOST: ${REDIS_HOST}
       REDIS_USER: ${REDIS_USER}