[7.x] [Metrics UI] Fix Alert Preview Error design (#71005) (#72499)

Co-authored-by: Elastic Machine <[email protected]>

Co-authored-by: Elastic Machine <[email protected]>

Author: Zacqary

x-pack/plugins/infra/public/alerting/common/components/alert_preview.tsx

@@ -14,13 +14,9 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiCallOut,
-  EuiOverlayMask,
-  EuiModal,
-  EuiModalHeader,
-  EuiModalHeaderTitle,
-  EuiModalBody,
+  EuiAccordion,
   EuiCodeBlock,
-  EuiLink,
+  EuiText,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
@@ -61,9 +57,6 @@ export const AlertPreview: React.FC<Props> = (props) => {
   const [previewResult, setPreviewResult] = useState<
     (AlertPreviewSuccessResponsePayload & Record<string, any>) | null
   >(null);
-  const [isErrorModalVisible, setIsErrorModalVisible] = useState<boolean>(false);
-  const onOpenModal = useCallback(() => setIsErrorModalVisible(true), [setIsErrorModalVisible]);
-  const onCloseModal = useCallback(() => setIsErrorModalVisible(false), [setIsErrorModalVisible]);
 
   const onSelectPreviewLookbackInterval = useCallback((e) => {
     setPreviewLookbackInterval(e.target.value);
@@ -271,33 +264,32 @@ export const AlertPreview: React.FC<Props> = (props) => {
                 iconType="alert"
               >
                 {previewError.body && (
-                  <FormattedMessage
-                    id="xpack.infra.metrics.alertFlyout.alertPreviewErrorDesc"
-                    defaultMessage="Try again later, or {viewTheError}."
-                    values={{
-                      viewTheError: <EuiLink onClick={onOpenModal}>view the error</EuiLink>,
-                    }}
-                  />
+                  <>
+                    <FormattedMessage
+                      id="xpack.infra.metrics.alertFlyout.alertPreviewErrorDesc"
+                      defaultMessage="Please try again later or see details for more information."
+                    />
+                    <EuiSpacer size={'s'} />
+                    <EuiAccordion
+                      id="alertErrorDetailsAccordion"
+                      buttonContent={
+                        <>
+                          <EuiText size="s">
+                            <FormattedMessage
+                              id="xpack.infra.metrics.alertFlyout.errorDetails"
+                              defaultMessage="Details"
+                            />
+                          </EuiText>
+                        </>
+                      }
+                    >
+                      <EuiSpacer size={'s'} />
+                      <EuiCodeBlock>{previewError.body.message}</EuiCodeBlock>
+                    </EuiAccordion>
+                  </>
                 )}
               </EuiCallOut>
             )}
-            {isErrorModalVisible && (
-              <EuiOverlayMask>
-                <EuiModal onClose={onCloseModal}>
-                  <EuiModalHeader>
-                    <EuiModalHeaderTitle>
-                      <FormattedMessage
-                        id="xpack.infra.metrics.alertFlyout.alertPreviewErrorModalTitle"
-                        defaultMessage="Alert preview error"
-                      />
-                    </EuiModalHeaderTitle>
-                  </EuiModalHeader>
-                  <EuiModalBody>
-                    <EuiCodeBlock>{previewError.body.message}</EuiCodeBlock>
-                  </EuiModalBody>
-                </EuiModal>
-              </EuiOverlayMask>
-            )}
           </>
         )}
       </>