[Alerts table] Edit tags UI

src/platform/packages/shared/response-ops/alerts-table/components/alerts_data_grid.test.tsx

@@ -17,6 +17,10 @@ import type { AlertsDataGridProps, BulkActionsState } from '../types';
 import type { AdditionalContext, RenderContext } from '../types';
 import type { EuiDataGridColumnCellAction } from '@elastic/eui';
 import { EuiButton, EuiButtonIcon, EuiFlexItem } from '@elastic/eui';
+import { QueryClient, QueryClientProvider } from '@kbn/react-query';
+import { testQueryClientConfig } from '@kbn/alerts-ui-shared/src/common/test_utils/test_query_client_config';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
+import { AlertsQueryContext } from '@kbn/alerts-ui-shared/src/common/contexts/alerts_query_context';
 import { bulkActionsReducer } from '../reducers/bulk_actions_reducer';
 import { getJsDomPerformanceFix } from '../utils/test';
 import { useCaseViewNavigation } from '../hooks/use_case_view_navigation';
@@ -35,12 +39,11 @@ import {
   FIELD_BROWSER_CUSTOM_CREATE_BTN_TEST_ID,
   FIELD_BROWSER_TEST_ID,
 } from '../constants';
-import { QueryClient, QueryClientProvider } from '@kbn/react-query';
-import { testQueryClientConfig } from '@kbn/alerts-ui-shared/src/common/test_utils/test_query_client_config';
-import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
-import { AlertsQueryContext } from '@kbn/alerts-ui-shared/src/common/contexts/alerts_query_context';
+import { useIndividualTagsActionContext } from '../contexts/individual_tags_action_context';
+import { useTagsAction } from './tags/use_tags_action';
 
 jest.mock('../hooks/use_case_view_navigation');
+jest.mock('./tags/use_tags_action');
 
 const cellActionOnClickMockedFn = jest.fn();
 const mockOnChangeVisibleColumns = jest.fn();
@@ -133,6 +136,17 @@ describe('AlertsDataGrid', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    // Reset the tags action mock to default state
+    const mockUseTagsAction = jest.mocked(useTagsAction);
+    mockUseTagsAction.mockReset();
+    mockUseTagsAction.mockImplementation(() => ({
+      isFlyoutOpen: false,
+      selectedAlerts: [],
+      openFlyout: jest.fn(),
+      onClose: jest.fn(),
+      onSaveTags: jest.fn(),
+      getAction: jest.fn(),
+    }));
   });
 
   describe('Alerts table UI', () => {
@@ -585,5 +599,125 @@ describe('AlertsDataGrid', () => {
         expect(container.querySelector('.euiDataGrid__virtualized')).toBeTruthy();
       });
     });
+
+    describe('Individual tags flyout', () => {
+      const mockUseTagsAction = jest.mocked(useTagsAction);
+      const mockAlert = {
+        _id: 'alert-1',
+        _index: 'test-index',
+        version: 'v1',
+        title: 'Test Alert',
+        'kibana.alert.workflow_tags': ['tag1', 'tag2'],
+      } as any;
+
+      beforeEach(() => {
+        // Reset the mock before each test
+        mockUseTagsAction.mockReset();
+        // Default mock: flyout closed
+        mockUseTagsAction.mockImplementation(() => ({
+          isFlyoutOpen: false,
+          selectedAlerts: [],
+          openFlyout: jest.fn(),
+          onClose: jest.fn(),
+          onSaveTags: jest.fn(),
+          getAction: jest.fn(),
+        }));
+      });
+
+      it('should not render individual tags flyout when closed', async () => {
+        render(<TestComponent {...mockDataGridProps} />);
+
+        // By default, the flyout should be closed
+        expect(screen.queryByTestId('alerts-edit-tags-flyout')).not.toBeInTheDocument();
+      });
+
+      it('should render individual tags flyout when opened', async () => {
+        const mockOnClose = jest.fn();
+        const mockOnSaveTags = jest.fn();
+
+        // Set up the mock implementation before rendering
+        mockUseTagsAction.mockImplementation(() => ({
+          isFlyoutOpen: true,
+          selectedAlerts: [mockAlert],
+          openFlyout: jest.fn(),
+          onClose: mockOnClose,
+          onSaveTags: mockOnSaveTags,
+          getAction: jest.fn(),
+        }));
+
+        render(<TestComponent {...mockDataGridProps} />);
+
+        expect(await screen.findByTestId('alerts-edit-tags-flyout')).toBeInTheDocument();
+        expect(screen.getByTestId('alerts-edit-tags-flyout-title')).toBeInTheDocument();
+      });
+
+      it('should call onClose when cancel button is clicked', async () => {
+        const mockOnClose = jest.fn();
+        const mockOnSaveTags = jest.fn();
+
+        mockUseTagsAction.mockImplementation(() => ({
+          isFlyoutOpen: true,
+          selectedAlerts: [mockAlert],
+          openFlyout: jest.fn(),
+          onClose: mockOnClose,
+          onSaveTags: mockOnSaveTags,
+          getAction: jest.fn(),
+        }));
+
+        render(<TestComponent {...mockDataGridProps} />);
+
+        const cancelButton = await screen.findByTestId('alerts-edit-tags-flyout-cancel');
+        await userEvent.click(cancelButton);
+
+        // The onClose should be called
+        expect(mockOnClose).toHaveBeenCalled();
+      });
+
+      it('should provide IndividualTagsActionContext to child components', async () => {
+        const TestChildComponent = () => {
+          try {
+            const context = useIndividualTagsActionContext();
+            return (
+              <div data-test-subj="context-test">
+                {context.isFlyoutOpen ? 'Flyout Open' : 'Flyout Closed'}
+              </div>
+            );
+          } catch (e) {
+            return <div data-test-subj="context-test">Context Not Available</div>;
+          }
+        };
+
+        render(
+          <TestComponent
+            {...mockDataGridProps}
+            renderContext={{
+              renderActionsCell: () => <TestChildComponent />,
+            }}
+          />
+        );
+
+        // The context should be available (flyout closed by default)
+        expect(await screen.findByTestId('context-test')).toHaveTextContent('Flyout Closed');
+      });
+
+      it('should render individual tags flyout with correct alert data', async () => {
+        mockUseTagsAction.mockImplementation(() => ({
+          isFlyoutOpen: true,
+          selectedAlerts: [mockAlert],
+          openFlyout: jest.fn(),
+          onClose: jest.fn(),
+          onSaveTags: jest.fn(),
+          getAction: jest.fn(),
+        }));
+
+        render(<TestComponent {...mockDataGridProps} />);
+
+        const flyout = await screen.findByTestId('alerts-edit-tags-flyout');
+        expect(flyout).toBeInTheDocument();
+
+        // Verify the flyout title is present
+        expect(screen.getByTestId('alerts-edit-tags-flyout-title')).toBeInTheDocument();
+      });
+    });
   });
 });

src/platform/packages/shared/response-ops/alerts-table/components/alerts_data_grid.tsx

@@ -31,6 +31,9 @@ import { useSorting } from '../hooks/use_sorting';
 import { CellPopoverHost } from './cell_popover_host';
 import { NonVirtualizedGridBody } from './non_virtualized_grid_body';
 import type { AlertDetailFlyout as AlertDetailFlyoutType } from './alert_detail_flyout';
+import { EditTagsFlyout } from './tags/edit_tags_flyout';
+import { IndividualTagsActionContextProvider } from '../contexts/individual_tags_action_context';
+import { useTagsAction } from './tags/use_tags_action';
 
 const AlertDetailFlyout = lazy(
   () => import('./alert_detail_flyout')
@@ -111,6 +114,7 @@ export const AlertsDataGrid = typedMemo(
       bulkActions,
       setIsBulkActionsLoading,
       clearSelection,
+      bulkEditTagsFlyoutState,
     } = useBulkActions({
       ruleTypeIds,
       query,
@@ -326,46 +330,82 @@ export const AlertsDataGrid = typedMemo(
         : // Overriding the simplified type here to avoid cyclic problems with generics
           (AlertDetailFlyout as NonNullable<typeof renderExpandedAlertView>);
 
+    const selectedAlerts = useMemo(
+      () =>
+        Array.from(bulkActionsState.rowSelection.keys())
+          .map((i) => alerts[i])
+          .filter(Boolean),
+      [alerts, bulkActionsState.rowSelection]
+    );
+
+    const individualTagsFlyout = useTagsAction({
+      onActionSuccess: () => {
+        refresh();
+      },
+      onActionError: () => {
+        refresh();
+      },
+      isDisabled: false,
+    });
+
+    const { selectedAlerts: selectedAlertsFromRowAction } = individualTagsFlyout;
+
     return (
-      <InspectButtonContainer>
-        <section style={{ width: '100%' }} data-test-subj={props['data-test-subj']}>
-          <Suspense fallback={null}>
-            {expandedAlertIndex != null && ExpandedAlertView && (
-              <ExpandedAlertView {...renderContext} expandedAlertIndex={expandedAlertIndex} />
+      <IndividualTagsActionContextProvider value={individualTagsFlyout}>
+        <InspectButtonContainer>
+          <section style={{ width: '100%' }} data-test-subj={props['data-test-subj']}>
+            <Suspense fallback={null}>
+              {expandedAlertIndex != null && ExpandedAlertView && (
+                <ExpandedAlertView {...renderContext} expandedAlertIndex={expandedAlertIndex} />
+              )}
+            </Suspense>
+            {bulkEditTagsFlyoutState.isFlyoutOpen && selectedAlerts.length > 0 && (
+              <EditTagsFlyout
+                selectedAlerts={selectedAlerts}
+                onClose={bulkEditTagsFlyoutState.onClose}
+                onSaveTags={bulkEditTagsFlyoutState.onSaveTags}
+              />
+            )}
+            {individualTagsFlyout.isFlyoutOpen && selectedAlertsFromRowAction?.length > 0 && (
+              <EditTagsFlyout
+                selectedAlerts={selectedAlertsFromRowAction}
+                onClose={individualTagsFlyout.onClose}
+                onSaveTags={individualTagsFlyout.onSaveTags}
+              />
+            )}
+            {alertsCount > 0 && (
+              <EuiDataGrid
+                {...euiDataGridProps}
+                // As per EUI docs, it is not recommended to switch between undefined and defined height.
+                // If user changes height, it is better to unmount and mount the component.
+                // Ref: https://eui.elastic.co/#/tabular-content/data-grid#virtualization
+                key={height ? 'fixedHeight' : 'autoHeight'}
+                ref={dataGridRef}
+                css={rowStyles}
+                aria-label="Alerts table"
+                data-test-subj={isLoading ? `alertsTableIsLoading` : `alertsTableIsLoaded`}
+                height={height}
+                columns={columnsWithCellActions}
+                columnVisibility={columnVisibility}
+                trailingControlColumns={trailingControlColumns}
+                leadingControlColumns={leadingControlColumns}
+                rowCount={alertsCount}
+                renderCustomGridBody={dynamicRowHeight ? renderCustomGridBody : undefined}
+                cellContext={renderContext}
+                // Cast necessary because `cellContext` is untyped in EuiDataGrid
+                renderCellValue={CellValueHost as RenderCellValue}
+                renderCellPopover={CellPopoverHost}
+                gridStyle={actualGridStyle}
+                sorting={sortProps}
+                toolbarVisibility={toolbarVisibility}
+                pagination={dataGridPagination}
+                rowHeightsOptions={rowHeightsOptions}
+                onColumnResize={onColumnResize}
+              />
             )}
-          </Suspense>
-          {alertsCount > 0 && (
-            <EuiDataGrid
-              {...euiDataGridProps}
-              // As per EUI docs, it is not recommended to switch between undefined and defined height.
-              // If user changes height, it is better to unmount and mount the component.
-              // Ref: https://eui.elastic.co/#/tabular-content/data-grid#virtualization
-              key={height ? 'fixedHeight' : 'autoHeight'}
-              ref={dataGridRef}
-              css={rowStyles}
-              aria-label="Alerts table"
-              data-test-subj={isLoading ? `alertsTableIsLoading` : `alertsTableIsLoaded`}
-              height={height}
-              columns={columnsWithCellActions}
-              columnVisibility={columnVisibility}
-              trailingControlColumns={trailingControlColumns}
-              leadingControlColumns={leadingControlColumns}
-              rowCount={alertsCount}
-              renderCustomGridBody={dynamicRowHeight ? renderCustomGridBody : undefined}
-              cellContext={renderContext}
-              // Cast necessary because `cellContext` is untyped in EuiDataGrid
-              renderCellValue={CellValueHost as RenderCellValue}
-              renderCellPopover={CellPopoverHost}
-              gridStyle={actualGridStyle}
-              sorting={sortProps}
-              toolbarVisibility={toolbarVisibility}
-              pagination={dataGridPagination}
-              rowHeightsOptions={rowHeightsOptions}
-              onColumnResize={onColumnResize}
-            />
-          )}
-        </section>
-      </InspectButtonContainer>
+          </section>
+        </InspectButtonContainer>
+      </IndividualTagsActionContextProvider>
     );
   }
 );