Open modal with API key information after key is added #13411

public/app/features/api-keys/ApiKeysAddedModal.test.tsx

+import React from 'react';
+import { shallow } from 'enzyme';
+import { ApiKeysAddedModal, Props } from './ApiKeysAddedModal';
+
+const setup = (propOverrides?: object) => {
+  const props: Props = {
+    apiKey: 'api key test',
+    rootPath: 'test/path',
+  };
+
+  Object.assign(props, propOverrides);
+
+  const wrapper = shallow(<ApiKeysAddedModal {...props} />);
+
+  return {
+    wrapper,
+  };
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const { wrapper } = setup();
+    expect(wrapper).toMatchSnapshot();
+  });
+});

public/app/features/api-keys/ApiKeysAddedModal.tsx

+import React from 'react';
+
+export interface Props {
+  apiKey: string;
+  rootPath: string;
+}
+
+export const ApiKeysAddedModal = (props: Props) => {
+  return (
+    <div className="modal-body">
+      <div className="modal-header">
+        <h2 className="modal-header-title">
+          <i className="fa fa-key" />
+          <span className="p-l-1">API Key Created</span>
+        </h2>
+
+        <a className="modal-header-close" ng-click="dismiss();">
+          <i className="fa fa-remove" />
+        </a>
+      </div>
+
+      <div className="modal-content">
+        <div className="gf-form-group">
+          <div className="gf-form">
+            <span className="gf-form-label">Key</span>
+            <span className="gf-form-label">{props.apiKey}</span>
+          </div>
+        </div>
+
+        <div className="grafana-info-box" style={{ border: 0 }}>
+          You will only be able to view this key here once! It is not stored in this form. So be sure to copy it now.
+          <br />
+          <br />
+          You can authenticate request using the Authorization HTTP header, example:
+          <br />
+          <br />
+          <pre className="small">
+            curl -H "Authorization: Bearer {props.apiKey}" {props.rootPath}/api/dashboards/home
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ApiKeysAddedModal;

public/app/features/api-keys/ApiKeysPage.tsx

 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 { loadApiKeys, deleteApiKey, setSearchQuery, addApiKey } from './state/actions';
-// import { getSearchQuery, getTeams, getTeamsCount } from './state/selectors';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
 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';
 
 export interface Props {
   navModel: NavModel;
@@ -62,7 +65,17 @@ export class ApiKeysPage extends PureComponent<Props, any> {
 
   onAddApiKey = async evt => {
     evt.preventDefault();
-    this.props.addApiKey(this.state.newApiKey);
+
+    const openModal = (apiKey: string) => {
+      const rootPath = window.location.origin + config.appSubUrl;
+      const modalTemplate = ReactDOMServer.renderToString(<ApiKeysAddedModal apiKey={apiKey} rootPath={rootPath} />);
+
+      appEvents.emit('show-modal', {
+        templateHtml: modalTemplate,
+      });
+    };
+
+    this.props.addApiKey(this.state.newApiKey, openModal);
     this.setState((prevState: State) => {
       return {
         ...prevState,

public/app/features/api-keys/__snapshots__/ApiKeysAddedModal.test.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<div
+  className="modal-body"
+>
+  <div
+    className="modal-header"
+  >
+    <h2
+      className="modal-header-title"
+    >
+      <i
+        className="fa fa-key"
+      />
+      <span
+        className="p-l-1"
+      >
+        API Key Created
+      </span>
+    </h2>
+    <a
+      className="modal-header-close"
+      ng-click="dismiss();"
+    >
+      <i
+        className="fa fa-remove"
+      />
+    </a>
+  </div>
+  <div
+    className="modal-content"
+  >
+    <div
+      className="gf-form-group"
+    >
+      <div
+        className="gf-form"
+      >
+        <span
+          className="gf-form-label"
+        >
+          Key
+        </span>
+        <span
+          className="gf-form-label"
+        >
+          api key test
+        </span>
+      </div>
+    </div>
+    <div
+      className="grafana-info-box"
+      style={
+        Object {
+          "border": 0,
+        }
+      }
+    >
+      You will only be able to view this key here once! It is not stored in this form. So be sure to copy it now.
+      <br />
+      <br />
+      You can authenticate request using the Authorization HTTP header, example:
+      <br />
+      <br />
+      <pre
+        className="small"
+      >
+        curl -H "Authorization: Bearer 
+        api key test
+        " 
+        test/path
+        /api/dashboards/home
+      </pre>
+    </div>
+  </div>
+</div>
+`;

public/app/features/api-keys/state/actions.ts

@@ -26,10 +26,12 @@ const apiKeysLoaded = (apiKeys: ApiKey[]): LoadApiKeysAction => ({
   payload: apiKeys,
 });
 
-export function addApiKey(apiKey: ApiKey): ThunkResult<void> {
+export function addApiKey(apiKey: ApiKey, openModal: (key: string) => void): ThunkResult<void> {
   return async dispatch => {
-    await getBackendSrv().post('/api/auth/keys', apiKey);
+    const result = await getBackendSrv().post('/api/auth/keys', apiKey);
+    dispatch(setSearchQuery(''));
     dispatch(loadApiKeys());
+    openModal(result.key);
   };
 }