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>

packages/grafana-data/src/types/datasource.ts

@@ -549,6 +549,7 @@ export interface DataSourceSettings<T extends DataSourceJsonData = DataSourceJso
   name: string;
   typeLogoUrl: string;
   type: string;
+  typeName: string;
   access: string;
   url: string;
   password: string;

packages/grafana-ui/src/components/Card/Card.tsx

@@ -97,7 +97,7 @@ export const Card: CardInterface = ({
   );
 
   const hasActions = Boolean(actions || secondaryActions);
-  const disableHover = disabled || !onClick;
+  const disableHover = disabled || (!onClick && !href);
   const disableEvents = disabled && !actions;
 
   const containerStyles = getContainerStyles(theme, disableEvents, disableHover);
@@ -196,6 +196,8 @@ export const getCardStyles = stylesFactory((theme: GrafanaTheme) => {
       margin-bottom: 0;
       font-size: ${theme.typography.size.md};
       line-height: ${theme.typography.lineHeight.xs};
+      color: ${theme.colors.text};
+      font-weight: ${theme.typography.weight.semibold};
     `,
     info: css`
       display: flex;
@@ -221,7 +223,7 @@ export const getCardStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     media: css`
       margin-right: ${theme.spacing.md};
-      max-width: 40px;
+      width: 40px;
       & > * {
         width: 100%;
       }
@@ -299,7 +301,11 @@ const Meta: FC<ChildProps & { separator?: string }> = memo(({ children, styles,
 
   // Join meta data elements by separator
   if (Array.isArray(children) && separator) {
-    meta = React.Children.toArray(children).reduce((prev, curr, i) => [
+    const filtered = React.Children.toArray(children).filter(Boolean);
+    if (!filtered.length) {
+      return null;
+    }
+    meta = filtered.reduce((prev, curr, i) => [
       prev,
       <span key={`separator_${i}`} className={styles?.separator}>
         {separator}

packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.test.tsx

@@ -9,6 +9,7 @@ const setup = (propOverrides?: object) => {
       orgId: 1,
       name: 'gdev-influxdb',
       type: 'influxdb',
+      typeName: 'Influxdb',
       typeLogoUrl: '',
       access: 'direct',
       url: 'http://localhost:8086',

packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx

@@ -10,6 +10,7 @@ const settingsMock: DataSourceSettings<any, any> = {
   orgId: 1,
   name: 'gdev-influxdb',
   type: 'influxdb',
+  typeName: 'Influxdb',
   typeLogoUrl: '',
   access: 'direct',
   url: 'http://localhost:8086',

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"`

public/app/features/datasources/DataSourceList.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import DataSourcesList from './DataSourcesList';
 import { getMockDataSources } from './__mocks__/dataSourcesMocks';
 import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
@@ -10,13 +10,20 @@ const setup = () => {
     layoutMode: LayoutModes.Grid,
   };
 
-  return shallow(<DataSourcesList {...props} />);
+  return render(<DataSourcesList {...props} />);
 };
 
-describe('Render', () => {
-  it('should render component', () => {
-    const wrapper = setup();
+describe('DataSourcesList', () => {
+  it('should render list of datasources', () => {
+    setup();
+    expect(screen.getAllByRole('listitem')).toHaveLength(3);
+    expect(screen.getAllByRole('heading')).toHaveLength(3);
+  });
 
-    expect(wrapper).toMatchSnapshot();
+  it('should render all elements in the list item', () => {
+    setup();
+    expect(screen.getByRole('heading', { name: 'dataSource-0' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'dataSource-0 dataSource-0' })).toBeInTheDocument();
+    expect(screen.getByAltText('dataSource-0')).toBeInTheDocument();
   });
 });

public/app/features/datasources/DataSourcesList.tsx

@@ -1,39 +1,50 @@
 // Libraries
-import React, { PureComponent } from 'react';
-import classNames from 'classnames';
-
-// Components
-import DataSourcesListItem from './DataSourcesListItem';
+import React, { FC } from 'react';
 
 // Types
 import { DataSourceSettings } from '@grafana/data';
-import { LayoutMode, LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
+import { LayoutMode } from '../../core/components/LayoutSelector/LayoutSelector';
+import { Card, Tag, useStyles } from '@grafana/ui';
+import { css } from 'emotion';
 
 export interface Props {
   dataSources: DataSourceSettings[];
   layoutMode: LayoutMode;
 }
 
-export class DataSourcesList extends PureComponent<Props> {
-  render() {
-    const { dataSources, layoutMode } = this.props;
+export const DataSourcesList: FC<Props> = ({ dataSources, layoutMode }) => {
+  const styles = useStyles(getStyles);
 
-    const listStyle = classNames({
-      'card-section': true,
-      'card-list-layout-grid': layoutMode === LayoutModes.Grid,
-      'card-list-layout-list': layoutMode === LayoutModes.List,
-    });
-
-    return (
-      <section className={listStyle}>
-        <ol className="card-list">
-          {dataSources.map((dataSource, index) => {
-            return <DataSourcesListItem dataSource={dataSource} key={`${dataSource.id}-${index}`} />;
-          })}
-        </ol>
-      </section>
-    );
-  }
-}
+  return (
+    <ul className={styles.list}>
+      {dataSources.map((dataSource, index) => {
+        return (
+          <li key={dataSource.id}>
+            <Card heading={dataSource.name} href={`datasources/edit/${dataSource.id}`}>
+              <Card.Figure>
+                <img src={dataSource.typeLogoUrl} alt={dataSource.name} />
+              </Card.Figure>
+              <Card.Meta>
+                {[
+                  dataSource.typeName,
+                  dataSource.url,
+                  dataSource.isDefault && <Tag key="default-tag" name={'default'} colorIndex={1} />,
+                ]}
+              </Card.Meta>
+            </Card>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
 
 export default DataSourcesList;
+
+const getStyles = () => {
+  return {
+    list: css`
+      list-style: none;
+    `,
+  };
+};

public/app/features/datasources/DataSourcesListItem.test.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import DataSourcesListItem from './DataSourcesListItem';
-import { getMockDataSource } from './__mocks__/dataSourcesMocks';
-
-const setup = () => {
-  const props = {
-    dataSource: getMockDataSource(),
-  };
-
-  return shallow(<DataSourcesListItem {...props} />);
-};
-
-describe('Render', () => {
-  it('should render component', () => {
-    const wrapper = setup();
-
-    expect(wrapper).toMatchSnapshot();
-  });
-});

public/app/features/datasources/DataSourcesListItem.tsx

@@ -1,36 +0,0 @@
-import React, { PureComponent } from 'react';
-import { DataSourceSettings } from '@grafana/data';
-import { selectors } from '@grafana/e2e-selectors';
-
-export interface Props {
-  dataSource: DataSourceSettings;
-}
-
-export class DataSourcesListItem extends PureComponent<Props> {
-  render() {
-    const { dataSource } = this.props;
-    return (
-      <li className="card-item-wrapper">
-        <a className="card-item" href={`datasources/edit/${dataSource.id}`}>
-          <div className="card-item-header">
-            <div className="card-item-type">{dataSource.type}</div>
-          </div>
-          <div className="card-item-body">
-            <figure className="card-item-figure">
-              <img src={dataSource.typeLogoUrl} alt={dataSource.name} />
-            </figure>
-            <div className="card-item-details">
-              <div className="card-item-name" aria-label={selectors.pages.DataSources.dataSources(dataSource.name)}>
-                {dataSource.name}
-                {dataSource.isDefault && <span className="btn btn-secondary btn-small card-item-label">default</span>}
-              </div>
-              <div className="card-item-sub-name">{dataSource.url}</div>
-            </div>
-          </div>
-        </a>
-      </li>
-    );
-  }
-}
-
-export default DataSourcesListItem;

public/app/features/datasources/DataSourcesListPage.tsx

@@ -49,11 +49,7 @@ const emptyListModel = {
 
 export class DataSourcesListPage extends PureComponent<Props> {
   componentDidMount() {
-    this.fetchDataSources();
-  }
-
-  async fetchDataSources() {
-    return await this.props.loadDataSources();
+    this.props.loadDataSources();
   }
 
   render() {

public/app/features/datasources/__mocks__/dataSourcesMocks.ts

@@ -3,7 +3,7 @@ import { DataSourceSettings } from '@grafana/data';
 export const getMockDataSources = (amount: number) => {
   const dataSources = [];
 
-  for (let i = 0; i <= amount; i++) {
+  for (let i = 0; i < amount; i++) {
     dataSources.push({
       access: '',
       basicAuth: false,
@@ -37,6 +37,7 @@ export const getMockDataSource = (): DataSourceSettings => {
     isDefault: false,
     jsonData: { authType: 'credentials', defaultRegion: 'eu-west-2' },
     name: 'gdev-cloudwatch',
+    typeName: 'Cloudwatch',
     orgId: 1,
     password: '',
     readOnly: false,

public/app/features/datasources/__snapshots__/DataSourceList.test.tsx.snap

@@ -1,108 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<section
-  className="card-section card-list-layout-grid"
->
-  <ol
-    className="card-list"
-  >
-    <DataSourcesListItem
-      dataSource={
-        Object {
-          "access": "",
-          "basicAuth": false,
-          "database": "database-0",
-          "id": 0,
-          "isDefault": false,
-          "jsonData": Object {
-            "authType": "credentials",
-            "defaultRegion": "eu-west-2",
-          },
-          "name": "dataSource-0",
-          "orgId": 1,
-          "password": "",
-          "readOnly": false,
-          "type": "cloudwatch",
-          "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
-          "url": "",
-          "user": "",
-        }
-      }
-      key="0-0"
-    />
-    <DataSourcesListItem
-      dataSource={
-        Object {
-          "access": "",
-          "basicAuth": false,
-          "database": "database-1",
-          "id": 1,
-          "isDefault": false,
-          "jsonData": Object {
-            "authType": "credentials",
-            "defaultRegion": "eu-west-2",
-          },
-          "name": "dataSource-1",
-          "orgId": 1,
-          "password": "",
-          "readOnly": false,
-          "type": "cloudwatch",
-          "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
-          "url": "",
-          "user": "",
-        }
-      }
-      key="1-1"
-    />
-    <DataSourcesListItem
-      dataSource={
-        Object {
-          "access": "",
-          "basicAuth": false,
-          "database": "database-2",
-          "id": 2,
-          "isDefault": false,
-          "jsonData": Object {
-            "authType": "credentials",
-            "defaultRegion": "eu-west-2",
-          },
-          "name": "dataSource-2",
-          "orgId": 1,
-          "password": "",
-          "readOnly": false,
-          "type": "cloudwatch",
-          "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
-          "url": "",
-          "user": "",
-        }
-      }
-      key="2-2"
-    />
-    <DataSourcesListItem
-      dataSource={
-        Object {
-          "access": "",
-          "basicAuth": false,
-          "database": "database-3",
-          "id": 3,
-          "isDefault": false,
-          "jsonData": Object {
-            "authType": "credentials",
-            "defaultRegion": "eu-west-2",
-          },
-          "name": "dataSource-3",
-          "orgId": 1,
-          "password": "",
-          "readOnly": false,
-          "type": "cloudwatch",
-          "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
-          "url": "",
-          "user": "",
-        }
-      }
-      key="3-3"
-    />
-  </ol>
-</section>
-`;

public/app/features/datasources/__snapshots__/DataSourcesListItem.test.tsx.snap

@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<li
-  className="card-item-wrapper"
->
-  <a
-    className="card-item"
-    href="datasources/edit/13"
-  >
-    <div
-      className="card-item-header"
-    >
-      <div
-        className="card-item-type"
-      >
-        cloudwatch
-      </div>
-    </div>
-    <div
-      className="card-item-body"
-    >
-      <figure
-        className="card-item-figure"
-      >
-        <img
-          alt="gdev-cloudwatch"
-          src="public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png"
-        />
-      </figure>
-      <div
-        className="card-item-details"
-      >
-        <div
-          aria-label="Data source list item gdev-cloudwatch"
-          className="card-item-name"
-        >
-          gdev-cloudwatch
-        </div>
-        <div
-          className="card-item-sub-name"
-        />
-      </div>
-    </div>
-  </a>
-</li>
-`;

public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap

@@ -125,25 +125,6 @@ exports[`Render should render action bar and datasources 1`] = `
             "url": "",
             "user": "",
           },
-          Object {
-            "access": "",
-            "basicAuth": false,
-            "database": "database-5",
-            "id": 5,
-            "isDefault": false,
-            "jsonData": Object {
-              "authType": "credentials",
-              "defaultRegion": "eu-west-2",
-            },
-            "name": "dataSource-5",
-            "orgId": 1,
-            "password": "",
-            "readOnly": false,
-            "type": "cloudwatch",
-            "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
-            "url": "",
-            "user": "",
-          },
         ]
       }
       key="list"

public/app/features/datasources/mocks.ts

@@ -7,6 +7,7 @@ export function createDatasourceSettings<T>(jsonData: T): DataSourceSettings<T>
     name: 'datasource-test',
     typeLogoUrl: '',
     type: 'datasource',
+    typeName: 'Datasource',
     access: 'server',
     url: 'http://localhost',
     password: '',

public/app/features/datasources/settings/__snapshots__/DataSourceSettingsPage.test.tsx.snap

@@ -48,6 +48,7 @@ exports[`Render should render alpha info text 1`] = `
               "secureJsonFields": Object {},
               "type": "cloudwatch",
               "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
+              "typeName": "Cloudwatch",
               "url": "",
               "user": "",
               "withCredentials": false,
@@ -81,6 +82,7 @@ exports[`Render should render alpha info text 1`] = `
               "secureJsonFields": Object {},
               "type": "cloudwatch",
               "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
+              "typeName": "Cloudwatch",
               "url": "",
               "user": "",
               "withCredentials": false,
@@ -198,6 +200,7 @@ exports[`Render should render beta info text 1`] = `
               "secureJsonFields": Object {},
               "type": "cloudwatch",
               "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
+              "typeName": "Cloudwatch",
               "url": "",
               "user": "",
               "withCredentials": false,
@@ -257,6 +260,7 @@ exports[`Render should render component 1`] = `
               "secureJsonFields": Object {},
               "type": "cloudwatch",
               "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
+              "typeName": "Cloudwatch",
               "url": "",
               "user": "",
               "withCredentials": false,
@@ -321,6 +325,7 @@ exports[`Render should render is ready only message 1`] = `
               "secureJsonFields": Object {},
               "type": "cloudwatch",
               "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
+              "typeName": "Cloudwatch",
               "url": "",
               "user": "",
               "withCredentials": false,
@@ -354,6 +359,7 @@ exports[`Render should render is ready only message 1`] = `
               "secureJsonFields": Object {},
               "type": "cloudwatch",
               "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
+              "typeName": "Cloudwatch",
               "url": "",
               "user": "",
               "withCredentials": false,

public/app/features/datasources/state/navModel.ts

@@ -83,6 +83,7 @@ export function getDataSourceLoadingNav(pageName: string): NavModel {
       password: '',
       readOnly: false,
       type: 'Loading',
+      typeName: 'Loading',
       typeLogoUrl: 'public/img/icn-datasource.svg',
       url: '',
       user: '',

public/app/features/datasources/state/reducers.test.ts

@@ -40,7 +40,7 @@ const mockPlugin = () =>
 describe('dataSourcesReducer', () => {
   describe('when dataSourcesLoaded is dispatched', () => {
     it('then state should be correct', () => {
-      const dataSources = getMockDataSources(0);
+      const dataSources = getMockDataSources(1);
 
       reducerTester<DataSourcesState>()
         .givenReducer(dataSourcesReducer, initialState)

public/app/plugins/datasource/cloudwatch/components/ConfigEditor.test.tsx

@@ -28,6 +28,7 @@ const setup = (propOverrides?: object) => {
       url: '',
       database: '',
       type: 'cloudwatch',
+      typeName: 'Cloudwatch',
       user: '',
       password: '',
       basicAuth: false,

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.test.tsx

@@ -9,6 +9,7 @@ const setup = (propOverrides?: object) => {
       orgId: 1,
       name: 'Azure Monitor-10-10',
       type: 'grafana-azure-monitor-datasource',
+      typeName: 'Azure',
       typeLogoUrl: '',
       access: 'proxy',
       url: '',

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ConfigEditor.test.tsx

@@ -10,6 +10,7 @@ const setup = () => {
       name: 'Azure Monitor-10-10',
       type: 'grafana-azure-monitor-datasource',
       typeLogoUrl: '',
+      typeName: 'Azure',
       access: 'proxy',
       url: '',
       password: '',

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/InsightsConfig.test.tsx

@@ -10,6 +10,7 @@ const setup = (propOverrides?: object) => {
       name: 'Azure Monitor-10-10',
       type: 'grafana-azure-monitor-datasource',
       typeLogoUrl: '',
+      typeName: 'Azure',
       access: 'proxy',
       url: '',
       password: '',

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/ConfigEditor.test.tsx.snap

@@ -30,6 +30,7 @@ exports[`Render should render component 1`] = `
         "secureJsonFields": Object {},
         "type": "grafana-azure-monitor-datasource",
         "typeLogoUrl": "",
+        "typeName": "Azure",
         "url": "",
         "user": "",
         "version": 1,
@@ -67,6 +68,7 @@ exports[`Render should render component 1`] = `
               "secureJsonFields": Object {},
               "type": "grafana-azure-monitor-datasource",
               "typeLogoUrl": "",
+              "typeName": "Azure",
               "url": "/api/datasources/proxy/21",
               "user": "",
               "version": 1,
@@ -106,6 +108,7 @@ exports[`Render should render component 1`] = `
         "secureJsonFields": Object {},
         "type": "grafana-azure-monitor-datasource",
         "typeLogoUrl": "",
+        "typeName": "Azure",
         "url": "",
         "user": "",
         "version": 1,
@@ -141,6 +144,7 @@ exports[`Render should render component 1`] = `
         "secureJsonFields": Object {},
         "type": "grafana-azure-monitor-datasource",
         "typeLogoUrl": "",
+        "typeName": "Azure",
         "url": "",
         "user": "",
         "version": 1,

public/app/plugins/datasource/influxdb/components/ConfigEditor.test.tsx

@@ -9,6 +9,7 @@ const setup = (propOverrides?: object) => {
       orgId: 1,
       name: 'InfluxDB-3',
       type: 'influxdb',
+      typeName: 'Influx',
       typeLogoUrl: '',
       access: 'proxy',
       url: '',

public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap

@@ -92,6 +92,7 @@ exports[`Render should disable basic auth password input 1`] = `
         "secureJsonFields": Object {},
         "type": "influxdb",
         "typeLogoUrl": "",
+        "typeName": "Influx",
         "url": "",
         "user": "",
         "version": 1,
@@ -387,6 +388,7 @@ exports[`Render should hide basic auth fields when switch off 1`] = `
         "secureJsonFields": Object {},
         "type": "influxdb",
         "typeLogoUrl": "",
+        "typeName": "Influx",
         "url": "",
         "user": "",
         "version": 1,
@@ -682,6 +684,7 @@ exports[`Render should hide white listed cookies input when browser access chose
         "secureJsonFields": Object {},
         "type": "influxdb",
         "typeLogoUrl": "",
+        "typeName": "Influx",
         "url": "",
         "user": "",
         "version": 1,
@@ -977,6 +980,7 @@ exports[`Render should render component 1`] = `
         "secureJsonFields": Object {},
         "type": "influxdb",
         "typeLogoUrl": "",
+        "typeName": "Influx",
         "url": "",
         "user": "",
         "version": 1,