From 962082ead77fbd0c23a64347f9fa19e7424c400b Mon Sep 17 00:00:00 2001
From: Janki Salvi <117571355+js-jankisalvi@users.noreply.github.com>
Date: Mon, 4 Nov 2024 19:13:33 +0000
Subject: [PATCH] [ResponseOps][New Rule Form] Fix new rule form issues with
 basic license (#198036)

## Summary

Fixes below issues from new rule form leftovers
https://github.com/elastic/kibana/issues/196235?reload=1?reload=1

<details><summary>On basic license, if I hover on unsupported
connectors, a tooltip explains the reasoning. This is not happening for
rule types. We should do the same for the rule types</summary>

![Screenshot 2024-10-28 at 15 44
26](https://github.com/user-attachments/assets/522a9a54-fa41-48e2-a749-58a465eb2543)
</details>

<details><summary>On basic license, I can edit a rule that is not
available on the basic. This leads to a bunch of errors in edit mode.
The same is happening on main. We should prevent accessing this kind of
rule types.</summary>

![Screenshot 2024-10-28 at 15 44
57](https://github.com/user-attachments/assets/9a016ef2-aaf2-4d3f-8161-70bcb89f3334)
</details>

### 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
---
 .../components/rule_type_list.test.tsx        |  4 ++
 .../components/rule_type_list.tsx             | 58 +++++++++++++------
 .../components/rules_list_table.tsx           |  1 +
 3 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/packages/kbn-alerts-ui-shared/src/rule_type_modal/components/rule_type_list.test.tsx b/packages/kbn-alerts-ui-shared/src/rule_type_modal/components/rule_type_list.test.tsx
index 175d90924586c..7003b06875659 100644
--- a/packages/kbn-alerts-ui-shared/src/rule_type_modal/components/rule_type_list.test.tsx
+++ b/packages/kbn-alerts-ui-shared/src/rule_type_modal/components/rule_type_list.test.tsx
@@ -9,6 +9,7 @@
 
 import React from 'react';
 import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { RuleTypeList } from './rule_type_list';
 import { RuleTypeWithDescription } from '../types';
 
@@ -93,5 +94,8 @@ describe('RuleTypeList', () => {
     expect(secondRuleInList).not.toBeDisabled();
     const thirdRuleInList = within(ruleListEl[2]).getByRole('button', { name: 'Rule Type 2' });
     expect(thirdRuleInList).toBeDisabled();
+
+    await userEvent.hover(ruleListEl[2]);
+    expect(await screen.findByText('This rule requires a platinum license.')).toBeInTheDocument();
   });
 });
diff --git a/packages/kbn-alerts-ui-shared/src/rule_type_modal/components/rule_type_list.tsx b/packages/kbn-alerts-ui-shared/src/rule_type_modal/components/rule_type_list.tsx
index 4e21e428f3c5c..91710dbdfade5 100644
--- a/packages/kbn-alerts-ui-shared/src/rule_type_modal/components/rule_type_list.tsx
+++ b/packages/kbn-alerts-ui-shared/src/rule_type_modal/components/rule_type_list.tsx
@@ -20,6 +20,7 @@ import {
   EuiEmptyPrompt,
   EuiButton,
   useEuiTheme,
+  EuiToolTip,
 } from '@elastic/eui';
 import { omit } from 'lodash';
 import { PRODUCER_DISPLAY_NAMES } from '../../common/i18n';
@@ -86,6 +87,28 @@ export const RuleTypeList: React.FC<RuleTypeListProps> = ({
 
   const onClickAll = useCallback(() => onFilterByProducer(null), [onFilterByProducer]);
 
+  const ruleCard = (rule: RuleTypeWithDescription) => (
+    <EuiCard
+      titleSize="xs"
+      textAlign="left"
+      hasBorder
+      title={rule.name}
+      onClick={() => onSelectRuleType(rule.id)}
+      description={rule.description}
+      style={{ marginRight: '8px', flexGrow: 0 }}
+      data-test-subj={`${rule.id}-SelectOption`}
+      isDisabled={!rule.enabledInLicense}
+    >
+      <EuiText
+        color="subdued"
+        size="xs"
+        style={{ textTransform: 'uppercase', fontWeight: euiTheme.font.weight.bold }}
+      >
+        {producerToDisplayName(rule.producer)}
+      </EuiText>
+    </EuiCard>
+  );
+
   return (
     <EuiFlexGroup
       style={{
@@ -151,25 +174,24 @@ export const RuleTypeList: React.FC<RuleTypeListProps> = ({
         )}
         {ruleTypesList.map((rule) => (
           <React.Fragment key={rule.id}>
-            <EuiCard
-              titleSize="xs"
-              textAlign="left"
-              hasBorder
-              title={rule.name}
-              onClick={() => onSelectRuleType(rule.id)}
-              description={rule.description}
-              style={{ marginRight: '8px', flexGrow: 0 }}
-              data-test-subj={`${rule.id}-SelectOption`}
-              isDisabled={rule.enabledInLicense === false}
-            >
-              <EuiText
-                color="subdued"
-                size="xs"
-                style={{ textTransform: 'uppercase', fontWeight: euiTheme.font.weight.bold }}
+            {rule.enabledInLicense ? (
+              ruleCard(rule)
+            ) : (
+              <EuiToolTip
+                position="top"
+                content={i18n.translate(
+                  'alertsUIShared.components.ruleTypeModal.minimumRequiredLicenseMessage',
+                  {
+                    defaultMessage: 'This rule requires a {minimumLicenseRequired} license.',
+                    values: {
+                      minimumLicenseRequired: rule.minimumLicenseRequired,
+                    },
+                  }
+                )}
               >
-                {producerToDisplayName(rule.producer)}
-              </EuiText>
-            </EuiCard>
+                <>{ruleCard(rule)} </>
+              </EuiToolTip>
+            )}
             <EuiSpacer size="s" />
           </React.Fragment>
         ))}
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx
index ee3ee18152e47..88f22f9687ea6 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx
@@ -750,6 +750,7 @@ export const RulesListTable = (props: RulesListTableProps) => {
                           'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.editAriaLabel',
                           { defaultMessage: 'Edit' }
                         )}
+                        disabled={!rule.enabledInLicense}
                       />
                     </EuiFlexItem>
                   ) : null}