[ResponseOps][Flapping] Update rule specific flapping tooltip UI (ela…

…stic#194086)

## Summary
Updates the rule specific flapping UI according to the finalized figma
designs:
https://www.figma.com/design/eTr6WsKzhSLcQ24AlgrY8R/Flapping-per-Rule--%3E-%23294?node-id=5265-28064&node-type=instance&t=GX5pGpXe1blP0x0G-0

<img width="798" alt="Screenshot 2024-09-25 at 8 56 47 PM"
src="https://github.com/user-attachments/assets/2655a3cd-8097-442e-a3c0-71ab40675e31">
<img width="588" alt="Screenshot 2024-09-25 at 9 23 30 PM"
src="https://github.com/user-attachments/assets/e40b43be-f5a5-4d80-a35c-c3032e017b56">

### To test:
1. Turn `IS_RULE_SPECIFIC_FLAPPING_ENABLED` to `true`.
2. Navigate to rule create/edit flyout and you should see the new
tooltips based on the figma designs linked above.

### Checklist
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_form/rule_add.test.tsx

@@ -67,6 +67,13 @@ jest.mock('../../lib/action_connector_api', () => ({
   loadAllActions: jest.fn(),
 }));
 
+jest.mock('../../lib/rule_api/get_flapping_settings', () => ({
+  getFlappingSettings: jest.fn().mockResolvedValue({
+    lookBackWindow: 20,
+    statusChangeThreshold: 20,
+  }),
+}));
+
 const actionTypeRegistry = actionTypeRegistryMock.create();
 const ruleTypeRegistry = ruleTypeRegistryMock.create();
 
@@ -149,6 +156,9 @@ describe('rule_add', () => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useKibanaMock().services.application.capabilities = {
       ...capabilities,
+      rulesSettings: {
+        writeFlappingSettingsUI: true,
+      },
       rules: {
         show: true,
         save: true,

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_form/rule_edit.test.tsx

@@ -63,6 +63,13 @@ jest.mock('@kbn/alerts-ui-shared/src/common/apis/fetch_ui_health_status', () =>
   fetchUiHealthStatus: jest.fn(() => ({ isRulesAvailable: true })),
 }));
 
+jest.mock('../../lib/rule_api/get_flapping_settings', () => ({
+  getFlappingSettings: jest.fn().mockResolvedValue({
+    lookBackWindow: 20,
+    statusChangeThreshold: 20,
+  }),
+}));
+
 describe('rule_edit', () => {
   let wrapper: ReactWrapper<any>;
   let mockedCoreSetup: ReturnType<typeof coreMock.createSetup>;
@@ -80,6 +87,9 @@ describe('rule_edit', () => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useKibanaMock().services.application.capabilities = {
       ...capabilities,
+      rulesSettings: {
+        writeFlappingSettingsUI: true,
+      },
       rules: {
         show: true,
         save: true,

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_form/rule_form.test.tsx

@@ -71,6 +71,12 @@ jest.mock('../../lib/capabilities', () => ({
   hasShowActionsCapability: jest.fn(() => true),
   hasExecuteActionsCapability: jest.fn(() => true),
 }));
+jest.mock('../../lib/rule_api/get_flapping_settings', () => ({
+  getFlappingSettings: jest.fn().mockResolvedValue({
+    lookBackWindow: 20,
+    statusChangeThreshold: 20,
+  }),
+}));
 
 describe('rule_form', () => {
   const ruleType = {
@@ -203,6 +209,9 @@ describe('rule_form', () => {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       useKibanaMock().services.application.capabilities = {
         ...capabilities,
+        rulesSettings: {
+          writeFlappingSettingsUI: true,
+        },
         rules: {
           show: true,
           save: true,
@@ -358,6 +367,9 @@ describe('rule_form', () => {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       useKibanaMock().services.application.capabilities = {
         ...capabilities,
+        rulesSettings: {
+          writeFlappingSettingsUI: true,
+        },
         rules: {
           show: true,
           save: true,
@@ -1071,6 +1083,9 @@ describe('rule_form', () => {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       useKibanaMock().services.application.capabilities = {
         ...capabilities,
+        rulesSettings: {
+          writeFlappingSettingsUI: true,
+        },
         rules: {
           show: true,
           save: true,

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_form/rule_form_advanced_options.test.tsx

@@ -13,6 +13,7 @@ import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import { RuleFormAdvancedOptions } from './rule_form_advanced_options';
 import { useKibana } from '../../../common/lib/kibana';
 import userEvent from '@testing-library/user-event';
+import { ApplicationStart } from '@kbn/core-application-browser';
 
 jest.mock('../../../common/lib/kibana');
 
@@ -38,6 +39,11 @@ describe('ruleFormAdvancedOptions', () => {
       enabled: true,
     });
     useKibanaMock().services.http = http;
+    useKibanaMock().services.application.capabilities = {
+      rulesSettings: {
+        writeFlappingSettingsUI: true,
+      },
+    } as unknown as ApplicationStart['capabilities'];
   });
 
   afterEach(() => {
@@ -80,7 +86,7 @@ describe('ruleFormAdvancedOptions', () => {
 
     expect(await screen.findByText('ON')).toBeInTheDocument();
     expect(screen.getByTestId('ruleFormAdvancedOptionsOverrideSwitch')).not.toBeChecked();
-    expect(screen.queryByText('Override')).not.toBeInTheDocument();
+    expect(screen.queryByText('Custom')).not.toBeInTheDocument();
     expect(screen.getByTestId('ruleSettingsFlappingMessage')).toHaveTextContent(
       'An alert is flapping if it changes status at least 3 times in the last 10 rule runs.'
     );
@@ -111,7 +117,7 @@ describe('ruleFormAdvancedOptions', () => {
     );
 
     expect(await screen.findByTestId('ruleFormAdvancedOptionsOverrideSwitch')).toBeChecked();
-    expect(screen.getByText('Override')).toBeInTheDocument();
+    expect(screen.getByText('Custom')).toBeInTheDocument();
     expect(screen.getByTestId('lookBackWindowRangeInput')).toHaveValue('6');
     expect(screen.getByTestId('statusChangeThresholdRangeInput')).toHaveValue('4');
     expect(screen.getByTestId('ruleSettingsFlappingMessage')).toHaveTextContent(
@@ -148,7 +154,7 @@ describe('ruleFormAdvancedOptions', () => {
     );
 
     expect(await screen.findByText('OFF')).toBeInTheDocument();
-    expect(screen.queryByText('Override')).not.toBeInTheDocument();
+    expect(screen.queryByText('Custom')).not.toBeInTheDocument();
     expect(screen.queryByTestId('ruleFormAdvancedOptionsOverrideSwitch')).not.toBeInTheDocument();
     expect(screen.queryByTestId('ruleSettingsFlappingMessage')).not.toBeInTheDocument();
   });