Be able to configure a DS from the DS modal in Dashboards

[ivanortegaalba]

Context

• First-time users, use to go to create a dashboard when entering into Grafana before connecting any data
• They will find it confusing to not have data to query
• When they figure out they don't have any DS configured, they have to leave dashboards, to go to the connections page to setup a new DS
• When a new user onboard into a Grafana org that already has some DS, but the one they need is not there, they have to leave the dashboard product to add a new DS and then go back to the dashboard they were creating.

Solution

• Allow the users to add a DS from the data source selector
• With the new DS picker as a modal, we will show the modal by default every time the user adds a panel. We will add a CTA in that modal to allow the user to add a data source inline, without leaving the dashboard
• Once the user clicks in the CTA "Add a new data source" we will show the list of types, reusing the already existing component for data source configuration. The first thing to display will be the list of DS types
• Once the user selects a DS type, the DS will be created, and a form appears with the parameters a DS needs to configure it.
• The data source form will offer the following options:
  • Save -> It will save the changes in the form, and select the data source for the current editing panel
  • Text -> It will test if the data source is correctly configured
  • Discard -> It will delete the just-created DS and go back to the data source picker
  • Back (Modal header) -> Same as discard

Screenshare.-.2023-03-30.9_01_36.AM.mp4

Engineering notes

• The component used for listing the DS types and rendering the forms already exists for the DS config pages. We must reuse them, refactoring them to be reusable for our use case
• The existing components for DS are affecting the URL once the actions are completed, so we should avoid this and parameterize them through callbacks, to be able to reuse them in different locations
• The state for those components is currently managed by Redux. We must reuse the current redux state to display the inline configuration.

Questions

• Check with design if the actions at the bottom are the desired ones

[grafanabot]

@ivanortegaalba please add one or more appropriate labels. Here are some tips:

• if you are making an issue, TODO, or reminder for yourself or your team, please add one label that best describes the product or feature area. Please also add the issue to your project board. 🚀

• if you are making an issue for any other reason (docs typo, you found a bug, etc), please add at least one label that best describes the product or feature that you are discussing (e.g. area/alerting, datasource/loki, type/docs, type/bug, etc). Our issue triage doc also provides additional guidance on labeling. 🚀

Thank you! ❤️