From 48548f064123fe8a74a8883d62f4955a1f9d3215 Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Tue, 9 Jan 2018 13:18:16 +0100
Subject: [PATCH] put this.props.search in the Highlighter

---
 .../app/containers/AlertRuleList/AlertRuleList.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/public/app/containers/AlertRuleList/AlertRuleList.tsx b/public/app/containers/AlertRuleList/AlertRuleList.tsx
index 69bddfbe593..918b80fcabb 100644
--- a/public/app/containers/AlertRuleList/AlertRuleList.tsx
+++ b/public/app/containers/AlertRuleList/AlertRuleList.tsx
@@ -119,15 +119,13 @@ export class AlertRuleItem extends React.Component<AlertRuleItemProps, any> {
     this.props.rule.togglePaused();
   };
 
-  renderText(text: string, searchArray) {
-    return <Highlighter highlightClassName="textHighlight" textToHighlight={text} searchWords={searchArray} />;
+  renderText(text: string) {
+    return <Highlighter highlightClassName="textHighlight" textToHighlight={text} searchWords={[this.props.search]} />;
   }
 
   render() {
     const { rule } = this.props;
 
-    const searchArray = [this.props.search];
-
     let stateClass = classNames({
       fa: true,
       'fa-play': rule.isPaused,
@@ -144,16 +142,14 @@ export class AlertRuleItem extends React.Component<AlertRuleItemProps, any> {
           </span>
           <div className="alert-rule-item__header">
             <div className="alert-rule-item__name">
-              <a href={ruleUrl}>{this.renderText(rule.name, searchArray)}</a>
+              <a href={ruleUrl}>{this.renderText(rule.name)}</a>
             </div>
             <div className="alert-rule-item__text">
-              <span className={`${rule.stateClass}`}>{this.renderText(rule.stateText, searchArray)}</span>
+              <span className={`${rule.stateClass}`}>{this.renderText(rule.stateText)}</span>
               <span className="alert-rule-item__time"> for {rule.stateAge}</span>
             </div>
           </div>
-          {rule.info && (
-            <div className="small muted alert-rule-item__info">{this.renderText(rule.info, searchArray)}</div>
-          )}
+          {rule.info && <div className="small muted alert-rule-item__info">{this.renderText(rule.info)}</div>}
         </div>
         <div className="alert-rule-item__footer">
           <a