From 5e5a4cf1b0f8391b85521182c44b995d7c6eee3d Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Wed, 21 Feb 2018 15:39:15 +0100
Subject: [PATCH] added highlighter, fixed setState and changed back flex to
 spacea around

---
 .../dashboard/dashgrid/AddPanelPanel.tsx      | 39 +++++++++++++------
 public/sass/components/_panel_add_panel.scss  |  4 +-
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx
index 8d4ebfb3a10..1c2eeb8fcc6 100644
--- a/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx
@@ -7,6 +7,7 @@ import { PanelContainer } from './PanelContainer';
 import ScrollBar from 'app/core/components/ScrollBar/ScrollBar';
 import store from 'app/core/store';
 import { LS_PANEL_COPY_KEY } from 'app/core/constants';
+import Highlighter from 'react-highlight-words';
 
 export interface AddPanelPanelProps {
   panel: PanelModel;
@@ -110,19 +111,29 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
     dashboard.removePanel(dashboard.panels[0]);
   }
 
+  renderText(text: string) {
+    //if(this.state.filter) {
+    let searchWords = this.state.filter.split('');
+    return <Highlighter highlightClassName="highlight-search-match" textToHighlight={text} searchWords={searchWords} />;
+    //}
+    //return text;
+  }
+
   renderPanelItem(panel, index) {
     return (
       <div key={index} className="add-panel__item" onClick={() => this.onAddPanel(panel)} title={panel.name}>
         <img className="add-panel__item-img" src={panel.info.logos.small} />
-        <div className="add-panel__item-name">{panel.name}</div>
+        <div className="add-panel__item-name">{this.renderText(panel.name)}</div>
       </div>
     );
   }
 
   filterChange(evt) {
-    this.setState({ filter: evt.target.value });
-    this.setState({ panelPlugins: this.getPanelPlugins(evt.target.value) });
-    this.setState({ copiedPanelPlugins: this.getCopiedPanelPlugins(evt.target.value) });
+    this.setState({
+      filter: evt.target.value,
+      panelPlugins: this.getPanelPlugins(evt.target.value),
+      copiedPanelPlugins: this.getCopiedPanelPlugins(evt.target.value),
+    });
   }
 
   filterPanels(panels, filter) {
@@ -133,17 +144,21 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
   }
 
   openCopy() {
-    this.setState({ tab: 'Copy' });
-    this.setState({ filter: '' });
-    this.setState({ panelPlugins: this.getPanelPlugins('') });
-    this.setState({ copiedPanelPlugins: this.getCopiedPanelPlugins('') });
+    this.setState({
+      tab: 'Copy',
+      filter: '',
+      panelPlugins: this.getPanelPlugins(''),
+      copiedPanelPlugins: this.getCopiedPanelPlugins(''),
+    });
   }
 
   openAdd() {
-    this.setState({ tab: 'Add' });
-    this.setState({ filter: '' });
-    this.setState({ panelPlugins: this.getPanelPlugins('') });
-    this.setState({ copiedPanelPlugins: this.getCopiedPanelPlugins('') });
+    this.setState({
+      tab: 'Add',
+      filter: '',
+      panelPlugins: this.getPanelPlugins(''),
+      copiedPanelPlugins: this.getCopiedPanelPlugins(''),
+    });
   }
 
   render() {
diff --git a/public/sass/components/_panel_add_panel.scss b/public/sass/components/_panel_add_panel.scss
index 70aff32a945..6dd609ee544 100644
--- a/public/sass/components/_panel_add_panel.scss
+++ b/public/sass/components/_panel_add_panel.scss
@@ -44,7 +44,7 @@
   overflow: auto;
   height: calc(100% - 50px);
   align-content: flex-start;
-  justify-content: space-between;
+  justify-content: space-around;
   position: relative;
 }
 
@@ -54,7 +54,7 @@
 
   border-radius: 3px;
   padding: $spacer/3 $spacer;
-  width: 32%;
+  width: 31%;
   height: 60px;
   text-align: center;
   margin: $gf-form-margin;