[RAM] Cases bulk actions & column improvements

x-pack/examples/triggers_actions_ui_example/public/plugin.tsx

@@ -137,7 +137,6 @@ export class TriggersActionsUiExamplePlugin
 
     const config: AlertsTableConfigurationRegistry = {
       id: 'observabilityCases',
-      casesFeatureId: 'observabilityCases',
       columns,
       useInternalFlyout,
       getRenderCellValue: () => (props: any) => {

x-pack/plugins/cases/public/client/helpers/group_alerts_by_rule.ts

@@ -23,7 +23,9 @@ interface EventNonEcsData {
 
 type CommentRequestAlertTypeWithoutOwner = Omit<CommentRequestAlertType, 'owner'>;
 
-export const groupAlertsByRule = (items: Event[]): CaseAttachmentsWithoutOwner => {
+export type GroupAlertsByRule = (items: Event[]) => CaseAttachmentsWithoutOwner;
+
+export const groupAlertsByRule: GroupAlertsByRule = (items) => {
   const attachmentsByRule = items.reduce<Record<string, CommentRequestAlertTypeWithoutOwner>>(
     (acc, item) => {
       const rule = getRuleIdFromEvent(item);

x-pack/plugins/cases/public/components/all_cases/selector_modal/use_cases_add_to_existing_case_modal.test.tsx

@@ -32,13 +32,13 @@ jest.mock('./all_cases_selector_modal', () => {
   };
 });
 
+const onSuccess = jest.fn();
 const useCasesToastMock = useCasesToast as jest.Mock;
-
 const AllCasesSelectorModalMock = AllCasesSelectorModal as unknown as jest.Mock;
 
 // test component to test the hook integration
 const TestComponent: React.FC = () => {
-  const hook = useCasesAddToExistingCaseModal();
+  const hook = useCasesAddToExistingCaseModal({ onSuccess });
 
   const onClick = () => {
     hook.open({ attachments: [alertComment] });
@@ -81,13 +81,14 @@ describe('use cases add to existing case modal hook', () => {
   };
 
   const defaultParams = () => {
-    return { onRowClick: jest.fn() };
+    return { onSuccess };
   };
 
   beforeEach(() => {
     appMockRender = createAppMockRenderer();
     dispatch.mockReset();
     AllCasesSelectorModalMock.mockReset();
+    onSuccess.mockReset();
   });
 
   it('should throw if called outside of a cases context', () => {
@@ -167,6 +168,31 @@ describe('use cases add to existing case modal hook', () => {
     expect(mockedToastSuccess).toHaveBeenCalled();
   });
 
+  it('should call onSuccess when defined', async () => {
+    const mockBulkCreateAttachments = jest.fn();
+
+    useCreateAttachmentsMock.mockReturnValueOnce({
+      createAttachments: mockBulkCreateAttachments,
+    });
+
+    const mockedToastSuccess = jest.fn();
+    useCasesToastMock.mockReturnValue({
+      showSuccessAttach: mockedToastSuccess,
+    });
+
+    AllCasesSelectorModalMock.mockImplementation(({ onRowClick }) => {
+      onRowClick({ id: 'test' } as Case);
+      return null;
+    });
+
+    const result = appMockRender.render(<TestComponent />);
+    userEvent.click(result.getByTestId('open-modal'));
+
+    await waitFor(() => {
+      expect(onSuccess).toHaveBeenCalled();
+    });
+  });
+
   it('should not call createAttachments nor show toast success when a case is not selected', async () => {
     const mockBulkCreateAttachments = jest.fn();
     useCreateAttachmentsMock.mockReturnValueOnce({

x-pack/plugins/cases/public/components/all_cases/selector_modal/use_cases_add_to_existing_case_modal.tsx

@@ -17,19 +17,18 @@ import type { CaseAttachmentsWithoutOwner } from '../../../types';
 import { useCreateAttachments } from '../../../containers/use_create_attachments';
 import { useAddAttachmentToExistingCaseTransaction } from '../../../common/apm/use_cases_transactions';
 
-type AddToExistingFlyoutProps = AllCasesSelectorModalProps & {
+type AddToExistingFlyoutProps = Omit<AllCasesSelectorModalProps, 'onRowClick'> & {
   toastTitle?: string;
   toastContent?: string;
+  onSuccess?: (theCase: Case) => void;
 };
 
 export const useCasesAddToExistingCaseModal = (props: AddToExistingFlyoutProps = {}) => {
   const createNewCaseFlyout = useCasesAddToNewCaseFlyout({
     onClose: props.onClose,
-    // TODO there's no need for onSuccess to be async. This will be fixed
-    // in a follow up clean up
-    onSuccess: async (theCase?: Case) => {
-      if (props.onRowClick) {
-        return props.onRowClick(theCase);
+    onSuccess: (theCase?: Case) => {
+      if (props.onSuccess && theCase) {
+        return props.onSuccess(theCase);
       }
     },
     toastTitle: props.toastTitle,
@@ -74,6 +73,10 @@ export const useCasesAddToExistingCaseModal = (props: AddToExistingFlyoutProps =
             throwOnError: true,
           });
 
+          if (props.onSuccess) {
+            props.onSuccess(theCase);
+          }
+
           casesToasts.showSuccessAttach({
             theCase,
             attachments,
@@ -85,10 +88,6 @@ export const useCasesAddToExistingCaseModal = (props: AddToExistingFlyoutProps =
         // error toast is handled
         // inside the createAttachments method
       }
-
-      if (props.onRowClick) {
-        props.onRowClick(theCase);
-      }
     },
     [
       props,
@@ -114,6 +113,7 @@ export const useCasesAddToExistingCaseModal = (props: AddToExistingFlyoutProps =
           },
           onClose: () => {
             closeModal();
+
             if (props.onClose) {
               return props.onClose();
             }

x-pack/plugins/cases/public/components/create/flyout/create_case_flyout.tsx

@@ -11,6 +11,7 @@ import { EuiFlyout, EuiFlyoutHeader, EuiTitle, EuiFlyoutBody } from '@elastic/eu
 
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { noop } from 'lodash';
 import type { CasePostRequest } from '../../../../common/api';
 import * as i18n from '../translations';
 import type { Case } from '../../../../common/ui/types';
@@ -25,7 +26,7 @@ export interface CreateCaseFlyoutProps {
     createAttachments: UseCreateAttachments['createAttachments']
   ) => Promise<void>;
   onClose?: () => void;
-  onSuccess?: (theCase: Case) => Promise<void>;
+  onSuccess?: (theCase: Case) => void;
   attachments?: CaseAttachmentsWithoutOwner;
   headerContent?: React.ReactNode;
   initialValue?: Pick<CasePostRequest, 'title' | 'description'>;
@@ -76,8 +77,8 @@ const FormWrapper = styled.div`
 
 export const CreateCaseFlyout = React.memo<CreateCaseFlyoutProps>(
   ({ afterCaseCreated, attachments, headerContent, initialValue, onClose, onSuccess }) => {
-    const handleCancel = onClose || function () {};
-    const handleOnSuccess = onSuccess || async function () {};
+    const handleCancel = onClose || noop;
+    const handleOnSuccess = onSuccess || noop;
 
     return (
       <QueryClientProvider client={casesQueryClient}>

x-pack/plugins/cases/public/components/create/form.tsx

@@ -69,7 +69,7 @@ export interface CreateCaseFormFieldsProps {
 }
 export interface CreateCaseFormProps extends Pick<Partial<CreateCaseFormFieldsProps>, 'withSteps'> {
   onCancel: () => void;
-  onSuccess: (theCase: Case) => Promise<void>;
+  onSuccess: (theCase: Case) => void;
   afterCaseCreated?: (
     theCase: Case,
     createAttachments: UseCreateAttachments['createAttachments']
@@ -208,7 +208,7 @@ export const CreateCaseForm: React.FC<CreateCaseFormProps> = React.memo(
         onConfirmationCallback: handleOnConfirmationCallback,
       });
 
-    const handleOnSuccess = (theCase: Case): Promise<void> => {
+    const handleOnSuccess = (theCase: Case): void => {
       removeItemFromSessionStorage(draftStorageKey);
       return onSuccess(theCase);
     };

x-pack/plugins/cases/public/components/create/form_context.tsx

@@ -43,7 +43,7 @@ interface Props {
     createAttachments: UseCreateAttachments['createAttachments']
   ) => Promise<void>;
   children?: JSX.Element | JSX.Element[];
-  onSuccess?: (theCase: Case) => Promise<void>;
+  onSuccess?: (theCase: Case) => void;
   attachments?: CaseAttachmentsWithoutOwner;
   initialValue?: Pick<CasePostRequest, 'title' | 'description'>;
 }
@@ -112,7 +112,7 @@ export const FormContext: React.FC<Props> = ({
         }
 
         if (onSuccess && updatedCase) {
-          await onSuccess(updatedCase);
+          onSuccess(updatedCase);
         }
       }
     },

x-pack/plugins/cases/public/mocks.ts

@@ -22,10 +22,13 @@ const uiMock: jest.Mocked<CasesUiStart['ui']> = {
 };
 
 export const openAddToExistingCaseModalMock = jest.fn();
+export const openAddToNewCaseFlyoutMock = jest.fn();
 
 const hooksMock: jest.Mocked<CasesUiStart['hooks']> = {
-  getUseCasesAddToNewCaseFlyout: jest.fn(),
-  getUseCasesAddToExistingCaseModal: jest.fn().mockImplementation(() => ({
+  useCasesAddToNewCaseFlyout: jest.fn().mockImplementation(() => ({
+    open: openAddToNewCaseFlyoutMock,
+  })),
+  useCasesAddToExistingCaseModal: jest.fn().mockImplementation(() => ({
     open: openAddToExistingCaseModalMock,
   })),
 };

x-pack/plugins/cases/public/plugin.ts

@@ -133,14 +133,14 @@ export class CasesUiPlugin
             externalReferenceAttachmentTypeRegistry: this.externalReferenceAttachmentTypeRegistry,
             persistableStateAttachmentTypeRegistry: this.persistableStateAttachmentTypeRegistry,
           }),
-        // @deprecated Please use the hook getUseCasesAddToNewCaseFlyout
+        // @deprecated Please use the hook useCasesAddToNewCaseFlyout
         getCreateCaseFlyout: (props) =>
           getCreateCaseFlyoutLazy({
             ...props,
             externalReferenceAttachmentTypeRegistry: this.externalReferenceAttachmentTypeRegistry,
             persistableStateAttachmentTypeRegistry: this.persistableStateAttachmentTypeRegistry,
           }),
-        // @deprecated Please use the hook getUseCasesAddToExistingCaseModal
+        // @deprecated Please use the hook useCasesAddToExistingCaseModal
         getAllCasesSelectorModal: (props) =>
           getAllCasesSelectorModalLazy({
             ...props,
@@ -149,8 +149,8 @@ export class CasesUiPlugin
           }),
       },
       hooks: {
-        getUseCasesAddToNewCaseFlyout: useCasesAddToNewCaseFlyout,
-        getUseCasesAddToExistingCaseModal: useCasesAddToExistingCaseModal,
+        useCasesAddToNewCaseFlyout,
+        useCasesAddToExistingCaseModal,
       },
       helpers: {
         canUseCases: canUseCases(core.application.capabilities),

x-pack/plugins/cases/public/types.ts

@@ -44,7 +44,7 @@ import type { GetAllCasesSelectorModalProps } from './client/ui/get_all_cases_se
 import type { GetCreateCaseFlyoutProps } from './client/ui/get_create_case_flyout';
 import type { GetRecentCasesProps } from './client/ui/get_recent_cases';
 import type { Cases, CasesStatus, CasesMetrics } from '../common/ui';
-import type { groupAlertsByRule } from './client/helpers/group_alerts_by_rule';
+import type { GroupAlertsByRule } from './client/helpers/group_alerts_by_rule';
 import type { getUICapabilities } from './client/helpers/capabilities';
 import type { AttachmentFramework } from './client/attachment_framework/types';
 import type { ExternalReferenceAttachmentTypeRegistry } from './client/attachment_framework/external_reference_registry';
@@ -135,8 +135,8 @@ export interface CasesUiStart {
     getRecentCases: (props: GetRecentCasesProps) => ReactElement<GetRecentCasesProps>;
   };
   hooks: {
-    getUseCasesAddToNewCaseFlyout: UseCasesAddToNewCaseFlyout;
-    getUseCasesAddToExistingCaseModal: UseCasesAddToExistingCaseModal;
+    useCasesAddToNewCaseFlyout: UseCasesAddToNewCaseFlyout;
+    useCasesAddToExistingCaseModal: UseCasesAddToExistingCaseModal;
   };
   helpers: {
     /**
@@ -150,7 +150,7 @@ export interface CasesUiStart {
     canUseCases: ReturnType<typeof canUseCases>;
     getUICapabilities: typeof getUICapabilities;
     getRuleIdFromEvent: typeof getRuleIdFromEvent;
-    groupAlertsByRule: typeof groupAlertsByRule;
+    groupAlertsByRule: GroupAlertsByRule;
   };
 }
 

x-pack/plugins/ml/public/application/contexts/kibana/use_cases_modal.ts

@@ -21,7 +21,7 @@ export const useCasesModal = <EmbeddableType extends MlEmbeddableTypes>(
     services: { cases },
   } = useMlKibana();
 
-  const selectCaseModal = cases?.hooks.getUseCasesAddToExistingCaseModal();
+  const selectCaseModal = cases?.hooks.useCasesAddToExistingCaseModal();
 
   return useCallback(
     (persistableState: Partial<Omit<MappedEmbeddableTypeOf<EmbeddableType>, 'id'>>) => {

x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx

@@ -78,7 +78,7 @@ export const AnomalyTimeline: FC<AnomalyTimelineProps> = React.memo(
 
     const globalTimeRange = useTimeRangeUpdates(true);
 
-    const selectCaseModal = cases?.hooks.getUseCasesAddToExistingCaseModal();
+    const selectCaseModal = cases?.hooks.useCasesAddToExistingCaseModal();
 
     const { anomalyExplorerCommonStateService, anomalyTimelineStateService } =
       useAnomalyExplorerContext();

x-pack/plugins/observability/public/config/register_alerts_table_configuration.tsx

@@ -10,7 +10,6 @@ import { TIMESTAMP } from '@kbn/rule-data-utils';
 import { SortOrder } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 import { AlertsTableConfigurationRegistry } from '@kbn/triggers-actions-ui-plugin/public/types';
 import { casesFeatureId, observabilityFeatureId } from '../../common';
-import { useBulkAddToCaseTriggerActions } from '../hooks/use_alert_bulk_case_actions';
 import { TopAlert, useToGetInternalFlyout } from '../pages/alerts';
 import { getRenderCellValue } from '../pages/alerts/components/render_cell_value';
 import { addDisplayNames } from '../pages/alerts/containers/alerts_table/add_display_names';
@@ -24,7 +23,7 @@ const getO11yAlertsTableConfiguration = (
   config: ConfigSchema
 ): AlertsTableConfigurationRegistry => ({
   id: observabilityFeatureId,
-  casesFeatureId,
+  cases: { featureId: casesFeatureId, owner: [observabilityFeatureId] },
   columns: alertO11yColumns.map(addDisplayNames),
   getRenderCellValue: (({ setFlyoutAlert }: { setFlyoutAlert: (data: TopAlert) => void }) => {
     return getRenderCellValue({ observabilityRuleTypeRegistry, setFlyoutAlert });
@@ -37,7 +36,6 @@ const getO11yAlertsTableConfiguration = (
     },
   ],
   useActionsColumn: getRowActions(observabilityRuleTypeRegistry, config),
-  useBulkActions: useBulkAddToCaseTriggerActions,
   useInternalFlyout: () => {
     const { header, body, footer } = useToGetInternalFlyout(observabilityRuleTypeRegistry);
     return { header, body, footer };