From d84105646329570a4b4ca328b84dcb0352127c97 Mon Sep 17 00:00:00 2001
From: Rodrigo Arze Leon <ral77ro@gmail.com>
Date: Thu, 24 Oct 2024 19:32:13 -0400
Subject: [PATCH] Fix style for inputs active/selected state (#67)

* Fix style for inputs active/selected state

* Filter connectors in ag connector so we prevent dups

---------

Co-authored-by: Rodrigo Arze Leon <rodrigo.arze@Rodrigos-Mac-mini.local>
---
 .../components/AGConnectionPortal.tsx             | 15 +++++++++------
 packages/ui/components/SchemaForm.tsx             |  2 +-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/engine-frontend/components/AGConnectionPortal.tsx b/packages/engine-frontend/components/AGConnectionPortal.tsx
index fe3a7717..9af52dd3 100644
--- a/packages/engine-frontend/components/AGConnectionPortal.tsx
+++ b/packages/engine-frontend/components/AGConnectionPortal.tsx
@@ -4,13 +4,13 @@ import {AlertTriangle} from 'lucide-react'
 import React from 'react'
 import type {Id} from '@openint/cdk'
 import type {UIPropsNoChildren} from '@openint/ui'
-import { Card, ResourceCard } from '@openint/ui'
+import {Card, ResourceCard} from '@openint/ui'
 import {cn} from '@openint/ui/utils'
 import {R} from '@openint/util'
 import {WithConnectConfig} from '../hocs/WithConnectConfig'
 import {_trpcReact} from '../providers/TRPCProvider'
-import {ConnectDialog} from './ConnectDialog'
 import {AgResourceRowActions} from './AgResourceRowActions'
+import {ConnectDialog} from './ConnectDialog'
 
 type ConnectEventType = 'open' | 'close' | 'error'
 
@@ -48,7 +48,7 @@ const AGConnectionPortalComponent: React.FC<AGConnectionPortalProps> = ({
   const handleMessage = React.useCallback(async (event: MessageEvent) => {
     if (event.data.type === 'triggerConnectDialog') {
       console.log('triggerConnectDialog', event.data.value)
-      if(event.data.value) {
+      if (event.data.value) {
         await listConnectionsRes.refetch().then(() => {
           setOpenDialog(event.data.value)
         })
@@ -122,20 +122,23 @@ const AGConnectionPortalComponent: React.FC<AGConnectionPortalProps> = ({
                   </ResourceCard>
                 ))}
                 {category.connections.length === 0 && (
-                   <Card className="drop-shadow-small flex w-full flex-col items-center justify-center space-y-3 rounded-lg border border-solid border-[#e0e0e5] bg-[#f8f8fc] p-6 text-center">
+                  <Card className="drop-shadow-small flex w-full flex-col items-center justify-center space-y-3 rounded-lg border border-solid border-[#e0e0e5] bg-[#f8f8fc] p-6 text-center">
                     <div className="flex flex-row gap-2">
                       <AlertTriangle className="size-8 text-[#C27B1A]" />
                       <h3 className="text-black-dark mb-2 text-[24px] font-semibold leading-[36px] tracking-tight antialiased">
                         {`No data source connected`}
                       </h3>
-                   </div>
-                 </Card>
+                    </div>
+                  </Card>
                 )}
                 {openDialog && (
                   <ConnectDialog
                     connectorConfigFilters={{verticalKey: category.key}}
                     open={openDialog}
                     setOpen={setOpenDialog}
+                    connectorNames={category.connections.map(
+                      (c) => c.connectorName,
+                    )}
                     // trigger refetch of connections
                     onEvent={() => listConnectionsRes.refetch()}
                   />
diff --git a/packages/ui/components/SchemaForm.tsx b/packages/ui/components/SchemaForm.tsx
index 457a912a..3adabfd9 100644
--- a/packages/ui/components/SchemaForm.tsx
+++ b/packages/ui/components/SchemaForm.tsx
@@ -49,7 +49,7 @@ function generateUiSchema(jsonSchema: RJSFSchema): UiSchema {
       const friendlyLabel = titleCase(key)
       uiSchema[key] = {
         'ui:title': friendlyLabel,
-        'ui:classNames': 'pt-2 mr-2',
+        'ui:classNames': 'pt-2 mx-1',
       }
 
       if (typeof value === 'object' && isTypeObject(value)) {