[Cases] Add alerts experimental flag (#137215)

* Setting for experimetnal badge in the alerts table

* Fix types

x-pack/plugins/cases/common/constants.ts

@@ -131,7 +131,7 @@ export const MAX_TITLE_LENGTH = 64 as const;
  */
 
 export const DEFAULT_FEATURES: CasesFeaturesAllRequired = Object.freeze({
-  alerts: { sync: true, enabled: true },
+  alerts: { sync: true, enabled: true, isExperimental: false },
   metrics: [],
 });
 

x-pack/plugins/cases/common/ui/types.ts

@@ -36,7 +36,7 @@ import { SnakeToCamelCase } from '../types';
 type DeepRequired<T> = { [K in keyof T]: DeepRequired<T[K]> } & Required<T>;
 
 export interface CasesContextFeatures {
-  alerts: { sync?: boolean; enabled?: boolean };
+  alerts: { sync?: boolean; enabled?: boolean; isExperimental?: boolean };
   metrics: SingleCaseMetricsFeature[];
 }
 

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

@@ -69,7 +69,7 @@ describe('use cases add to existing case modal hook', () => {
           appTitle: 'jest',
           basePath: '/jest',
           dispatch,
-          features: { alerts: { sync: true, enabled: true }, metrics: [] },
+          features: { alerts: { sync: true, enabled: true, isExperimental: false }, metrics: [] },
           releasePhase: 'ga',
         }}
       >

x-pack/plugins/cases/public/components/case_view/case_view_page.test.tsx

@@ -5,8 +5,7 @@
  * 2.0.
  */
 
-import { waitFor, within } from '@testing-library/dom';
-import { act } from '@testing-library/react-hooks';
+import { act, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { ConnectorTypes } from '../../../common/api';
@@ -43,6 +42,7 @@ jest.mock('../../containers/use_post_push_to_service');
 jest.mock('../user_actions/timestamp');
 jest.mock('../../common/navigation/hooks');
 jest.mock('../../common/hooks');
+jest.mock('../connectors/resilient/api');
 
 const useFetchCaseMock = useGetCase as jest.Mock;
 const useUrlParamsMock = useUrlParams as jest.Mock;
@@ -435,8 +435,7 @@ describe('CaseViewPage', () => {
       });
     });
 
-    // unskip when alerts tab is activated
-    it.skip('navigates to the alerts tab when the alerts tab is clicked', async () => {
+    it('navigates to the alerts tab when the alerts tab is clicked', async () => {
       const navigateToCaseViewMock = useCaseViewNavigationMock().navigateToCaseView;
       const result = appMockRenderer.render(<CaseViewPage {...caseProps} />);
       userEvent.click(result.getByTestId('case-view-tab-title-alerts'));
@@ -448,8 +447,7 @@ describe('CaseViewPage', () => {
       });
     });
 
-    // unskip when alerts tab is activated
-    it.skip('should display the alerts tab when the feature is enabled', async () => {
+    it('should display the alerts tab when the feature is enabled', async () => {
       appMockRenderer = createAppMockRenderer({ features: { alerts: { enabled: true } } });
       const result = appMockRenderer.render(<CaseViewPage {...caseProps} />);
       await act(async () => {
@@ -466,5 +464,23 @@ describe('CaseViewPage', () => {
         expect(result.queryByTestId('case-view-tab-title-alerts')).toBeFalsy();
       });
     });
+
+    it('should not show the experimental badge on the alerts table', async () => {
+      appMockRenderer = createAppMockRenderer({ features: { alerts: { isExperimental: false } } });
+      const result = appMockRenderer.render(<CaseViewPage {...caseProps} />);
+
+      await act(async () => {
+        expect(result.queryByTestId('case-view-alerts-table-experimental-badge')).toBeFalsy();
+      });
+    });
+
+    it('should show the experimental badge on the alerts table', async () => {
+      appMockRenderer = createAppMockRenderer({ features: { alerts: { isExperimental: true } } });
+      const result = appMockRenderer.render(<CaseViewPage {...caseProps} />);
+
+      await act(async () => {
+        expect(result.queryByTestId('case-view-alerts-table-experimental-badge')).toBeTruthy();
+      });
+    });
   });
 });

x-pack/plugins/cases/public/components/case_view/case_view_page.tsx

@@ -123,13 +123,16 @@ export const CaseViewPage = React.memo<CaseViewPageProps>(
                 name: (
                   <>
                     {ALERTS_TAB}
-                    <ExperimentalBadge
-                      label={EXPERIMENTAL_LABEL}
-                      size="s"
-                      iconType="beaker"
-                      tooltipContent={EXPERIMENTAL_DESC}
-                      tooltipPosition="bottom"
-                    />
+                    {features.alerts.isExperimental ? (
+                      <ExperimentalBadge
+                        label={EXPERIMENTAL_LABEL}
+                        size="s"
+                        iconType="beaker"
+                        tooltipContent={EXPERIMENTAL_DESC}
+                        tooltipPosition="bottom"
+                        data-test-subj="case-view-alerts-table-experimental-badge"
+                      />
+                    ) : null}
                   </>
                 ),
                 content: <CaseViewAlerts caseData={caseData} />,
@@ -141,6 +144,7 @@ export const CaseViewPage = React.memo<CaseViewPageProps>(
         actionsNavigation,
         caseData,
         features.alerts.enabled,
+        features.alerts.isExperimental,
         ruleDetailsNavigation,
         showAlertDetails,
         useFetchAlertData,

x-pack/plugins/cases/public/components/connectors/resilient/__mocks__/api.ts

@@ -10,7 +10,7 @@ import { Props } from '../api';
 import { ResilientIncidentTypes, ResilientSeverity } from '../types';
 
 export const getIncidentTypes = async (props: Props): Promise<{ data: ResilientIncidentTypes }> =>
-  Promise.resolve({ data: incidentTypes });
+  Promise.resolve({ data: incidentTypes, actionId: '1' });
 
 export const getSeverity = async (props: Props): Promise<{ data: ResilientSeverity }> =>
-  Promise.resolve({ data: severity });
+  Promise.resolve({ data: severity, actionId: '1' });

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

@@ -39,7 +39,7 @@ describe('use cases add to new case flyout hook', () => {
             appTitle: 'jest',
             basePath: '/jest',
             dispatch,
-            features: { alerts: { sync: true, enabled: true }, metrics: [] },
+            features: { alerts: { sync: true, enabled: true, isExperimental: false }, metrics: [] },
             releasePhase: 'ga',
           }}
         >

x-pack/plugins/observability/public/pages/cases/cases.tsx

@@ -52,7 +52,7 @@ export const Cases = React.memo<CasesProps>(({ permissions }) => {
         basePath: CASES_PATH,
         permissions,
         owner: [CASES_OWNER],
-        features: { alerts: { sync: false } },
+        features: { alerts: { sync: false, isExperimental: false } },
         useFetchAlertData,
         showAlertDetails: (alertId: string) => {
           setSelectedAlertId(alertId);

x-pack/plugins/security_solution/public/cases/pages/index.tsx

@@ -100,6 +100,7 @@ const CaseContainerComponent: React.FC = () => {
           owner: [APP_ID],
           features: {
             metrics: ['alerts.count', 'alerts.users', 'alerts.hosts', 'connectors', 'lifespan'],
+            alerts: { isExperimental: true },
           },
           refreshRef,
           onComponentInitialized,