Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Share modal design tweaks #16

Merged
merged 5 commits into from
Jan 3, 2024
Merged

Share modal design tweaks #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4bb7c93
Share modal design tweaks
ryankeairns Jan 2, 2024
fb5f41e
Adjust copy url warnings and CSV modal layout
ryankeairns Jan 2, 2024
8d629c9
Move Copy URL back to footer
ryankeairns Jan 2, 2024
b535350
Copy fix and remove extra flex wrappers
ryankeairns Jan 2, 2024
7028add
Merge branch 'share-context-menodals' into share-context-menodals
rshen91 Jan 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/plugins/share/public/components/_share_context_menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// .kbnShareContextMenu__finalPanel {
// padding: $euiSize;
// }
// }

13 changes: 11 additions & 2 deletions src/plugins/share/public/components/modals/embed_modal_page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
*/

import {
EuiButton,
EuiButtonEmpty,
EuiCheckboxGroup,
EuiModal,
EuiModalHeader,
EuiModalHeaderTitle,
Expand All @@ -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';
Expand Down Expand Up @@ -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 })}
Expand Down
9 changes: 9 additions & 0 deletions src/plugins/share/public/components/modals/link_modal_page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
import React, { Component } from 'react';
import {
EuiButton,
EuiButtonEmpty,
EuiFlexGroup,
EuiSpacer,
EuiFlexItem,
Expand All @@ -22,6 +23,13 @@ import {
EuiModalHeaderTitle,
EuiFormRow,
EuiLoadingSpinner,
EuiModal,
EuiModalBody,
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiRadioGroup,
EuiSpacer,
EuiSwitch,
EuiIconTip,
EuiSwitchEvent,
Expand Down Expand Up @@ -452,3 +460,4 @@ export class LinkModal extends Component<LinkModalProps, State> {
);
}
}

49 changes: 26 additions & 23 deletions x-pack/plugins/reporting/public/share_context_menu/csv_export_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
</>
);
};

Expand Down
116 changes: 82 additions & 34 deletions x-pack/plugins/reporting/public/share_context_menu/image_export_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
Expand Down Expand Up @@ -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)}
Expand All @@ -339,7 +338,7 @@ export const ReportingModalContentUI: FC<Props> = (props: Props) => {
>
<FormattedMessage
id="xpack.reporting.generateButtonLabel"
defaultMessage="Download CSV"
defaultMessage="Generate report"
/>
</EuiButton>
</EuiFormRow>
Expand All @@ -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>
Expand Down
27 changes: 8 additions & 19 deletions ...public/share_context_menu/reporting_panel_content/components/error_unsaved_work_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
/>
);
};
Loading
Loading