diff --git a/x-pack/platform/plugins/shared/index_management/__jest__/client_integration/helpers/test_subjects.ts b/x-pack/platform/plugins/shared/index_management/__jest__/client_integration/helpers/test_subjects.ts index 189b6ab110615..1b299a1870cc8 100644 --- a/x-pack/platform/plugins/shared/index_management/__jest__/client_integration/helpers/test_subjects.ts +++ b/x-pack/platform/plugins/shared/index_management/__jest__/client_integration/helpers/test_subjects.ts @@ -95,6 +95,7 @@ export type TestSubjects = | 'editDataRetentionButton' | 'bulkEditDataRetentionButton' | 'dataStreamActionsPopoverButton' + | 'reducedDataRetentionCallout' | 'errorWhenCreatingCallout' | 'manageDataStreamButton' | 'dataRetentionValue' diff --git a/x-pack/platform/plugins/shared/index_management/__jest__/client_integration/home/data_streams_tab.test.ts b/x-pack/platform/plugins/shared/index_management/__jest__/client_integration/home/data_streams_tab.test.ts index 103ec3d4f0bf3..a72f7f40476b3 100644 --- a/x-pack/platform/plugins/shared/index_management/__jest__/client_integration/home/data_streams_tab.test.ts +++ b/x-pack/platform/plugins/shared/index_management/__jest__/client_integration/home/data_streams_tab.test.ts @@ -533,6 +533,30 @@ describe('Data Streams tab', () => { testBed.component.update(); }); + test('shows bulk edit callout for reduced data retention', async () => { + const { + actions: { selectDataStream, clickBulkEditDataRetentionButton }, + } = testBed; + + selectDataStream('dataStream1', true); + selectDataStream('dataStream2', true); + + clickBulkEditDataRetentionButton(); + + // Decrease data retention value to 5d (it was 7d initially) + testBed.form.setInputValue('dataRetentionValue', '5'); + + // Verify that callout is displayed + expect(testBed.exists('reducedDataRetentionCallout')).toBeTruthy(); + + // Verify message in callout + const calloutText = testBed.find('reducedDataRetentionCallout').text(); + expect(calloutText).toContain( + 'The retention period will be reduced for 2 data streams. Data older than then new retention period will be permanently deleted.' + ); + expect(calloutText).toContain('Affected data streams: dataStream1, dataStream2'); + }); + test('can set data retention period for mutliple data streams', async () => { const { actions: { selectDataStream, clickBulkEditDataRetentionButton }, @@ -796,6 +820,28 @@ describe('Data Streams tab', () => { expect.objectContaining({ body: JSON.stringify({ dataStreams: ['dataStream1'] }) }) ); }); + + test('shows single edit callout for reduced data retention', async () => { + const { + actions: { clickNameAt, clickEditDataRetentionButton }, + } = testBed; + + await clickNameAt(0); + + clickEditDataRetentionButton(); + + // Decrease data retention value to 5d (it was 7d initially) + testBed.form.setInputValue('dataRetentionValue', '5'); + + // Verify that callout is displayed + expect(testBed.exists('reducedDataRetentionCallout')).toBeTruthy(); + + // Verify message in callout + const calloutText = testBed.find('reducedDataRetentionCallout').text(); + expect(calloutText).toContain( + 'The retention period will be reduced. Data older than then new retention period will be permanently deleted.' + ); + }); }); test('clicking index template name navigates to the index template details', async () => { diff --git a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/data_stream_list/edit_data_retention_modal/edit_data_retention_modal.tsx b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/data_stream_list/edit_data_retention_modal/edit_data_retention_modal.tsx index 55d8348400f5f..8d50b6c695105 100644 --- a/x-pack/platform/plugins/shared/index_management/public/application/sections/home/data_stream_list/edit_data_retention_modal/edit_data_retention_modal.tsx +++ b/x-pack/platform/plugins/shared/index_management/public/application/sections/home/data_stream_list/edit_data_retention_modal/edit_data_retention_modal.tsx @@ -201,16 +201,23 @@ export const EditDataRetentionModal: React.FunctionComponent = ({ onClose()} data-test-subj="editDataRetentionModal" - css={{ minWidth: isBulkEdit ? 650 : 450, maxWidth: 650 }} + css={{ width: 650 }} >
- + {isBulkEdit ? ( + + ) : ( + + )} @@ -292,7 +299,7 @@ export const EditDataRetentionModal: React.FunctionComponent = ({ ) } componentProps={{ - fullWidth: isBulkEdit, + fullWidth: true, euiFieldProps: { disabled: formData.infiniteRetentionPeriod || @@ -343,7 +350,7 @@ export const EditDataRetentionModal: React.FunctionComponent = ({ - {isBulkEdit && affectedDataStreams.length > 0 && !formData.infiniteRetentionPeriod && ( + {affectedDataStreams.length > 0 && !formData.infiniteRetentionPeriod && ( = ({ )} color="danger" iconType="warning" + data-test-subj="reducedDataRetentionCallout" >

- + values={{ + affectedDataStreamCount: affectedDataStreams.length, + }} + /> + ) : ( + + )}

- {affectedDataStreams.length <= 10 && ( + {isBulkEdit && affectedDataStreams.length <= 10 && (