ConfirmModal: Migrates to React with new theme (#33107)

* ConfirmModal: Migrates to React

* Refactor: migrates to v2 styles

* Chore: updates after PR comments

public/app/core/services/util_srv.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { selectors } from '@grafana/e2e-selectors';
 
 import coreModule from 'app/core/core_module';
 import appEvents from 'app/core/app_events';
@@ -8,7 +7,15 @@ import appEvents from 'app/core/app_events';
 import { GrafanaRootScope } from 'app/routes/GrafanaCtrl';
 import { AngularModalProxy } from '../components/modals/AngularModalProxy';
 import { provideTheme } from '../utils/ConfigProvider';
-import { HideModalEvent, ShowConfirmModalEvent, ShowModalEvent, ShowModalReactEvent } from '../../types/events';
+import {
+  HideModalEvent,
+  ShowConfirmModalEvent,
+  ShowConfirmModalPayload,
+  ShowModalEvent,
+  ShowModalReactEvent,
+} from '../../types/events';
+import { ConfirmModal, ConfirmModalProps } from '@grafana/ui';
+import { textUtil } from '@grafana/data';
 
 export class UtilSrv {
   modalScope: any;
@@ -84,35 +91,50 @@ export class UtilSrv {
     });
   }
 
-  showConfirmModal(payload: any) {
-    const scope: any = this.$rootScope.$new();
-
-    scope.updateConfirmText = (value: any) => {
-      scope.confirmTextValid = payload.confirmText.toLowerCase() === value.toLowerCase();
+  showConfirmModal(payload: ShowConfirmModalPayload) {
+    const {
+      confirmText,
+      onConfirm = () => undefined,
+      text2,
+      altActionText,
+      onAltAction,
+      noText,
+      text,
+      text2htmlBind,
+      yesText = 'Yes',
+      icon,
+      title = 'Confirm',
+    } = payload;
+    const props: ConfirmModalProps = {
+      confirmText: yesText,
+      confirmationText: confirmText,
+      icon,
+      title,
+      body: text,
+      description: text2 && text2htmlBind ? textUtil.sanitize(text2) : text2,
+      isOpen: true,
+      dismissText: noText,
+      onConfirm: () => {
+        onConfirm();
+        this.onReactModalDismiss();
+      },
+      onDismiss: this.onReactModalDismiss,
+      onAlternative: onAltAction
+        ? () => {
+            onAltAction();
+            this.onReactModalDismiss();
+          }
+        : undefined,
+      alternativeText: altActionText,
+    };
+    const modalProps = {
+      component: ConfirmModal,
+      props,
     };
 
-    scope.title = payload.title;
-    scope.text = payload.text;
-    scope.text2 = payload.text2;
-    scope.text2htmlBind = payload.text2htmlBind;
-    scope.confirmText = payload.confirmText;
-
-    scope.onConfirm = payload.onConfirm;
-    scope.onAltAction = payload.onAltAction;
-    scope.altActionText = payload.altActionText;
-    scope.icon = payload.icon || 'check';
-    scope.yesText = payload.yesText || 'Yes';
-    scope.noText = payload.noText || 'Cancel';
-    scope.confirmTextValid = scope.confirmText ? false : true;
-    scope.selectors = selectors.pages.ConfirmModal;
-
-    appEvents.publish(
-      new ShowModalEvent({
-        src: 'public/app/partials/confirm_modal.html',
-        scope: scope,
-        modalClass: 'confirm-modal',
-      })
-    );
+    const elem = React.createElement(provideTheme(AngularModalProxy), modalProps);
+    this.reactModalRoot.appendChild(this.reactModalNode);
+    ReactDOM.render(elem, this.reactModalNode);
   }
 }
 

public/app/types/events.ts

@@ -1,4 +1,5 @@
 import { BusEventBase, BusEventWithPayload, eventFactory, GrafanaTheme, TimeRange } from '@grafana/data';
+import { IconName } from '@grafana/ui';
 
 /**
  * Event Payloads
@@ -35,7 +36,7 @@ export interface ShowConfirmModalPayload {
   altActionText?: string;
   yesText?: string;
   noText?: string;
-  icon?: string;
+  icon?: IconName;
 
   onConfirm?: () => void;
   onAltAction?: () => void;