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

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

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

@@ -4,6 +4,7 @@ import { ApiKeysAddedModal, Props } from './ApiKeysAddedModal';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
+    onDismiss: jest.fn(),
     apiKey: 'api key test',
     rootPath: 'test/path',
   };

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

@@ -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};
+    `,
+  };
+}

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

@@ -1,5 +1,4 @@
 import React, { PureComponent } from 'react';
-import ReactDOMServer from 'react-dom/server';
 import { connect, ConnectedProps } from 'react-redux';
 import { hot } from 'react-hot-loader';
 // Utils
@@ -8,7 +7,7 @@ import { getNavModel } from 'app/core/selectors/navModel';
 import { getApiKeys, getApiKeysCount } from './state/selectors';
 import { addApiKey, deleteApiKey, loadApiKeys } from './state/actions';
 import Page from 'app/core/components/Page/Page';
-import ApiKeysAddedModal from './ApiKeysAddedModal';
+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';
@@ -20,7 +19,7 @@ import { ApiKeysForm } from './ApiKeysForm';
 import { ApiKeysActionBar } from './ApiKeysActionBar';
 import { ApiKeysTable } from './ApiKeysTable';
 import { ApiKeysController } from './ApiKeysController';
-import { ShowModalEvent } from 'app/types/events';
+import { ShowModalReactEvent } from 'app/types/events';
 
 const { Switch } = LegacyForms;
 
@@ -82,11 +81,14 @@ export class ApiKeysPageUnconnected extends PureComponent<Props, State> {
   onAddApiKey = (newApiKey: NewApiKey) => {
     const openModal = (apiKey: string) => {
       const rootPath = window.location.origin + config.appSubUrl;
-      const modalTemplate = ReactDOMServer.renderToString(<ApiKeysAddedModal apiKey={apiKey} rootPath={rootPath} />);
 
       appEvents.publish(
-        new ShowModalEvent({
-          templateHtml: modalTemplate,
+        new ShowModalReactEvent({
+          props: {
+            apiKey,
+            rootPath,
+          },
+          component: ApiKeysAddedModal,
         })
       );
     };

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

@@ -1,79 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Render should render component 1`] = `
-<div
-  className="modal-body"
+<Modal
+  isOpen={true}
+  onClickBackdrop={[MockFunction]}
+  onDismiss={[MockFunction]}
+  title="API Key Created"
 >
-  <div
-    className="modal-header"
+  <Field
+    label="Key"
   >
-    <h2
-      className="modal-header-title"
+    <span
+      className="css-ypoxjz"
     >
-      <Icon
-        name="key-skeleton-alt"
-        size="lg"
-      />
-      <span
-        className="p-l-1"
-      >
-        API Key Created
-      </span>
-    </h2>
-    <a
-      className="modal-header-close"
-      ng-click="dismiss();"
-    >
-      <Icon
-        name="times"
-      />
-    </a>
-  </div>
-  <div
-    className="modal-content"
+      api key test
+    </span>
+  </Field>
+  <Alert
+    severity="info"
+    title="You will only be able to view this key here once!"
   >
-    <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 a 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>
+    It is not stored in this form, so be sure to copy it now.
+  </Alert>
+  <p
+    className="text-muted"
+  >
+    You can authenticate a request using the Authorization HTTP header, example:
+  </p>
+  <pre
+    className="css-omfua5"
+  >
+    curl -H "Authorization: Bearer 
+    api key test
+    " 
+    test/path
+    /api/dashboards/home
+  </pre>
+</Modal>
 `;