From b1aa84804b03e1d487cd3d2016ad92294397d830 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Tue, 12 Feb 2019 16:14:48 +0100
Subject: [PATCH 1/5] feat: Add css-support for invalid form input elements

---
 public/sass/components/_gf-form.scss |  6 +++++-
 public/sass/mixins/_forms.scss       | 13 ++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index 90ef1da30dc..e2c5eebecd4 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -203,7 +203,7 @@ $input-border: 1px solid $input-border-color;
   }
 
   // Customize the `:focus` state to imitate native WebKit styles.
-  @include form-control-focus();
+  @include form-control-focus(false);
 
   // Placeholder
   &::placeholder {
@@ -251,6 +251,10 @@ $input-border: 1px solid $input-border-color;
   &--plaintext {
     white-space: unset;
   }
+
+  &--invalid {
+    @include form-control-focus(true);
+  }
 }
 
 .gf-form-hint {
diff --git a/public/sass/mixins/_forms.scss b/public/sass/mixins/_forms.scss
index 5d2a4421353..b67a303438b 100644
--- a/public/sass/mixins/_forms.scss
+++ b/public/sass/mixins/_forms.scss
@@ -30,12 +30,19 @@
   }
 }
 
-@mixin form-control-focus() {
+@mixin form-control-focus($error) {
   &:focus {
+    $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+    0 0 5px $input-box-shadow-focus;
     border-color: $input-border-focus;
     outline: none;
-    $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
-      0 0 5px $input-box-shadow-focus;
+
+    @if $error == true {
+      border-color: $brand-warning;
+      $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+      0 0 5px $brand-warning;
+    }
+
     @include box-shadow($shadow);
   }
 }

From 11db48e76e569b6e247511f2d312a8d83930c573 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Tue, 12 Feb 2019 16:19:23 +0100
Subject: [PATCH 2/5] feat: Highlight vizpicker input when there are no panels
 matching the search query

---
 .../dashboard/panel_editor/EditorTabBody.tsx  |  2 +-
 .../panel_editor/VisualizationTab.tsx         | 21 +++++++++++++++----
 .../dashboard/panel_editor/VizTypePicker.tsx  |  6 ++++--
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/public/app/features/dashboard/panel_editor/EditorTabBody.tsx b/public/app/features/dashboard/panel_editor/EditorTabBody.tsx
index 0413cae8a7b..3183f7a7b24 100644
--- a/public/app/features/dashboard/panel_editor/EditorTabBody.tsx
+++ b/public/app/features/dashboard/panel_editor/EditorTabBody.tsx
@@ -36,7 +36,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
     toolbarItems: [],
   };
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
diff --git a/public/app/features/dashboard/panel_editor/VisualizationTab.tsx b/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
index 37f109250a7..efb1caf0cf7 100644
--- a/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
+++ b/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
@@ -1,5 +1,5 @@
 // Libraries
-import React, { PureComponent } from 'react';
+import React, { PureComponent, ChangeEvent } from 'react';
 
 // Utils & Services
 import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
@@ -31,6 +31,7 @@ interface Props {
 interface State {
   isVizPickerOpen: boolean;
   searchQuery: string;
+  searchResults: PanelPlugin[];
   scrollTop: number;
 }
 
@@ -39,12 +40,13 @@ export class VisualizationTab extends PureComponent<Props, State> {
   angularOptions: AngularComponent;
   searchInput: HTMLElement;
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
       isVizPickerOpen: this.props.urlOpenVizPicker,
       searchQuery: '',
+      searchResults: [],
       scrollTop: 0,
     };
   }
@@ -170,7 +172,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
     this.setState({ isVizPickerOpen: false });
   };
 
-  onSearchQueryChange = evt => {
+  onSearchQueryChange = (evt: ChangeEvent<HTMLInputElement>) => {
     const value = evt.target.value;
     this.setState({
       searchQuery: value,
@@ -187,7 +189,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
           <label className="gf-form--has-input-icon">
             <input
               type="text"
-              className="gf-form-input width-13"
+              className={`gf-form-input width-13 ${!this.hasSearchResults ? 'gf-form-input--invalid' : ''}`}
               placeholder=""
               onChange={this.onSearchQueryChange}
               value={searchQuery}
@@ -219,6 +221,16 @@ export class VisualizationTab extends PureComponent<Props, State> {
     }
   };
 
+  setSearchResults = (searchResults: PanelPlugin[]) => {
+    this.setState({
+      searchResults: searchResults
+    });
+  };
+
+  get hasSearchResults () {
+    return this.state.searchResults && this.state.searchResults.length > 0;
+  }
+
   renderHelp = () => <PluginHelp plugin={this.props.plugin} type="help" />;
 
   setScrollTop = (event: React.MouseEvent<HTMLElement>) => {
@@ -251,6 +263,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
               onTypeChanged={this.onTypeChanged}
               searchQuery={searchQuery}
               onClose={this.onCloseVizPicker}
+              onPluginListChange={this.setSearchResults}
             />
           </FadeIn>
           {this.renderPanelOptions()}
diff --git a/public/app/features/dashboard/panel_editor/VizTypePicker.tsx b/public/app/features/dashboard/panel_editor/VizTypePicker.tsx
index f0dd7d0f2c7..f112610e0e6 100644
--- a/public/app/features/dashboard/panel_editor/VizTypePicker.tsx
+++ b/public/app/features/dashboard/panel_editor/VizTypePicker.tsx
@@ -10,13 +10,14 @@ export interface Props {
   onTypeChanged: (newType: PanelPlugin) => void;
   searchQuery: string;
   onClose: () => void;
+  onPluginListChange: (searchResults: PanelPlugin[]) => void;
 }
 
 export class VizTypePicker extends PureComponent<Props> {
   searchInput: HTMLElement;
   pluginList = this.getPanelPlugins('');
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
   }
 
@@ -50,7 +51,7 @@ export class VizTypePicker extends PureComponent<Props> {
   };
 
   getFilteredPluginList = (): PanelPlugin[] => {
-    const { searchQuery } = this.props;
+    const { searchQuery, onPluginListChange } = this.props;
     const regex = new RegExp(searchQuery, 'i');
     const pluginList = this.pluginList;
 
@@ -58,6 +59,7 @@ export class VizTypePicker extends PureComponent<Props> {
       return regex.test(item.name);
     });
 
+    onPluginListChange(filtered);
     return filtered;
   };
 

From 44eaa3eaa886e0f193e9b6ae364e0526c858cb00 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Wed, 13 Feb 2019 07:46:14 +0100
Subject: [PATCH 3/5] Revert "feat: Highlight vizpicker input when there are no
 panels matching the search query"

This reverts commit 11db48e76e569b6e247511f2d312a8d83930c573.
---
 .../dashboard/panel_editor/EditorTabBody.tsx  |  2 +-
 .../panel_editor/VisualizationTab.tsx         | 21 ++++---------------
 .../dashboard/panel_editor/VizTypePicker.tsx  |  6 ++----
 3 files changed, 7 insertions(+), 22 deletions(-)

diff --git a/public/app/features/dashboard/panel_editor/EditorTabBody.tsx b/public/app/features/dashboard/panel_editor/EditorTabBody.tsx
index 3183f7a7b24..0413cae8a7b 100644
--- a/public/app/features/dashboard/panel_editor/EditorTabBody.tsx
+++ b/public/app/features/dashboard/panel_editor/EditorTabBody.tsx
@@ -36,7 +36,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
     toolbarItems: [],
   };
 
-  constructor(props: Props) {
+  constructor(props) {
     super(props);
 
     this.state = {
diff --git a/public/app/features/dashboard/panel_editor/VisualizationTab.tsx b/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
index efb1caf0cf7..37f109250a7 100644
--- a/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
+++ b/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
@@ -1,5 +1,5 @@
 // Libraries
-import React, { PureComponent, ChangeEvent } from 'react';
+import React, { PureComponent } from 'react';
 
 // Utils & Services
 import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
@@ -31,7 +31,6 @@ interface Props {
 interface State {
   isVizPickerOpen: boolean;
   searchQuery: string;
-  searchResults: PanelPlugin[];
   scrollTop: number;
 }
 
@@ -40,13 +39,12 @@ export class VisualizationTab extends PureComponent<Props, State> {
   angularOptions: AngularComponent;
   searchInput: HTMLElement;
 
-  constructor(props: Props) {
+  constructor(props) {
     super(props);
 
     this.state = {
       isVizPickerOpen: this.props.urlOpenVizPicker,
       searchQuery: '',
-      searchResults: [],
       scrollTop: 0,
     };
   }
@@ -172,7 +170,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
     this.setState({ isVizPickerOpen: false });
   };
 
-  onSearchQueryChange = (evt: ChangeEvent<HTMLInputElement>) => {
+  onSearchQueryChange = evt => {
     const value = evt.target.value;
     this.setState({
       searchQuery: value,
@@ -189,7 +187,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
           <label className="gf-form--has-input-icon">
             <input
               type="text"
-              className={`gf-form-input width-13 ${!this.hasSearchResults ? 'gf-form-input--invalid' : ''}`}
+              className="gf-form-input width-13"
               placeholder=""
               onChange={this.onSearchQueryChange}
               value={searchQuery}
@@ -221,16 +219,6 @@ export class VisualizationTab extends PureComponent<Props, State> {
     }
   };
 
-  setSearchResults = (searchResults: PanelPlugin[]) => {
-    this.setState({
-      searchResults: searchResults
-    });
-  };
-
-  get hasSearchResults () {
-    return this.state.searchResults && this.state.searchResults.length > 0;
-  }
-
   renderHelp = () => <PluginHelp plugin={this.props.plugin} type="help" />;
 
   setScrollTop = (event: React.MouseEvent<HTMLElement>) => {
@@ -263,7 +251,6 @@ export class VisualizationTab extends PureComponent<Props, State> {
               onTypeChanged={this.onTypeChanged}
               searchQuery={searchQuery}
               onClose={this.onCloseVizPicker}
-              onPluginListChange={this.setSearchResults}
             />
           </FadeIn>
           {this.renderPanelOptions()}
diff --git a/public/app/features/dashboard/panel_editor/VizTypePicker.tsx b/public/app/features/dashboard/panel_editor/VizTypePicker.tsx
index f112610e0e6..f0dd7d0f2c7 100644
--- a/public/app/features/dashboard/panel_editor/VizTypePicker.tsx
+++ b/public/app/features/dashboard/panel_editor/VizTypePicker.tsx
@@ -10,14 +10,13 @@ export interface Props {
   onTypeChanged: (newType: PanelPlugin) => void;
   searchQuery: string;
   onClose: () => void;
-  onPluginListChange: (searchResults: PanelPlugin[]) => void;
 }
 
 export class VizTypePicker extends PureComponent<Props> {
   searchInput: HTMLElement;
   pluginList = this.getPanelPlugins('');
 
-  constructor(props: Props) {
+  constructor(props) {
     super(props);
   }
 
@@ -51,7 +50,7 @@ export class VizTypePicker extends PureComponent<Props> {
   };
 
   getFilteredPluginList = (): PanelPlugin[] => {
-    const { searchQuery, onPluginListChange } = this.props;
+    const { searchQuery } = this.props;
     const regex = new RegExp(searchQuery, 'i');
     const pluginList = this.pluginList;
 
@@ -59,7 +58,6 @@ export class VizTypePicker extends PureComponent<Props> {
       return regex.test(item.name);
     });
 
-    onPluginListChange(filtered);
     return filtered;
   };
 

From b6305c2d80bbf7c901925e110d5437a4f9b5b8bf Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Wed, 13 Feb 2019 07:46:21 +0100
Subject: [PATCH 4/5] Revert "feat: Add css-support for invalid form input
 elements"

This reverts commit b1aa84804b03e1d487cd3d2016ad92294397d830.
---
 public/sass/components/_gf-form.scss |  6 +-----
 public/sass/mixins/_forms.scss       | 13 +++----------
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index e2c5eebecd4..90ef1da30dc 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -203,7 +203,7 @@ $input-border: 1px solid $input-border-color;
   }
 
   // Customize the `:focus` state to imitate native WebKit styles.
-  @include form-control-focus(false);
+  @include form-control-focus();
 
   // Placeholder
   &::placeholder {
@@ -251,10 +251,6 @@ $input-border: 1px solid $input-border-color;
   &--plaintext {
     white-space: unset;
   }
-
-  &--invalid {
-    @include form-control-focus(true);
-  }
 }
 
 .gf-form-hint {
diff --git a/public/sass/mixins/_forms.scss b/public/sass/mixins/_forms.scss
index b67a303438b..5d2a4421353 100644
--- a/public/sass/mixins/_forms.scss
+++ b/public/sass/mixins/_forms.scss
@@ -30,19 +30,12 @@
   }
 }
 
-@mixin form-control-focus($error) {
+@mixin form-control-focus() {
   &:focus {
-    $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
-    0 0 5px $input-box-shadow-focus;
     border-color: $input-border-focus;
     outline: none;
-
-    @if $error == true {
-      border-color: $brand-warning;
-      $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
-      0 0 5px $brand-warning;
-    }
-
+    $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+      0 0 5px $input-box-shadow-focus;
     @include box-shadow($shadow);
   }
 }

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 5/5] 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>
     );