* fix(Alert): don't add padding to content when there is no title
* Feat(Connections): update the style and wording of the redirect alert
* fix(UI/Alert): more resilient check for has title
* add redirect notice for datasources and plugins pages
* do not depend on the internal implementation of Alert
The deleted css piece was problematic because it relied on the internals
of Alert.
If we don't remove that padding, then the Alert looks a bit off, so I
added some title to the Alert to look better.
This way the Connections LinkButton is not vertically aligned to the
center, but this is the closest we can get to the designed alert without
doing hacks and reimplementing the Alert component.
update datasource details url
My ultimate goal is to make the cloud-onboarding plugin link to
datasource details page inside Connections.
I tried to do that, so that it linked to
`/connections/connect-data/datasources/:id`, but it didn't work. Details
below:
We have a problem with the datasources details page url:
If the plugin is not present, then the
`/connections/connect-data/datasources/:id` url is finely served by Grafana.
However, when the plugin is present, we register a Route entry like this:
`<Route exact=false path='/connections/connect-data' component={AppPlugin} />`
And this entry will be higher in the routes list than the datasources Route.
This means that every path under `/connections/connect-data` will be served
by the plugin. That's why exact is false. Otherwise the plugin couldn't
serve integrations details at `connect-data/infrastructure/:id`.
So `exact=false` is needed.
What can we do?
1. Put Grafana's Connection routes higher in the list of routes.
2. Find a different URL for datasources details page
Unfortunately, we can't do 1., because:
Routes roughly look like this (in this order):
- exact: false, path: connections/connect-data, component: AppPlugin
- exact: false, path: connections/your-connections/infrastructure,
component: AppPlugin
- exact: false, path: connections, component: Connections
So if a request comes for `/connections` or `/connections/your-connections`
or `/connections/your-connections/datasources`, it will be served by
Connections.
Therefore, we can't really put the route for Connections higher in the list
of routes, because then it will match all routes beginning with
`/connections`, and the plugin's routes will have no effect.
So the only alternative left is to find another path :/
Since we set the DataSourceDetailsPage's navId explicitly to
`connections-connect-data`, the breadcrumbs will continue to show the
data source page as a child item of the Connect Data page :)
* fix DataSourceAddButton component
This component implicitly returned `false` when `canCreateDataSource`
was false, and that way it didn't qualify as a function component.
We fixed it to explicitly return null in this case.
* DataSourceAddButton: update function signature
This is more consistent with other code in this codebase.
* navtree.go: update Data sources title and subtitle
* DataSourceList: move add button to header
* DataSourcesList: add buttons to items
The action buttons are added inside `<Card.Tags>` so that they end up at
the right end of the card, as it was designed.
The "Build a Dashboard" button's functionality is not defined yet.
* DataSourcesListHeader: add sort picker
* fix css
* tests: look for the updated "Add new data source" text
* tests: use an async test method to verify component updates are wrapped in an act()
* update e2e selector for add data source button
* fix DataSourceList{,Page} tests
* add comment for en dash character
* simplify sorting
* add link to Build a Dashboard button
* fix test
* test build a dashboard and explore buttons
* test sorting data source elements
* DataSourceAddButton: hide button when user has no permission
* PageActionBar: remove unneeded '?'
* DataSourcesList: hide explore button if user has no permission
* DataSourcesListPage.test: make setup prop explicit
* DataSourcesList: use theme.spacing
* datasources: assure explore url includes appSubUrl
* fix tests and add test case for missing permissions
Co-authored-by: Levente Balogh <balogh.levente.hu@gmail.com>
* refactor(PluginDetails): use react-router hooks instead of props
* Wip
* refactor: remove unnecessary constant
* feat: use the original plugin details page under connections
* chore: use better wording in the not-found warning
Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>
* chore: use the renderer utility everywhere in the test
* chore: don't show a title while loading a plugin
Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>
* feat(Connections): create sub-pages wrapped by `<Page>`
* feat(Connections): rename the Connections page and update routes
* feat(Connections): use new url for editing datasources
* refactor(Connections): remove unused tab components
* feat(Connections): update routes and nav titles
* tests: fix tests for Connections
* tests: fix typo in backend tests
* remove Plugins and CloudIntegrations tab and add ConnectData tab
* ConnectData: add Search component and use it
* ConnectData: add DataSourcePluginList component
* add CardGrid component
* add CategoryHeader component
* ConnectData: restructure content
DataSourcePluginList is removed, because its responsibilities are
actually the same as ConnectData's responsibilities.
NoResults was added as a reusable component, and was moved out of
CardGrid, since there could be more CardGrid on one page, but only one
NoResults.
* fix spacer
* use LoadingPlaceholder
* CardGrid: add margin
* generalize CardGridProps
* move isLoading and error into CardGrid
We'd like CardGrid to be reusable, even multiple times within a page.
In this case, it's better UX if we show the loading or error states per
card grid, not for the whole page.
* ConnectData: fix NoResults condition
* fix and add meaningful tests
* fix indentation
* move isLoading and error back to ConnectData
* make `url` required for CardGrid items
