[PostgreSQL] New UI

[alejandraarri]

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 ([PostgreSQL] Connection screen #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. ([PostgreSQL] SQL query screen #15415)
• Error message in First screen ([PostgreSQL] UI error messages #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

[kukukaka]

@MireyaD do you mind checking with @alejandraarri if the PostgreSQL design is ready to go and make the changes that are needed? Some issues where I can see we need some more work:

• Assets
• It's the design feasible? I notice that in the BigQuery one we use a single column while the MySQL here uses a double-column, would that be a problem?
• I would remove the links to the help articles until we tackle them
• Are the copies final? Did you check them with @vdiego?

Thanks!
/cc @urbanphes

[MireyaD]

Sure! @alejandraarri and I are having a meeting today to check if something else is needed :)

[MireyaD]

Hey! After yesterday meeting we have some open questions:

• Should we include in the first screen a Contact us link? Can we manage the amount of messages? Or we would have the same situation as in the request connector case?
• IP are correct?
• @vdiego, could you check the copies?

Let me know what you think. Thanks!

[vdiego]

@MireyaD done! I left comments in invision :)

[MireyaD]

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

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

[MireyaD]

Hey!

I updated the Invision project with two types of error messages:

• Specific error message. The user enters an incorrect parameter and we can identify it. From a usability point of view, it helps the user to solve the problem quickly, but we can not implement this by now. https://invis.io/QUULMAVESAW#/401737928_Connect_-_PostgreSQL_-_Credentials_-_Filled_-_Specific_Error

• Generic error message. The user tries to connect but the call is not successful. https://invis.io/QUULMAVESAW#/401737929_Connect_-_PostgreSQL_-_Credentials_-_Filled_-_Generic_Error

[alejandraarri]

Deployed into production! 🚀
In the end, working for all DB connectors: PostgreSQL, MySQL and SQL server