Connections: New "Connect data" page with data source catalog (#56772)

* 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

pkg/services/navtree/navtreeimpl/navtree.go

@@ -546,19 +546,11 @@ func (s *ServiceImpl) buildDataConnectionsNavLink(c *models.ReqContext) *navtree
 	})
 
 	children = append(children, &navtree.NavLink{
-		Id:       baseId + "-plugins",
-		Text:     "Plugins",
+		Id:       baseId + "-connect-data",
+		Text:     "Connect Data",
 		Icon:     "plug",
-		SubTitle: "Manage plugins",
-		Url:      baseUrl + "/plugins",
-	})
-
-	children = append(children, &navtree.NavLink{
-		Id:       baseId + "-cloud-integrations",
-		Text:     "Cloud integrations",
-		Icon:     "bolt",
-		SubTitle: "Manage your cloud integrations",
-		Url:      baseUrl + "/cloud-integrations",
+		SubTitle: "Manage data sources",
+		Url:      baseUrl + "/connect-data",
 	})
 
 	navLink = &navtree.NavLink{