Skip to content

Commit

Permalink
Adjust copy url warnings and CSV modal layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryankeairns
ryankeairns committed Jan 2, 2024
1 parent 4bb7c93 commit fb5f41e
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 123 deletions.
49 changes: 26 additions & 23 deletions x-pack/plugins/reporting/public/share_context_menu/csv_export_modal.tsx
View file
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
106 changes: 50 additions & 56 deletions x-pack/plugins/reporting/public/share_context_menu/image_export_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
EuiFlexItem,
EuiForm,
EuiFormRow,
EuiIconTip,
EuiModalBody,
EuiModalFooter,
EuiModalHeader,
Expand Down Expand Up @@ -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)}
Expand All @@ -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)}
Expand All @@ -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>
</>
);
Expand Down
27 changes: 8 additions & 19 deletions ...public/share_context_menu/reporting_panel_content/components/error_unsaved_work_panel.tsx
View file
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>
/>
);
};
57 changes: 32 additions & 25 deletions ...s/reporting/public/share_context_menu/reporting_panel_content/reporting_panel_content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import {
EuiAccordion,
EuiButton,
EuiCopy,
EuiFlexGroup,
EuiFlexItem,
EuiForm,
EuiFormRow,
EuiHorizontalRule,
Expand Down Expand Up @@ -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>
);
}

Expand All @@ -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."
/>
}
>
Expand Down

0 comments on commit fb5f41e

Please sign in to comment.