[Index Management/Data Streams] Add warning callout in single edit da…

…ta retention modal (elastic#206760) Closes elastic#204992 ## Summary Callout for single edit data retention (opened from data stream details panel): <img width="1446" alt="Screenshot 2025-01-15 at 13 29 29" src="https://github.com/user-attachments/assets/c415e634-4b39-43d3-b1ae-8a1de55cb144" /> For reference, this is the callout for bulk edit data retention (exists from before this PR): <img width="1446" alt="Screenshot 2025-01-15 at 13 26 08" src="https://github.com/user-attachments/assets/6d167f94-9882-4b48-b1f9-20d26e9bdea7" /> **How to test:** 1. Start Es and Kibana 2. Go to Index Management -> Data streams and click on one of the data streams. 3. Click on the "Manage" button and edit data retention. 4. Decrease the data retention period and verify that the callout message is correct. 5. Also, verify that the callout message in the bulk edit data retention modal is still the same.
viduni94 · Jan 23, 2025 · b839775 · b839775
1 parent 9d244d5
commit b839775
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 16 deletions.
diff --git a/...form/plugins/shared/index_management/__jest__/client_integration/helpers/test_subjects.ts b/...form/plugins/shared/index_management/__jest__/client_integration/helpers/test_subjects.ts
@@ -94,6 +94,7 @@ export type TestSubjects =
   | 'editDataRetentionButton'
   | 'bulkEditDataRetentionButton'
   | 'dataStreamActionsPopoverButton'
+  | 'reducedDataRetentionCallout'
   | 'errorWhenCreatingCallout'
   | 'manageDataStreamButton'
   | 'dataRetentionValue'

diff --git a/...plugins/shared/index_management/__jest__/client_integration/home/data_streams_tab.test.ts b/...plugins/shared/index_management/__jest__/client_integration/home/data_streams_tab.test.ts
@@ -535,6 +535,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 },
@@ -798,6 +822,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/...on/sections/home/data_stream_list/edit_data_retention_modal/edit_data_retention_modal.tsx b/...on/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"