From 0bf2d5ebcd297392bad68b1a9a7d2a0f52da838c Mon Sep 17 00:00:00 2001
From: Carlos Mondragon <cadragon@gmail.com>
Date: Wed, 10 Oct 2018 16:05:50 -0700
Subject: [PATCH 01/13] Extract ApiKeyCount from state.

---
 public/app/features/api-keys/state/selectors.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/public/app/features/api-keys/state/selectors.ts b/public/app/features/api-keys/state/selectors.ts
index 8065c252e85..789237ae9a3 100644
--- a/public/app/features/api-keys/state/selectors.ts
+++ b/public/app/features/api-keys/state/selectors.ts
@@ -1,5 +1,7 @@
 import { ApiKeysState } from 'app/types';
 
+export const getApiKeysCount = (state: ApiKeysState) => state.keys.length;
+
 export const getApiKeys = (state: ApiKeysState) => {
   const regex = RegExp(state.searchQuery, 'i');
 

From d2573a6bc88ea306710d529ebf65a41eceb7b948 Mon Sep 17 00:00:00 2001
From: Carlos Mondragon <cadragon@gmail.com>
Date: Wed, 10 Oct 2018 16:07:54 -0700
Subject: [PATCH 02/13] Show CTA if there are no ApiKeys, otherwise show table.

---
 public/app/features/api-keys/ApiKeysPage.tsx | 231 ++++++++++---------
 1 file changed, 127 insertions(+), 104 deletions(-)

diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx
index 6052b0f4fc8..ab5f8f2c8bc 100644
--- a/public/app/features/api-keys/ApiKeysPage.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.tsx
@@ -1,10 +1,10 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import { NavModel, ApiKey, NewApiKey, OrgRole } from 'app/types';
 import { getNavModel } from 'app/core/selectors/navModel';
-import { getApiKeys } from './state/selectors';
+import { getApiKeys, getApiKeysCount } from './state/selectors';
 import { loadApiKeys, deleteApiKey, setSearchQuery, addApiKey } from './state/actions';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
 import SlideDown from 'app/core/components/Animations/SlideDown';
@@ -12,6 +12,7 @@ import PageLoader from 'app/core/components/PageLoader/PageLoader';
 import ApiKeysAddedModal from './ApiKeysAddedModal';
 import config from 'app/core/config';
 import appEvents from 'app/core/app_events';
+import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 
 export interface Props {
   navModel: NavModel;
@@ -22,6 +23,7 @@ export interface Props {
   deleteApiKey: typeof deleteApiKey;
   setSearchQuery: typeof setSearchQuery;
   addApiKey: typeof addApiKey;
+  apiKeysCount: number;
 }
 
 export interface State {
@@ -101,115 +103,135 @@ export class ApiKeysPage extends PureComponent<Props, any> {
     });
   };
 
-  renderTable() {
-    const { apiKeys } = this.props;
+  renderEmptyList() {
+    return (
+      <div className="page-container page-body">
+        <EmptyListCTA
+          model={{
+            title: "You haven't added any API Keys yet.",
+            buttonIcon: 'fa fa-plus',
+            buttonLink: 'org/apikeys/new',
+            buttonTitle: ' New API Key',
+            proTip: 'Assign folder and dashboard permissions to teams instead of users to ease administration.',
+            proTipLink: '',
+            proTipLinkTitle: '',
+            proTipTarget: '_blank',
+          }}
+        />
+      </div>
+    );
+  }
 
-    return [
-      <h3 key="header" className="page-heading">
-        Existing Keys
-      </h3>,
-      <table key="table" className="filter-table">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Role</th>
-            <th style={{ width: '34px' }} />
-          </tr>
-        </thead>
-        {apiKeys.length > 0 && (
-          <tbody>
-            {apiKeys.map(key => {
-              return (
-                <tr key={key.id}>
-                  <td>{key.name}</td>
-                  <td>{key.role}</td>
-                  <td>
-                    <a onClick={() => this.onDeleteApiKey(key)} className="btn btn-danger btn-mini">
-                      <i className="fa fa-remove" />
-                    </a>
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        )}
-      </table>,
-    ];
+  renderApiKeyList() {
+    const { newApiKey, isAdding } = this.state;
+    const { apiKeys, searchQuery } = this.props;
+
+    return (
+      <div className="page-container page-body">
+        <div className="page-action-bar">
+          <div className="gf-form gf-form--grow">
+            <label className="gf-form--has-input-icon gf-form--grow">
+              <input
+                type="text"
+                className="gf-form-input"
+                placeholder="Search keys"
+                value={searchQuery}
+                onChange={this.onSearchQueryChange}
+              />
+              <i className="gf-form-input-icon fa fa-search" />
+            </label>
+          </div>
+
+          <div className="page-action-bar__spacer" />
+          <button className="btn btn-success pull-right" onClick={this.onToggleAdding} disabled={isAdding}>
+            <i className="fa fa-plus" /> Add API Key
+          </button>
+        </div>
+
+        <SlideDown in={isAdding}>
+          <div className="cta-form">
+            <button className="cta-form__close btn btn-transparent" onClick={this.onToggleAdding}>
+              <i className="fa fa-close" />
+            </button>
+            <h5>Add API Key</h5>
+            <form className="gf-form-group" onSubmit={this.onAddApiKey}>
+              <div className="gf-form-inline">
+                <div className="gf-form max-width-21">
+                  <span className="gf-form-label">Key name</span>
+                  <input
+                    type="text"
+                    className="gf-form-input"
+                    value={newApiKey.name}
+                    placeholder="Name"
+                    onChange={evt => this.onApiKeyStateUpdate(evt, ApiKeyStateProps.Name)}
+                  />
+                </div>
+                <div className="gf-form">
+                  <span className="gf-form-label">Role</span>
+                  <span className="gf-form-select-wrapper">
+                    <select
+                      className="gf-form-input gf-size-auto"
+                      value={newApiKey.role}
+                      onChange={evt => this.onApiKeyStateUpdate(evt, ApiKeyStateProps.Role)}
+                    >
+                      {Object.keys(OrgRole).map(role => {
+                        return (
+                          <option key={role} label={role} value={role}>
+                            {role}
+                          </option>
+                        );
+                      })}
+                    </select>
+                  </span>
+                </div>
+                <div className="gf-form">
+                  <button className="btn gf-form-btn btn-success">Add</button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </SlideDown>
+
+        <h3 className="page-heading">Existing Keys</h3>
+        <table className="filter-table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Role</th>
+              <th style={{ width: '34px' }} />
+            </tr>
+          </thead>
+          {apiKeys.length > 0 ? (
+            <tbody>
+              {apiKeys.map(key => {
+                return (
+                  <tr key={key.id}>
+                    <td>{key.name}</td>
+                    <td>{key.role}</td>
+                    <td>
+                      <a onClick={() => this.onDeleteApiKey(key)} className="btn btn-danger btn-mini">
+                        <i className="fa fa-remove" />
+                      </a>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          ) : null}
+        </table>
+      </div>
+    );
   }
 
   render() {
-    const { newApiKey, isAdding } = this.state;
-    const { hasFetched, navModel, searchQuery } = this.props;
+    const { hasFetched, navModel, apiKeysCount } = this.props;
 
     return (
       <div>
         <PageHeader model={navModel} />
-        <div className="page-container page-body">
-          <div className="page-action-bar">
-            <div className="gf-form gf-form--grow">
-              <label className="gf-form--has-input-icon gf-form--grow">
-                <input
-                  type="text"
-                  className="gf-form-input"
-                  placeholder="Search keys"
-                  value={searchQuery}
-                  onChange={this.onSearchQueryChange}
-                />
-                <i className="gf-form-input-icon fa fa-search" />
-              </label>
-            </div>
-
-            <div className="page-action-bar__spacer" />
-            <button className="btn btn-success pull-right" onClick={this.onToggleAdding} disabled={isAdding}>
-              <i className="fa fa-plus" /> Add API Key
-            </button>
-          </div>
-
-          <SlideDown in={isAdding}>
-            <div className="cta-form">
-              <button className="cta-form__close btn btn-transparent" onClick={this.onToggleAdding}>
-                <i className="fa fa-close" />
-              </button>
-              <h5>Add API Key</h5>
-              <form className="gf-form-group" onSubmit={this.onAddApiKey}>
-                <div className="gf-form-inline">
-                  <div className="gf-form max-width-21">
-                    <span className="gf-form-label">Key name</span>
-                    <input
-                      type="text"
-                      className="gf-form-input"
-                      value={newApiKey.name}
-                      placeholder="Name"
-                      onChange={evt => this.onApiKeyStateUpdate(evt, ApiKeyStateProps.Name)}
-                    />
-                  </div>
-                  <div className="gf-form">
-                    <span className="gf-form-label">Role</span>
-                    <span className="gf-form-select-wrapper">
-                      <select
-                        className="gf-form-input gf-size-auto"
-                        value={newApiKey.role}
-                        onChange={evt => this.onApiKeyStateUpdate(evt, ApiKeyStateProps.Role)}
-                      >
-                        {Object.keys(OrgRole).map(role => {
-                          return (
-                            <option key={role} label={role} value={role}>
-                              {role}
-                            </option>
-                          );
-                        })}
-                      </select>
-                    </span>
-                  </div>
-                  <div className="gf-form">
-                    <button className="btn gf-form-btn btn-success">Add</button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </SlideDown>
-          {hasFetched ? this.renderTable() : <PageLoader pageName="Api keys" />}
-        </div>
+        {hasFetched ?
+          (apiKeysCount > 0 ? this.renderApiKeyList() : this.renderEmptyList())
+        : <PageLoader pageName="Api keys" />}
       </div>
     );
   }
@@ -220,7 +242,8 @@ function mapStateToProps(state) {
     navModel: getNavModel(state.navIndex, 'apikeys'),
     apiKeys: getApiKeys(state.apiKeys),
     searchQuery: state.apiKeys.searchQuery,
-    hasFetched: state.apiKeys.hasFetched,
+    apiKeysCount: getApiKeysCount(state.apiKeys),
+    hasFetched: state.apiKeys.hasFetched
   };
 }
 

From f03fa364dfb8321396a69882184aa01998907762 Mon Sep 17 00:00:00 2001
From: Carlos Mondragon <cadragon@gmail.com>
Date: Wed, 10 Oct 2018 16:17:00 -0700
Subject: [PATCH 03/13] Update tests for ApiKeys CTA screen.

---
 .../features/api-keys/ApiKeysPage.test.tsx    |  18 ++-
 .../__snapshots__/ApiKeysPage.test.tsx.snap   | 147 ++----------------
 2 files changed, 27 insertions(+), 138 deletions(-)

diff --git a/public/app/features/api-keys/ApiKeysPage.test.tsx b/public/app/features/api-keys/ApiKeysPage.test.tsx
index 8bc6e9338fc..a6d0335b064 100644
--- a/public/app/features/api-keys/ApiKeysPage.test.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { shallow } from 'enzyme';
 import { Props, ApiKeysPage } from './ApiKeysPage';
 import { NavModel, ApiKey } from 'app/types';
@@ -14,6 +14,7 @@ const setup = (propOverrides?: object) => {
     deleteApiKey: jest.fn(),
     setSearchQuery: jest.fn(),
     addApiKey: jest.fn(),
+    apiKeysCount: 0,
   };
 
   Object.assign(props, propOverrides);
@@ -28,15 +29,20 @@ const setup = (propOverrides?: object) => {
 };
 
 describe('Render', () => {
-  it('should render component', () => {
-    const { wrapper } = setup();
+  it('should render API keys table if there are any keys', () => {
+    const { wrapper } = setup({
+      apiKeys: getMultipleMockKeys(5),
+      apiKeysCount: 5,
+    });
+
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should render API keys table', () => {
+  it('should render CTA if theres are no API keys', () => {
     const { wrapper } = setup({
-      apiKeys: getMultipleMockKeys(5),
-      hasFetched: true,
+      apiKeys: getMultipleMockKeys(0),
+      apiKeysCount: 0,
+	  hasFetched: true,
     });
 
     expect(wrapper).toMatchSnapshot();
diff --git a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
index b1cac8469be..923d0fec0e6 100644
--- a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
+++ b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Render should render API keys table 1`] = `
+exports[`Render should render API keys table if there are any keys 1`] = `
 <div>
   <PageHeader
     model={Object {}}
@@ -270,7 +270,7 @@ exports[`Render should render API keys table 1`] = `
 </div>
 `;
 
-exports[`Render should render component 1`] = `
+exports[`Render should render CTA if theres are no API keys 1`] = `
 <div>
   <PageHeader
     model={Object {}}
@@ -278,136 +278,19 @@ exports[`Render should render component 1`] = `
   <div
     className="page-container page-body"
   >
-    <div
-      className="page-action-bar"
-    >
-      <div
-        className="gf-form gf-form--grow"
-      >
-        <label
-          className="gf-form--has-input-icon gf-form--grow"
-        >
-          <input
-            className="gf-form-input"
-            onChange={[Function]}
-            placeholder="Search keys"
-            type="text"
-            value=""
-          />
-          <i
-            className="gf-form-input-icon fa fa-search"
-          />
-        </label>
-      </div>
-      <div
-        className="page-action-bar__spacer"
-      />
-      <button
-        className="btn btn-success pull-right"
-        disabled={false}
-        onClick={[Function]}
-      >
-        <i
-          className="fa fa-plus"
-        />
-         Add API Key
-      </button>
-    </div>
-    <Component
-      in={false}
-    >
-      <div
-        className="cta-form"
-      >
-        <button
-          className="cta-form__close btn btn-transparent"
-          onClick={[Function]}
-        >
-          <i
-            className="fa fa-close"
-          />
-        </button>
-        <h5>
-          Add API Key
-        </h5>
-        <form
-          className="gf-form-group"
-          onSubmit={[Function]}
-        >
-          <div
-            className="gf-form-inline"
-          >
-            <div
-              className="gf-form max-width-21"
-            >
-              <span
-                className="gf-form-label"
-              >
-                Key name
-              </span>
-              <input
-                className="gf-form-input"
-                onChange={[Function]}
-                placeholder="Name"
-                type="text"
-                value=""
-              />
-            </div>
-            <div
-              className="gf-form"
-            >
-              <span
-                className="gf-form-label"
-              >
-                Role
-              </span>
-              <span
-                className="gf-form-select-wrapper"
-              >
-                <select
-                  className="gf-form-input gf-size-auto"
-                  onChange={[Function]}
-                  value="Viewer"
-                >
-                  <option
-                    key="Viewer"
-                    label="Viewer"
-                    value="Viewer"
-                  >
-                    Viewer
-                  </option>
-                  <option
-                    key="Editor"
-                    label="Editor"
-                    value="Editor"
-                  >
-                    Editor
-                  </option>
-                  <option
-                    key="Admin"
-                    label="Admin"
-                    value="Admin"
-                  >
-                    Admin
-                  </option>
-                </select>
-              </span>
-            </div>
-            <div
-              className="gf-form"
-            >
-              <button
-                className="btn gf-form-btn btn-success"
-              >
-                Add
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-    </Component>
-    <PageLoader
-      pageName="Api keys"
+    <EmptyListCTA
+      model={
+        Object {
+          "buttonIcon": "fa fa-plus",
+          "buttonLink": "org/apikeys/new",
+          "buttonTitle": " New API Key",
+          "proTip": "Assign folder and dashboard permissions to teams instead of users to ease administration.",
+          "proTipLink": "",
+          "proTipLinkTitle": "",
+          "proTipTarget": "_blank",
+          "title": "You haven't added any API Keys yet.",
+        }
+      }
     />
   </div>
 </div>

From 081cb7a6957747af8588acd373de133fb8270eba Mon Sep 17 00:00:00 2001
From: Carlos Mondragon <cadragon@gmail.com>
Date: Wed, 10 Oct 2018 16:21:47 -0700
Subject: [PATCH 04/13] Updated protip, not sure what to write there.

---
 public/app/features/api-keys/ApiKeysPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx
index ab5f8f2c8bc..1430da03e50 100644
--- a/public/app/features/api-keys/ApiKeysPage.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.tsx
@@ -112,7 +112,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
             buttonIcon: 'fa fa-plus',
             buttonLink: 'org/apikeys/new',
             buttonTitle: ' New API Key',
-            proTip: 'Assign folder and dashboard permissions to teams instead of users to ease administration.',
+            proTip: 'Remember you can provide view-only API access to other applications.',
             proTipLink: '',
             proTipLinkTitle: '',
             proTipTarget: '_blank',

From af985743d23a7d09bd5eeff5e1e82b525ce20714 Mon Sep 17 00:00:00 2001
From: Carlos Mondragon <cadragon@gmail.com>
Date: Wed, 10 Oct 2018 16:22:32 -0700
Subject: [PATCH 05/13] Updated tests for new protip.

---
 .../features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
index 923d0fec0e6..2d597244a02 100644
--- a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
+++ b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
@@ -284,7 +284,7 @@ exports[`Render should render CTA if theres are no API keys 1`] = `
           "buttonIcon": "fa fa-plus",
           "buttonLink": "org/apikeys/new",
           "buttonTitle": " New API Key",
-          "proTip": "Assign folder and dashboard permissions to teams instead of users to ease administration.",
+          "proTip": "Remember you can provide view-only API access to other applications.",
           "proTipLink": "",
           "proTipLinkTitle": "",
           "proTipTarget": "_blank",

From 0937335f1446ca367b9d1d9f7efbd5ca46a6be95 Mon Sep 17 00:00:00 2001
From: Carlos Mondragon <cadragon@gmail.com>
Date: Wed, 10 Oct 2018 17:07:05 -0700
Subject: [PATCH 06/13] Add onClick handler to CTA.

---
 public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx  | 1 +
 public/app/core/components/EmptyListCTA/EmptyListCTA.tsx       | 3 ++-
 .../EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap      | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx
index 4af60f3c839..ff92dc0d5c7 100644
--- a/public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx
+++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx
@@ -7,6 +7,7 @@ const model = {
   buttonIcon: 'ga css class',
   buttonLink: 'http://url/to/destination',
   buttonTitle: 'Click me',
+  onClick: 'handler',
   proTip: 'This is a tip',
   proTipLink: 'http://url/to/tip/destination',
   proTipLinkTitle: 'Learn more',
diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
index 5ece360e36a..ae0e39cc26d 100644
--- a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
+++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
@@ -11,6 +11,7 @@ class EmptyListCTA extends Component<Props, any> {
       buttonIcon,
       buttonLink,
       buttonTitle,
+      onClick,
       proTip,
       proTipLink,
       proTipLinkTitle,
@@ -19,7 +20,7 @@ class EmptyListCTA extends Component<Props, any> {
     return (
       <div className="empty-list-cta">
         <div className="empty-list-cta__title">{title}</div>
-        <a href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success">
+        <a onClick={onClick} href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success">
           <i className={buttonIcon} />
           {buttonTitle}
         </a>
diff --git a/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap b/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap
index 6d47c984d5e..fc76544b112 100644
--- a/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap
+++ b/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`EmptyListCTA renders correctly 1`] = `
   <a
     className="empty-list-cta__button btn btn-xlarge btn-success"
     href="http://url/to/destination"
+    onClick="handler"
   >
     <i
       className="ga css class"

From 5f5840b24c87d3526d6d4d029c589eb417238bdd Mon Sep 17 00:00:00 2001
From: Carlos Mondragon <cadragon@gmail.com>
Date: Wed, 10 Oct 2018 17:18:43 -0700
Subject: [PATCH 07/13] Add form to both the CTA page and the regular list.

---
 public/app/features/api-keys/ApiKeysPage.tsx  | 100 ++++++++++--------
 .../__snapshots__/ApiKeysPage.test.tsx.snap   |  96 ++++++++++++++++-
 2 files changed, 150 insertions(+), 46 deletions(-)

diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx
index 1430da03e50..d6c83c2a566 100644
--- a/public/app/features/api-keys/ApiKeysPage.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.tsx
@@ -110,7 +110,8 @@ export class ApiKeysPage extends PureComponent<Props, any> {
           model={{
             title: "You haven't added any API Keys yet.",
             buttonIcon: 'fa fa-plus',
-            buttonLink: 'org/apikeys/new',
+            buttonLink: '#',
+            onClick: this.onToggleAdding,
             buttonTitle: ' New API Key',
             proTip: 'Remember you can provide view-only API access to other applications.',
             proTipLink: '',
@@ -118,12 +119,63 @@ export class ApiKeysPage extends PureComponent<Props, any> {
             proTipTarget: '_blank',
           }}
         />
+        {this.renderAddApiKeyForm()}
       </div>
     );
   }
 
-  renderApiKeyList() {
+  renderAddApiKeyForm() {
     const { newApiKey, isAdding } = this.state;
+
+    return (
+      <SlideDown in={isAdding}>
+        <div className="cta-form">
+          <button className="cta-form__close btn btn-transparent" onClick={this.onToggleAdding}>
+            <i className="fa fa-close" />
+          </button>
+          <h5>Add API Key</h5>
+          <form className="gf-form-group" onSubmit={this.onAddApiKey}>
+            <div className="gf-form-inline">
+              <div className="gf-form max-width-21">
+                <span className="gf-form-label">Key name</span>
+                <input
+                  type="text"
+                  className="gf-form-input"
+                  value={newApiKey.name}
+                  placeholder="Name"
+                  onChange={evt => this.onApiKeyStateUpdate(evt, ApiKeyStateProps.Name)}
+                />
+              </div>
+              <div className="gf-form">
+                <span className="gf-form-label">Role</span>
+                <span className="gf-form-select-wrapper">
+                  <select
+                    className="gf-form-input gf-size-auto"
+                    value={newApiKey.role}
+                    onChange={evt => this.onApiKeyStateUpdate(evt, ApiKeyStateProps.Role)}
+                  >
+                    {Object.keys(OrgRole).map(role => {
+                      return (
+                        <option key={role} label={role} value={role}>
+                          {role}
+                        </option>
+                      );
+                    })}
+                  </select>
+                </span>
+              </div>
+              <div className="gf-form">
+                <button className="btn gf-form-btn btn-success">Add</button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </SlideDown>
+    );
+  }
+
+  renderApiKeyList() {
+    const { isAdding } = this.state;
     const { apiKeys, searchQuery } = this.props;
 
     return (
@@ -148,49 +200,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
           </button>
         </div>
 
-        <SlideDown in={isAdding}>
-          <div className="cta-form">
-            <button className="cta-form__close btn btn-transparent" onClick={this.onToggleAdding}>
-              <i className="fa fa-close" />
-            </button>
-            <h5>Add API Key</h5>
-            <form className="gf-form-group" onSubmit={this.onAddApiKey}>
-              <div className="gf-form-inline">
-                <div className="gf-form max-width-21">
-                  <span className="gf-form-label">Key name</span>
-                  <input
-                    type="text"
-                    className="gf-form-input"
-                    value={newApiKey.name}
-                    placeholder="Name"
-                    onChange={evt => this.onApiKeyStateUpdate(evt, ApiKeyStateProps.Name)}
-                  />
-                </div>
-                <div className="gf-form">
-                  <span className="gf-form-label">Role</span>
-                  <span className="gf-form-select-wrapper">
-                    <select
-                      className="gf-form-input gf-size-auto"
-                      value={newApiKey.role}
-                      onChange={evt => this.onApiKeyStateUpdate(evt, ApiKeyStateProps.Role)}
-                    >
-                      {Object.keys(OrgRole).map(role => {
-                        return (
-                          <option key={role} label={role} value={role}>
-                            {role}
-                          </option>
-                        );
-                      })}
-                    </select>
-                  </span>
-                </div>
-                <div className="gf-form">
-                  <button className="btn gf-form-btn btn-success">Add</button>
-                </div>
-              </div>
-            </form>
-          </div>
-        </SlideDown>
+        {this.renderAddApiKeyForm()}
 
         <h3 className="page-heading">Existing Keys</h3>
         <table className="filter-table">
diff --git a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
index 2d597244a02..fcd22a14479 100644
--- a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
+++ b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
@@ -282,8 +282,9 @@ exports[`Render should render CTA if theres are no API keys 1`] = `
       model={
         Object {
           "buttonIcon": "fa fa-plus",
-          "buttonLink": "org/apikeys/new",
+          "buttonLink": "#",
           "buttonTitle": " New API Key",
+          "onClick": [Function],
           "proTip": "Remember you can provide view-only API access to other applications.",
           "proTipLink": "",
           "proTipLinkTitle": "",
@@ -292,6 +293,99 @@ exports[`Render should render CTA if theres are no API keys 1`] = `
         }
       }
     />
+    <Component
+      in={false}
+    >
+      <div
+        className="cta-form"
+      >
+        <button
+          className="cta-form__close btn btn-transparent"
+          onClick={[Function]}
+        >
+          <i
+            className="fa fa-close"
+          />
+        </button>
+        <h5>
+          Add API Key
+        </h5>
+        <form
+          className="gf-form-group"
+          onSubmit={[Function]}
+        >
+          <div
+            className="gf-form-inline"
+          >
+            <div
+              className="gf-form max-width-21"
+            >
+              <span
+                className="gf-form-label"
+              >
+                Key name
+              </span>
+              <input
+                className="gf-form-input"
+                onChange={[Function]}
+                placeholder="Name"
+                type="text"
+                value=""
+              />
+            </div>
+            <div
+              className="gf-form"
+            >
+              <span
+                className="gf-form-label"
+              >
+                Role
+              </span>
+              <span
+                className="gf-form-select-wrapper"
+              >
+                <select
+                  className="gf-form-input gf-size-auto"
+                  onChange={[Function]}
+                  value="Viewer"
+                >
+                  <option
+                    key="Viewer"
+                    label="Viewer"
+                    value="Viewer"
+                  >
+                    Viewer
+                  </option>
+                  <option
+                    key="Editor"
+                    label="Editor"
+                    value="Editor"
+                  >
+                    Editor
+                  </option>
+                  <option
+                    key="Admin"
+                    label="Admin"
+                    value="Admin"
+                  >
+                    Admin
+                  </option>
+                </select>
+              </span>
+            </div>
+            <div
+              className="gf-form"
+            >
+              <button
+                className="btn gf-form-btn btn-success"
+              >
+                Add
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </Component>
   </div>
 </div>
 `;

From b12170010371a9c3e642ba7dae04357f3894a870 Mon Sep 17 00:00:00 2001
From: Carlos Mondragon <cadragon@gmail.com>
Date: Wed, 10 Oct 2018 17:22:48 -0700
Subject: [PATCH 08/13] Add fancy delete button for ApiKeys.

---
 public/app/features/api-keys/ApiKeysPage.tsx  |  5 +-
 .../__snapshots__/ApiKeysPage.test.tsx.snap   | 55 +++++--------------
 2 files changed, 17 insertions(+), 43 deletions(-)

diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx
index d6c83c2a566..bd22d850f6d 100644
--- a/public/app/features/api-keys/ApiKeysPage.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.tsx
@@ -13,6 +13,7 @@ import ApiKeysAddedModal from './ApiKeysAddedModal';
 import config from 'app/core/config';
 import appEvents from 'app/core/app_events';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
+import DeleteButton from 'app/core/components/DeleteButton/DeleteButton';
 
 export interface Props {
   navModel: NavModel;
@@ -219,9 +220,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
                     <td>{key.name}</td>
                     <td>{key.role}</td>
                     <td>
-                      <a onClick={() => this.onDeleteApiKey(key)} className="btn btn-danger btn-mini">
-                        <i className="fa fa-remove" />
-                      </a>
+                      <DeleteButton onConfirmDelete={() => this.onDeleteApiKey(key)} />
                     </td>
                   </tr>
                 );
diff --git a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
index fcd22a14479..6ea7fe57124 100644
--- a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
+++ b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
@@ -174,14 +174,9 @@ exports[`Render should render API keys table if there are any keys 1`] = `
             Viewer
           </td>
           <td>
-            <a
-              className="btn btn-danger btn-mini"
-              onClick={[Function]}
-            >
-              <i
-                className="fa fa-remove"
-              />
-            </a>
+            <DeleteButton
+              onConfirmDelete={[Function]}
+            />
           </td>
         </tr>
         <tr
@@ -194,14 +189,9 @@ exports[`Render should render API keys table if there are any keys 1`] = `
             Viewer
           </td>
           <td>
-            <a
-              className="btn btn-danger btn-mini"
-              onClick={[Function]}
-            >
-              <i
-                className="fa fa-remove"
-              />
-            </a>
+            <DeleteButton
+              onConfirmDelete={[Function]}
+            />
           </td>
         </tr>
         <tr
@@ -214,14 +204,9 @@ exports[`Render should render API keys table if there are any keys 1`] = `
             Viewer
           </td>
           <td>
-            <a
-              className="btn btn-danger btn-mini"
-              onClick={[Function]}
-            >
-              <i
-                className="fa fa-remove"
-              />
-            </a>
+            <DeleteButton
+              onConfirmDelete={[Function]}
+            />
           </td>
         </tr>
         <tr
@@ -234,14 +219,9 @@ exports[`Render should render API keys table if there are any keys 1`] = `
             Viewer
           </td>
           <td>
-            <a
-              className="btn btn-danger btn-mini"
-              onClick={[Function]}
-            >
-              <i
-                className="fa fa-remove"
-              />
-            </a>
+            <DeleteButton
+              onConfirmDelete={[Function]}
+            />
           </td>
         </tr>
         <tr
@@ -254,14 +234,9 @@ exports[`Render should render API keys table if there are any keys 1`] = `
             Viewer
           </td>
           <td>
-            <a
-              className="btn btn-danger btn-mini"
-              onClick={[Function]}
-            >
-              <i
-                className="fa fa-remove"
-              />
-            </a>
+            <DeleteButton
+              onConfirmDelete={[Function]}
+            />
           </td>
         </tr>
       </tbody>

From dc9e822cc7b95d7e6c4a109cd44fe5e3bd645ff4 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Thu, 11 Oct 2018 11:56:32 +0200
Subject: [PATCH 09/13] Remove CTA when CTA-action is clicked instead of a /new
 route #13471

---
 .../core/components/Animations/SlideDown.tsx  | 11 ++++--
 .../features/api-keys/ApiKeysPage.test.tsx    |  2 +-
 public/app/features/api-keys/ApiKeysPage.tsx  | 34 +++++++++++--------
 .../__snapshots__/ApiKeysPage.test.tsx.snap   | 14 +++++++-
 4 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/public/app/core/components/Animations/SlideDown.tsx b/public/app/core/components/Animations/SlideDown.tsx
index 4d515f98f16..497af02ade9 100644
--- a/public/app/core/components/Animations/SlideDown.tsx
+++ b/public/app/core/components/Animations/SlideDown.tsx
@@ -1,15 +1,20 @@
 import React from 'react';
 import Transition from 'react-transition-group/Transition';
 
+interface Style {
+  transition?: string;
+  overflow?: string;
+}
+
 const defaultMaxHeight = '200px'; // When animating using max-height we need to use a static value.
 // If this is not enough, pass in <SlideDown maxHeight="....
 const defaultDuration = 200;
-const defaultStyle = {
+export const defaultStyle: Style = {
   transition: `max-height ${defaultDuration}ms ease-in-out`,
   overflow: 'hidden',
 };
 
-export default ({ children, in: inProp, maxHeight = defaultMaxHeight }) => {
+export default ({ children, in: inProp, maxHeight = defaultMaxHeight, style = defaultStyle }) => {
   // There are 4 main states a Transition can be in:
   // ENTERING, ENTERED, EXITING, EXITED
   // https://reactcommunity.org/react-transition-group/
@@ -25,7 +30,7 @@ export default ({ children, in: inProp, maxHeight = defaultMaxHeight }) => {
       {state => (
         <div
           style={{
-            ...defaultStyle,
+            ...style,
             ...transitionStyles[state],
           }}
         >
diff --git a/public/app/features/api-keys/ApiKeysPage.test.tsx b/public/app/features/api-keys/ApiKeysPage.test.tsx
index a6d0335b064..42912fc9d96 100644
--- a/public/app/features/api-keys/ApiKeysPage.test.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.test.tsx
@@ -38,7 +38,7 @@ describe('Render', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should render CTA if theres are no API keys', () => {
+  it('should render CTA if there are no API keys', () => {
     const { wrapper } = setup({
       apiKeys: getMultipleMockKeys(0),
       apiKeysCount: 0,
diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx
index bd22d850f6d..86937e47d00 100644
--- a/public/app/features/api-keys/ApiKeysPage.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.tsx
@@ -7,8 +7,8 @@ import { getNavModel } from 'app/core/selectors/navModel';
 import { getApiKeys, getApiKeysCount } from './state/selectors';
 import { loadApiKeys, deleteApiKey, setSearchQuery, addApiKey } from './state/actions';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
-import SlideDown from 'app/core/components/Animations/SlideDown';
 import PageLoader from 'app/core/components/PageLoader/PageLoader';
+import SlideDown, { defaultStyle as slideDownDefaultStyle } from 'app/core/components/Animations/SlideDown';
 import ApiKeysAddedModal from './ApiKeysAddedModal';
 import config from 'app/core/config';
 import appEvents from 'app/core/app_events';
@@ -105,21 +105,24 @@ export class ApiKeysPage extends PureComponent<Props, any> {
   };
 
   renderEmptyList() {
+    const { isAdding } = this.state;
     return (
       <div className="page-container page-body">
-        <EmptyListCTA
-          model={{
-            title: "You haven't added any API Keys yet.",
-            buttonIcon: 'fa fa-plus',
-            buttonLink: '#',
-            onClick: this.onToggleAdding,
-            buttonTitle: ' New API Key',
-            proTip: 'Remember you can provide view-only API access to other applications.',
-            proTipLink: '',
-            proTipLinkTitle: '',
-            proTipTarget: '_blank',
-          }}
-        />
+        {!isAdding && (
+          <EmptyListCTA
+            model={{
+              title: "You haven't added any API Keys yet.",
+              buttonIcon: 'fa fa-plus',
+              buttonLink: '#',
+              onClick: this.onToggleAdding,
+              buttonTitle: ' New API Key',
+              proTip: 'Remember you can provide view-only API access to other applications.',
+              proTipLink: '',
+              proTipLinkTitle: '',
+              proTipTarget: '_blank',
+            }}
+          />
+        )}
         {this.renderAddApiKeyForm()}
       </div>
     );
@@ -127,9 +130,10 @@ export class ApiKeysPage extends PureComponent<Props, any> {
 
   renderAddApiKeyForm() {
     const { newApiKey, isAdding } = this.state;
+    const slideDownStyle = isAdding ? slideDownDefaultStyle : { ...slideDownDefaultStyle, transition: 'unset' };
 
     return (
-      <SlideDown in={isAdding}>
+      <SlideDown in={isAdding} style={slideDownStyle}>
         <div className="cta-form">
           <button className="cta-form__close btn btn-transparent" onClick={this.onToggleAdding}>
             <i className="fa fa-close" />
diff --git a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
index 6ea7fe57124..375ed788e27 100644
--- a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
+++ b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
@@ -45,6 +45,12 @@ exports[`Render should render API keys table if there are any keys 1`] = `
     </div>
     <Component
       in={false}
+      style={
+        Object {
+          "overflow": "hidden",
+          "transition": "unset",
+        }
+      }
     >
       <div
         className="cta-form"
@@ -245,7 +251,7 @@ exports[`Render should render API keys table if there are any keys 1`] = `
 </div>
 `;
 
-exports[`Render should render CTA if theres are no API keys 1`] = `
+exports[`Render should render CTA if there are no API keys 1`] = `
 <div>
   <PageHeader
     model={Object {}}
@@ -270,6 +276,12 @@ exports[`Render should render CTA if theres are no API keys 1`] = `
     />
     <Component
       in={false}
+      style={
+        Object {
+          "overflow": "hidden",
+          "transition": "unset",
+        }
+      }
     >
       <div
         className="cta-form"

From 27872840338f4f6d7054f69a5edc75abb549e869 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Thu, 11 Oct 2018 14:01:13 +0200
Subject: [PATCH 10/13] Update snapshots after merge

---
 .../features/api-keys/ApiKeysPage.test.tsx    |   2 +-
 .../__snapshots__/ApiKeysPage.test.tsx.snap   | 246 +-----------------
 2 files changed, 4 insertions(+), 244 deletions(-)

diff --git a/public/app/features/api-keys/ApiKeysPage.test.tsx b/public/app/features/api-keys/ApiKeysPage.test.tsx
index 42912fc9d96..54200234ddc 100644
--- a/public/app/features/api-keys/ApiKeysPage.test.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.test.tsx
@@ -42,7 +42,7 @@ describe('Render', () => {
     const { wrapper } = setup({
       apiKeys: getMultipleMockKeys(0),
       apiKeysCount: 0,
-	  hasFetched: true,
+      hasFetched: true,
     });
 
     expect(wrapper).toMatchSnapshot();
diff --git a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
index 375ed788e27..63b92a16ee0 100644
--- a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
+++ b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
@@ -5,249 +5,9 @@ exports[`Render should render API keys table if there are any keys 1`] = `
   <PageHeader
     model={Object {}}
   />
-  <div
-    className="page-container page-body"
-  >
-    <div
-      className="page-action-bar"
-    >
-      <div
-        className="gf-form gf-form--grow"
-      >
-        <label
-          className="gf-form--has-input-icon gf-form--grow"
-        >
-          <input
-            className="gf-form-input"
-            onChange={[Function]}
-            placeholder="Search keys"
-            type="text"
-            value=""
-          />
-          <i
-            className="gf-form-input-icon fa fa-search"
-          />
-        </label>
-      </div>
-      <div
-        className="page-action-bar__spacer"
-      />
-      <button
-        className="btn btn-success pull-right"
-        disabled={false}
-        onClick={[Function]}
-      >
-        <i
-          className="fa fa-plus"
-        />
-         Add API Key
-      </button>
-    </div>
-    <Component
-      in={false}
-      style={
-        Object {
-          "overflow": "hidden",
-          "transition": "unset",
-        }
-      }
-    >
-      <div
-        className="cta-form"
-      >
-        <button
-          className="cta-form__close btn btn-transparent"
-          onClick={[Function]}
-        >
-          <i
-            className="fa fa-close"
-          />
-        </button>
-        <h5>
-          Add API Key
-        </h5>
-        <form
-          className="gf-form-group"
-          onSubmit={[Function]}
-        >
-          <div
-            className="gf-form-inline"
-          >
-            <div
-              className="gf-form max-width-21"
-            >
-              <span
-                className="gf-form-label"
-              >
-                Key name
-              </span>
-              <input
-                className="gf-form-input"
-                onChange={[Function]}
-                placeholder="Name"
-                type="text"
-                value=""
-              />
-            </div>
-            <div
-              className="gf-form"
-            >
-              <span
-                className="gf-form-label"
-              >
-                Role
-              </span>
-              <span
-                className="gf-form-select-wrapper"
-              >
-                <select
-                  className="gf-form-input gf-size-auto"
-                  onChange={[Function]}
-                  value="Viewer"
-                >
-                  <option
-                    key="Viewer"
-                    label="Viewer"
-                    value="Viewer"
-                  >
-                    Viewer
-                  </option>
-                  <option
-                    key="Editor"
-                    label="Editor"
-                    value="Editor"
-                  >
-                    Editor
-                  </option>
-                  <option
-                    key="Admin"
-                    label="Admin"
-                    value="Admin"
-                  >
-                    Admin
-                  </option>
-                </select>
-              </span>
-            </div>
-            <div
-              className="gf-form"
-            >
-              <button
-                className="btn gf-form-btn btn-success"
-              >
-                Add
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-    </Component>
-    <h3
-      className="page-heading"
-      key="header"
-    >
-      Existing Keys
-    </h3>
-    <table
-      className="filter-table"
-      key="table"
-    >
-      <thead>
-        <tr>
-          <th>
-            Name
-          </th>
-          <th>
-            Role
-          </th>
-          <th
-            style={
-              Object {
-                "width": "34px",
-              }
-            }
-          />
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          key="1"
-        >
-          <td>
-            test-1
-          </td>
-          <td>
-            Viewer
-          </td>
-          <td>
-            <DeleteButton
-              onConfirmDelete={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="2"
-        >
-          <td>
-            test-2
-          </td>
-          <td>
-            Viewer
-          </td>
-          <td>
-            <DeleteButton
-              onConfirmDelete={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="3"
-        >
-          <td>
-            test-3
-          </td>
-          <td>
-            Viewer
-          </td>
-          <td>
-            <DeleteButton
-              onConfirmDelete={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="4"
-        >
-          <td>
-            test-4
-          </td>
-          <td>
-            Viewer
-          </td>
-          <td>
-            <DeleteButton
-              onConfirmDelete={[Function]}
-            />
-          </td>
-        </tr>
-        <tr
-          key="5"
-        >
-          <td>
-            test-5
-          </td>
-          <td>
-            Viewer
-          </td>
-          <td>
-            <DeleteButton
-              onConfirmDelete={[Function]}
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+  <PageLoader
+    pageName="Api keys"
+  />
 </div>
 `;
 

From bb227d5c3a2f2288c74640323ea14b5ce516fc99 Mon Sep 17 00:00:00 2001
From: Carlos Mondragon <cadragon@gmail.com>
Date: Fri, 26 Oct 2018 10:12:27 -0700
Subject: [PATCH 11/13] Use jest.fn instead of string.

---
 public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx
index ff92dc0d5c7..21700bb4d03 100644
--- a/public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx
+++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx
@@ -7,7 +7,7 @@ const model = {
   buttonIcon: 'ga css class',
   buttonLink: 'http://url/to/destination',
   buttonTitle: 'Click me',
-  onClick: 'handler',
+  onClick: jest.fn(),
   proTip: 'This is a tip',
   proTipLink: 'http://url/to/tip/destination',
   proTipLinkTitle: 'Learn more',

From 35688b223a2ae0ef09e04c0091d6c8c3171ff29c Mon Sep 17 00:00:00 2001
From: Carlos Mondragon <cadragon@gmail.com>
Date: Fri, 26 Oct 2018 10:20:03 -0700
Subject: [PATCH 12/13] Update snapshots.

---
 .../EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap b/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap
index fc76544b112..b85660bcc6f 100644
--- a/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap
+++ b/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`EmptyListCTA renders correctly 1`] = `
   <a
     className="empty-list-cta__button btn btn-xlarge btn-success"
     href="http://url/to/destination"
-    onClick="handler"
+    onClick={[MockFunction]}
   >
     <i
       className="ga css class"

From 95a8a59845a66c7c6cf0451a3f7772640438e680 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 31 Oct 2018 12:50:44 +0100
Subject: [PATCH 13/13] restored transition

---
 .../core/components/Animations/SlideDown.tsx  |  6 ++++--
 public/app/features/api-keys/ApiKeysPage.tsx  | 20 ++++++++++++-------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/public/app/core/components/Animations/SlideDown.tsx b/public/app/core/components/Animations/SlideDown.tsx
index 497af02ade9..70dacd73849 100644
--- a/public/app/core/components/Animations/SlideDown.tsx
+++ b/public/app/core/components/Animations/SlideDown.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import Transition from 'react-transition-group/Transition';
 
 interface Style {
@@ -6,9 +6,11 @@ interface Style {
   overflow?: string;
 }
 
-const defaultMaxHeight = '200px'; // When animating using max-height we need to use a static value.
+// When animating using max-height we need to use a static value.
 // If this is not enough, pass in <SlideDown maxHeight="....
+const defaultMaxHeight = '200px';
 const defaultDuration = 200;
+
 export const defaultStyle: Style = {
   transition: `max-height ${defaultDuration}ms ease-in-out`,
   overflow: 'hidden',
diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx
index 86937e47d00..d2aa1f24c57 100644
--- a/public/app/features/api-keys/ApiKeysPage.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.tsx
@@ -8,7 +8,7 @@ import { getApiKeys, getApiKeysCount } from './state/selectors';
 import { loadApiKeys, deleteApiKey, setSearchQuery, addApiKey } from './state/actions';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
 import PageLoader from 'app/core/components/PageLoader/PageLoader';
-import SlideDown, { defaultStyle as slideDownDefaultStyle } from 'app/core/components/Animations/SlideDown';
+import SlideDown from 'app/core/components/Animations/SlideDown';
 import ApiKeysAddedModal from './ApiKeysAddedModal';
 import config from 'app/core/config';
 import appEvents from 'app/core/app_events';
@@ -85,6 +85,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
       return {
         ...prevState,
         newApiKey: initialApiKeyState,
+        isAdding: false,
       };
     });
   };
@@ -130,10 +131,9 @@ export class ApiKeysPage extends PureComponent<Props, any> {
 
   renderAddApiKeyForm() {
     const { newApiKey, isAdding } = this.state;
-    const slideDownStyle = isAdding ? slideDownDefaultStyle : { ...slideDownDefaultStyle, transition: 'unset' };
 
     return (
-      <SlideDown in={isAdding} style={slideDownStyle}>
+      <SlideDown in={isAdding}>
         <div className="cta-form">
           <button className="cta-form__close btn btn-transparent" onClick={this.onToggleAdding}>
             <i className="fa fa-close" />
@@ -242,9 +242,15 @@ export class ApiKeysPage extends PureComponent<Props, any> {
     return (
       <div>
         <PageHeader model={navModel} />
-        {hasFetched ?
-          (apiKeysCount > 0 ? this.renderApiKeyList() : this.renderEmptyList())
-        : <PageLoader pageName="Api keys" />}
+        {hasFetched ? (
+          apiKeysCount > 0 ? (
+            this.renderApiKeyList()
+          ) : (
+            this.renderEmptyList()
+          )
+        ) : (
+          <PageLoader pageName="Api keys" />
+        )}
       </div>
     );
   }
@@ -256,7 +262,7 @@ function mapStateToProps(state) {
     apiKeys: getApiKeys(state.apiKeys),
     searchQuery: state.apiKeys.searchQuery,
     apiKeysCount: getApiKeysCount(state.apiKeys),
-    hasFetched: state.apiKeys.hasFetched
+    hasFetched: state.apiKeys.hasFetched,
   };
 }