Global connections

[Janpot]

Motivation

• Connections should be global #1065
• Give users the ability to manage all their connections to datasources centrally, and share connections across applications
• Application spec is a shareable artifact. Connections contain sensitive information. The two concepts are hard to reconcile
• Give the application editor more screen real estate to focus better on app building
• When we want to unlock templates, or application sharing, we will need to be able to pass around an application spec without connections embedded, and a way to link a connection upon instantiation.

Ideal goals

• Connections moved from app to global.
• True handling of secrets:
  • stored encrypted (ok now)
  • never transferred server -> browser, only browser -> server (not ok now)
  • not part of shareable artifacts (not ok now)
• connections can be created/managed from the applications overview page
• connections can be created from an application, without leaving the application
• Unlock templates, and application sharing

Design

Connections overview

@gerdadesign

[Janpot]

Topic: list view

More general as it applies to apps as well:

• What's the added value of the grid view?
• Would there be benefit in moving the list to a DataGrid instead along the lines of https://mui.com/x/react-data-grid/demo/

[Janpot]

Implementing screenshots properly will require rendering pages on the server. i.e. in a headless browser. This will bloat the already hefty docker image for self-hosters. apps like figma don't have to self host, they can even allocate a separate service for this. Wouldn't recommend for this for now.

Alternatively one could think about a solution based on html2canvas. We could try rendering it in an iframe while deploying. But it wouldn't be without cost:

• It bloats user experience, will take a lot more time to do a deploy. It could take a long time before the page is rendered, we'd be blocking the deploy on that. This depends on user input, it's unpredictable.
• Not all web features are supported by this library. It doesn't seem that actively maintained.
• which page to capture?

[gerdadesign]

The question about Grid View was also something I was exploring in Figma. The main benefit of this does seem to be including a screenshot, which seems like a valuable thing to have when looking at all your apps at a glance. It would help to quickly visually choose which one you are looking for.

The below shows the sections we discussed having on the homepage in both Grid View and List View. An image makes most sense for some; list for others.

However, if adding a preview image adds a lot of extra bloat and complication, we could simply just use the list view for now?

Apps	Global Connections	Global Components
Grid: app preview	Grid: not sure if an image makes sense here (unless we used that space for the img of the connection type, but I think the secondary info + icon is a better place for that)	Grid: component preview image
List	List	List: image might be most helpful here

[oliviertassinari]

I have created #1399 to keep track of this idea. I agree that it's for later. It would be better to only build this once it's requested by enough people. It's not core to the value prop of the product.

[prakhargupta1]

Thanks Olivier, for creating the issue. In our last meeting we discussed doing the card-view of Connections later. For apps, we can keep what we have currently and improve our List view.

Having apps in a searchable, well-designed table should solve the pain you've mentioned in #1399

[prakhargupta1]

An example of List-view, card-view I found was Codesandbox. Looks like their list view is a table.

[WangLarry]

A new Retool-like open source Low-code/No-code platforms: https://github.com/openblocks-dev/openblocks
It has workspace feature, have All Apps,Modules,Trash,Folders,Query Library,Data Sources etc in workspace level.

@Janpot

[Janpot]

Thanks for sharing. openblocks is on our radar. Well thought out trade-offs made in terms of simplicity and organization

[WangLarry]

typebot.io has also workspace feature, https://github.com/baptisteArno/typebot.io
It's code struct is clean and modern.
BTW: it's 'models' is interesting, which use zod and prisma schema to define data model.

[oliviertassinari]

@WangLarry Thanks for sharing. It has definitely been on our radar.

I'm curious, what did you find the most interesting in today's Toolpad and its potential?

Regarding where we are heading. The opportunity/pain point/niche in the space that we are exploring so far is to deeply integrate a Retool-like product experience with the benefits of pro-code. It's about allowing developers to stay in sync with their backend code (database schema or APIs), their design systems (e.g. Material UI custom themes), and the frontend pages of the company(e.g. Next.js). I think that our ideal users would be ones using https://refine.dev/, https://marmelab.com/react-admin/, https://github.com/PanJiaChen/vue-element-admin but still not willing to jump low-code with say, Appsmith but that are frustrated when using these tools.

[prakhargupta1]

This is about the old Toolpad. I am closing it.