IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Migrates remaining Angular modals to React (#33476)

Browse Source 
* HelpModal: Migrates to new style

* Alerting: Migrates how to do alerting modal to React

* ApiKeysModal: migrates to new theme

* Dashboard: View dasboard json modal migrated to React and new theme

* PluginPage: migrates update plugin modal to react and new theme

* Chore: deprecates events and functions

* Simplify help modal

* Updated json modal to use Modal.ButtonRow

* Tweak to api key design

* Tests: updates snapshot

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
This commit is contained in:
Hugo Häggmark
2021-04-28 15:22:28 +02:00
committed by GitHub
parent 86a57d17d2
commit 22ac0fc3cd
23 changed files with 371 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
public/app/features/api-keys/ApiKeysAddedModal.tsx
View File

@@ -1,47 +1,44 @@
import React from 'react';
import { Icon } from '@grafana/ui';
import { css } from '@emotion/css';
import { Alert, Field, Modal, useStyles2 } from '@grafana/ui';
import { GrafanaThemeV2 } from '@grafana/data';
export interface Props {
onDismiss: () => void;
apiKey: string;
rootPath: string;
}
export const ApiKeysAddedModal = (props: Props) => {
export function ApiKeysAddedModal({ onDismiss, apiKey, rootPath }: Props): JSX.Element {
const styles = useStyles2(getStyles);
return (
<div className="modal-body">
<div className="modal-header">
<h2 className="modal-header-title">
<Icon name="key-skeleton-alt" size="lg" />
<span className="p-l-1">API Key Created</span>
</h2>
<Modal title="API Key Created" onDismiss={onDismiss} onClickBackdrop={onDismiss} isOpen>
<Field label="Key">
<span className={styles.label}>{apiKey}</span>
</Field>
<a className="modal-header-close" ng-click="dismiss();">
<Icon name="times" />
</a>
</div>
<Alert severity="info" title="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.
</Alert>
<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 a request using the Authorization HTTP header, example:
<br />
<br />
<pre className="small">
curl -H &quot;Authorization: Bearer {props.apiKey}&quot; {props.rootPath}/api/dashboards/home
</pre>
</div>
</div>
</div>
<p className="text-muted">You can authenticate a request using the Authorization HTTP header, example:</p>
<pre className={styles.small}>
curl -H &quot;Authorization: Bearer {apiKey}&quot; {rootPath}/api/dashboards/home
</pre>
</Modal>
);
};
}
export default ApiKeysAddedModal;
function getStyles(theme: GrafanaThemeV2) {
return {
label: css`
padding: ${theme.spacing(1)};
background-color: ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius()};
`,
small: css`
font-size: ${theme.typography.bodySmall.fontSize};
font-weight: ${theme.typography.bodySmall.fontWeight};
`,
};
}