NewPanelEditor Render search results in front of the list of plugins (#23302)

public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx

@@ -34,6 +34,13 @@ export const VisualizationTabUnconnected: FC<Props> = ({ panel, plugin, changePa
   const onPluginTypeChange = (meta: PanelPluginMeta) => {
   const onPluginTypeChange = (meta: PanelPluginMeta) => {
     changePanelPlugin(panel, meta.id);
     changePanelPlugin(panel, meta.id);
   };
   };
+  const suffix =
+    searchQuery !== '' ? (
+      <span className={styles.searchClear} onClick={() => setSearchQuery('')}>
+        <Icon name="times" />
+        Clear filter
+      </span>
+    ) : null;
 
 
   return (
   return (
     <div className={styles.wrapper}>
     <div className={styles.wrapper}>
@@ -42,6 +49,7 @@ export const VisualizationTabUnconnected: FC<Props> = ({ panel, plugin, changePa
           value={searchQuery}
           value={searchQuery}
           onChange={e => setSearchQuery(e.currentTarget.value)}
           onChange={e => setSearchQuery(e.currentTarget.value)}
           prefix={<Icon name="filter" className={styles.icon} />}
           prefix={<Icon name="filter" className={styles.icon} />}
+          suffix={suffix}
           placeholder="Filter visualisations"
           placeholder="Filter visualisations"
           autoFocus
           autoFocus
         />
         />
@@ -77,6 +85,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       flex-shrink: 1;
       flex-shrink: 1;
       margin-bottom: ${theme.spacing.sm};
       margin-bottom: ${theme.spacing.sm};
     `,
     `,
+    searchClear: css`
+      color: ${theme.colors.gray60};
+      cursor: pointer;
+    `,
     visList: css`
     visList: css`
       flex-grow: 1;
       flex-grow: 1;
       height: 100%;
       height: 100%;

public/app/features/dashboard/panel_editor/VizTypePicker.tsx

-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 
 import config from 'app/core/config';
 import config from 'app/core/config';
 import VizTypePickerPlugin from './VizTypePickerPlugin';
 import VizTypePickerPlugin from './VizTypePickerPlugin';
@@ -41,22 +41,22 @@ export const VizTypePicker: React.FC<Props> = ({ searchQuery, onTypeChange, curr
     );
     );
   };
   };
 
 
-  const getFilteredPluginList = (): PanelPluginMeta[] => {
+  const getFilteredPluginList = useCallback((): PanelPluginMeta[] => {
     const regex = new RegExp(searchQuery, 'i');
     const regex = new RegExp(searchQuery, 'i');
-
     return pluginsList.filter(item => {
     return pluginsList.filter(item => {
       return regex.test(item.name);
       return regex.test(item.name);
     });
     });
-  };
+  }, [searchQuery]);
 
 
   const filteredPluginList = getFilteredPluginList();
   const filteredPluginList = getFilteredPluginList();
   const hasResults = filteredPluginList.length > 0;
   const hasResults = filteredPluginList.length > 0;
+  const renderList = filteredPluginList.concat(pluginsList.filter(p => filteredPluginList.indexOf(p) === -1));
 
 
   return (
   return (
     <div className={styles.wrapper}>
     <div className={styles.wrapper}>
       <div className={styles.grid}>
       <div className={styles.grid}>
         {hasResults ? (
         {hasResults ? (
-          pluginsList.map((plugin, index) => renderVizPlugin(plugin, index))
+          renderList.map((plugin, index) => renderVizPlugin(plugin, index))
         ) : (
         ) : (
           <EmptySearchResult>Could not find anything matching your query</EmptySearchResult>
           <EmptySearchResult>Could not find anything matching your query</EmptySearchResult>
         )}
         )}

public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx

@@ -29,10 +29,11 @@ const VizTypePickerPlugin: React.FC<Props> = ({ isCurrent, plugin, onClick, disa
 };
 };
 
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
+  const itemBorder = `1px solid ${theme.isLight ? theme.colors.gray3 : theme.colors.dark10}`;
   return {
   return {
     item: css`
     item: css`
       background: ${theme.isLight ? theme.colors.white : theme.colors.gray05};
       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;
       border-radius: 3px;
       height: 100px;
       height: 100px;
       width: 100%;
       width: 100%;
@@ -68,7 +69,11 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     disabled: css`
     disabled: css`
       opacity: 0.2;
       opacity: 0.2;
       filter: grayscale(1);
       filter: grayscale(1);
-      cursor: pointer;
+      cursor: default;
+      &:hover {
+        box-shadow: none;
+        border: ${itemBorder};
+      }
     `,
     `,
     name: css`
     name: css`
       text-overflow: ellipsis;
       text-overflow: ellipsis;