beautiful toasts

Author: tsullivan

x-pack/plugins/reporting_notifier/public/components/general_error.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { Fragment } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiCallOut, EuiSpacer } from '@elastic/eui';
+import { ToastInput } from '../../../../../src/core/public';
+
+export const getGeneralErrorToast = (errorText: string, err: Error): ToastInput => ({
+  text: (
+    <Fragment>
+      <EuiCallOut title={errorText} color="danger" iconType="alert">
+        {err.toString()}
+      </EuiCallOut>
+
+      <EuiSpacer />
+
+      <FormattedMessage
+        id="xpack.reportingNotifier.error.tryRefresh"
+        defaultMessage="Try refreshing the page."
+      ></FormattedMessage>
+    </Fragment>
+  ),
+  iconType: undefined,
+});

x-pack/plugins/reporting_notifier/public/components/index.ts

@@ -8,3 +8,4 @@ export { getSuccessToast } from './job_success';
 export { getFailureToast } from './job_failure';
 export { getWarningFormulasToast } from './job_warning_formulas';
 export { getWarningMaxSizeToast } from './job_warning_max_size';
+export { getGeneralErrorToast } from './general_error';

x-pack/plugins/reporting_notifier/public/components/job_failure.tsx

@@ -5,7 +5,9 @@
  */
 
 import React, { Fragment } from 'react';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiCallOut, EuiSpacer } from '@elastic/eui';
 import { ToastInput } from '../../../../../src/core/public';
 import { JobSummary, ManagementLinkFn } from '../../index.d';
 
@@ -24,13 +26,19 @@ export const getFailureToast = (
     ),
     text: (
       <Fragment>
-        <p>
-          <FormattedMessage
-            id="xpack.reportingNotifier.error.failedWithMessage"
-            defaultMessage="The reporting job failed with the message: '{errorText}'"
-            values={{ errorText }}
-          />
-        </p>
+        <EuiCallOut
+          size="m"
+          title={i18n.translate('xpack.reportingNotifier.error.calloutTitle', {
+            defaultMessage: 'The reporting job failed',
+          })}
+          color="danger"
+          iconType="alert"
+        >
+          {errorText}
+        </EuiCallOut>
+
+        <EuiSpacer />
+
         <p>
           <FormattedMessage
             id="xpack.reportingNotifier.error.checkManagement"
@@ -49,6 +57,7 @@ export const getFailureToast = (
         </p>
       </Fragment>
     ),
+    iconType: undefined,
     'data-test-subj': 'completeReportFailure',
   };
 };

x-pack/plugins/reporting_notifier/public/components/job_success.tsx

@@ -26,7 +26,9 @@ export const getSuccessToast = (
   color: 'success',
   text: (
     <Fragment>
-      <ReportLink getUrl={getReportLink} />
+      <p>
+        <ReportLink getUrl={getReportLink} />
+      </p>
       <DownloadButton getUrl={getDownloadLink} job={job} />
     </Fragment>
   ),

x-pack/plugins/reporting_notifier/public/components/job_warning_formulas.tsx

@@ -31,7 +31,9 @@ export const getWarningFormulasToast = (
           defaultMessage="The report contains characters which spreadsheet applications can interpret as formulas."
         />
       </p>
-      <ReportLink getUrl={getReportLink} />
+      <p>
+        <ReportLink getUrl={getReportLink} />
+      </p>
       <DownloadButton getUrl={getDownloadLink} job={job} />
     </Fragment>
   ),

x-pack/plugins/reporting_notifier/public/components/job_warning_max_size.tsx

@@ -31,7 +31,9 @@ export const getWarningMaxSizeToast = (
           defaultMessage="The report reached the max size and contains partial data."
         />
       </p>
-      <ReportLink getUrl={getReportLink} />
+      <p>
+        <ReportLink getUrl={getReportLink} />
+      </p>
       <DownloadButton getUrl={getDownloadLink} job={job} />
     </Fragment>
   ),

x-pack/plugins/reporting_notifier/public/lib/stream_handler.ts

@@ -29,6 +29,7 @@ import {
   getFailureToast,
   getWarningFormulasToast,
   getWarningMaxSizeToast,
+  getGeneralErrorToast,
 } from '../components';
 import { jobQueueClient } from './job_queue';
 
@@ -124,12 +125,14 @@ export class ReportingNotifierStreamHandler {
       }),
       catchError(err => {
         // show connection refused toast
-        this.notificationsFn().toasts.addDanger({
-          text: i18n.translate('xpack.reportingNotifier.httpErrorMessage', {
-            defaultMessage: 'Could not check the Kibana server for updated Reporting jobs! Try refreshing the page. {err}',
-            values: { err: err.toString() }
-          }),
-        }); // prettier-ignore
+        this.notificationsFn().toasts.addDanger(
+          getGeneralErrorToast(
+            i18n.translate('xpack.reportingNotifier.httpErrorMessage', {
+              defaultMessage: 'Could not check Reporting job status!',
+            }),
+            err
+          )
+        ); // prettier-ignore
         window.console.error(err);
         return Rx.of({ completed: [], failed: [] }); // log the error and resume
       })

x-pack/plugins/reporting_notifier/public/plugin.tsx

@@ -18,6 +18,7 @@ import {
   JOB_COMPLETION_NOTIFICATIONS_SESSION_KEY,
 } from '../constants';
 import { JobId, JobStatusBuckets } from '../index.d';
+import { getGeneralErrorToast } from './components';
 import { ReportingNotifierStreamHandler as StreamHandler } from './lib/stream_handler';
 
 const {
@@ -55,12 +56,14 @@ export class ReportingNotifierPublicPlugin implements Plugin<any, any> {
       }),
       catchError(err => {
         // show general toast, log the error and resume
-        notificationsFn().toasts.addDanger({
-          text: i18n.translate('xpack.reportingNotifier.pollingErrorMessage', {
-            defaultMessage: 'Reporting notifier error! Try refreshing the page. {err}',
-            values: { err: err.toString() }
-          }),
-        }); // prettier-ignore
+        notificationsFn().toasts.addDanger(
+          getGeneralErrorToast(
+            i18n.translate('xpack.reportingNotifier.pollingErrorMessage', {
+              defaultMessage: 'Reporting notifier error!',
+            }),
+            err
+          )
+        );
         window.console.error(err);
         return Rx.of({ completed: [], failed: [] });
       })