From fb5f41ecd606e5a878df3348e9b1bd8a440910b0 Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Tue, 2 Jan 2024 13:39:51 -0800
Subject: [PATCH] Adjust copy url warnings and CSV modal layout

---
 .../share_context_menu/csv_export_modal.tsx   |  49 ++++----
 .../share_context_menu/image_export_modal.tsx | 106 +++++++++---------
 .../components/error_unsaved_work_panel.tsx   |  27 ++---
 .../reporting_panel_content.tsx               |  57 +++++-----
 4 files changed, 116 insertions(+), 123 deletions(-)

diff --git a/x-pack/plugins/reporting/public/share_context_menu/csv_export_modal.tsx b/x-pack/plugins/reporting/public/share_context_menu/csv_export_modal.tsx
index 154222bbdc7e6..7a7363a0b8780 100644
--- a/x-pack/plugins/reporting/public/share_context_menu/csv_export_modal.tsx
+++ b/x-pack/plugins/reporting/public/share_context_menu/csv_export_modal.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiButton, EuiForm, EuiFormRow, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiButton, EuiCallOut, EuiForm, EuiModalBody, EuiModalFooter, EuiModalHeader, EuiModalHeaderTitle, EuiSpacer, } from '@elastic/eui';
 import { ToastsSetup } from '@kbn/core-notifications-browser';
 import { ThemeServiceSetup } from '@kbn/core-theme-browser';
 import { IUiSettingsClient } from '@kbn/core/public';
@@ -102,28 +102,31 @@ export const CsvModalContentUI: FC<Props> = (props: Props) => {
   };
 
   return (
-    <EuiForm className="kbnShareContextMenu__finalPanel" data-test-subj="shareReportingForm">
-      <EuiSpacer size="xs" />
-      <EuiTitle>
-        <EuiText>Share as a CSV</EuiText>
-      </EuiTitle>
-      <EuiSpacer size="m" />
-      <EuiFormRow>
-        <EuiText size="s">{renderDescription(objectType)}</EuiText>
-      </EuiFormRow>
-      <EuiSpacer size="m" />
-      <EuiButton
-        disabled={Boolean(createReportingJob)}
-        fill
-        onClick={() => generateReportingJob()}
-        data-test-subj="generateReportButton"
-        size="s"
-        isLoading={Boolean(createReportingJob)}
-      >
-        <EuiSpacer size="xs" />
-        <FormattedMessage id="xpack.reporting.generateButtonLabel" defaultMessage="Generate CSV" />
-      </EuiButton>
-    </EuiForm>
+    <>
+      <EuiModalHeader>
+        <EuiModalHeaderTitle>Generate a CSV</EuiModalHeaderTitle>
+      </EuiModalHeader>
+      <EuiModalBody>
+        <EuiForm className="kbnShareContextMenu__finalPanel" data-test-subj="shareReportingForm">
+          <EuiCallOut
+            size="s"
+            title={renderDescription(objectType)}
+            iconType="iInCircle"
+          />
+        </EuiForm>
+      </EuiModalBody>
+      <EuiModalFooter>
+        <EuiButton
+          disabled={Boolean(createReportingJob)}
+          fill
+          onClick={() => generateReportingJob()}
+          data-test-subj="generateReportButton"
+          isLoading={Boolean(createReportingJob)}
+        >
+          <FormattedMessage id="xpack.reporting.generateButtonLabel" defaultMessage="Generate CSV" />
+        </EuiButton>
+      </EuiModalFooter>
+    </>
   );
 };
 
diff --git a/x-pack/plugins/reporting/public/share_context_menu/image_export_modal.tsx b/x-pack/plugins/reporting/public/share_context_menu/image_export_modal.tsx
index 11ad5c1a36232..0205ad8c5fcb6 100644
--- a/x-pack/plugins/reporting/public/share_context_menu/image_export_modal.tsx
+++ b/x-pack/plugins/reporting/public/share_context_menu/image_export_modal.tsx
@@ -14,7 +14,6 @@ import {
   EuiFlexItem,
   EuiForm,
   EuiFormRow,
-  EuiIconTip,
   EuiModalBody,
   EuiModalFooter,
   EuiModalHeader,
@@ -293,51 +292,47 @@ export const ReportingModalContentUI: FC<Props> = (props: Props) => {
     isUnsaved: boolean;
     exceedsMaxLength: boolean;
   }) => {
-    if (isUnsaved) {
-      if (exceedsMaxLength) {
-        return <ErrorUrlTooLongPanel isUnsaved />;
-      }
-      return <ErrorUnsavedWorkPanel />;
-    } else if (exceedsMaxLength) {
-      return <ErrorUrlTooLongPanel isUnsaved={false} />;
-    }
+    // if (isUnsaved) {
+    //   if (exceedsMaxLength) {
+    //     return <ErrorUrlTooLongPanel isUnsaved />;
+    //   }
+    //   return <ErrorUnsavedWorkPanel />;
+    // } else if (exceedsMaxLength) {
+    //   return <ErrorUrlTooLongPanel isUnsaved={false} />;
+    // }
     return (
-      <EuiCopy textToCopy={absoluteUrl} anchorClassName="eui-displayBlock">
-        {(copy) => (
-          <EuiButtonEmpty iconType="copy" flush="both" onClick={copy} data-test-subj="shareReportingCopyURL">
-            <FormattedMessage
-              id="xpack.reporting.panelContent.copyUrlButtonLabel"
-              defaultMessage="Copy URL  "
-            /> 
-          </EuiButtonEmpty>
-        )}
-      </EuiCopy>
+      <EuiFlexGroup gutterSize="s" alignItems="center">
+        <EuiFlexItem grow={0}>
+          <EuiCopy textToCopy={absoluteUrl} anchorClassName="eui-displayBlock">
+            {(copy) => (
+              <EuiButtonEmpty disabled={isUnsaved || exceedsMaxLength ? true : false} iconType="copy" flush="both" onClick={copy} data-test-subj="shareReportingCopyURL">
+                <FormattedMessage
+                  id="xpack.reporting.panelContent.copyUrlButtonLabel"
+                  defaultMessage="Copy URL  "
+                /> 
+              </EuiButtonEmpty>
+            )}
+          </EuiCopy>
+        </EuiFlexItem>
+        <EuiFlexItem grow={0}>{isUnsaved ? (exceedsMaxLength ? (<ErrorUrlTooLongPanel isUnsaved />) : (<ErrorUnsavedWorkPanel />)) : (exceedsMaxLength ? (<ErrorUrlTooLongPanel isUnsaved={false} />) : null)}</EuiFlexItem>
+      </EuiFlexGroup>
     );
   };
 
   const saveWarningMessageWithButton =
     objectId === undefined || objectId === '' ? (
-      <EuiFormRow
-        helpText={
-          <FormattedMessage
-            id="xpack.reporting.panelContent.saveWorkDescription"
-            defaultMessage="Please save your work before generating a report."
-          />
-        }
+      <EuiButton
+        disabled={Boolean(createReportingJob)}
+        fill
+        onClick={() => generateReportingJob()}
+        data-test-subj="generateReportButton"
+        isLoading={Boolean(createReportingJob)}
       >
-        <EuiButton
-          disabled={Boolean(createReportingJob)}
-          fill
-          onClick={() => generateReportingJob()}
-          data-test-subj="generateReportButton"
-          isLoading={Boolean(createReportingJob)}
-        >
-          <FormattedMessage
-            id="xpack.reporting.generateButtonLabel"
-            defaultMessage="Generate export"
-          />
-        </EuiButton>
-      </EuiFormRow>
+        <FormattedMessage
+          id="xpack.reporting.generateButtonLabel"
+          defaultMessage="Generate export"
+        />
+      </EuiButton>
     ) : (
       <EuiButton
         disabled={Boolean(createReportingJob)}
@@ -358,6 +353,17 @@ export const ReportingModalContentUI: FC<Props> = (props: Props) => {
       <EuiModalHeaderTitle>Export</EuiModalHeaderTitle>
     </EuiModalHeader>
     <EuiModalBody>
+      <EuiCallOut 
+        size="s"
+        title={
+          <FormattedMessage
+          id="xpack.reporting.panelContent.saveWorkDescription"
+          defaultMessage="Save your work before generating a report."
+          />
+        }
+        iconType="save"
+      />
+      <EuiSpacer size="s" />
       <EuiCallOut
         size="s"
         title={renderDescription(objectType)}
@@ -381,26 +387,14 @@ export const ReportingModalContentUI: FC<Props> = (props: Props) => {
         </EuiFlexGroup>
         <EuiSpacer size="m" />
         {renderOptions()}
+        {renderCopyURLButton({ isUnsaved: !isSaved, exceedsMaxLength })}
       </EuiForm>
     </EuiModalBody>
     <EuiModalFooter>
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          {renderCopyURLButton({ isUnsaved: !isSaved, exceedsMaxLength })}
-        </EuiFlexItem>
-        <EuiFlexItem grow={0}>
-          <EuiFlexGroup alignItems="center" gutterSize="m">
-            <EuiFlexItem>
-              <EuiButtonEmpty onClick={onClose}>
-                <FormattedMessage id="xpack.reporting.doneButton" defaultMessage="Done" />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-            <EuiFlexItem>
-              {saveWarningMessageWithButton}
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      <EuiButtonEmpty onClick={onClose}>
+        <FormattedMessage id="xpack.reporting.doneButton" defaultMessage="Done" />
+      </EuiButtonEmpty>
+      {saveWarningMessageWithButton}
     </EuiModalFooter>
     </>
   );
diff --git a/x-pack/plugins/reporting/public/share_context_menu/reporting_panel_content/components/error_unsaved_work_panel.tsx b/x-pack/plugins/reporting/public/share_context_menu/reporting_panel_content/components/error_unsaved_work_panel.tsx
index 75a6a8ba35626..f210d33976f15 100644
--- a/x-pack/plugins/reporting/public/share_context_menu/reporting_panel_content/components/error_unsaved_work_panel.tsx
+++ b/x-pack/plugins/reporting/public/share_context_menu/reporting_panel_content/components/error_unsaved_work_panel.tsx
@@ -7,33 +7,22 @@
 import { i18n } from '@kbn/i18n';
 import type { FunctionComponent } from 'react';
 import React from 'react';
-import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiCallOut, EuiText, EuiSpacer } from '@elastic/eui';
+import { EuiIconTip } from '@elastic/eui';
 
 const i18nTexts = {
   title: i18n.translate('xpack.reporting.panelContent.unsavedStateErrorTitle', {
-    defaultMessage: 'Unsaved work',
+    defaultMessage: 'Save your work before copying this URL.',
   }),
 };
 
 export const ErrorUnsavedWorkPanel: FunctionComponent = () => {
   return (
-    <EuiCallOut
-      size="s"
-      title={i18nTexts.title}
-      iconType="warning"
-      color="danger"
+    <EuiIconTip
+      size="m"
+      content={i18nTexts.title}
+      type="warning"
+      color="warning"
       data-test-subj="shareReportingUnsavedState"
-    >
-      <EuiText size="s">
-        <p>
-          <FormattedMessage
-            id="xpack.reporting.panelContent.unsavedStateErrorText"
-            defaultMessage="Save your work before copying this URL."
-          />
-        </p>
-      </EuiText>
-      <EuiSpacer size="s" />
-    </EuiCallOut>
+    />
   );
 };
diff --git a/x-pack/plugins/reporting/public/share_context_menu/reporting_panel_content/reporting_panel_content.tsx b/x-pack/plugins/reporting/public/share_context_menu/reporting_panel_content/reporting_panel_content.tsx
index 920f74a4f2bba..e683db9a5734e 100644
--- a/x-pack/plugins/reporting/public/share_context_menu/reporting_panel_content/reporting_panel_content.tsx
+++ b/x-pack/plugins/reporting/public/share_context_menu/reporting_panel_content/reporting_panel_content.tsx
@@ -16,6 +16,8 @@ import {
   EuiAccordion,
   EuiButton,
   EuiCopy,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiForm,
   EuiFormRow,
   EuiHorizontalRule,
@@ -125,31 +127,36 @@ class ReportingPanelContentUi extends Component<Props, State> {
     isUnsaved: boolean;
     exceedsMaxLength: boolean;
   }) {
-    if (isUnsaved) {
-      if (exceedsMaxLength) {
-        return <ErrorUrlTooLongPanel isUnsaved />;
-      }
-      return <ErrorUnsavedWorkPanel />;
-    } else if (exceedsMaxLength) {
-      return <ErrorUrlTooLongPanel isUnsaved={false} />;
-    }
+    // if (isUnsaved) {
+    //   if (exceedsMaxLength) {
+    //     return <ErrorUrlTooLongPanel isUnsaved />;
+    //   }
+    //   return <ErrorUnsavedWorkPanel />;
+    // } else if (exceedsMaxLength) {
+    //   return <ErrorUrlTooLongPanel isUnsaved={false} />;
+    // }
     return (
-      <EuiCopy textToCopy={this.state.absoluteUrl} anchorClassName="eui-displayBlock">
-        {(copy) => (
-          <EuiButton
-            color={isUnsaved ? 'warning' : 'primary'}
-            fullWidth
-            onClick={copy}
-            size="s"
-            data-test-subj="shareReportingCopyURL"
-          >
-            <FormattedMessage
-              id="xpack.reporting.panelContent.copyUrlButtonLabel"
-              defaultMessage="Copy POST URL"
-            />
-          </EuiButton>
-        )}
-      </EuiCopy>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={0}>
+          <EuiCopy textToCopy={this.state.absoluteUrl} anchorClassName="eui-displayBlock">
+            {(copy) => (
+              <EuiButton
+                color={isUnsaved ? 'warning' : 'primary'}
+                fullWidth
+                onClick={copy}
+                size="s"
+                data-test-subj="shareReportingCopyURL"
+              >
+                <FormattedMessage
+                  id="xpack.reporting.panelContent.copyUrlButtonLabel"
+                  defaultMessage="Copy POST URL"
+                />
+              </EuiButton>
+            )}
+          </EuiCopy>
+        </EuiFlexItem>
+        <EuiFlexItem grow={0}>{isUnsaved ? (exceedsMaxLength ? (<ErrorUrlTooLongPanel isUnsaved />) : (<ErrorUnsavedWorkPanel />)) : (exceedsMaxLength ? (<ErrorUrlTooLongPanel isUnsaved={false} />) : null)}</EuiFlexItem>
+      </EuiFlexGroup>
     );
   }
 
@@ -163,7 +170,7 @@ class ReportingPanelContentUi extends Component<Props, State> {
             helpText={
               <FormattedMessage
                 id="xpack.reporting.panelContent.saveWorkDescription"
-                defaultMessage="Please save your work before generating a report."
+                defaultMessage="Save your work before generating a report."
               />
             }
           >