✨ Updated webapp

.changeset/nice-jeans-behave.md

@@ -0,0 +1,5 @@
+---
+"@panora/shared": major
+---
+
+updated constants

apps/webapp/src/components/api-keys/data/columns.tsx

@@ -9,10 +9,11 @@ import { DataTableColumnHeader } from "../../shared/data-table-column-header"
 import { DataTableRowActions } from "../../shared/data-table-row-actions"
 
 function insertDots(originalString: string): string {
+  if(!originalString) return "";
   if (originalString.length <= 50) {
     return originalString;
-}
-return originalString.substring(0, 50 - 3) + '...';
+  }
+  return originalString.substring(0, 50 - 3) + '...';
 }
 
 export const columns: ColumnDef<ApiKey>[] = [

apps/webapp/src/components/configuration/components/FieldMappingModal.tsx

@@ -36,7 +36,7 @@ import useMapFieldMutation from "@/hooks/mutations/useMapFieldMutation"
 import { useEffect, useState } from "react"
 import useFieldMappings from "@/hooks/useFieldMappings"
 import useProviderProperties from "@/hooks/useProviderProperties"
-import { standardOjects } from "@panora/shared"
+import { standardObjects } from "@panora/shared"
 import useProjectStore from "@/state/projectStore"
 import useLinkedUsers from "@/hooks/useLinkedUsers"
 import { zodResolver } from "@hookform/resolvers/zod"
@@ -181,8 +181,8 @@ export function FModal({ onClose }: {onClose: () => void}) {
                             </SelectTrigger>
                             <SelectContent>
                               <SelectGroup>
-                              {standardOjects && standardOjects
-                                  .map(sObject => (
+                              {standardObjects && standardObjects
+                                  .map((sObject: string) => (
                                     <SelectItem key={sObject} value={sObject}>{sObject}</SelectItem>
                                   ))
                               }

apps/webapp/src/components/configuration/components/WebhooksPage.tsx

@@ -17,7 +17,20 @@ export function WebhooksPage({
         mutate({ 
             id: webhook_id,
             active: status,
-        });
+        }, {
+          onSuccess: () => {
+              // Find the index of the webhook to update
+              const index = webhooks!.findIndex(webhook => webhook.id_webhook_endpoint === webhook_id);
+              if (index !== -1) {
+                  // Create a new array with all previous webhooks
+                  const updatedWebhooks = [...webhooks!];
+                  // Update the specific webhook's active status
+                  updatedWebhooks[index].active = status;
+                  // Set the updated webhooks array to state
+                  setWebhooks(updatedWebhooks);
+              }
+          }
+      });
     }
 
     useEffect(() => {
@@ -65,7 +78,8 @@ export function WebhooksPage({
                 id="necessary" 
                 checked={webhook.active}
                 onCheckedChange={() => disableWebhook(webhook.id_webhook_endpoint, !webhook.active)}
-            />}
+            />
+          }
         </div>
       </div>
       )

apps/webapp/src/components/connections/components/columns.tsx

@@ -7,7 +7,6 @@ import { Checkbox } from "@/components/ui/checkbox"
 
 import { Connection } from "../data/schema"
 import { DataTableColumnHeader } from "../../shared/data-table-column-header"
-import { DataTableRowActions } from "../../shared/data-table-row-actions"
 
 function truncateMiddle(str: string, maxLength: number) {
   if (str.length <= maxLength) {
@@ -54,15 +53,15 @@ export const columns: ColumnDef<Connection>[] = [
     enableHiding: false,
   },
   {
-    accessorKey: "app",
+    accessorKey: "app", 
     header: ({ column }) => (
       <DataTableColumnHeader column={column} title="App" />
     ),
     cell: ({ row }) => {      
       const provider = (row.getValue("app") as string).toLowerCase();
       return (
         <div className="flex space-x-2">
-          <Badge variant={"outline"} className="bg-neutral-950 p-1 pr-2">
+          <Badge variant={"outline"} className="p-1 pr-2">
               <img src={
                 provider == "hubspot" ?
                 `/providers/crm/${provider}.jpg` : 
@@ -158,9 +157,5 @@ export const columns: ColumnDef<Connection>[] = [
         </div>
       )
     },
-  },
-  {
-    id: "actions",
-    cell: ({ row }) => <DataTableRowActions row={row} />,
-  },
+  }
 ]

apps/webapp/src/components/connections/index.tsx

@@ -1,6 +1,4 @@
-import { Button } from "../ui/button";
 import ConnectionTable from "./ConnectionTable";
-import { toast } from "sonner"
 
 export default function ConnectionsPage() {
   return (
@@ -9,20 +7,6 @@ export default function ConnectionsPage() {
     <div className="flex flex-col items-start justify-between space-y-2">
       <h2 className="text-3xl font-bold tracking-tight">Connections</h2>
       <h2 className="text-lg font-bold tracking-tight">Connections between your product and your users’ accounts on third-party software.</h2>
-      <Button
-        variant="outline"
-        onClick={() =>
-          toast("Event has been created", {
-            description: "Sunday, December 03, 2023 at 9:00 AM",
-            action: {
-              label: "Undo",
-              onClick: () => console.log("Undo"),
-            },
-          })
-        }
-      >
-        Show Toast
-      </Button>
     </div>          
     <ConnectionTable />
     </div>

apps/webapp/src/hooks/mutations/useApiKeyMutation.tsx

@@ -1,5 +1,5 @@
 import config from '@/utils/config';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from "sonner"
 
 interface IApiKeyDto {
@@ -8,9 +8,9 @@ interface IApiKeyDto {
     keyName?: string;
 }
 const useApiKeyMutation = () => {
-    const addApiKey = async (data: IApiKeyDto) => {
-        console.log("user id is " + data.userId )
+    const queryClient = useQueryClient();
 
+    const addApiKey = async (data: IApiKeyDto) => {
         //TODO: in cloud environment this step must be done when user logs in directly inside his dashboard
         // Fetch the token
         const loginResponse = await fetch(`${config.API_URL}/auth/login`, {
@@ -61,7 +61,10 @@ const useApiKeyMutation = () => {
                 },
             })
         },
-        onSuccess: () => {
+        onSuccess: (data) => {
+            queryClient.setQueryData<IApiKeyDto[]>(['api-keys'], (oldQueryData = []) => {
+                return [...oldQueryData, data];
+            });
             toast("Api key has been generated !", {
                 description: "",
                 action: {

apps/webapp/src/hooks/mutations/useDefineFieldMutation.tsx

@@ -1,5 +1,5 @@
 import config from '@/utils/config';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from "sonner"
 
 interface IDefineTargetFieldDto{
@@ -10,6 +10,8 @@ interface IDefineTargetFieldDto{
 }
 
 const useDefineFieldMutation = () => {
+    const queryClient = useQueryClient()
+
     const defineField = async (data: IDefineTargetFieldDto) => {
         const response = await fetch(`${config.API_URL}/field-mapping/define`, {
             method: 'POST',
@@ -45,7 +47,10 @@ const useDefineFieldMutation = () => {
                 },
             })
         },
-        onSuccess: () => {
+        onSuccess: (data) => {
+            queryClient.setQueryData<IDefineTargetFieldDto[]>(['mappings'], (oldQueryData = []) => {
+                return [...oldQueryData, data];
+            });
             toast("Field mapping has been defined !", {
                 description: "",
                 action: {

apps/webapp/src/hooks/mutations/useLinkedUserMutation.tsx

@@ -1,13 +1,15 @@
 import config from '@/utils/config';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from "sonner"
-interface ICreateTargetFieldDto {
+interface ILinkedUserDto {
     linked_user_origin_id: string;
     alias: string;
     id_project: string;
 }
 const useLinkedUserMutation = () => {
-    const addLinkedUser = async (linkedUserData: ICreateTargetFieldDto) => {
+    const queryClient = useQueryClient();
+
+    const addLinkedUser = async (linkedUserData: ILinkedUserDto) => {
         const response = await fetch(`${config.API_URL}/linked-users/create`, {
             method: 'POST',
             body: JSON.stringify(linkedUserData),
@@ -42,7 +44,10 @@ const useLinkedUserMutation = () => {
                 },
             })
         },
-        onSuccess: () => {
+        onSuccess: (data) => {
+            queryClient.setQueryData<ILinkedUserDto[]>(['linked-users'], (oldQueryData = []) => {
+                return [...oldQueryData, data];
+            });
             toast("New linked user has been created !", {
                 description: "",
                 action: {

apps/webapp/src/hooks/mutations/useOrganisationMutation.tsx

@@ -43,7 +43,10 @@ const useOrganisationMutation = () => {
                 },
             })
         },
-        onSuccess: () => {
+        onSuccess: (data) => {
+            queryClient.setQueryData<IOrgDto[]>(['organisations'], (oldQueryData = []) => {
+                return [...oldQueryData, data];
+            });
             queryClient.invalidateQueries({
                 queryKey: ['organisations'],
                 refetchType: 'active',

apps/webapp/src/hooks/mutations/useProjectMutation.tsx

@@ -1,5 +1,5 @@
 import config from '@/utils/config';
-import { useMutation,useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from "sonner"
 
 interface IProDto {
@@ -8,7 +8,8 @@ interface IProDto {
 }
 
 const useProjectMutation = () => {
-    const queryClient = useQueryClient()
+    const queryClient = useQueryClient();
+
     const addProject = async (data: IProDto) => {
         const response = await fetch(`${config.API_URL}/projects/create`, {
             method: 'POST',
@@ -44,11 +45,14 @@ const useProjectMutation = () => {
                 },
             })
         },
-        onSuccess: () => {
+        onSuccess: (data) => {
             queryClient.invalidateQueries({
                 queryKey: ['projects'],
                 refetchType: 'active',
             })
+            queryClient.setQueryData<IProDto[]>(['projects'], (oldQueryData = []) => {
+                return [...oldQueryData, data];
+            });
             toast("Project has been created !", {
                 description: "",
                 action: {

apps/webapp/src/hooks/mutations/useWebhookMutation.tsx

@@ -1,5 +1,5 @@
 import config from '@/utils/config';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from "sonner"
 
 interface IWebhookDto {
@@ -9,6 +9,7 @@ interface IWebhookDto {
     scope: string[];
 }
 const useWebhookMutation = () => {
+    const queryClient = useQueryClient();
     const addWebhookEndpoint = async (data: IWebhookDto) => {
         const response = await fetch(`${config.API_URL}/webhook`, {
             method: 'POST',
@@ -44,7 +45,10 @@ const useWebhookMutation = () => {
                 },
             })
         },
-        onSuccess: () => {
+        onSuccess: (data) => {
+            queryClient.setQueryData<IWebhookDto[]>(['webhooks'], (oldQueryData = []) => {
+                return [...oldQueryData, data];
+            });            
             toast("Webhook endpoint has been created! ", {
                 description: "",
                 action: {

apps/webapp/src/hooks/mutations/useWebhookUpdate.tsx

@@ -24,15 +24,6 @@ const useWebhookStatusMutation = () => {
     };
     return useMutation({
         mutationFn: updateStatusWebhookEndpoint,
-        onMutate: () => {
-            toast("Webhook endpoint is being updated !", {
-                description: "",
-                action: {
-                  label: "Close",
-                  onClick: () => console.log("Close"),
-                },
-            })
-        },
         onError: (error) => {
             toast("Webhook endpoint update has failed !", {
                 description: error.message,
@@ -42,17 +33,6 @@ const useWebhookStatusMutation = () => {
                 },
             })
         },
-        onSuccess: () => {
-            toast("Webhook endpoint has been updated !", {
-                description: "",
-                action: {
-                  label: "Close",
-                  onClick: () => console.log("Close"),
-                },
-            })
-        },
-        onSettled: () => {
-        },
     });
 };
 

packages/api/src/crm/company/sync/sync.service.ts

@@ -117,7 +117,7 @@ export class SyncService implements OnModuleInit {
         await this.fieldMappingService.getCustomFieldMappings(
           integrationId,
           linkedUserId,
-          'company',
+          'ticketing.company',
         );
       const remoteProperties: string[] = customFieldMappings.map(
         (mapping) => mapping.remote_id,

packages/api/src/crm/contact/services/contact.service.ts

@@ -77,7 +77,7 @@ export class ContactService {
         await this.fieldMappingService.getCustomFieldMappings(
           integrationId,
           linkedUserId,
-          'contact',
+          'crm.contact',
         );
       //desunify the data according to the target obj wanted
       const desunifiedObject = await desunify<UnifiedContactInput>({

packages/api/src/crm/contact/sync/sync.service.ts

@@ -117,7 +117,7 @@ export class SyncContactsService implements OnModuleInit {
         await this.fieldMappingService.getCustomFieldMappings(
           integrationId,
           linkedUserId,
-          'contact',
+          'crm.contact',
         );
       const remoteProperties: string[] = customFieldMappings.map(
         (mapping) => mapping.remote_id,

packages/api/src/crm/deal/sync/sync.service.ts

@@ -112,7 +112,7 @@ export class SyncService implements OnModuleInit {
         await this.fieldMappingService.getCustomFieldMappings(
           integrationId,
           linkedUserId,
-          'deal',
+          'crm.deal',
         );
       const remoteProperties: string[] = customFieldMappings.map(
         (mapping) => mapping.remote_id,

packages/api/src/crm/engagement/sync/sync.service.ts

@@ -118,7 +118,7 @@ export class SyncService implements OnModuleInit {
         await this.fieldMappingService.getCustomFieldMappings(
           integrationId,
           linkedUserId,
-          'engagement',
+          'crm.engagement',
         );
       const remoteProperties: string[] = customFieldMappings.map(
         (mapping) => mapping.remote_id,

packages/api/src/crm/note/sync/sync.service.ts

@@ -112,7 +112,7 @@ export class SyncService implements OnModuleInit {
         await this.fieldMappingService.getCustomFieldMappings(
           integrationId,
           linkedUserId,
-          'note',
+          'crm.note',
         );
       const remoteProperties: string[] = customFieldMappings.map(
         (mapping) => mapping.remote_id,

packages/api/src/crm/stage/sync/sync.service.ts

@@ -127,7 +127,7 @@ export class SyncService implements OnModuleInit {
         await this.fieldMappingService.getCustomFieldMappings(
           integrationId,
           linkedUserId,
-          'stage',
+          'crm.stage',
         );
       const remoteProperties: string[] = customFieldMappings.map(
         (mapping) => mapping.remote_id,