From b50bde615865b4de30a28a2c98c9a8a07dd71e93 Mon Sep 17 00:00:00 2001
From: mit-27 <meetsuthar64@gmail.com>
Date: Mon, 27 May 2024 21:57:50 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20bugs=20and=20added=20copy?=
 =?UTF-8?q?=20feat=20for=20linkedUserId?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Configuration/LinkedUsers/columns.tsx     | 42 +++++++++++++++----
 .../src/components/Nav/main-nav-sm.tsx        | 13 ------
 .../react/src/components/Modal.tsx            |  5 +--
 .../src/components/PanoraDynamicCatalog.tsx   |  1 -
 .../react/src/hooks/useOAuth.tsx              | 24 ++++++-----
 5 files changed, 50 insertions(+), 35 deletions(-)

diff --git a/apps/client-ts/src/components/Configuration/LinkedUsers/columns.tsx b/apps/client-ts/src/components/Configuration/LinkedUsers/columns.tsx
index 36528c49d..0cf0c83e7 100644
--- a/apps/client-ts/src/components/Configuration/LinkedUsers/columns.tsx
+++ b/apps/client-ts/src/components/Configuration/LinkedUsers/columns.tsx
@@ -2,6 +2,40 @@ import { ColumnDef } from "@tanstack/react-table";
 import { ColumnLU } from "./schema";
 import { DataTableColumnHeader } from "@/components/shared/data-table-column-header";
 import { Badge } from "@/components/ui/badge";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { toast } from "sonner";
+
+
+const LinkedUserIdComponent = ({ row } : {row:any}) => { 
+
+  const handleCopyLinkedUserId = () => {
+    navigator.clipboard.writeText(row.getValue("linked_user_id"));
+    toast.success("LinkedUser ID copied!", {
+        action: {
+          label: "Close",
+          onClick: () => console.log("Close"),
+        },
+      })
+  };
+
+  return (
+        <div className="cursor-pointer" onClick={handleCopyLinkedUserId}>
+        <TooltipProvider delayDuration={0}>
+            <Tooltip>
+            <TooltipTrigger>
+              <Badge variant="outline" >
+                {row.getValue("linked_user_id")}
+                </Badge>
+            </TooltipTrigger>
+            <TooltipContent>
+                <p className="text-sm">Copy</p>
+            </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+        </div>
+  )
+}
+
 
 export const columns: ColumnDef<ColumnLU>[] = [
     {
@@ -9,13 +43,7 @@ export const columns: ColumnDef<ColumnLU>[] = [
       header: ({ column }) => (
         <DataTableColumnHeader column={column} title="Linked User Id" />
       ),
-      cell: ({ row }) =>{ 
-        return (
-          <div className="">
-            <Badge variant="outline">{row.getValue("linked_user_id")}</Badge>
-          </div>
-        )
-      },
+      cell: LinkedUserIdComponent,
       enableSorting: false,
       enableHiding: false,
     },
diff --git a/apps/client-ts/src/components/Nav/main-nav-sm.tsx b/apps/client-ts/src/components/Nav/main-nav-sm.tsx
index 9c643738a..390c13f94 100644
--- a/apps/client-ts/src/components/Nav/main-nav-sm.tsx
+++ b/apps/client-ts/src/components/Nav/main-nav-sm.tsx
@@ -61,7 +61,6 @@ export function SmallNav({
           <SheetHeader className="flex items-center">
             <SheetTitle className="mx-4 my-4">
               <Link href="/" className="flex flex-row" onClick={() => setOpen(false)}>
-                {/* <img src="./../../../../public/logo.png" className="w-10 mr-1"/><span className="font-bold">Panora.</span> */}
                 {theme == "light" ? <img src="/logo-panora-black.png" className='w-12' /> : <img src="/logo-panora-white-hq.png" className='w-12' />}
               
               </Link>
@@ -70,18 +69,6 @@ export function SmallNav({
           <nav
               className={`flex flex-col items-start mt-6`}
             >
-            {/*<a
-                className={navItemClassName('quickstart')}
-                onClick={() => click('quickstart')}
-              >
-                <p className="mx-4">Quick Start</p>
-              </a>
-              <a
-                className={navItemClassName('dashboard')}
-                onClick={() => click('dashboard')}
-              >
-                <p className="mx-4">Dashboard</p>
-              </a>*/}
             <a
                 className={navItemClassName('connections')}
                 onClick={() => click('connections')}
diff --git a/apps/embedded-catalog/react/src/components/Modal.tsx b/apps/embedded-catalog/react/src/components/Modal.tsx
index b27cd538d..7b104bc6f 100644
--- a/apps/embedded-catalog/react/src/components/Modal.tsx
+++ b/apps/embedded-catalog/react/src/components/Modal.tsx
@@ -1,7 +1,6 @@
-import React, { useState } from 'react'
-import {PartyPopper, Unplug,X} from 'lucide-react'
+import React from 'react'
 
-const Modal = ({open,setOpen,children} : {open:boolean,setOpen: (op : boolean) => void,children: React.ReactNode}) => {
+const Modal = ({open,setOpen,children} : {open:boolean,setOpen: React.Dispatch<React.SetStateAction<boolean>>,children: React.ReactNode}) => {
   return (
     <div
       onClick={() => setOpen(false)}
diff --git a/apps/embedded-catalog/react/src/components/PanoraDynamicCatalog.tsx b/apps/embedded-catalog/react/src/components/PanoraDynamicCatalog.tsx
index 503d8b319..14ba20ce0 100644
--- a/apps/embedded-catalog/react/src/components/PanoraDynamicCatalog.tsx
+++ b/apps/embedded-catalog/react/src/components/PanoraDynamicCatalog.tsx
@@ -44,7 +44,6 @@ const DynamicCatalog = ({projectId,linkedUserId, category, optionalApiUrl} : Dyn
     providerName: selectedProvider?.provider!,
     vertical: selectedProvider?.category! as ConnectorCategory,
     returnUrl: returnUrlWithWindow,
-    // returnUrl: returnUrl,
     projectId: projectId,
     linkedUserId: linkedUserId,
     optionalApiUrl: optionalApiUrl,
diff --git a/apps/embedded-catalog/react/src/hooks/useOAuth.tsx b/apps/embedded-catalog/react/src/hooks/useOAuth.tsx
index e94bb754e..db1f9aba3 100644
--- a/apps/embedded-catalog/react/src/hooks/useOAuth.tsx
+++ b/apps/embedded-catalog/react/src/hooks/useOAuth.tsx
@@ -15,9 +15,19 @@ type UseOAuthProps = {
 
 const useOAuth = ({ providerName, vertical, returnUrl, projectId, linkedUserId, optionalApiUrl, onSuccess }: UseOAuthProps) => {
   const [isReady, setIsReady] = useState(false);
-  const intervalRef = useRef<number | null>(null);
+  const intervalRef = useRef<number | ReturnType<typeof setInterval> | null>(null);
   const authWindowRef = useRef<Window | null>(null);
 
+  const clearExistingInterval = (clearAuthWindow : boolean) => {
+    if (clearAuthWindow && authWindowRef.current && !authWindowRef.current.closed) {
+      authWindowRef.current.close();
+    }
+    if (intervalRef.current !== null) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  };
+
   useEffect(() => {
     // Perform any setup logic here
     setTimeout(() => setIsReady(true), 1000); // Simulating async operation
@@ -31,15 +41,7 @@ const useOAuth = ({ providerName, vertical, returnUrl, projectId, linkedUserId,
     };
   }, []);
 
-  const clearExistingInterval = (clearAuthWindow : boolean) => {
-    if (clearAuthWindow && authWindowRef.current && !authWindowRef.current.closed) {
-      authWindowRef.current.close();
-    }
-    if (intervalRef.current !== null) {
-      clearInterval(intervalRef.current);
-      intervalRef.current = null;
-    }
-  };
+  
 
   const openModal = async (onWindowClose: () => void) => {
     const apiUrl = optionalApiUrl ? optionalApiUrl : config.API_URL!;
@@ -48,7 +50,7 @@ const useOAuth = ({ providerName, vertical, returnUrl, projectId, linkedUserId,
     });
 
     if (!authUrl) {
-      throw new Error("Auth Url is Invalid " + authUrl);
+      throw new Error(`Auth Url is Invalid: ${authUrl}`);
     }
 
     const width = 600, height = 600;