Add form to both the CTA page and the regular list.

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">

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>
 `;