From 27bbadce1d2f88f2d21f48590287b5b4f9407b82 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Wed, 13 Feb 2019 09:22:09 +0100
Subject: [PATCH] feat: Add EmptySearchResult ui component and use it in
 VizTypePicker

---
 .../EmptySearchResult/EmptySearchResult.tsx   | 13 ++++++++++
 .../EmptySearchResult/_EmptySearchResult.scss |  6 +++++
 packages/grafana-ui/src/components/index.scss |  1 +
 packages/grafana-ui/src/components/index.ts   |  1 +
 .../dashboard/panel_editor/VizTypePicker.tsx  | 25 ++++++++++---------
 5 files changed, 34 insertions(+), 12 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
 create mode 100644 packages/grafana-ui/src/components/EmptySearchResult/_EmptySearchResult.scss

diff --git a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
new file mode 100644
index 00000000000..ca31b12a007
--- /dev/null
+++ b/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 };
diff --git a/packages/grafana-ui/src/components/EmptySearchResult/_EmptySearchResult.scss b/packages/grafana-ui/src/components/EmptySearchResult/_EmptySearchResult.scss
new file mode 100644
index 00000000000..be1e886cd44
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss
index 4f5cbf9a51b..911fa1a0704 100644
--- a/packages/grafana-ui/src/components/index.scss
+++ b/packages/grafana-ui/src/components/index.scss
@@ -8,3 +8,4 @@
 @import 'ColorPicker/ColorPicker';
 @import 'ValueMappingsEditor/ValueMappingsEditor';
 @import "FormField/FormField";
+@import "EmptySearchResult/EmptySearchResult";
\ No newline at end of file
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index dc435a8844d..86ce9347dad 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/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';
diff --git a/public/app/features/dashboard/panel_editor/VizTypePicker.tsx b/public/app/features/dashboard/panel_editor/VizTypePicker.tsx
index f0dd7d0f2c7..605688fc557 100644
--- a/public/app/features/dashboard/panel_editor/VizTypePicker.tsx
+++ b/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>
     );