[8.x] [ResponseOps][New Rule Form] Fix new rule form issues with basic license (#198036)

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

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>
         ))}

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}