feat: Add EmptySearchResult ui component and use it in VizTypePicker

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

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+
+export interface Props {
+  children: JSX.Element | string;
+}
+
+const EmptySearchResult: FC<Props> = ({ children }) => {
+  return (
+    <div className="empty-search-result">{children}</div>
+  );
+};
+
+export { EmptySearchResult };

packages/grafana-ui/src/components/EmptySearchResult/_EmptySearchResult.scss

@@ -0,0 +1,6 @@
+.empty-search-result {
+    background-color: $empty-list-cta-bg;
+    padding: $spacer;
+    border-radius: $border-radius;
+    margin-bottom: $spacer*2;
+}

packages/grafana-ui/src/components/index.scss

@@ -8,3 +8,4 @@
 @import 'ColorPicker/ColorPicker';
 @import 'ValueMappingsEditor/ValueMappingsEditor';
 @import "FormField/FormField";
+@import "EmptySearchResult/EmptySearchResult";

packages/grafana-ui/src/components/index.ts

@@ -23,3 +23,4 @@ export { PanelOptionsGrid } from './PanelOptionsGrid/PanelOptionsGrid';
 export { ValueMappingsEditor } from './ValueMappingsEditor/ValueMappingsEditor';
 export { Gauge } from './Gauge/Gauge';
 export { Switch } from './Switch/Switch';
+export { EmptySearchResult } from './EmptySearchResult/EmptySearchResult';

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

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react';
-import _ from 'lodash';
 
 import config from 'app/core/config';
 import { PanelPlugin } from 'app/types/plugins';
 import VizTypePickerPlugin from './VizTypePickerPlugin';
+import { EmptySearchResult } from '@grafana/ui';
 
 export interface Props {
   current: PanelPlugin;
@@ -14,9 +14,9 @@ export interface Props {
 
 export class VizTypePicker extends PureComponent<Props> {
   searchInput: HTMLElement;
-  pluginList = this.getPanelPlugins('');
+  pluginList = this.getPanelPlugins;
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
   }
 
@@ -25,14 +25,13 @@ export class VizTypePicker extends PureComponent<Props> {
     return filteredPluginList.length - 1;
   }
 
-  getPanelPlugins(filter): PanelPlugin[] {
-    const panels = _.chain(config.panels)
-      .filter({ hideFromList: false })
-      .map(item => item)
-      .value();
+  get getPanelPlugins(): PanelPlugin[] {
+    const allPanels = config.panels;
 
-    // add sort by sort property
-    return _.sortBy(panels, 'sort');
+    return Object.keys(allPanels)
+      .filter(key => allPanels[key]['hideFromList'] === false)
+      .map(key => allPanels[key])
+      .sort((a: PanelPlugin, b: PanelPlugin) => a.sort - b.sort);
   }
 
   renderVizPlugin = (plugin: PanelPlugin, index: number) => {
@@ -63,11 +62,13 @@ export class VizTypePicker extends PureComponent<Props> {
 
   render() {
     const filteredPluginList = this.getFilteredPluginList();
-
+    const hasResults = filteredPluginList.length > 0;
     return (
       <div className="viz-picker">
         <div className="viz-picker-list">
-          {filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index))}
+          {hasResults ?
+            filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index))
+            : <EmptySearchResult>No panels matching your query were found</EmptySearchResult>}
         </div>
       </div>
     );