diff --git a/public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx b/public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx index 834a19442fd..7e0d7c07503 100644 --- a/public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx +++ b/public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx @@ -34,6 +34,13 @@ export const VisualizationTabUnconnected: FC = ({ panel, plugin, changePa const onPluginTypeChange = (meta: PanelPluginMeta) => { changePanelPlugin(panel, meta.id); }; + const suffix = + searchQuery !== '' ? ( + setSearchQuery('')}> + + Clear filter + + ) : null; return (
@@ -42,6 +49,7 @@ export const VisualizationTabUnconnected: FC = ({ panel, plugin, changePa value={searchQuery} onChange={e => setSearchQuery(e.currentTarget.value)} prefix={} + suffix={suffix} placeholder="Filter visualisations" autoFocus /> @@ -77,6 +85,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { flex-shrink: 1; margin-bottom: ${theme.spacing.sm}; `, + searchClear: css` + color: ${theme.colors.gray60}; + cursor: pointer; + `, visList: css` flex-grow: 1; height: 100%; diff --git a/public/app/features/dashboard/panel_editor/VizTypePicker.tsx b/public/app/features/dashboard/panel_editor/VizTypePicker.tsx index 0a31f4b69ec..5a40f94b5bf 100644 --- a/public/app/features/dashboard/panel_editor/VizTypePicker.tsx +++ b/public/app/features/dashboard/panel_editor/VizTypePicker.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import React, { useCallback, useMemo } from 'react'; import config from 'app/core/config'; import VizTypePickerPlugin from './VizTypePickerPlugin'; @@ -41,22 +41,22 @@ export const VizTypePicker: React.FC = ({ searchQuery, onTypeChange, curr ); }; - const getFilteredPluginList = (): PanelPluginMeta[] => { + const getFilteredPluginList = useCallback((): PanelPluginMeta[] => { const regex = new RegExp(searchQuery, 'i'); - return pluginsList.filter(item => { return regex.test(item.name); }); - }; + }, [searchQuery]); const filteredPluginList = getFilteredPluginList(); const hasResults = filteredPluginList.length > 0; + const renderList = filteredPluginList.concat(pluginsList.filter(p => filteredPluginList.indexOf(p) === -1)); return (
{hasResults ? ( - pluginsList.map((plugin, index) => renderVizPlugin(plugin, index)) + renderList.map((plugin, index) => renderVizPlugin(plugin, index)) ) : ( Could not find anything matching your query )} diff --git a/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx b/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx index 6c3cc52983b..8775c7830d0 100644 --- a/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx +++ b/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx @@ -29,10 +29,11 @@ const VizTypePickerPlugin: React.FC = ({ isCurrent, plugin, onClick, disa }; const getStyles = stylesFactory((theme: GrafanaTheme) => { + const itemBorder = `1px solid ${theme.isLight ? theme.colors.gray3 : theme.colors.dark10}`; return { item: css` background: ${theme.isLight ? theme.colors.white : theme.colors.gray05}; - border: 1px solid ${theme.isLight ? theme.colors.gray3 : theme.colors.dark10}; + border: ${itemBorder}; border-radius: 3px; height: 100px; width: 100%; @@ -68,7 +69,11 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { disabled: css` opacity: 0.2; filter: grayscale(1); - cursor: pointer; + cursor: default; + &:hover { + box-shadow: none; + border: ${itemBorder}; + } `, name: css` text-overflow: ellipsis;