Commit c7fb6916 by Johannes Schill

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

parent a94662c8
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();
});
});
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;
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,
......
// 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>
`;
......@@ -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);
};
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment