feat: fix connector form and pallette (#1355)

Signed-off-by: Calvin Lee <[email protected]>

Author: cjlee01

packages/ui/src/views/connectors/connector-entity-form.tsx

@@ -83,7 +83,6 @@ export const ConnectorEntityForm = (props: ConnectorEntityFormProps): JSX.Elemen
       requiredMessagePerInput: { ['select']: 'Selection is required' }
     }
   })
-  console.log(selectedSecret, 'selectedSecret', formEntity)
 
   return (
     <RootForm
@@ -99,12 +98,12 @@ export const ConnectorEntityForm = (props: ConnectorEntityFormProps): JSX.Elemen
       {rootForm => (
         <EntityFormLayout.Root>
           <EntityFormSectionLayout.Root>
-            <EntityFormSectionLayout.Header>
+            <EntityFormSectionLayout.Header className="!px-0">
               <EntityFormSectionLayout.Title className="!my-0">
                 Connect to {formEntity.data.name}
               </EntityFormSectionLayout.Title>
             </EntityFormSectionLayout.Header>
-            <EntityFormSectionLayout.Form>
+            <EntityFormSectionLayout.Form className="!px-0">
               <RenderForm className="space-y-4" factory={inputComponentFactory} inputs={formDefinition} />
               {apiError && (
                 <Alert.Container variant="destructive" className="my-8">

packages/ui/src/views/connectors/connector-reference/connector-reference.tsx

@@ -68,7 +68,6 @@ export const ConnectorReference: React.FC<ConnectorReferenceProps> = ({
 
   return (
     <div className="flex flex-col">
-      <span className="mb-4 font-medium">Select an existing Connector:</span>
       <div className="flex-1">
         <EntityReference<ConnectorItem>
           entities={connectorsData}

packages/ui/src/views/connectors/connectors-pallete-drawer.tsx

@@ -26,13 +26,14 @@ export const ConnectorsPalette = (props: ConnectorsPaletteProps): JSX.Element =>
   const [query, setQuery] = useState('')
 
   const connectorsFiltered = useMemo(
-    () => connectors.filter((connector: { type: string | string[] }) => connector.type.includes(query)),
+    () =>
+      connectors.filter((connector: { name: string }) => connector.name.toLowerCase().includes(query.toLowerCase())),
     [query, connectors]
   )
 
   return (
     <ConnectorsPaletteLayout.Root>
-      <ConnectorsPaletteLayout.Header className="!border-none">
+      <ConnectorsPaletteLayout.Header className="!border-none !p-0">
         <ConnectorsPaletteLayout.Title className="!mt-0">Connector Setup</ConnectorsPaletteLayout.Title>
         <ConnectorsPaletteLayout.Subtitle className="text-foreground-4">
           {'Select a Connector'}
@@ -44,7 +45,7 @@ export const ConnectorsPalette = (props: ConnectorsPaletteProps): JSX.Element =>
           }}
         />
       </ConnectorsPaletteLayout.Header>
-      <StepsPaletteContentLayout.Root>
+      <StepsPaletteContentLayout.Root className="!px-0">
         <ConnectorsPaletteSection
           connectors={connectorsFiltered}
           onSelect={connector => {

packages/ui/src/views/unified-pipeline-studio/components/palette-drawer/components/step-palette-content-layout.tsx

@@ -20,7 +20,7 @@ const StepsPaletteContentLayout = {
   },
 
   SectionItem: function SectionHeader({ children }: { children: React.ReactNode }) {
-    return <div className="mb-3 flex flex-col rounded-md border p-2 hover:!bg-background-4">{children}</div>
+    return <div className="mb-3 flex flex-col rounded-md border hover:!bg-background-4">{children}</div>
   }
 }
 

packages/ui/src/views/unified-pipeline-studio/components/palette-drawer/components/step-palette-item-layout.tsx

@@ -3,7 +3,7 @@ import { cn } from '@utils/cn'
 const StepsPaletteItemLayout = {
   Root: function Root({ children, ...rest }: React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>) {
     return (
-      <div className="flex size-full cursor-pointer flex-row gap-2" {...rest}>
+      <div className="flex size-full cursor-pointer flex-row gap-2 p-2" {...rest}>
         {children}
       </div>
     )