[8.x] [Index Management/Data Streams] Add warning callout in single edit data retention modal (#206760) (#207112)

# Backport This will backport the following commits from `main` to `8.x`: - [[Index Management/Data Streams] Add warning callout in single edit data retention modal (#206760)](https://github.com/elastic/kibana/pull/206760)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Elena Stoeva <59341489+ElenaStoeva@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
2025-04-24 17:59:23 -04:00 · 2025-01-25 02:10:38 +11:00 · 2025-01-25 02:10:38 +11:00 · 6e8fe98851
commit 6e8fe98851
parent 4a645b511c
3 changed files with 78 additions and 16 deletions
--- 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'
--- 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 () => {
--- 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<Props> = ({
    <EuiModal
      onClose={() => onClose()}
      data-test-subj="editDataRetentionModal"
-      css={{ minWidth: isBulkEdit ? 650 : 450, maxWidth: 650 }}
+      css={{ width: 650 }}
    >
      <Form form={form} data-test-subj="editDataRetentionForm">
        <EuiModalHeader>
          <EuiModalHeaderTitle>
-            <FormattedMessage
-              id="xpack.idxMgmt.dataStreams.editDataRetentionModal.modalTitleText"
-              defaultMessage="Edit data retention for {dataStreamCount} {dataStreamCount, plural, one {data stream} other {data streams}}"
-              values={{ dataStreamCount: dataStreams?.length }}
-            />
+            {isBulkEdit ? (
+              <FormattedMessage
+                id="xpack.idxMgmt.dataStreams.editDataRetentionModal.bulkEdit.modalTitleText"
+                defaultMessage="Edit data retention for {dataStreamCount} {dataStreamCount, plural, one {data stream} other {data streams}}"
+                values={{ dataStreamCount: dataStreams?.length }}
+              />
+            ) : (
+              <FormattedMessage
+                id="xpack.idxMgmt.dataStreams.editDataRetentionModal.singleEdit.modalTitleText"
+                defaultMessage="Edit data retention"
+              />
+            )}
          </EuiModalHeaderTitle>
        </EuiModalHeader>

@ -292,7 +299,7 @@ export const EditDataRetentionModal: React.FunctionComponent<Props> = ({
              )
            }
            componentProps={{
-              fullWidth: isBulkEdit,
+              fullWidth: true,
              euiFieldProps: {
                disabled:
                  formData.infiniteRetentionPeriod ||
@ -343,7 +350,7 @@ export const EditDataRetentionModal: React.FunctionComponent<Props> = ({

          <EuiSpacer />

-          {isBulkEdit && affectedDataStreams.length > 0 && !formData.infiniteRetentionPeriod && (
+          {affectedDataStreams.length > 0 && !formData.infiniteRetentionPeriod && (
            <EuiCallOut
              title={i18n.translate(
                'xpack.idxMgmt.dataStreams.editDataRetentionModal.affectedDataStreamsCalloutTitle',
@ -353,18 +360,26 @@ export const EditDataRetentionModal: React.FunctionComponent<Props> = ({
              )}
              color="danger"
              iconType="warning"
+              data-test-subj="reducedDataRetentionCallout"
            >
              <p>
-                <FormattedMessage
-                  id="xpack.idxMgmt.dataStreams.editDataRetentionModal.affectedDataStreamsCalloutText"
-                  defaultMessage="The retention period will be reduced for {affectedDataStreamCount} data streams. Data older than then new
+                {isBulkEdit ? (
+                  <FormattedMessage
+                    id="xpack.idxMgmt.dataStreams.editDataRetentionModal.bulkEdit.affectedDataStreamsCalloutText"
+                    defaultMessage="The retention period will be reduced for {affectedDataStreamCount} {affectedDataStreamCount, plural, one {data stream} other {data streams}}. Data older than then new
                retention period will be permanently deleted."
-                  values={{
-                    affectedDataStreamCount: affectedDataStreams.length,
-                  }}
-                />
+                    values={{
+                      affectedDataStreamCount: affectedDataStreams.length,
+                    }}
+                  />
+                ) : (
+                  <FormattedMessage
+                    id="xpack.idxMgmt.dataStreams.editDataRetentionModal.singleEdit.affectedDataStreamsSingleCalloutText"
+                    defaultMessage="The retention period will be reduced. Data older than then new retention period will be permanently deleted."
+                  />
+                )}
              </p>
-              {affectedDataStreams.length <= 10 && (
+              {isBulkEdit && affectedDataStreams.length <= 10 && (
                <p>
                  <FormattedMessage
                    id="xpack.idxMgmt.dataStreams.editDataRetentionModal.affectedDataStreamsCalloutList"