Form migrations: Teams and alert list (#23810)

* Basic migration

* Update test

* Fix feedback

public/app/features/alerting/AlertRuleItem.tsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 // @ts-ignore
 import Highlighter from 'react-highlight-words';
 import { AlertRule } from '../../types';
-import { Icon, IconName } from '@grafana/ui';
+import { Icon, IconName, Button, Tooltip, LinkButton, HorizontalGroup } from '@grafana/ui';
 
 export interface Props {
   rule: AlertRule;
@@ -43,16 +43,19 @@ class AlertRuleItem extends PureComponent<Props> {
         </div>
 
         <div className="alert-rule-item__actions">
-          <button
+          <HorizontalGroup spacing="sm">
-            className="btn btn-small btn-inverse alert-list__btn width-2"
+            <Tooltip placement="bottom" content="Pausing an alert rule prevents it from executing">
-            title="Pausing an alert rule prevents it from executing"
+              <Button
-            onClick={onTogglePause}
+                variant="secondary"
-          >
+                size="sm"
-            <Icon name={rule.state === 'paused' ? 'play' : 'pause'} />
+                icon={rule.state === 'paused' ? 'play' : 'pause'}
-          </button>
+                onClick={onTogglePause}
-          <a className="btn btn-small btn-inverse alert-list__btn width-2" href={ruleUrl} title="Edit alert rule">
+              />
-            <Icon name="cog" />
+            </Tooltip>
-          </a>
+            <Tooltip placement="right" content="Edit alert rule">
+              <LinkButton size="sm" variant="secondary" href={ruleUrl} icon="cog" />
+            </Tooltip>
+          </HorizontalGroup>
         </div>
       </li>
     );

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

@@ -127,7 +127,7 @@ describe('Functions', () => {
   describe('State filter changed', () => {
     it('should update location', () => {
       const { instance } = setup();
-      const mockEvent = { target: { value: 'alerting' } } as React.ChangeEvent<HTMLSelectElement>;
+      const mockEvent = { value: 'alerting' };
 
       instance.onStateFilterChanged(mockEvent);
 

public/app/features/alerting/AlertRuleList.tsx

@@ -10,8 +10,9 @@ import { AlertRule, CoreEvents, StoreState } from 'app/types';
 import { getAlertRulesAsync, togglePauseAlertRule } from './state/actions';
 import { getAlertRuleItems, getSearchQuery } from './state/selectors';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
-import { NavModel } from '@grafana/data';
+import { NavModel, SelectableValue } from '@grafana/data';
 import { setSearchQuery } from './state/reducers';
+import { Button, Select } from '@grafana/ui';
 
 export interface Props {
   navModel: NavModel;
@@ -27,13 +28,13 @@ export interface Props {
 
 export class AlertRuleList extends PureComponent<Props, any> {
   stateFilters = [
-    { text: 'All', value: 'all' },
+    { label: 'All', value: 'all' },
-    { text: 'OK', value: 'ok' },
+    { label: 'OK', value: 'ok' },
-    { text: 'Not OK', value: 'not_ok' },
+    { label: 'Not OK', value: 'not_ok' },
-    { text: 'Alerting', value: 'alerting' },
+    { label: 'Alerting', value: 'alerting' },
-    { text: 'No Data', value: 'no_data' },
+    { label: 'No Data', value: 'no_data' },
-    { text: 'Paused', value: 'paused' },
+    { label: 'Paused', value: 'paused' },
-    { text: 'Pending', value: 'pending' },
+    { label: 'Pending', value: 'pending' },
   ];
 
   componentDidMount() {
@@ -58,9 +59,9 @@ export class AlertRuleList extends PureComponent<Props, any> {
     return 'all';
   }
 
-  onStateFilterChanged = (evt: React.ChangeEvent<HTMLSelectElement>) => {
+  onStateFilterChanged = (option: SelectableValue) => {
     this.props.updateLocation({
-      query: { state: evt.target.value },
+      query: { state: option.value },
     });
   };
 
@@ -108,15 +109,17 @@ export class AlertRuleList extends PureComponent<Props, any> {
               <label className="gf-form-label">States</label>
 
               <div className="gf-form-select-wrapper width-13">
-                <select className="gf-form-input" onChange={this.onStateFilterChanged} value={this.getStateFilter()}>
+                <Select
-                  {this.stateFilters.map(this.alertStateFilterOption)}
+                  options={this.stateFilters}
-                </select>
+                  onChange={this.onStateFilterChanged}
+                  value={this.getStateFilter()}
+                />
               </div>
             </div>
             <div className="page-action-bar__spacer" />
-            <a className="btn btn-secondary" onClick={this.onOpenHowTo}>
+            <Button variant="secondary" onClick={this.onOpenHowTo}>
               How to add an alert
-            </a>
+            </Button>
           </div>
           <section>
             <ol className="alert-rule-list">

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

@@ -60,24 +60,32 @@ exports[`Render should render component 1`] = `
   <div
     className="alert-rule-item__actions"
   >
-    <button
+    <Component
-      className="btn btn-small btn-inverse alert-list__btn width-2"
+      spacing="sm"
-      onClick={[MockFunction]}
-      title="Pausing an alert rule prevents it from executing"
     >
-      <Icon
+      <Component
-        name="pause"
+        content="Pausing an alert rule prevents it from executing"
-      />
+        placement="bottom"
-    </button>
+      >
-    <a
+        <Button
-      className="btn btn-small btn-inverse alert-list__btn width-2"
+          icon="pause"
-      href="https://something.something.darkside?editPanel=1&tab=alert"
+          onClick={[MockFunction]}
-      title="Edit alert rule"
+          size="sm"
-    >
+          variant="secondary"
-      <Icon
+        />
-        name="cog"
+      </Component>
-      />
+      <Component
-    </a>
+        content="Edit alert rule"
+        placement="right"
+      >
+        <LinkButton
+          href="https://something.something.darkside?editPanel=1&tab=alert"
+          icon="cog"
+          size="sm"
+          variant="secondary"
+        />
+      </Component>
+    </Component>
   </div>
 </li>
 `;

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

@@ -32,65 +32,53 @@ exports[`Render should render alert rules 1`] = `
         <div
           className="gf-form-select-wrapper width-13"
         >
-          <select
+          <Select
-            className="gf-form-input"
             onChange={[Function]}
+            options={
+              Array [
+                Object {
+                  "label": "All",
+                  "value": "all",
+                },
+                Object {
+                  "label": "OK",
+                  "value": "ok",
+                },
+                Object {
+                  "label": "Not OK",
+                  "value": "not_ok",
+                },
+                Object {
+                  "label": "Alerting",
+                  "value": "alerting",
+                },
+                Object {
+                  "label": "No Data",
+                  "value": "no_data",
+                },
+                Object {
+                  "label": "Paused",
+                  "value": "paused",
+                },
+                Object {
+                  "label": "Pending",
+                  "value": "pending",
+                },
+              ]
+            }
             value="all"
-          >
+          />
-            <option
-              key="all"
-              value="all"
-            >
-              All
-            </option>
-            <option
-              key="ok"
-              value="ok"
-            >
-              OK
-            </option>
-            <option
-              key="not_ok"
-              value="not_ok"
-            >
-              Not OK
-            </option>
-            <option
-              key="alerting"
-              value="alerting"
-            >
-              Alerting
-            </option>
-            <option
-              key="no_data"
-              value="no_data"
-            >
-              No Data
-            </option>
-            <option
-              key="paused"
-              value="paused"
-            >
-              Paused
-            </option>
-            <option
-              key="pending"
-              value="pending"
-            >
-              Pending
-            </option>
-          </select>
         </div>
       </div>
       <div
         className="page-action-bar__spacer"
       />
-      <a
+      <Button
-        className="btn btn-secondary"
         onClick={[Function]}
+        variant="secondary"
       >
         How to add an alert
-      </a>
+      </Button>
     </div>
     <section>
       <ol
@@ -176,65 +164,53 @@ exports[`Render should render component 1`] = `
         <div
           className="gf-form-select-wrapper width-13"
         >
-          <select
+          <Select
-            className="gf-form-input"
             onChange={[Function]}
+            options={
+              Array [
+                Object {
+                  "label": "All",
+                  "value": "all",
+                },
+                Object {
+                  "label": "OK",
+                  "value": "ok",
+                },
+                Object {
+                  "label": "Not OK",
+                  "value": "not_ok",
+                },
+                Object {
+                  "label": "Alerting",
+                  "value": "alerting",
+                },
+                Object {
+                  "label": "No Data",
+                  "value": "no_data",
+                },
+                Object {
+                  "label": "Paused",
+                  "value": "paused",
+                },
+                Object {
+                  "label": "Pending",
+                  "value": "pending",
+                },
+              ]
+            }
             value="all"
-          >
+          />
-            <option
-              key="all"
-              value="all"
-            >
-              All
-            </option>
-            <option
-              key="ok"
-              value="ok"
-            >
-              OK
-            </option>
-            <option
-              key="not_ok"
-              value="not_ok"
-            >
-              Not OK
-            </option>
-            <option
-              key="alerting"
-              value="alerting"
-            >
-              Alerting
-            </option>
-            <option
-              key="no_data"
-              value="no_data"
-            >
-              No Data
-            </option>
-            <option
-              key="paused"
-              value="paused"
-            >
-              Paused
-            </option>
-            <option
-              key="pending"
-              value="pending"
-            >
-              Pending
-            </option>
-          </select>
         </div>
       </div>
       <div
         className="page-action-bar__spacer"
       />
-      <a
+      <Button
-        className="btn btn-secondary"
         onClick={[Function]}
+        variant="secondary"
       >
         How to add an alert
-      </a>
+      </Button>
     </div>
     <section>
       <ol

public/app/features/teams/TeamList.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import Page from 'app/core/components/Page/Page';
-import { DeleteButton } from '@grafana/ui';
+import { DeleteButton, LinkButton } from '@grafana/ui';
 import { NavModel } from '@grafana/data';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import { OrgRole, StoreState, Team } from 'app/types';
@@ -109,9 +109,9 @@ export class TeamList extends PureComponent<Props, any> {
 
           <div className="page-action-bar__spacer" />
 
-          <a className={`btn btn-primary${disabledClass}`} href={newTeamHref}>
+          <LinkButton className={disabledClass} href={newTeamHref}>
-            New team
+            New Team
-          </a>
+          </LinkButton>
         </div>
 
         <div className="admin-list-table">

public/app/features/teams/__snapshots__/TeamList.test.tsx.snap

@@ -52,12 +52,12 @@ exports[`Render should render teams table 1`] = `
       <div
         className="page-action-bar__spacer"
       />
-      <a
+      <LinkButton
-        className="btn btn-primary"
+        className=""
         href="org/teams/new"
       >
-        New team
+        New Team
-      </a>
+      </LinkButton>
     </div>
     <div
       className="admin-list-table"
@@ -387,12 +387,12 @@ exports[`Render when feature toggle editorsCanAdmin is turned on and signedin us
       <div
         className="page-action-bar__spacer"
       />
-      <a
+      <LinkButton
-        className="btn btn-primary disabled"
+        className=" disabled"
         href="#"
       >
-        New team
+        New Team
-      </a>
+      </LinkButton>
     </div>
     <div
       className="admin-list-table"
@@ -514,12 +514,12 @@ exports[`Render when feature toggle editorsCanAdmin is turned on and signedin us
       <div
         className="page-action-bar__spacer"
       />
-      <a
+      <LinkButton
-        className="btn btn-primary"
+        className=""
         href="org/teams/new"
       >
-        New team
+        New Team
-      </a>
+      </LinkButton>
     </div>
     <div
       className="admin-list-table"