Merge pull request #447 from panoratech/mit-27-feat-dynamic-catalog

Mit 27 feat dynamic catalog
panoratech · May 23, 2024 · 8011abf · 8011abf
2 parents f83686d + 1821c7b
commit 8011abf
Show file tree

Hide file tree

Showing 141 changed files with 6,642 additions and 3,735 deletions.
diff --git a/apps/client-ts/package.json b/apps/client-ts/package.json
@@ -20,6 +20,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
@@ -48,12 +49,14 @@
     "react": "^18",
     "react-day-picker": "^8.10.0",
     "react-dom": "^18",
+    "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.51.2",
     "react-resizable-panels": "^2.0.19",
     "recharts": "^2.10.1",
     "sonner": "^1.4.3",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
+    "xlsx": "^0.18.5",
     "zod": "^3.22.4",
     "zustand": "^4.4.7"
   },

diff --git a/apps/client-ts/src/app/(Dashboard)/api-keys/page.tsx b/apps/client-ts/src/app/(Dashboard)/api-keys/page.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { PlusCircledIcon } from "@radix-ui/react-icons";
 import { Button } from "@/components/ui/button"
 import { DataTable } from "@/components/shared/data-table";
 import {
@@ -26,7 +25,6 @@ import useProjectStore from "@/state/projectStore";
 import useCreateApiKey from "@/hooks/create/useCreateApiKey";
 import useProfileStore from "@/state/profileStore";
 import { Suspense, useEffect, useState } from "react";
-import { cn } from "@/lib/utils";
 import { usePostHog } from 'posthog-js/react'
 import config from "@/lib/config";
 import * as z from "zod"
@@ -36,13 +34,15 @@ import { DataTableLoading } from "@/components/shared/data-table-loading";
 import {CustomHeading}  from "@/components/shared/custom-heading";
 import { useColumns } from "@/components/ApiKeys/columns";
 import { PlusCircle } from "lucide-react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { useQueryClient } from "@tanstack/react-query";
 
 const formSchema = z.object({
   apiKeyIdentifier: z.string().min(2, {
     message: "apiKeyIdentifier must be at least 2 characters.",
   })
 })
-
 interface TSApiKeys {
   id_api_key: string;
   name : string;
@@ -53,11 +53,12 @@ export default function Page() {
   const [open,setOpen] = useState(false)
   const [tsApiKeys,setTSApiKeys] = useState<TSApiKeys[] | undefined>([])
 
+  const queryClient = useQueryClient();
+
   const {idProject} = useProjectStore();
   const {profile} = useProfileStore();
-
+  const { createApiKeyPromise } = useCreateApiKey();
   const { data: apiKeys, isLoading, error } = useApiKeys();
-  const { mutate } = useCreateApiKey();
   const columns = useColumns();
 
   useEffect(() => {
@@ -94,11 +95,33 @@ export default function Page() {
 
 
   const onSubmit = (values: z.infer<typeof formSchema>) => {
-    mutate({ 
-      userId: profile!.id_user,
-      projectId: idProject,
-      keyName: values.apiKeyIdentifier
+    toast.promise(
+      createApiKeyPromise({ 
+        userId: profile!.id_user,
+        projectId: idProject,
+        keyName: values.apiKeyIdentifier
+      }), 
+      {
+      loading: 'Loading...',
+      success: (data: any) => {
+        queryClient.setQueryData<any[]>(['api-keys'], (oldQueryData = []) => {
+          return [...oldQueryData, data];
+        });
+        return (
+          <div className="flex flex-row items-center">
+            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.49991 0.877045C3.84222 0.877045 0.877075 3.84219 0.877075 7.49988C0.877075 11.1575 3.84222 14.1227 7.49991 14.1227C11.1576 14.1227 14.1227 11.1575 14.1227 7.49988C14.1227 3.84219 11.1576 0.877045 7.49991 0.877045ZM1.82708 7.49988C1.82708 4.36686 4.36689 1.82704 7.49991 1.82704C10.6329 1.82704 13.1727 4.36686 13.1727 7.49988C13.1727 10.6329 10.6329 13.1727 7.49991 13.1727C4.36689 13.1727 1.82708 10.6329 1.82708 7.49988ZM10.1589 5.53774C10.3178 5.31191 10.2636 5.00001 10.0378 4.84109C9.81194 4.68217 9.50004 4.73642 9.34112 4.96225L6.51977 8.97154L5.35681 7.78706C5.16334 7.59002 4.84677 7.58711 4.64973 7.78058C4.45268 7.97404 4.44978 8.29061 4.64325 8.48765L6.22658 10.1003C6.33054 10.2062 6.47617 10.2604 6.62407 10.2483C6.77197 10.2363 6.90686 10.1591 6.99226 10.0377L10.1589 5.53774Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+            <div className="ml-2">
+              Api key
+              <Badge variant="secondary" className="rounded-sm px-1 mx-2 font-normal">{`${data.name}`}</Badge>
+              has been created
+            </div>
+          </div>
+        )
+        ;
+      },
+      error: 'Error',
     });
+
     posthog?.capture('api_key_created', {
       id_project: idProject,
       mode: config.DISTRIBUTION

diff --git a/apps/client-ts/src/app/(Dashboard)/b2c/profile/page.tsx b/apps/client-ts/src/app/(Dashboard)/b2c/profile/page.tsx
@@ -16,6 +16,7 @@ import useProfileStore from "@/state/profileStore";
 import useProjectStore from "@/state/projectStore"
 import { useQueryClient } from '@tanstack/react-query';
 import { useState } from "react";
+import { toast } from "sonner";
 
 
 const Profile = () => {
@@ -30,6 +31,12 @@ const Profile = () => {
         try {
           await navigator.clipboard.writeText(email)
           setCopied(true);
+          toast.success("Email copied", {
+            action: {
+              label: "Close",
+              onClick: () => console.log("Close"),
+            },
+          })
           setTimeout(() => setCopied(false), 2000); // Reset copied state after 2 seconds
         } catch (err) {
           console.error('Failed to copy: ', err);

diff --git a/apps/client-ts/src/app/(Dashboard)/configuration/page.tsx b/apps/client-ts/src/app/(Dashboard)/configuration/page.tsx
@@ -18,7 +18,6 @@ import FieldMappingsTable from "@/components/Configuration/FieldMappings/FieldMa
 import AddLinkedAccount from "@/components/Configuration/LinkedUsers/AddLinkedAccount";
 import useLinkedUsers from "@/hooks/get/useLinkedUsers";
 import useFieldMappings from "@/hooks/get/useFieldMappings";
-import { Skeleton } from "@/components/ui/skeleton";
 import { useState } from "react";
 import AddWebhook from "@/components/Configuration/Webhooks/AddWebhook";
 import { WebhooksPage } from "@/components/Configuration/Webhooks/WebhooksPage";
@@ -33,6 +32,7 @@ import { Button } from "@/components/ui/button";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { CatalogWidget } from "@/components/Configuration/Catalog/CatalogWidget";
 import { CopySnippet } from "@/components/Configuration/Catalog/CopySnippet";
+import {Button as Button2} from "@/components/ui/button2"
 
 export default function Page() {
 
@@ -191,8 +191,10 @@ export default function Page() {
                       </TooltipProvider>                
                     </CardTitle>
                     <CardDescription className="text-left flex flex-row items-center">
-                      You built {mappings ? mappings.length : <LoadingSpinner className="w-4 mr-2"/>} fields mappings.
+                      You built {mappings ? mappings.length : <LoadingSpinner className="w-4 mr-1"/>} fields mappings.
+                      <Button2 variant="linkHover2">
                         <a href="https://docs.panora.dev/core-concepts/custom-fields" className="font-bold" target="_blank" rel="noopener noreferrer"> Learn more about custom field mappings in our docs !</a>
+                      </Button2>
                     </CardDescription>
                   </CardHeader>
                   <Separator className="mb-10"/>
@@ -210,8 +212,10 @@ export default function Page() {
                   <CardHeader>
                     <CardTitle className="text-left">Your Webhooks</CardTitle>
                     <CardDescription className="text-left flex flex-row items-center">
-                      You enabled {webhooks ? webhooks.length : <LoadingSpinner className="w-4 mr-2"/>} webhooks.
-                      <a href="https://docs.panora.dev/webhooks/overview" target="_blank" rel="noopener noreferrer"><strong> Read more about webhooks from our documentation</strong></a>
+                      You enabled {webhooks ? webhooks.length : <LoadingSpinner className="w-4 mr-1"/>} webhooks.
+                      <Button2 variant="linkHover2">
+                        <a href="https://docs.panora.dev/webhooks/overview" target="_blank" rel="noopener noreferrer"><strong> Read more about webhooks from our documentation</strong></a>
+                      </Button2>
                     </CardDescription>
                   </CardHeader>
                   <Separator className="mb-10"/>

diff --git a/apps/client-ts/src/components/ApiKeys/columns.tsx b/apps/client-ts/src/components/ApiKeys/columns.tsx
@@ -9,6 +9,8 @@ import { PasswordInput } from "../ui/password-input"
 import { useState } from "react"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip"
 import { Button } from "../ui/button"
+import { toast } from "sonner"
+import { Card } from "antd"
 
 export function useColumns() {
   const [copiedState, setCopiedState] = useState<{ [key: string]: boolean }>({});
@@ -19,6 +21,12 @@ export function useColumns() {
       ...prevState,
       [token]: true,
     }));
+    toast.success("Api key copied", {
+      action: {
+        label: "Close",
+        onClick: () => console.log("Close"),
+      },
+    })
     setTimeout(() => {
       setCopiedState((prevState) => ({
         ...prevState,