Merge pull request #16 from ryankeairns/share-context-menodals

Share modal design tweaks
rshen91 · Jan 3, 2024 · 322d301 · 322d301
2 parents 2ccc297 + 7028add
commit 322d301
Show file tree

Hide file tree

Showing 7 changed files with 170 additions and 104 deletions.
diff --git a/src/plugins/share/public/components/_share_context_menu.scss b/src/plugins/share/public/components/_share_context_menu.scss
@@ -1,3 +1,4 @@
 // .kbnShareContextMenu__finalPanel {
 //   padding: $euiSize;
-// }
+// }
+
diff --git a/src/plugins/share/public/components/modals/embed_modal_page.tsx b/src/plugins/share/public/components/modals/embed_modal_page.tsx
@@ -7,6 +7,9 @@
  */
 
 import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiCheckboxGroup,
   EuiModal,
   EuiModalHeader,
   EuiModalHeaderTitle,
@@ -21,9 +24,15 @@ import {
   EuiButton,
   EuiFormRow,
   EuiLoadingSpinner,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiRadioGroup,
+  EuiSpacer,
   EuiSwitch,
   EuiSwitchEvent,
-  EuiIconTip,
 } from '@elastic/eui';
 import { Capabilities } from '@kbn/core-capabilities-common';
 import { i18n } from '@kbn/i18n';
@@ -508,7 +517,7 @@ export class EmbedModal extends Component<EmbedModalProps, State> {
                     data-test-subj="embedUrlParamExtension"
                   />
                 </EuiFlexItem>
-                <EuiFlexItem grow={1}>
+                <EuiFlexItem grow={0}>
                   <EuiRadioGroup
                     options={radioOptions}
                     onChange={(id) => this.setState({ selectedRadio: id })}

diff --git a/src/plugins/share/public/components/modals/link_modal_page.tsx b/src/plugins/share/public/components/modals/link_modal_page.tsx
@@ -9,6 +9,7 @@
 import React, { Component } from 'react';
 import {
   EuiButton,
+  EuiButtonEmpty,
   EuiFlexGroup,
   EuiSpacer,
   EuiFlexItem,
@@ -22,6 +23,13 @@ import {
   EuiModalHeaderTitle,
   EuiFormRow,
   EuiLoadingSpinner,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiRadioGroup,
+  EuiSpacer,
   EuiSwitch,
   EuiIconTip,
   EuiSwitchEvent,
@@ -452,3 +460,4 @@ export class LinkModal extends Component<LinkModalProps, State> {
     );
   }
 }
+
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
@@ -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
@@ -240,7 +240,7 @@ export const ReportingModalContentUI: FC<Props> = (props: Props) => {
         <EuiFormRow
           helpText={
             <FormattedMessage
-              css={{ overlfow: 'normal' }}
+              css={{ overflowWrap: 'normal' }}
               id="xpack.reporting.screenCapturePanelContent.optimizeForPrintingHelpText"
               defaultMessage="Uses multiple pages, showing at most 2 visualizations per page"
             />
@@ -292,42 +292,41 @@ 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)}
@@ -339,7 +338,7 @@ export const ReportingModalContentUI: FC<Props> = (props: Props) => {
         >
           <FormattedMessage
             id="xpack.reporting.generateButtonLabel"
-            defaultMessage="Download CSV"
+            defaultMessage="Generate report"
           />
         </EuiButton>
       </EuiFormRow>
@@ -349,14 +348,63 @@ export const ReportingModalContentUI: FC<Props> = (props: Props) => {
         fill
         onClick={() => generateReportingJob()}
         data-test-subj="generateReportButton"
-        size="s"
         isLoading={Boolean(createReportingJob)}
       >
-        <FormattedMessage id="xpack.reporting.generateButtonLabel" defaultMessage="Download CSV" />
+        <FormattedMessage
+          id="xpack.reporting.generateButtonLabel"
+          defaultMessage="Generate report"
+        />
       </EuiButton>
     );
   return (
     <>
+    <EuiModalHeader>
+      <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)}
+        iconType="iInCircle"
+      />
+      <EuiSpacer size="m" />
+      <EuiForm className="kbnShareContextMenu__finalPanel" data-test-subj="shareReportingForm">
+        <EuiFlexGroup direction="row" justifyContent={'spaceBetween'}>
+          <EuiRadioGroup
+            options={[
+              { id: 'printablePdfV2', label: 'PDF' },
+              { id: 'pngV2', label: 'PNG' },
+            ]}
+            onChange={(id) => setSelectedRadio(id)}
+            name="image reporting radio group"
+            idSelected={selectedRadio}
+            legend={{
+              children: <span>File type</span>
+            }}
+          />
+        </EuiFlexGroup>
+        <EuiSpacer size="m" />
+        {renderOptions()}
+      </EuiForm>
+    </EuiModalBody>
+    <EuiModalFooter>
+      {renderCopyURLButton({ isUnsaved: !isSaved, exceedsMaxLength })}
+      <EuiButtonEmpty onClick={onClose}>
+        <FormattedMessage id="xpack.reporting.doneButton" defaultMessage="Done" />
+      </EuiButtonEmpty>
+      {saveWarningMessageWithButton}
+    </EuiModalFooter>
       <EuiModalHeader>
         <EuiModalHeaderTitle>Export</EuiModalHeaderTitle>
       </EuiModalHeader>

diff --git a/...public/share_context_menu/reporting_panel_content/components/error_unsaved_work_panel.tsx b/...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>
+    />
   );
 };