From 4bb7c93289521014f85dd03f86a5b5dba0007c8a Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Tue, 2 Jan 2024 10:37:51 -0800 Subject: [PATCH 1/4] Share modal design tweaks --- .../components/_share_context_menu.scss | 6 +- .../components/modals/embed_modal_page.tsx | 112 ++++++++------ .../components/modals/link_modal_page.tsx | 79 ++++++---- .../public/components/share_context_menu.tsx | 2 +- .../share_context_menu/image_export_modal.tsx | 141 ++++++++++-------- 5 files changed, 195 insertions(+), 145 deletions(-) diff --git a/src/plugins/share/public/components/_share_context_menu.scss b/src/plugins/share/public/components/_share_context_menu.scss index a05164a6bb0d1..14cfd083a8968 100644 --- a/src/plugins/share/public/components/_share_context_menu.scss +++ b/src/plugins/share/public/components/_share_context_menu.scss @@ -1,3 +1,3 @@ -.kbnShareContextMenu__finalPanel { - padding: $euiSize; -} +// .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 index 7069e2bc4436c..813b6b9462e63 100644 --- a/src/plugins/share/public/components/modals/embed_modal_page.tsx +++ b/src/plugins/share/public/components/modals/embed_modal_page.tsx @@ -8,6 +8,7 @@ import { EuiButton, + EuiButtonEmpty, EuiCheckboxGroup, EuiFlexGroup, EuiFlexItem, @@ -17,12 +18,14 @@ import { EuiIconTip, EuiLoadingSpinner, EuiModal, + EuiModalBody, + EuiModalFooter, + EuiModalHeader, + EuiModalHeaderTitle, EuiRadioGroup, EuiSpacer, EuiSwitch, EuiSwitchEvent, - EuiText, - EuiTitle, } from '@elastic/eui'; import { Capabilities } from '@kbn/core-capabilities-common'; import { i18n } from '@kbn/i18n'; @@ -361,51 +364,72 @@ export const EmbedModal: FC = (props: EmbedModalPageProps) }; return ( - + - - - - {`Share this ${props.objectType}`} - - - - - Include - checkboxOnChangeHandler(id)} - compressed - data-test-subj="embed-radio-group" - /> + + {`Embed this ${props.objectType}`} + + + + + + checkboxOnChangeHandler(id)} + data-test-subj="embed-radio-group" + legend={{ + children: Include + }} + /> + + + setSelectedRadio(id)} + name="embed radio group" + idSelected={selectedRadio} + legend={{ + children: Generate as + }} + /> + + + {/* + */} + {/* {props.urlParamExtensions && props.urlParamExtensions?.map(({paramName}) => { */} + {/* setParamValue('embed')}> + + */} + {/* })} */} + {/* + + + + + + */} + + + + + {allowShortUrl && renderShortUrlSwitch()} + + + + + + + + + setParamValue('embed')}> + + + + - - Generate the link as - setSelectedRadio(id)} - name="embed radio group" - idSelected={selectedRadio} - /> - - {allowShortUrl && renderShortUrlSwitch()} - - - - {/* {props.urlParamExtensions && props.urlParamExtensions?.map(({paramName}) => { */} - setParamValue('embed')}> - - - {/* })} */} - - - - - - - + ); diff --git a/src/plugins/share/public/components/modals/link_modal_page.tsx b/src/plugins/share/public/components/modals/link_modal_page.tsx index 0f5a8a15c288a..498f0751d1074 100644 --- a/src/plugins/share/public/components/modals/link_modal_page.tsx +++ b/src/plugins/share/public/components/modals/link_modal_page.tsx @@ -8,6 +8,7 @@ import { EuiButton, + EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiForm, @@ -15,12 +16,14 @@ import { EuiIconTip, EuiLoadingSpinner, EuiModal, + EuiModalBody, + EuiModalFooter, + EuiModalHeader, + EuiModalHeaderTitle, EuiRadioGroup, EuiSpacer, EuiSwitch, EuiSwitchEvent, - EuiText, - EuiTitle, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { format as formatUrl, parse as parseUrl } from 'url'; @@ -368,37 +371,47 @@ export const LinkModal: FC = (props: LinksModalPageProps) = return ( - - - - {`Share this ${objectType}`} - - - setSelectedRadio(id)} - name="embed radio group" - idSelected={selectedRadio} - /> - - {saveNeeded} - {allowShortUrl && renderShortUrlSwitch()} - - - copyLink()}> - - - - - - - - - - + + {`Get link to this ${objectType}`} + + + + setSelectedRadio(id)} + name="embed radio group" + idSelected={selectedRadio} + legend={{ + children: Generate as + }} + /> + + {saveNeeded} + + + + + {allowShortUrl && renderShortUrlSwitch()} + + + + + + + + + copyLink()}> + + + + + + + + ); }; diff --git a/src/plugins/share/public/components/share_context_menu.tsx b/src/plugins/share/public/components/share_context_menu.tsx index a9ef83de63f70..034dacd8473f8 100644 --- a/src/plugins/share/public/components/share_context_menu.tsx +++ b/src/plugins/share/public/components/share_context_menu.tsx @@ -131,7 +131,7 @@ export const ShareContextMenu: FC = (props: ShareContextM menuItems.push({ name: i18n.translate('share.contextMenu.permalinksLabel', { - defaultMessage: 'Get Link', + defaultMessage: 'Get link', }), icon: 'link', sortOrder: 0, 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 cb42d4446431a..11ad5c1a36232 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 @@ -7,19 +7,22 @@ import { EuiButton, + EuiButtonEmpty, + EuiCallOut, EuiCopy, EuiFlexGroup, EuiFlexItem, EuiForm, EuiFormRow, - EuiIcon, - EuiLink, + EuiIconTip, + EuiModalBody, + EuiModalFooter, + EuiModalHeader, + EuiModalHeaderTitle, EuiRadioGroup, EuiSpacer, EuiSwitch, EuiSwitchEvent, - EuiText, - EuiTitle, } from '@elastic/eui'; import { ToastsSetup } from '@kbn/core-notifications-browser'; import { ThemeServiceSetup } from '@kbn/core-theme-browser'; @@ -90,8 +93,8 @@ const getJobParams = ( const renderDescription = (objectType: string) => { return objectType === 'dashboard' - ? `PNG & PDF reports can take a few minutes to generate based upon the size of your dashboard` - : `CSV reports can take a few minutes to generate based upon the size of your report `; + ? `Reports can take a few minutes to generate based upon the size of your dashboard.` + : `CSV exports can take a few minutes to generate based upon the size of your report.`; }; export const ReportingModalContentUI: FC = (props: Props) => { @@ -235,17 +238,27 @@ export const ReportingModalContentUI: FC = (props: Props) => { const renderOptions = () => { if (layoutOption === 'print') { return ( - } - checked={usePrintLayout} - onChange={handlePrintLayoutChange} - data-test-subj="usePrintLayout" - /> + > + + } + checked={usePrintLayout} + onChange={handlePrintLayoutChange} + data-test-subj="usePrintLayout" + /> + ); } else if (layoutOption === 'canvas') { return ( @@ -291,13 +304,12 @@ export const ReportingModalContentUI: FC = (props: Props) => { return ( {(copy) => ( - + - - + )} ); @@ -318,12 +330,11 @@ export const ReportingModalContentUI: FC = (props: Props) => { fill onClick={() => generateReportingJob()} data-test-subj="generateReportButton" - size="s" isLoading={Boolean(createReportingJob)} > @@ -333,63 +344,65 @@ export const ReportingModalContentUI: FC = (props: Props) => { fill onClick={() => generateReportingJob()} data-test-subj="generateReportButton" - size="s" isLoading={Boolean(createReportingJob)} > ); return ( - - - Share as PNG or PDF - - - - {renderDescription(objectType)} - - - - setSelectedRadio(id)} - name="image reporting radio group" - idSelected={selectedRadio} - /> - + <> + + Export + + + - - {layoutOption && ( - + + setSelectedRadio(id)} + name="image reporting radio group" + idSelected={selectedRadio} + legend={{ + children: File type + }} /> - )} - - - - {renderOptions()} + - - + {renderOptions()} + + + - {saveWarningMessageWithButton} - - {renderCopyURLButton({ isUnsaved: !isSaved, exceedsMaxLength })} - - - - - + + {renderCopyURLButton({ isUnsaved: !isSaved, exceedsMaxLength })} + + + + + + + + + + {saveWarningMessageWithButton} + + + - + + ); }; From fb5f41ecd606e5a878df3348e9b1bd8a440910b0 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Tue, 2 Jan 2024 13:39:51 -0800 Subject: [PATCH 2/4] 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) => { }; return ( - - - - Share as a CSV - - - - {renderDescription(objectType)} - - - generateReportingJob()} - data-test-subj="generateReportButton" - size="s" - isLoading={Boolean(createReportingJob)} - > - - - - + <> + + Generate a CSV + + + + + + + + generateReportingJob()} + data-test-subj="generateReportButton" + isLoading={Boolean(createReportingJob)} + > + + + + ); }; 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) => { isUnsaved: boolean; exceedsMaxLength: boolean; }) => { - if (isUnsaved) { - if (exceedsMaxLength) { - return ; - } - return ; - } else if (exceedsMaxLength) { - return ; - } + // if (isUnsaved) { + // if (exceedsMaxLength) { + // return ; + // } + // return ; + // } else if (exceedsMaxLength) { + // return ; + // } return ( - - {(copy) => ( - - - - )} - + + + + {(copy) => ( + + + + )} + + + {isUnsaved ? (exceedsMaxLength ? () : ()) : (exceedsMaxLength ? () : null)} + ); }; const saveWarningMessageWithButton = objectId === undefined || objectId === '' ? ( - - } + generateReportingJob()} + data-test-subj="generateReportButton" + isLoading={Boolean(createReportingJob)} > - generateReportingJob()} - data-test-subj="generateReportButton" - isLoading={Boolean(createReportingJob)} - > - - - + + ) : ( = (props: Props) => { Export + + } + iconType="save" + /> + = (props: Props) => { {renderOptions()} + {renderCopyURLButton({ isUnsaved: !isSaved, exceedsMaxLength })} - - - {renderCopyURLButton({ isUnsaved: !isSaved, exceedsMaxLength })} - - - - - - - - - - {saveWarningMessageWithButton} - - - - + + + + {saveWarningMessageWithButton} ); 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 ( - - -

- -

- - - + /> ); }; 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 { isUnsaved: boolean; exceedsMaxLength: boolean; }) { - if (isUnsaved) { - if (exceedsMaxLength) { - return ; - } - return ; - } else if (exceedsMaxLength) { - return ; - } + // if (isUnsaved) { + // if (exceedsMaxLength) { + // return ; + // } + // return ; + // } else if (exceedsMaxLength) { + // return ; + // } return ( - - {(copy) => ( - - - - )} - + + + + {(copy) => ( + + + + )} + + + {isUnsaved ? (exceedsMaxLength ? () : ()) : (exceedsMaxLength ? () : null)} + ); } @@ -163,7 +170,7 @@ class ReportingPanelContentUi extends Component { helpText={ } > From 8d629c9820b3f028c56f64a9f736f9c448479440 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Tue, 2 Jan 2024 13:49:08 -0800 Subject: [PATCH 3/4] Move Copy URL back to footer --- .../reporting/public/share_context_menu/image_export_modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 0205ad8c5fcb6..3229f51236c26 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 @@ -387,10 +387,10 @@ export const ReportingModalContentUI: FC = (props: Props) => { {renderOptions()} - {renderCopyURLButton({ isUnsaved: !isSaved, exceedsMaxLength })} + {renderCopyURLButton({ isUnsaved: !isSaved, exceedsMaxLength })} From b5353506f553ce1d906b42df61ae404927aa4128 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Tue, 2 Jan 2024 15:08:29 -0800 Subject: [PATCH 4/4] Copy fix and remove extra flex wrappers --- .../components/modals/embed_modal_page.tsx | 16 +------------ .../components/modals/link_modal_page.tsx | 24 ++++++++----------- 2 files changed, 11 insertions(+), 29 deletions(-) diff --git a/src/plugins/share/public/components/modals/embed_modal_page.tsx b/src/plugins/share/public/components/modals/embed_modal_page.tsx index 813b6b9462e63..5cc5cdf913dd3 100644 --- a/src/plugins/share/public/components/modals/embed_modal_page.tsx +++ b/src/plugins/share/public/components/modals/embed_modal_page.tsx @@ -395,20 +395,6 @@ export const EmbedModal: FC = (props: EmbedModalPageProps) /> - {/* - */} - {/* {props.urlParamExtensions && props.urlParamExtensions?.map(({paramName}) => { */} - {/* setParamValue('embed')}> - - */} - {/* })} */} - {/* - - - - - - */} @@ -423,7 +409,7 @@ export const EmbedModal: FC = (props: EmbedModalPageProps) setParamValue('embed')}> - + diff --git a/src/plugins/share/public/components/modals/link_modal_page.tsx b/src/plugins/share/public/components/modals/link_modal_page.tsx index 498f0751d1074..2fa35235edea6 100644 --- a/src/plugins/share/public/components/modals/link_modal_page.tsx +++ b/src/plugins/share/public/components/modals/link_modal_page.tsx @@ -393,21 +393,17 @@ export const LinkModal: FC = (props: LinksModalPageProps) = - + {allowShortUrl && renderShortUrlSwitch()} - - - - - - - - - copyLink()}> - - - - + + + + + + + copyLink()}> + +