[ML] Transforms: Fix API error message display for edit flyout. (#65494…

…) (#65695)

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.

x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout.tsx

@@ -4,34 +4,33 @@
  * 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,
   EuiFlyoutBody,
   EuiFlyoutFooter,
   EuiFlyoutHeader,
   EuiOverlayMask,
+  EuiSpacer,
   EuiTitle,
 } from '@elastic/eui';
 
-import { toMountPoint } from '../../../../../../../../../src/plugins/kibana_react/public';
-
 import { getErrorMessage } from '../../../../../shared_imports';
 
 import {
   refreshTransformList$,
   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">