Fix adding new data source and minor updates (#68)

Author: mikhail-vl

CHANGELOG.md

@@ -6,7 +6,7 @@
 
 - "Available Requirements" panel should be set to $redis datasource #63
 - Cannot read property 'v1' of undefined (theme.v1) in the Grafana8 #65
-- Upgrade to Grafana 8.0.2
+- Upgrade to Grafana 8.0.2 (#67)
 
 ## 1.2.0 (2021-05-11)
 

src/components/data-source-list/data-source-list.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import {
   HighAvailability,
@@ -12,7 +11,8 @@ import {
   RedisJSON,
   RedisTimeSeries,
 } from 'icons';
-import { InfoBox } from '@grafana/ui';
+import React from 'react';
+import { Alert } from '@grafana/ui';
 import { DataSourceType, RedisCommand } from '../../constants';
 import { DataSourceList } from './data-source-list';
 
@@ -22,13 +22,11 @@ const backendSrvMock = {
   post: jest.fn(),
 };
 
-const locationSrvMock = {
-  update: jest.fn(),
-};
-
 jest.mock('@grafana/runtime', () => ({
   getBackendSrv: () => backendSrvMock,
-  getLocationSrv: () => locationSrvMock,
+  locationService: {
+    push: () => jest.fn(),
+  },
 }));
 
 /**
@@ -46,12 +44,11 @@ describe('DataSourceList', () => {
 
   beforeEach(() => {
     Object.values(backendSrvMock).forEach((mock) => mock.mockClear());
-    Object.values(locationSrvMock).forEach((mock) => mock.mockClear());
   });
 
   it('If datasources.length=0 should show no items message', () => {
     const wrapper = shallow(<DataSourceList dataSources={[]} />);
-    const testedComponent = wrapper.findWhere((node) => node.is(InfoBox));
+    const testedComponent = wrapper.findWhere((node) => node.is(Alert));
     expect(testedComponent.exists()).toBeTruthy();
   });
 
@@ -365,15 +362,14 @@ describe('DataSourceList', () => {
       const addDataSourceButton = wrapper.findWhere(
         (node) => node.name() === 'Button' && node.text() === 'Add Redis Data Source'
       );
-      backendSrvMock.post.mockImplementationOnce(() => Promise.resolve({ id: 123 }));
+      backendSrvMock.post.mockImplementationOnce(() => Promise.resolve({ datasource: { uid: 123 } }));
       addDataSourceButton.simulate('click');
       setImmediate(() => {
         expect(backendSrvMock.post).toHaveBeenCalledWith('/api/datasources', {
           name: 'Redis',
           type: DataSourceType.REDIS,
           access: 'proxy',
         });
-        expect(locationSrvMock.update).toHaveBeenCalledWith({ path: 'datasources/edit/123' });
         done();
       });
     });
@@ -397,15 +393,14 @@ describe('DataSourceList', () => {
       const addDataSourceButton = wrapper.findWhere(
         (node) => node.name() === 'Button' && node.text() === 'Add Redis Data Source'
       );
-      backendSrvMock.post.mockImplementationOnce(() => Promise.resolve({ id: 1234 }));
+      backendSrvMock.post.mockImplementationOnce(() => Promise.resolve({ datasource: { uid: 123 } }));
       addDataSourceButton.simulate('click');
       setImmediate(() => {
         expect(backendSrvMock.post).toHaveBeenCalledWith('/api/datasources', {
           name: 'Redis-2',
           type: DataSourceType.REDIS,
           access: 'proxy',
         });
-        expect(locationSrvMock.update).toHaveBeenCalledWith({ path: 'datasources/edit/1234' });
         done();
       });
     });

src/components/data-source-list/data-source-list.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useCallback } from 'react';
-import { getBackendSrv, getLocationSrv } from '@grafana/runtime';
-import { Button, Container, HorizontalGroup, InfoBox, LinkButton, VerticalGroup } from '@grafana/ui';
+import { getBackendSrv, locationService } from '@grafana/runtime';
+import { Alert, Button, Container, HorizontalGroup, LinkButton, VerticalGroup } from '@grafana/ui';
 import { DataSourceName, DataSourceType, RedisCommand } from '../../constants';
 import {
   HighAvailability,
@@ -58,10 +58,8 @@ export const DataSourceList: FC<Props> = ({ dataSources }) => {
         type: DataSourceType.REDIS,
         access: 'proxy',
       })
-      .then(({ id }) => {
-        getLocationSrv().update({
-          path: `datasources/edit/${id}`,
-        });
+      .then(({ datasource }) => {
+        locationService.push(`/datasources/edit/${datasource.uid}`);
       });
   }, [dataSources]);
 
@@ -77,9 +75,9 @@ export const DataSourceList: FC<Props> = ({ dataSources }) => {
             Add Redis Data Source
           </Button>
         </div>
-        <InfoBox title="Please add Redis Data Sources." url={'https://grafana.com/plugins/redis-datasource'}>
+        <Alert title="Please add Redis Data Sources." severity="info">
           <p>You can add as many data sources as you want to support multiple Redis databases.</p>
-        </InfoBox>
+        </Alert>
       </div>
     );
   }

src/components/root-page/root-page.test.tsx

@@ -2,7 +2,7 @@ import { shallow } from 'enzyme';
 import React from 'react';
 import { Observable } from 'rxjs';
 import { AppPluginMeta, PluginType } from '@grafana/data';
-import { InfoBox } from '@grafana/ui';
+import { Alert } from '@grafana/ui';
 import { DataSourceType, RedisCommand } from '../../constants';
 import { DataSourceList } from '../data-source-list';
 import { RootPage } from './root-page';
@@ -170,7 +170,7 @@ describe('RootPage', () => {
             text: 'Home',
             url: path,
             id: 'home',
-            icon: 'fa fa-fw fa-database',
+            icon: 'fa fa-fw fa-home',
             active: true,
           },
         ],
@@ -191,14 +191,14 @@ describe('RootPage', () => {
         <RootPage basename="" meta={meta} path={path} query={null as any} onNavChanged={onNavChangedMock} />
       );
       const loadingMessageComponent = wrapper.findWhere(
-        (node) => node.is(InfoBox) && node.prop('title') === 'Loading...'
+        (node) => node.is(Alert) && node.prop('title') === 'Loading...'
       );
       expect(loadingMessageComponent.exists()).toBeTruthy();
       wrapper.instance().componentDidMount();
       setImmediate(() => {
         const dataSourceListComponent = wrapper.findWhere((node) => node.is(DataSourceList));
         const loadingMessageComponent = wrapper.findWhere(
-          (node) => node.is(InfoBox) && node.prop('title') === 'Loading...'
+          (node) => node.is(Alert) && node.prop('title') === 'Loading...'
         );
         expect(loadingMessageComponent.exists()).not.toBeTruthy();
         expect(dataSourceListComponent.exists()).toBeTruthy();
@@ -217,7 +217,7 @@ describe('RootPage', () => {
 
       const dataSourceListComponent = wrapper.findWhere((node) => node.is(DataSourceList));
       const loadingMessageComponent = wrapper.findWhere(
-        (node) => node.is(InfoBox) && node.prop('title') === 'Loading...'
+        (node) => node.is(Alert) && node.prop('title') === 'Loading...'
       );
       expect(loadingMessageComponent.exists()).not.toBeTruthy();
       expect(dataSourceListComponent.exists()).toBeTruthy();

src/components/root-page/root-page.tsx

@@ -9,7 +9,7 @@ import {
   NavModelItem,
 } from '@grafana/data';
 import { config, getBackendSrv, getDataSourceSrv } from '@grafana/runtime';
-import { InfoBox } from '@grafana/ui';
+import { Alert } from '@grafana/ui';
 import { DataSourceType, RedisCommand } from '../../constants';
 import { RedisQuery } from '../../redis-cli-panel/types';
 import { GlobalSettings, RedisDataSourceInstanceSettings } from '../../types';
@@ -157,7 +157,7 @@ export class RootPage extends PureComponent<Props, State> {
       text: 'Home',
       url: path,
       id: 'home',
-      icon: 'fa fa-fw fa-database',
+      icon: 'fa fa-fw fa-home',
       active: true,
     });
 
@@ -192,9 +192,9 @@ export class RootPage extends PureComponent<Props, State> {
      */
     if (loading) {
       return (
-        <InfoBox title="Loading...">
+        <Alert title="Loading..." severity="info">
           <p>Loading time depends on the number of configured data sources.</p>
-        </InfoBox>
+        </Alert>
       );
     }