[Index Management] Add bulk edit data retention

x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.helpers.ts

@@ -37,6 +37,7 @@ export interface DataStreamsTabTestBed extends TestBed<TestSubjects> {
     clickDeleteDataStreamButton: () => void;
     clickEditDataRetentionButton: () => void;
     clickDetailPanelIndexTemplateLink: () => void;
+    clickManageDataStreamsButton: () => void;
   };
   findDeleteActionAt: (index: number) => ReactWrapper;
   findDeleteConfirmationModal: () => ReactWrapper;
@@ -210,6 +211,10 @@ export const setup = async (
     component.update();
   };
 
+  const clickManageDataStreamsButton = () => {
+    testBed.find('dataStreamActionsPopoverButton').simulate('click');
+  };
+
   const findDetailPanel = () => {
     const { find } = testBed;
     return find('dataStreamDetailPanel');
@@ -258,6 +263,7 @@ export const setup = async (
       clickDeleteDataStreamButton,
       clickEditDataRetentionButton,
       clickDetailPanelIndexTemplateLink,
+      clickManageDataStreamsButton,
     },
     findDeleteActionAt,
     findDeleteConfirmationModal,

x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts

@@ -557,8 +557,10 @@ describe('Data Streams tab', () => {
           testBed.component.update();
 
           expect(httpSetup.put).toHaveBeenLastCalledWith(
-            `${API_BASE_PATH}/data_streams/dataStream1/data_retention`,
-            expect.objectContaining({ body: JSON.stringify({ dataRetention: '7h' }) })
+            `${API_BASE_PATH}/data_streams/data_retention`,
+            expect.objectContaining({
+              body: JSON.stringify({ dataRetention: '7h', dataStreams: ['dataStream1'] }),
+            })
           );
         });
 
@@ -583,8 +585,10 @@ describe('Data Streams tab', () => {
           testBed.component.update();
 
           expect(httpSetup.put).toHaveBeenLastCalledWith(
-            `${API_BASE_PATH}/data_streams/dataStream1/data_retention`,
-            expect.objectContaining({ body: JSON.stringify({ enabled: false }) })
+            `${API_BASE_PATH}/data_streams/data_retention`,
+            expect.objectContaining({
+              body: JSON.stringify({ enabled: false, dataStreams: ['dataStream1'] }),
+            })
           );
         });
 
@@ -609,8 +613,8 @@ describe('Data Streams tab', () => {
           testBed.component.update();
 
           expect(httpSetup.put).toHaveBeenLastCalledWith(
-            `${API_BASE_PATH}/data_streams/dataStream1/data_retention`,
-            expect.objectContaining({ body: JSON.stringify({}) })
+            `${API_BASE_PATH}/data_streams/data_retention`,
+            expect.objectContaining({ body: JSON.stringify({ dataStreams: ['dataStream1'] }) })
           );
         });
       });
@@ -1028,17 +1032,20 @@ describe('Data Streams tab', () => {
 
       test('displays/hides delete action depending on data streams privileges', async () => {
         const {
-          actions: { selectDataStream },
+          actions: { selectDataStream, clickManageDataStreamsButton },
           find,
         } = testBed;
 
         selectDataStream('dataStreamNoDelete', true);
+        clickManageDataStreamsButton();
         expect(find('deleteDataStreamsButton').exists()).toBeFalsy();
 
         selectDataStream('dataStreamWithDelete', true);
+        clickManageDataStreamsButton();
         expect(find('deleteDataStreamsButton').exists()).toBeFalsy();
 
         selectDataStream('dataStreamNoDelete', false);
+        clickManageDataStreamsButton();
         expect(find('deleteDataStreamsButton').exists()).toBeTruthy();
       });
 

x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_actions_menu/data_stream_actions_menu.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiButton, EuiContextMenu, EuiPopover } from '@elastic/eui';
+import React, { useState } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { EuiContextMenuPanelItemDescriptor } from '@elastic/eui/src/components/context_menu/context_menu';
+import { i18n } from '@kbn/i18n';
+
+interface Props {
+  dataStreamActions: EuiContextMenuPanelItemDescriptor[];
+  selectedDataStreamsCount: number;
+}
+
+export const DataStreamActionsMenu = ({ dataStreamActions, selectedDataStreamsCount }: Props) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const popoverButton = (
+    <EuiButton
+      data-test-subj="dataStreamActionsPopoverButton"
+      onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+      iconType="arrowDown"
+      iconSide="right"
+      fill={true}
+    >
+      <FormattedMessage
+        id="xpack.idxMgmt.dataStreamList.table.manageDataStreamsButtonLabel"
+        defaultMessage="Manage {selectedDataStreamsCount, plural, one {data stream} other {{selectedDataStreamsCount} data streams}}"
+        values={{ selectedDataStreamsCount }}
+      />
+    </EuiButton>
+  );
+
+  return (
+    <EuiPopover
+      id="dataStreamActionsPopover"
+      button={popoverButton}
+      isOpen={isPopoverOpen}
+      closePopover={() => setIsPopoverOpen(false)}
+      panelPaddingSize="none"
+      anchorPosition="rightUp"
+      repositionOnScroll={true}
+    >
+      <EuiContextMenu
+        data-test-subj="dataStreamActionsContextMenu"
+        initialPanelId={0}
+        panels={[
+          {
+            id: 0,
+            title: i18n.translate(
+              'xpack.idxMgmt.dataStreamList.table.dataStreamsContextMenuPanelLabel',
+              {
+                defaultMessage: 'Data stream options',
+              }
+            ),
+            items: dataStreamActions,
+          },
+        ]}
+      />
+    </EuiPopover>
+  );
+};

x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_actions_menu/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { DataStreamActionsMenu } from './data_stream_actions_menu';

x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_detail_panel/data_stream_detail_panel.tsx

@@ -550,7 +550,7 @@ export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
           }}
           ilmPolicyName={dataStream?.ilmPolicyName}
           ilmPolicyLink={ilmPolicyLink}
-          dataStream={dataStream}
+          dataStreams={[dataStream]}
         />
       )}
 

x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_table/data_stream_table.tsx

@@ -24,6 +24,7 @@ import {
 import { ScopedHistory } from '@kbn/core/public';
 import { useEuiTablePersist } from '@kbn/shared-ux-table-persist';
 
+import { EuiContextMenuPanelItemDescriptor } from '@elastic/eui/src/components/context_menu/context_menu';
 import { MAX_DATA_RETENTION } from '../../../../../../common/constants';
 import { useAppContext } from '../../../../app_context';
 import { DataStream } from '../../../../../../common/types';
@@ -39,6 +40,8 @@ import { isDataStreamFullyManagedByILM } from '../../../../lib/data_streams';
 import { indexModeLabels } from '../../../../lib/index_mode_labels';
 import { FilterListButton, Filters } from '../../components';
 import { type DataStreamFilterName } from '../data_stream_list';
+import { DataStreamActionsMenu } from '../data_stream_actions_menu';
+import { EditDataRetentionModal } from '../edit_data_retention_modal';
 
 interface TableDataStream extends DataStream {
   isDataStreamFullyManagedByILM: boolean;
@@ -70,6 +73,9 @@ export const DataStreamTable: React.FunctionComponent<Props> = ({
 }) => {
   const [selection, setSelection] = useState<DataStream[]>([]);
   const [dataStreamsToDelete, setDataStreamsToDelete] = useState<string[]>([]);
+  const [dataStreamsToEditDataRetention, setDataStreamsToEditDataRetention] = useState<
+    DataStream[]
+  >([]);
   const { config } = useAppContext();
 
   const data = useMemo(() => {
@@ -284,25 +290,37 @@ export const DataStreamTable: React.FunctionComponent<Props> = ({
     onSelectionChange: setSelection,
   };
 
+  const dataStreamActions: EuiContextMenuPanelItemDescriptor[] = [
+    {
+      name: i18n.translate('xpack.idxMgmt.dataStreamList.table.bulkEditDataRetentionButtonLabel', {
+        defaultMessage: 'Edit data retention',
+      }),
+      icon: 'pencil',
+      onClick: () => setDataStreamsToEditDataRetention(selection),
+    },
+  ];
+
+  if (selection.every((dataStream: DataStream) => dataStream.privileges.delete_index)) {
+    dataStreamActions.push({
+      name: i18n.translate('xpack.idxMgmt.dataStreamList.table.deleteDataStreamsButtonLabel', {
+        defaultMessage: 'Delete data streams',
+      }),
+      icon: 'trash',
+      onClick: () => setDataStreamsToDelete(selection.map(({ name }: DataStream) => name)),
+    });
+  }
+
   const searchConfig = {
     query: filters,
     box: {
       incremental: true,
     },
     toolsLeft:
-      selection.length > 0 &&
-      selection.every((dataStream: DataStream) => dataStream.privileges.delete_index) ? (
-        <EuiButton
-          data-test-subj="deleteDataStreamsButton"
-          onClick={() => setDataStreamsToDelete(selection.map(({ name }: DataStream) => name))}
-          color="danger"
-        >
-          <FormattedMessage
-            id="xpack.idxMgmt.dataStreamList.table.deleteDataStreamsButtonLabel"
-            defaultMessage="Delete {count, plural, one {data stream} other {data streams} }"
-            values={{ count: selection.length }}
-          />
-        </EuiButton>
+      selection.length > 0 ? (
+        <DataStreamActionsMenu
+          dataStreamActions={dataStreamActions}
+          selectedDataStreamsCount={selection.length}
+        />
       ) : undefined,
     toolsRight: [
       <EuiFlexGroup gutterSize="s">
@@ -365,6 +383,18 @@ export const DataStreamTable: React.FunctionComponent<Props> = ({
 
   return (
     <>
+      {dataStreamsToEditDataRetention && dataStreamsToEditDataRetention.length > 0 ? (
+        <EditDataRetentionModal
+          onClose={(res) => {
+            if (res && res.hasUpdatedDataRetention) {
+              reload();
+            } else {
+              setDataStreamsToEditDataRetention([]);
+            }
+          }}
+          dataStreams={dataStreamsToEditDataRetention}
+        />
+      ) : null}
       {dataStreamsToDelete && dataStreamsToDelete.length > 0 ? (
         <DeleteDataStreamConfirmationModal
           onClose={(res) => {