From 36e66c2d7cf46f0cdf5c78df0d8613882e5a57ff Mon Sep 17 00:00:00 2001
From: Rodrigo Arze Leon <ral77ro@gmail.com>
Date: Sun, 23 Feb 2025 08:34:34 -0400
Subject: [PATCH] Simplify theme update effect and minor fixes (#275)

---
 apps/connect-dev/app/page.tsx                        |  5 ++---
 .../app/dashboard/(authenticated)/connect/page.tsx   |  4 +---
 apps/web/app/global.css                              |  5 +++++
 .../engine-frontend/components/ConnectionPortal.tsx  | 12 ++----------
 4 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/apps/connect-dev/app/page.tsx b/apps/connect-dev/app/page.tsx
index 6d2136be..cdde11b0 100644
--- a/apps/connect-dev/app/page.tsx
+++ b/apps/connect-dev/app/page.tsx
@@ -10,9 +10,8 @@ export default function Home() {
         baseUrl="http://localhost:4000"
         params={{
           token: process.env['OPENINT_TOKEN'],
-          connectionId: 'conn_github_01JH6FR8H2E1G79HJVYEANYM7T',
-          view: 'manage-deeplink',
-          theme: 'light',
+          view: 'manage',
+          theme: 'dark',
         }}
         height={500}
         width={350}
diff --git a/apps/web/app/dashboard/(authenticated)/connect/page.tsx b/apps/web/app/dashboard/(authenticated)/connect/page.tsx
index 2ab5f4fb..aa98063b 100644
--- a/apps/web/app/dashboard/(authenticated)/connect/page.tsx
+++ b/apps/web/app/dashboard/(authenticated)/connect/page.tsx
@@ -147,9 +147,7 @@ export default function MagicLinkPage() {
         <SchemaForm
           // Omit theme from schema since there's a bug where the tailwind theme setting
           // is shared between connect and console
-          schema={customerRouterSchema.createMagicLink.input.omit({
-            theme: true,
-          })}
+          schema={customerRouterSchema.createMagicLink.input}
           uiSchema={uiSchema}
           loading={createMagicLink.isLoading}
           formData={{
diff --git a/apps/web/app/global.css b/apps/web/app/global.css
index d6df2963..5f79a657 100644
--- a/apps/web/app/global.css
+++ b/apps/web/app/global.css
@@ -196,6 +196,11 @@
     @apply flex h-10 w-full rounded-lg border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50;
   }
 
+  /* Select component */
+  .schema-form select {
+    @apply flex h-10 w-full rounded-lg border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50;
+  }
+
   /* .schema-form .checkbox label {
     @apply
   } */
diff --git a/packages/engine-frontend/components/ConnectionPortal.tsx b/packages/engine-frontend/components/ConnectionPortal.tsx
index a72b7997..a0e0fbea 100644
--- a/packages/engine-frontend/components/ConnectionPortal.tsx
+++ b/packages/engine-frontend/components/ConnectionPortal.tsx
@@ -55,6 +55,7 @@ export function ConnectionPortal({className}: ConnectionPortalProps) {
   const pathname = usePathname()
   const {theme, setTheme} = useTheme()
   const connectionId = searchParams.get('connectionId')
+  const themeParam = searchParams.get('theme')
 
   const {toast} = useToast()
   const ctx = _trpcReact.useContext()
@@ -63,20 +64,11 @@ export function ConnectionPortal({className}: ConnectionPortalProps) {
   })
 
   useEffect(() => {
-    const themeParam = searchParams.get('theme')
-
     // Only update if there's a valid theme parameter that differs from current theme
     if (themeParam && isValidTheme(themeParam) && themeParam !== theme) {
       setTheme(themeParam)
-    } else if (!themeParam && theme) {
-      // Only update URL if there's no theme parameter but we have a theme set
-      const params = new URLSearchParams(searchParams)
-      params.set('theme', theme)
-      router.replace(`${pathname}?${params.toString()}`, {
-        scroll: false,
-      })
     }
-  }, [searchParams, setTheme, theme, pathname, router])
+  }, [themeParam, setTheme, theme])
 
   const deleteConnection = _trpcReact.deleteConnection.useMutation({
     onSuccess: () => {