From dbb402fb8d575dcaf13dd8d4737384fe5a205c40 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Thu, 7 May 2020 16:24:17 +0200
Subject: [PATCH] [ML] Transforms: Fix API error message display for edit
 flyout. (#65494)

Fixes an issue where the transform edit flyout would be hidden if an error occurred and the user closed the error toast. This fixes it by showing the error message within an callout in the flyout itself.
The bug is a side effect of the problem with the edit-button and it's corresponding React tree being within the transform list actions popover which will be solved in a follow up but possibly not for 7.8.0 which makes this workaround necessary.
---
 .../edit_transform_flyout.tsx                 | 37 +++++++++++++------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout.tsx
index a794b7e7c214..d3dae0a8c8b6 100644
--- a/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout.tsx
+++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout.tsx
@@ -4,13 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC } from 'react';
+import React, { useState, FC } from 'react';
 
 import { i18n } from '@kbn/i18n';
 
 import {
   EuiButton,
   EuiButtonEmpty,
+  EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
@@ -18,11 +19,10 @@ import {
   EuiFlyoutFooter,
   EuiFlyoutHeader,
   EuiOverlayMask,
+  EuiSpacer,
   EuiTitle,
 } from '@elastic/eui';
 
-import { toMountPoint } from '../../../../../../../../../src/plugins/kibana_react/public';
-
 import { getErrorMessage } from '../../../../../shared_imports';
 
 import {
@@ -30,8 +30,7 @@ import {
   TransformPivotConfig,
   REFRESH_TRANSFORM_LIST_STATE,
 } from '../../../../common';
-import { ToastNotificationText } from '../../../../components';
-import { useAppDependencies, useToastNotifications } from '../../../../app_dependencies';
+import { useToastNotifications } from '../../../../app_dependencies';
 
 import { useApi } from '../../../../hooks/use_api';
 
@@ -48,13 +47,14 @@ interface EditTransformFlyoutProps {
 }
 
 export const EditTransformFlyout: FC<EditTransformFlyoutProps> = ({ closeFlyout, config }) => {
-  const { overlays } = useAppDependencies();
   const api = useApi();
   const toastNotifications = useToastNotifications();
 
   const [state, dispatch] = useEditTransformFlyout(config);
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
 
   async function submitFormHandler() {
+    setErrorMessage(undefined);
     const requestConfig = applyFormFieldsToTransformConfig(config, state.formFields);
     const transformId = config.id;
 
@@ -69,12 +69,7 @@ export const EditTransformFlyout: FC<EditTransformFlyoutProps> = ({ closeFlyout,
       closeFlyout();
       refreshTransformList$.next(REFRESH_TRANSFORM_LIST_STATE.REFRESH);
     } catch (e) {
-      toastNotifications.addDanger({
-        title: i18n.translate('xpack.transform.transformList.editTransformGenericErrorMessage', {
-          defaultMessage: 'An error occurred calling the API endpoint to update transforms.',
-        }),
-        text: toMountPoint(<ToastNotificationText overlays={overlays} text={getErrorMessage(e)} />),
-      });
+      setErrorMessage(getErrorMessage(e));
     }
   }
 
@@ -97,6 +92,24 @@ export const EditTransformFlyout: FC<EditTransformFlyoutProps> = ({ closeFlyout,
         </EuiFlyoutHeader>
         <EuiFlyoutBody banner={<EditTransformFlyoutCallout />}>
           <EditTransformFlyoutForm editTransformFlyout={[state, dispatch]} />
+          {errorMessage !== undefined && (
+            <>
+              <EuiSpacer size="m" />
+              <EuiCallOut
+                title={i18n.translate(
+                  'xpack.transform.transformList.editTransformGenericErrorMessage',
+                  {
+                    defaultMessage:
+                      'An error occurred calling the API endpoint to update transforms.',
+                  }
+                )}
+                color="danger"
+                iconType="alert"
+              >
+                <p>{errorMessage}</p>
+              </EuiCallOut>
+            </>
+          )}
         </EuiFlyoutBody>
         <EuiFlyoutFooter>
           <EuiFlexGroup justifyContent="spaceBetween">