[8.14] [MGMTEX] Fix rules order in create rule modal (elastic#181743) (…

…elastic#181830) # Backport This will backport the following commits from `main` to `8.14`: - [[MGMTEX] Fix rules order in create rule modal (elastic#181743)](elastic#181743)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Julian Gernun <[email protected]>
kibanamachine · Apr 26, 2024 · 087133a · 087133a
1 parent 4754f74
commit 087133a
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 1 deletion.
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
@@ -0,0 +1,96 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import { RuleTypeList } from './rule_type_list';
+import { RuleTypeWithDescription } from '../types';
+
+const ruleTypes: RuleTypeWithDescription[] = [
+  {
+    id: '1',
+    name: 'B - Rule Type 1',
+    enabledInLicense: true,
+    description: 'Description 1',
+    actionVariables: {
+      params: [],
+    },
+    authorizedConsumers: {},
+    actionGroups: [],
+    producer: 'stackAlerts',
+    minimumLicenseRequired: 'basic',
+    recoveryActionGroup: {
+      id: '1',
+      name: 'default',
+    },
+    defaultActionGroupId: '1',
+  },
+  {
+    id: '2',
+    name: 'Rule Type 2',
+    enabledInLicense: false,
+    description: 'Description 2',
+    actionVariables: {
+      params: [],
+    },
+    authorizedConsumers: {},
+    actionGroups: [],
+    producer: 'stackAlerts',
+    minimumLicenseRequired: 'platinum',
+    recoveryActionGroup: {
+      id: '2',
+      name: 'default',
+    },
+    defaultActionGroupId: '2',
+  },
+  {
+    id: '3',
+    name: 'A - Rule Type 3',
+    enabledInLicense: true,
+    description: 'Description 3',
+    actionVariables: {
+      params: [],
+    },
+    authorizedConsumers: {},
+    actionGroups: [],
+    producer: 'stackAlerts',
+    minimumLicenseRequired: 'basic',
+    recoveryActionGroup: {
+      id: '3',
+      name: 'default',
+    },
+    defaultActionGroupId: '3',
+  },
+];
+
+describe('RuleTypeList', () => {
+  it('should sort by enabled in license first and then alphabetically', async () => {
+    render(
+      <RuleTypeList
+        ruleTypes={ruleTypes}
+        onSelectRuleType={jest.fn()}
+        onFilterByProducer={jest.fn()}
+        selectedProducer={null}
+        ruleTypeCountsByProducer={{
+          total: 3,
+          'Stack Alerts': 3,
+        }}
+        onClearFilters={jest.fn()}
+        showCategories={false}
+      />
+    );
+
+    const ruleListEl = await screen.findAllByTestId('-SelectOption', { exact: false });
+    const firstRuleInList = within(ruleListEl[0]).getByRole('button', { name: 'A - Rule Type 3' });
+    expect(firstRuleInList).not.toBeDisabled();
+    const secondRuleInList = within(ruleListEl[1]).getByRole('button', { name: 'B - Rule Type 1' });
+    expect(secondRuleInList).not.toBeDisabled();
+    const thirdRuleInList = within(ruleListEl[2]).getByRole('button', { name: 'Rule Type 2' });
+    expect(thirdRuleInList).toBeDisabled();
+  });
+});
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
@@ -38,6 +38,21 @@ const producerToDisplayName = (producer: string) => {
   return Reflect.get(PRODUCER_DISPLAY_NAMES, producer) ?? producer;
 };
 
+/**
+ * Sorts an array of objects (ruleTypes) based on two criteria:
+ * 1. First, sorts by the 'enabledInLicense' property.
+ *    - If 'enabledInLicense' is the same for both rules (a and b),
+ *      it sorts them based on the 'name' property using locale-sensitive string comparison.
+ * 2. If 'enabledInLicense' is different for a and b,
+ *    places the object with 'enabledInLicense' set to true before the one with 'enabledInLicense' set to false.
+ */
+const sortRuleTypes = (a: RuleTypeWithDescription, b: RuleTypeWithDescription) => {
+  if (a.enabledInLicense === b.enabledInLicense) {
+    return a.name.localeCompare(b.name);
+  }
+  return a.enabledInLicense ? -1 : 1;
+};
+
 export const RuleTypeList: React.FC<RuleTypeListProps> = ({
   ruleTypes,
   onSelectRuleType,
@@ -47,7 +62,7 @@ export const RuleTypeList: React.FC<RuleTypeListProps> = ({
   onClearFilters,
   showCategories = true,
 }) => {
-  const ruleTypesList = [...ruleTypes].sort((a, b) => a.name.localeCompare(b.name));
+  const ruleTypesList = [...ruleTypes].sort(sortRuleTypes);
   const { euiTheme } = useEuiTheme();
 
   const facetList = useMemo(
@@ -154,6 +169,7 @@ export const RuleTypeList: React.FC<RuleTypeListProps> = ({
               }
               style={{ marginRight: '8px', flexGrow: 0 }}
               data-test-subj={`${rule.id}-SelectOption`}
+              isDisabled={rule.enabledInLicense === false}
             />
             <EuiSpacer size="s" />
           </React.Fragment>