[Stack Monitoring] Use KibanaThemeProvider in the Stack Monitoring UI…

… toast notifications (#120713) This PR originally added the KibanaThemeProvider to stack monitoring as well, but #120968 was opened to do the same thing. Instead this change focuses on updating the toMountPoint calls found in stack monitoring toast notifications to ensure they're either handled by simple i18n calls or appropriately pass a theme$ argument when called.
elastic · Dec 16, 2021 · f93c36e · f93c36e
1 parent 86dc1e9
commit f93c36e
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 180 deletions.
diff --git a/x-pack/plugins/monitoring/public/alerts/lib/alerts_toast.tsx b/x-pack/plugins/monitoring/public/alerts/lib/alerts_toast.tsx
@@ -7,8 +7,9 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiSpacer, EuiLink } from '@elastic/eui';
+import type { Observable } from 'rxjs';
+import type { CoreTheme } from 'kibana/public';
 import { Legacy } from '../../legacy_shims';
 import { toMountPoint } from '../../../../../../src/plugins/kibana_react/public';
 
@@ -18,21 +19,19 @@ export interface EnableAlertResponse {
   disabledWatcherClusterAlerts?: boolean;
 }
 
-const showApiKeyAndEncryptionError = () => {
+const showApiKeyAndEncryptionError = (theme$?: Observable<CoreTheme>) => {
   const settingsUrl = Legacy.shims.docLinks.links.alerting.generalSettings;
 
   Legacy.shims.toastNotifications.addWarning({
-    title: toMountPoint(
-      <FormattedMessage
-        id="xpack.monitoring.healthCheck.tlsAndEncryptionErrorTitle"
-        defaultMessage="Additional setup required"
-      />
-    ),
+    title: i18n.translate('xpack.monitoring.healthCheck.tlsAndEncryptionErrorTitle', {
+      defaultMessage: 'Additional setup required',
+    }),
     text: toMountPoint(
       <div>
         <p>
           {i18n.translate('xpack.monitoring.healthCheck.tlsAndEncryptionError', {
-            defaultMessage: `Stack Monitoring rules require API keys to be enabled and an encryption key to be configured.`,
+            defaultMessage:
+              'Stack Monitoring rules require API keys to be enabled and an encryption key to be configured.',
           })}
         </p>
         <EuiSpacer size="xs" />
@@ -41,26 +40,25 @@ const showApiKeyAndEncryptionError = () => {
             defaultMessage: 'Learn how.',
           })}
         </EuiLink>
-      </div>
+      </div>,
+      { theme$ }
     ),
   });
 };
 
-const showUnableToDisableWatcherClusterAlertsError = () => {
+const showUnableToDisableWatcherClusterAlertsError = (theme$?: Observable<CoreTheme>) => {
   const settingsUrl = Legacy.shims.docLinks.links.alerting.generalSettings;
 
   Legacy.shims.toastNotifications.addWarning({
-    title: toMountPoint(
-      <FormattedMessage
-        id="xpack.monitoring.healthCheck.unableToDisableWatches.title"
-        defaultMessage="Legacy cluster alerts still active"
-      />
-    ),
+    title: i18n.translate('xpack.monitoring.healthCheck.unableToDisableWatches.title', {
+      defaultMessage: 'Legacy cluster alerts still active',
+    }),
     text: toMountPoint(
       <div>
         <p>
           {i18n.translate('xpack.monitoring.healthCheck.unableToDisableWatches.text', {
-            defaultMessage: `We failed to remove legacy cluster alerts. Please check the Kibana server log for more details, or try again later.`,
+            defaultMessage:
+              'We failed to remove legacy cluster alerts. Please check the Kibana server log for more details, or try again later.',
           })}
         </p>
         <EuiSpacer size="xs" />
@@ -69,38 +67,33 @@ const showUnableToDisableWatcherClusterAlertsError = () => {
             defaultMessage: 'Learn more.',
           })}
         </EuiLink>
-      </div>
+      </div>,
+      { theme$ }
     ),
   });
 };
 
 const showDisabledWatcherClusterAlertsError = () => {
   Legacy.shims.toastNotifications.addWarning({
-    title: toMountPoint(
-      <FormattedMessage
-        id="xpack.monitoring.healthCheck.disabledWatches.title"
-        defaultMessage="New alerts created"
-      />
-    ),
-    text: toMountPoint(
-      <p>
-        {i18n.translate('xpack.monitoring.healthCheck.disabledWatches.text', {
-          defaultMessage: `Review the alert definition using Setup mode and configure additional action connectors to get notified via your favorite method.`,
-        })}
-      </p>
-    ),
+    title: i18n.translate('xpack.monitoring.healthCheck.disabledWatches.title', {
+      defaultMessage: 'New alerts created',
+    }),
+    text: i18n.translate('xpack.monitoring.healthCheck.disabledWatches.text', {
+      defaultMessage:
+        'Review the alert definition using Setup mode and configure additional action connectors to get notified via your favorite method.',
+    }),
     'data-test-subj': 'alertsCreatedToast',
   });
 };
 
-export const showAlertsToast = (response: EnableAlertResponse) => {
+export const showAlertsToast = (response: EnableAlertResponse, theme$?: Observable<CoreTheme>) => {
   const { isSufficientlySecure, hasPermanentEncryptionKey, disabledWatcherClusterAlerts } =
     response;
 
   if (isSufficientlySecure === false || hasPermanentEncryptionKey === false) {
-    showApiKeyAndEncryptionError();
+    showApiKeyAndEncryptionError(theme$);
   } else if (disabledWatcherClusterAlerts === false) {
-    showUnableToDisableWatcherClusterAlertsError();
+    showUnableToDisableWatcherClusterAlertsError(theme$);
   } else if (disabledWatcherClusterAlerts === true) {
     showDisabledWatcherClusterAlertsError();
   }

diff --git a/x-pack/plugins/monitoring/public/application/hooks/use_alerts_modal.ts b/x-pack/plugins/monitoring/public/application/hooks/use_alerts_modal.ts
@@ -38,7 +38,7 @@ export const useAlertsModal = () => {
         {}
       )!;
       window.localStorage.setItem('ALERTS_MODAL_DECISION_MADE', 'true');
-      showAlertsToast(response);
+      showAlertsToast(response, services.theme?.theme$);
     } catch (err) {
       await handleRequestError(err);
     }

diff --git a/x-pack/plugins/monitoring/public/application/hooks/use_request_error_handler.tsx b/x-pack/plugins/monitoring/public/application/hooks/use_request_error_handler.tsx
@@ -5,6 +5,7 @@
  * 2.0.
  */
 import React, { useCallback } from 'react';
+import { i18n } from '@kbn/i18n';
 import { useHistory } from 'react-router-dom';
 import { includes } from 'lodash';
 import { IHttpFetchError, ResponseErrorBody } from 'kibana/public';
@@ -42,15 +43,16 @@ export const useRequestErrorHandler = () => {
         // redirect to error message view
         history.push('/access-denied');
       } else if (err.response?.status === 404 && !includes(window.location.hash, 'no-data')) {
-        // pass through if this is a 404 and we're already on the no-data page
+        // pass through if this is a 404, and we're already on the no-data page
         const formattedError = formatMonitoringError(err);
         services.notifications?.toasts.addDanger({
-          title: toMountPoint(
-            <FormattedMessage
-              id="xpack.monitoring.ajaxErrorHandler.requestFailedNotificationTitle"
-              defaultMessage="Monitoring Request Failed"
-            />
+          title: i18n.translate(
+            'xpack.monitoring.ajaxErrorHandler.requestFailedNotificationTitle',
+            {
+              defaultMessage: 'Monitoring Request Failed',
+            }
           ),
+
           text: toMountPoint(
             <div>
               {formattedError}
@@ -61,21 +63,19 @@ export const useRequestErrorHandler = () => {
                   defaultMessage="Retry"
                 />
               </EuiButton>
-            </div>
+            </div>,
+            { theme$: services.theme?.theme$ }
           ),
         });
       } else {
         services.notifications?.toasts.addDanger({
-          title: toMountPoint(
-            <FormattedMessage
-              id="xpack.monitoring.ajaxErrorHandler.requestErrorNotificationTitle"
-              defaultMessage="Monitoring Request Error"
-            />
-          ),
-          text: toMountPoint(formatMonitoringError(err)),
+          title: i18n.translate('xpack.monitoring.ajaxErrorHandler.requestErrorNotificationTitle', {
+            defaultMessage: 'Monitoring Request Error',
+          }),
+          text: toMountPoint(formatMonitoringError(err), { theme$: services.theme?.theme$ }),
         });
       }
     },
-    [history, services.notifications?.toasts]
+    [history, services.notifications?.toasts, services.theme]
   );
 };
diff --git a/x-pack/plugins/monitoring/public/components/action_menu/index.tsx b/x-pack/plugins/monitoring/public/components/action_menu/index.tsx
@@ -20,7 +20,8 @@ export const ActionMenu: React.FC<{}> = ({ children }) => {
     if (setHeaderActionMenu) {
       setHeaderActionMenu((element) => {
         const mount = toMountPoint(
-          <KibanaContextProvider services={services}>{children}</KibanaContextProvider>
+          <KibanaContextProvider services={services}>{children}</KibanaContextProvider>,
+          { theme$: services.theme?.theme$ }
         );
         return mount(element);
       });