[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

@@ -45,7 +45,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';
@@ -137,8 +137,8 @@ export interface CasesUiStart {
     getRecentCases: (props: GetRecentCasesProps) => ReactElement<GetRecentCasesProps>;
   };
   hooks: {
-    getUseCasesAddToNewCaseFlyout: UseCasesAddToNewCaseFlyout;
-    getUseCasesAddToExistingCaseModal: UseCasesAddToExistingCaseModal;
+    useCasesAddToNewCaseFlyout: UseCasesAddToNewCaseFlyout;
+    useCasesAddToExistingCaseModal: UseCasesAddToExistingCaseModal;
   };
   helpers: {
     /**
@@ -152,7 +152,7 @@ export interface CasesUiStart {
     canUseCases: ReturnType<typeof canUseCases>;
     getUICapabilities: typeof getUICapabilities;
     getRuleIdFromEvent: typeof getRuleIdFromEvent;
-    groupAlertsByRule: typeof groupAlertsByRule;
+    groupAlertsByRule: GroupAlertsByRule;
   };
 }
 

x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/alerts/alerts_tab_content.tsx

@@ -21,8 +21,6 @@ import { useUnifiedSearchContext } from '../../../hooks/use_unified_search';
 import {
   ALERTS_PER_PAGE,
   ALERTS_TABLE_ID,
-  casesFeatures,
-  casesOwner,
   DEFAULT_DATE_FORMAT,
   DEFAULT_INTERVAL,
   infraAlertFeatureIds,
@@ -38,15 +36,11 @@ export const AlertsTabContent = () => {
 
   const { searchCriteria } = useUnifiedSearchContext();
 
-  const { application, cases, triggersActionsUi } = services;
+  const { triggersActionsUi } = services;
 
   const { alertsTableConfigurationRegistry, getAlertsStateTable: AlertsStateTable } =
     triggersActionsUi;
 
-  const CasesContext = cases.ui.getCasesContext();
-  const uiCapabilities = application?.capabilities;
-  const casesCapabilities = cases.helpers.getUICapabilities(uiCapabilities.observabilityCases);
-
   return (
     <HeightRetainer>
       <EuiFlexGroup direction="column" gutterSize="m" data-test-subj="hostsView-alerts">
@@ -63,23 +57,17 @@ export const AlertsTabContent = () => {
         </EuiFlexItem>
         {alertsEsQueryByStatus && (
           <EuiFlexItem>
-            <CasesContext
-              features={casesFeatures}
-              owner={casesOwner}
-              permissions={casesCapabilities}
-            >
-              <AlertsStateTable
-                alertsTableConfigurationRegistry={alertsTableConfigurationRegistry}
-                configurationId={AlertConsumers.OBSERVABILITY}
-                featureIds={infraAlertFeatureIds}
-                flyoutSize="s"
-                id={ALERTS_TABLE_ID}
-                pageSize={ALERTS_PER_PAGE}
-                query={alertsEsQueryByStatus}
-                showAlertStatusWithFlapping
-                showExpandToDetails={false}
-              />
-            </CasesContext>
+            <AlertsStateTable
+              alertsTableConfigurationRegistry={alertsTableConfigurationRegistry}
+              configurationId={AlertConsumers.OBSERVABILITY}
+              featureIds={infraAlertFeatureIds}
+              flyoutSize="s"
+              id={ALERTS_TABLE_ID}
+              pageSize={ALERTS_PER_PAGE}
+              query={alertsEsQueryByStatus}
+              showAlertStatusWithFlapping
+              showExpandToDetails={false}
+            />
           </EuiFlexItem>
         )}
       </EuiFlexGroup>

x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/config.ts

@@ -13,8 +13,6 @@ export const ALERTS_TABLE_ID = 'xpack.infra.hosts.alerts.table';
 
 export const INFRA_ALERT_FEATURE_ID = 'infrastructure';
 export const infraAlertFeatureIds: ValidFeatureId[] = [AlertConsumers.INFRASTRUCTURE];
-export const casesFeatures = { alerts: { sync: false } };
-export const casesOwner = [INFRA_ALERT_FEATURE_ID];
 
 export const DEFAULT_INTERVAL = '60s';
 export const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD HH:mm';

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();