From 2f470d3431abccc6cbe80eae0d92a5a2a99ec2f5 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Tue, 5 Nov 2024 08:00:57 +1100
Subject: [PATCH] [8.x] [ResponseOps][New Rule Form] Fix new rule form issues
 with basic license (#198036) (#198842)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ResponseOps][New Rule Form] Fix new rule form issues with basic
license (#198036)](https://github.com/elastic/kibana/pull/198036)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Janki
Salvi","email":"117571355+js-jankisalvi@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-11-04T19:13:33Z","message":"[ResponseOps][New
Rule Form] Fix new rule form issues with basic license (#198036)\n\n##
Summary\r\n\r\nFixes below issues from new rule form
leftovers\r\nhttps://github.com/elastic/kibana/issues/196235?reload=1?reload=1\r\n\r\n<details><summary>On
basic license, if I hover on unsupported\r\nconnectors, a tooltip
explains the reasoning. This is not happening for\r\nrule types. We
should do the same for the rule types</summary>\r\n\r\n![Screenshot
2024-10-28 at 15
44\r\n26](https://github.com/user-attachments/assets/522a9a54-fa41-48e2-a749-58a465eb2543)\r\n</details>
\r\n\r\n<details><summary>On basic license, I can edit a rule that is
not\r\navailable on the basic. This leads to a bunch of errors in edit
mode.\r\nThe same is happening on main. We should prevent accessing this
kind of\r\nrule types.</summary>\r\n\r\n![Screenshot 2024-10-28 at 15
44\r\n57](https://github.com/user-attachments/assets/9a016ef2-aaf2-4d3f-8161-70bcb89f3334)\r\n</details>
\r\n\r\n### Checklist\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"962082ead77fbd0c23a64347f9fa19e7424c400b","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","v9.0.0","backport:prev-minor","v8.17.0"],"title":"[ResponseOps][New
Rule Form] Fix new rule form issues with basic
license","number":198036,"url":"https://github.com/elastic/kibana/pull/198036","mergeCommit":{"message":"[ResponseOps][New
Rule Form] Fix new rule form issues with basic license (#198036)\n\n##
Summary\r\n\r\nFixes below issues from new rule form
leftovers\r\nhttps://github.com/elastic/kibana/issues/196235?reload=1?reload=1\r\n\r\n<details><summary>On
basic license, if I hover on unsupported\r\nconnectors, a tooltip
explains the reasoning. This is not happening for\r\nrule types. We
should do the same for the rule types</summary>\r\n\r\n![Screenshot
2024-10-28 at 15
44\r\n26](https://github.com/user-attachments/assets/522a9a54-fa41-48e2-a749-58a465eb2543)\r\n</details>
\r\n\r\n<details><summary>On basic license, I can edit a rule that is
not\r\navailable on the basic. This leads to a bunch of errors in edit
mode.\r\nThe same is happening on main. We should prevent accessing this
kind of\r\nrule types.</summary>\r\n\r\n![Screenshot 2024-10-28 at 15
44\r\n57](https://github.com/user-attachments/assets/9a016ef2-aaf2-4d3f-8161-70bcb89f3334)\r\n</details>
\r\n\r\n### Checklist\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"962082ead77fbd0c23a64347f9fa19e7424c400b"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/198036","number":198036,"mergeCommit":{"message":"[ResponseOps][New
Rule Form] Fix new rule form issues with basic license (#198036)\n\n##
Summary\r\n\r\nFixes below issues from new rule form
leftovers\r\nhttps://github.com/elastic/kibana/issues/196235?reload=1?reload=1\r\n\r\n<details><summary>On
basic license, if I hover on unsupported\r\nconnectors, a tooltip
explains the reasoning. This is not happening for\r\nrule types. We
should do the same for the rule types</summary>\r\n\r\n![Screenshot
2024-10-28 at 15
44\r\n26](https://github.com/user-attachments/assets/522a9a54-fa41-48e2-a749-58a465eb2543)\r\n</details>
\r\n\r\n<details><summary>On basic license, I can edit a rule that is
not\r\navailable on the basic. This leads to a bunch of errors in edit
mode.\r\nThe same is happening on main. We should prevent accessing this
kind of\r\nrule types.</summary>\r\n\r\n![Screenshot 2024-10-28 at 15
44\r\n57](https://github.com/user-attachments/assets/9a016ef2-aaf2-4d3f-8161-70bcb89f3334)\r\n</details>
\r\n\r\n### Checklist\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"962082ead77fbd0c23a64347f9fa19e7424c400b"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Janki Salvi <117571355+js-jankisalvi@users.noreply.github.com>
---
 .../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}