chore(data-warehouse): Postgres source quality of life improvements

frontend/src/scenes/data-warehouse/external/forms/PostgresSchemaForm.tsx

@@ -1,11 +1,21 @@
-import { LemonSwitch, LemonTable } from '@posthog/lemon-ui'
+import { LemonSwitch, LemonTable, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
+import { useState } from 'react'
 
 import { sourceWizardLogic } from '../../new/sourceWizardLogic'
 
 export default function PostgresSchemaForm(): JSX.Element {
-    const { selectSchema } = useActions(sourceWizardLogic)
+    const { toggleSchemaShouldSync } = useActions(sourceWizardLogic)
     const { databaseSchema } = useValues(sourceWizardLogic)
+    const [toggleAllState, setToggleAllState] = useState(false)
+
+    const toggleAllSwitches = (): void => {
+        databaseSchema.forEach((schema) => {
+            toggleSchemaShouldSync(schema, toggleAllState)
+        })
+
+        setToggleAllState(!toggleAllState)
+    }
 
     return (
         <div className="flex flex-col gap-2">
@@ -22,14 +32,24 @@ export default function PostgresSchemaForm(): JSX.Element {
                             },
                         },
                         {
-                            title: 'Sync',
+                            title: (
+                                <>
+                                    <span>Sync</span>
+                                    <Link
+                                        className="ml-2 w-[60px] overflow-visible"
+                                        onClick={() => toggleAllSwitches()}
+                                    >
+                                        {toggleAllState ? 'Enable' : 'Disable'} all
+                                    </Link>
+                                </>
+                            ),
                             key: 'should_sync',
                             render: function RenderShouldSync(_, schema) {
                                 return (
                                     <LemonSwitch
                                         checked={schema.should_sync}
-                                        onChange={() => {
-                                            selectSchema(schema)
+                                        onChange={(checked) => {
+                                            toggleSchemaShouldSync(schema, checked)
                                         }}
                                     />
                                 )

frontend/src/scenes/data-warehouse/external/forms/SourceForm.tsx

@@ -15,7 +15,12 @@ export default function SourceForm({ sourceConfig }: SourceFormProps): JSX.Eleme
         <Form logic={sourceWizardLogic} formKey="sourceConnectionDetails" className="space-y-4" enableFormOnSubmit>
             {SOURCE_DETAILS[sourceConfig.name].fields.map((field) => (
                 <LemonField key={field.name} name={['payload', field.name]} label={field.label}>
-                    <LemonInput className="ph-ignore-input" data-attr={field.name} />
+                    <LemonInput
+                        className="ph-ignore-input"
+                        data-attr={field.name}
+                        placeholder={field.placeholder}
+                        type={field.type}
+                    />
                 </LemonField>
             ))}
             <LemonField name="prefix" label="Table Prefix (optional)">

frontend/src/scenes/data-warehouse/new/sourceWizardLogic.tsx

@@ -140,7 +140,7 @@ export const SOURCE_DETAILS: Record<string, SourceConfig> = {
             {
                 name: 'email_address',
                 label: 'Zendesk Email Address',
-                type: 'text',
+                type: 'email',
                 required: true,
                 placeholder: '',
             },
@@ -161,7 +161,7 @@ export const sourceWizardLogic = kea<sourceWizardLogicType>([
         onNext: true,
         onSubmit: true,
         setDatabaseSchemas: (schemas: ExternalDataSourceSyncSchema[]) => ({ schemas }),
-        selectSchema: (schema: ExternalDataSourceSyncSchema) => ({ schema }),
+        toggleSchemaShouldSync: (schema: ExternalDataSourceSyncSchema, shouldSync: boolean) => ({ schema, shouldSync }),
         clearSource: true,
         updateSource: (source: Partial<ExternalDataSourceCreatePayload>) => ({ source }),
         createSource: true,
@@ -216,10 +216,10 @@ export const sourceWizardLogic = kea<sourceWizardLogicType>([
             [] as ExternalDataSourceSyncSchema[],
             {
                 setDatabaseSchemas: (_, { schemas }) => schemas,
-                selectSchema: (state, { schema }) => {
+                toggleSchemaShouldSync: (state, { schema, shouldSync }) => {
                     const newSchema = state.map((s) => ({
                         ...s,
-                        should_sync: s.table === schema.table ? !s.should_sync : s.should_sync,
+                        should_sync: s.table === schema.table ? shouldSync : s.should_sync,
                     }))
                     return newSchema
                 },
@@ -491,14 +491,24 @@ export const sourceWizardLogic = kea<sourceWizardLogicType>([
             actions.getDatabaseSchemas()
         },
         getDatabaseSchemas: async () => {
-            if (values.selectedConnector) {
+            if (!values.selectedConnector) {
+                return
+            }
+
+            actions.setIsLoading(true)
+
+            try {
                 const schemas = await api.externalDataSources.database_schema(
                     values.selectedConnector.name,
                     values.source.payload ?? {}
                 )
                 actions.setDatabaseSchemas(schemas)
                 actions.onNext()
+            } catch (e: any) {
+                lemonToast.error(e.data?.message ?? e.message)
             }
+
+            actions.setIsLoading(false)
         },
         setManualLinkingProvider: () => {
             actions.onNext()

frontend/src/types.ts

@@ -1,3 +1,4 @@
+import { LemonInputProps } from '@posthog/lemon-ui'
 import { PluginConfigSchema } from '@posthog/plugin-scaffold'
 import { eventWithTime } from '@rrweb/types'
 import { ChartDataset, ChartType, InteractionItem } from 'chart.js'
@@ -3857,7 +3858,7 @@ export enum SidePanelTab {
 export interface SourceFieldConfig {
     name: string
     label: string
-    type: string
+    type: LemonInputProps['type']
     required: boolean
     placeholder: string
 }

posthog/warehouse/api/external_data_source.py

@@ -1,6 +1,7 @@
 import uuid
 from typing import Any
 
+from psycopg2 import OperationalError
 import structlog
 from rest_framework import filters, serializers, status, viewsets
 from rest_framework.decorators import action
@@ -35,6 +36,14 @@
 
 logger = structlog.get_logger(__name__)
 
+GenericPostgresError = "Could not fetch Postgres schemas. Please check all connection details are valid."
+PostgresErrors = {
+    "password authentication failed for user": "Invalid user or password",
+    "could not translate host name": "Could not connect to the host",
+    "Is the server running on that host and accepting TCP/IP connections": "Could not connect to the host on the port given",
+    'database "': "Database does not exist",
+}
+
 
 class ExternalDataSourceSerializers(serializers.ModelSerializer):
     account_id = serializers.CharField(write_only=True)
@@ -421,13 +430,24 @@ def database_schema(self, request: Request, *arg: Any, **kwargs: Any):
 
             try:
                 result = get_postgres_schemas(host, port, database, user, password, schema)
+                if len(result) == 0:
+                    return Response(
+                        status=status.HTTP_400_BAD_REQUEST,
+                        data={"message": "Postgres schema doesn't exist"},
+                    )
+            except OperationalError as e:
+                exposed_error = self._expose_postgres_error(e)
+
+                return Response(
+                    status=status.HTTP_400_BAD_REQUEST,
+                    data={"message": exposed_error or GenericPostgresError},
+                )
             except Exception as e:
                 logger.exception("Could not fetch Postgres schemas", exc_info=e)
+
                 return Response(
                     status=status.HTTP_400_BAD_REQUEST,
-                    data={
-                        "message": "Could not fetch Postgres schemas. Please check all connection details are valid."
-                    },
+                    data={"message": GenericPostgresError},
                 )
 
             result_mapped_to_options = [{"table": row, "should_sync": True} for row in result]
@@ -460,6 +480,14 @@ def source_prefix(self, request: Request, *arg: Any, **kwargs: Any):
 
         return Response(status=status.HTTP_200_OK)
 
+    def _expose_postgres_error(self, error: OperationalError) -> str | None:
+        error_msg = " ".join(str(n) for n in error.args)
+
+        for key, value in PostgresErrors.items():
+            if key in error_msg:
+                return value
+        return None
+
     def _validate_postgres_host(self, host: str, team_id: int) -> bool:
         if host.startswith("172") or host.startswith("10") or host.startswith("localhost"):
             if is_cloud():