Data source list: Use Card component (#31326)

* Replace DataSourcesListItem with Card

* Add tests

* Remove unused styles

* Make card heading semi bold

* Make heading semi-bold

* Show type name instead of type id

* Fix key warning

* Update Card

* Fix tests

* Make typeName optional

* remove styling that was just a test

* Make typeName non-optional and fix tests

* Update list key

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

pkg/api/datasources.go

@@ -36,6 +36,7 @@ func (hs *HTTPServer) GetDataSources(c *models.ReqContext) response.Response {
 			Name:      ds.Name,
 			Url:       ds.Url,
 			Type:      ds.Type,
+			TypeName:  ds.Type,
 			Access:    ds.Access,
 			Password:  ds.Password,
 			Database:  ds.Database,
@@ -48,6 +49,7 @@ func (hs *HTTPServer) GetDataSources(c *models.ReqContext) response.Response {
 
 		if plugin, exists := plugins.DataSources[ds.Type]; exists {
 			dsItem.TypeLogoUrl = plugin.Info.Logos.Small
+			dsItem.TypeName = plugin.Name
 		} else {
 			dsItem.TypeLogoUrl = "public/img/icn-datasource.svg"
 		}

pkg/api/dtos/datasource.go

@@ -36,6 +36,7 @@ type DataSourceListItemDTO struct {
 	OrgId       int64            `json:"orgId"`
 	Name        string           `json:"name"`
 	Type        string           `json:"type"`
+	TypeName    string           `json:"typeName"`
 	TypeLogoUrl string           `json:"typeLogoUrl"`
 	Access      models.DsAccess  `json:"access"`
 	Url         string           `json:"url"`