[PostgreSQL] New UI

We want to develop a new UI for the existing Database connectors in the Import API. The idea is to generate some screens so the user can connect to the desired database, run an SQL query and import the resulting dataset into the CARTO Dashboard. We are going to start developing the UI for the Postgres connector, but it should be easy to make it extensible to MySQL and to SQL Server connectors.

• First screen: Connection. This is the screen where we gather the connection params (https://github.com/CartoDB/cartodb/issues/15396)
• Second and third screens: SQL Query and Selected dataset. This is where we import the desired dataset into the Dashboard from an SQL query. (https://github.com/CartoDB/cartodb/issues/15415)
• Error message in First screen (https://github.com/CartoDB/cartodb/issues/15437)

Related info

• Design: https://invis.io/QUULMAVESAW#/390965275

Acceptance

Connectors enablement

• Login with dbconnectorsui user
• Check that all db connectors are disabled (PostgreSQL, MySQL, SQL Server)
• Edit account and enable carto-connectors in the Feature flags section
• Login again and check that all db connectors are enabled

Connectors’ tests

Connection parameters are in this document https://docs.google.com/document/d/1qnkvzJPHeBTvDYbe27S1v4AnCsem9RfDcd3mpvxep3E/edit?usp=sharing

• Click on the PostgreSQL connector button, it will take you to connection params page.
• Check that all copies and logos refer to PostgreSQL.
• Try to connect with wrong params and check than an error message appears.
• Connect with correct params and check that it takes you to SQL query screen.
• Type a query without from keyword and run query. An error should appear.
• Type a correct query and import a table. Sync options cannot be tested in dedicated instances.
• Repeat with other connectors
• Repeat from Add new layer option from a map in Builder

Note: Back button goes back to Connectors list page

[MireyaD]

Thanks @vdiego! I updated the design with the copies.

https://invis.io/QUULMAVESAW#/390965265_Connect

[vdiego]

@MireyaD done! I left comments in invision 😃