IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Connections: Show only data source plugins on Connect Data page (#60523)

Browse Source 
show only data source plugins on connect data page

We intended to show only data source plugins on this page, but this
filter was missing until now.
This commit is contained in:
mikkancso
2023-01-04 10:45:50 +01:00
committed by GitHub
parent bd09e88e50
commit 0adcdae325
2 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
public/app/features/connections/tabs/ConnectData/ConnectData.test.tsx
View File

@@ -2,11 +2,11 @@ import { fireEvent, render, RenderResult, screen } from '@testing-library/react'
import React from 'react';
import { Provider } from 'react-redux';
import { PluginType } from '@grafana/data';
import { getCatalogPluginMock, getPluginsStateMock } from 'app/features/plugins/admin/__mocks__';
import { CatalogPlugin } from 'app/features/plugins/admin/types';
import { configureStore } from 'app/store/configureStore';
import { getCatalogPluginMock, getPluginsStateMock } from '../../../plugins/admin/__mocks__';
import { ConnectData } from './ConnectData';
jest.mock('app/features/datasources/api');
@@ -22,6 +22,12 @@ const renderPage = (plugins: CatalogPlugin[] = []): RenderResult => {
);
};
const mockCatalogDataSourcePlugin = getCatalogPluginMock({
type: PluginType.datasource,
name: 'Sample data source',
id: 'sample-data-source',
});
describe('Connect Data', () => {
test('renders no results if the plugins list is empty', async () => {
renderPage();
@@ -29,20 +35,26 @@ describe('Connect Data', () => {
expect(screen.queryByText('No results matching your query were found.')).toBeInTheDocument();
});
test('renders card if plugins list is populated', async () => {
test('renders no results if there is no data source plugin in the list', async () => {
renderPage([getCatalogPluginMock()]);
expect(await screen.findByText('Zabbix')).toBeVisible();
expect(screen.queryByText('No results matching your query were found.')).toBeInTheDocument();
});
test('renders only data source plugins when list is populated', async () => {
renderPage([getCatalogPluginMock(), mockCatalogDataSourcePlugin]);
expect(await screen.findByText('Sample data source')).toBeVisible();
});
test('renders card if search term matches', async () => {
renderPage([getCatalogPluginMock()]);
renderPage([getCatalogPluginMock(), mockCatalogDataSourcePlugin]);
const searchField = await screen.findByRole('textbox');
fireEvent.change(searchField, { target: { value: 'abbi' } });
expect(await screen.findByText('Zabbix')).toBeVisible();
fireEvent.change(searchField, { target: { value: 'ampl' } });
expect(await screen.findByText('Sample data source')).toBeVisible();
fireEvent.change(searchField, { target: { value: 'rabbit' } });
fireEvent.change(searchField, { target: { value: 'cramp' } });
expect(screen.queryByText('No results matching your query were found.')).toBeInTheDocument();
});
});

7
public/app/features/connections/tabs/ConnectData/ConnectData.tsx
View File

@@ -1,6 +1,7 @@
import { css } from '@emotion/css';
import React, { useMemo, useState } from 'react';
import { PluginType } from '@grafana/data';
import { useStyles2, LoadingPlaceholder } from '@grafana/ui';
import { useGetAllWithFilters } from 'app/features/plugins/admin/state/hooks';
@@ -25,7 +26,11 @@ export function ConnectData() {
setSearchTerm(e.currentTarget.value.toLowerCase());
};
const { isLoading, error, plugins } = useGetAllWithFilters({ query: searchTerm, filterBy: '' });
const { isLoading, error, plugins } = useGetAllWithFilters({
query: searchTerm,
filterBy: '',
filterByType: PluginType.datasource,
});
const cardGridItems = useMemo(
() =>