refactor: changed AlertRuleItem pause action to callback

public/app/features/alerting/AlertRuleItem.test.tsx

@@ -21,7 +21,7 @@ const setup = (propOverrides?: object) => {
       url: 'https://something.something.darkside',
     },
     search: '',
-    togglePauseAlertRule: jest.fn(),
+    onTogglePause: jest.fn(),
   };
 
   Object.assign(props, propOverrides);

public/app/features/alerting/AlertRuleItem.tsx

@@ -1,23 +1,15 @@
 import React, { PureComponent } from 'react';
-import { connect } from 'react-redux';
 import Highlighter from 'react-highlight-words';
 import classNames from 'classnames/bind';
-import { togglePauseAlertRule } from './state/actions';
 import { AlertRule } from '../../types';
 
 export interface Props {
   rule: AlertRule;
   search: string;
-  togglePauseAlertRule: typeof togglePauseAlertRule;
+  onTogglePause: () => void;
 }
 
-class AlertRuleItem extends PureComponent<Props, any> {
-  togglePaused = () => {
-    const { rule } = this.props;
-
-    this.props.togglePauseAlertRule(rule.id, { paused: rule.state !== 'paused' });
-  };
-
+class AlertRuleItem extends PureComponent<Props> {
   renderText(text: string) {
     return (
       <Highlighter
@@ -29,7 +21,7 @@ class AlertRuleItem extends PureComponent<Props, any> {
   }
 
   render() {
-    const { rule } = this.props;
+    const { rule, onTogglePause } = this.props;
 
     const stateClass = classNames({
       fa: true,
@@ -61,7 +53,7 @@ class AlertRuleItem extends PureComponent<Props, any> {
           <button
             className="btn btn-small btn-inverse alert-list__btn width-2"
             title="Pausing an alert rule prevents it from executing"
-            onClick={this.togglePaused}
+            onClick={onTogglePause}
           >
             <i className={stateClass} />
           </button>
@@ -74,6 +66,4 @@ class AlertRuleItem extends PureComponent<Props, any> {
   }
 }
 
-export default connect(null, {
-  togglePauseAlertRule,
-})(AlertRuleItem);
+export default AlertRuleItem;

public/app/features/alerting/AlertRuleList.test.tsx

@@ -15,6 +15,7 @@ const setup = (propOverrides?: object) => {
     updateLocation: jest.fn(),
     getAlertRulesAsync: jest.fn(),
     setSearchQuery: jest.fn(),
+    togglePauseAlertRule: jest.fn(),
     stateFilter: '',
     search: '',
   };

public/app/features/alerting/AlertRuleList.tsx

@@ -7,7 +7,7 @@ import appEvents from 'app/core/app_events';
 import { updateLocation } from 'app/core/actions';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { NavModel, StoreState, AlertRule } from 'app/types';
-import { getAlertRulesAsync, setSearchQuery } from './state/actions';
+import { getAlertRulesAsync, setSearchQuery, togglePauseAlertRule } from './state/actions';
 import { getAlertRuleItems, getSearchQuery } from './state/selectors';
 
 export interface Props {
@@ -16,6 +16,7 @@ export interface Props {
   updateLocation: typeof updateLocation;
   getAlertRulesAsync: typeof getAlertRulesAsync;
   setSearchQuery: typeof setSearchQuery;
+  togglePauseAlertRule: typeof togglePauseAlertRule;
   stateFilter: string;
   search: string;
 }
@@ -71,6 +72,10 @@ export class AlertRuleList extends PureComponent<Props, any> {
     this.props.setSearchQuery(value);
   };
 
+  onTogglePause = (rule: AlertRule) => {
+    this.props.togglePauseAlertRule(rule.id, { paused: rule.state !== 'paused' });
+  };
+
   alertStateFilterOption = ({ text, value }) => {
     return (
       <option key={value} value={value}>
@@ -115,7 +120,14 @@ export class AlertRuleList extends PureComponent<Props, any> {
           </div>
           <section>
             <ol className="alert-rule-list">
-              {alertRules.map(rule => <AlertRuleItem rule={rule} key={rule.id} search={search} />)}
+              {alertRules.map(rule => (
+                <AlertRuleItem
+                  rule={rule}
+                  key={rule.id}
+                  search={search}
+                  onTogglePause={() => this.onTogglePause(rule)}
+                />
+              ))}
             </ol>
           </section>
         </div>
@@ -135,6 +147,7 @@ const mapDispatchToProps = {
   updateLocation,
   getAlertRulesAsync,
   setSearchQuery,
+  togglePauseAlertRule,
 };
 
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(AlertRuleList));

public/app/features/alerting/__snapshots__/AlertRuleItem.test.tsx.snap

@@ -64,7 +64,7 @@ exports[`Render should render component 1`] = `
   >
     <button
       className="btn btn-small btn-inverse alert-list__btn width-2"
-      onClick={[Function]}
+      onClick={[MockFunction]}
       title="Pausing an alert rule prevents it from executing"
     >
       <i

public/app/features/alerting/__snapshots__/AlertRuleList.test.tsx.snap

@@ -101,8 +101,9 @@ exports[`Render should render alert rules 1`] = `
       <ol
         className="alert-rule-list"
       >
-        <Connect(AlertRuleItem)
+        <AlertRuleItem
           key="1"
+          onTogglePause={[Function]}
           rule={
             Object {
               "dashboardId": 7,
@@ -121,8 +122,9 @@ exports[`Render should render alert rules 1`] = `
           }
           search=""
         />
-        <Connect(AlertRuleItem)
+        <AlertRuleItem
           key="3"
+          onTogglePause={[Function]}
           rule={
             Object {
               "dashboardId": 7,