[Alerting UI][License] Disable alert types in UI when the license doe…

…sn't support it. (#85496)

* [Alerting UI][License] Disable alert types in UI when the license doesn't support it.

* fixed typechecks

* added licensing for alert list and details page

* fixed multy select menu

* fixed due to comments

* fixed due to comments

* fixed due to comments

x-pack/plugins/triggers_actions_ui/public/application/lib/action_variables.test.ts

@@ -322,5 +322,6 @@ function getAlertType(actionVariables: ActionVariables): AlertType {
     authorizedConsumers: {},
     producer: ALERTS_FEATURE_ID,
     minimumLicenseRequired: 'basic',
+    enabledInLicense: true,
   };
 }

x-pack/plugins/triggers_actions_ui/public/application/lib/alert_api.test.ts

@@ -52,6 +52,7 @@ describe('loadAlertTypes', () => {
         defaultActionGroupId: 'default',
         authorizedConsumers: {},
         minimumLicenseRequired: 'basic',
+        enabledInLicense: true,
       },
     ];
     http.get.mockResolvedValueOnce(resolvedValue);

x-pack/plugins/triggers_actions_ui/public/application/lib/alert_type_compare.test.ts

@@ -0,0 +1,182 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { AlertTypeModel } from '../../types';
+import { alertTypeGroupCompare, alertTypeCompare } from './alert_type_compare';
+import { IsEnabledResult, IsDisabledResult } from './check_alert_type_enabled';
+
+test('should sort groups by containing enabled alert types first and then by name', async () => {
+  const alertTypes: Array<
+    [
+      string,
+      Array<{
+        id: string;
+        name: string;
+        checkEnabledResult: IsEnabledResult | IsDisabledResult;
+        alertTypeItem: AlertTypeModel;
+      }>
+    ]
+  > = [
+    [
+      'abc',
+      [
+        {
+          id: '1',
+          name: 'test2',
+          checkEnabledResult: { isEnabled: false, message: 'gold license' },
+          alertTypeItem: {
+            id: 'my-alert-type',
+            iconClass: 'test',
+            name: 'test-alert',
+            description: 'Alert when testing',
+            documentationUrl: 'https://localhost.local/docs',
+            validate: () => {
+              return { errors: {} };
+            },
+            alertParamsExpression: () => null,
+            requiresAppContext: false,
+          },
+        },
+      ],
+    ],
+    [
+      'bcd',
+      [
+        {
+          id: '2',
+          name: 'abc',
+          checkEnabledResult: { isEnabled: false, message: 'platinum license' },
+          alertTypeItem: {
+            id: 'my-alert-type',
+            iconClass: 'test',
+            name: 'test-alert',
+            description: 'Alert when testing',
+            documentationUrl: 'https://localhost.local/docs',
+            validate: () => {
+              return { errors: {} };
+            },
+            alertParamsExpression: () => null,
+            requiresAppContext: false,
+          },
+        },
+        {
+          id: '3',
+          name: 'cdf',
+          checkEnabledResult: { isEnabled: true },
+          alertTypeItem: {
+            id: 'disabled-alert-type',
+            iconClass: 'test',
+            name: 'test-alert',
+            description: 'Alert when testing',
+            documentationUrl: 'https://localhost.local/docs',
+            validate: () => {
+              return { errors: {} };
+            },
+            alertParamsExpression: () => null,
+            requiresAppContext: false,
+          },
+        },
+      ],
+    ],
+    [
+      'cde',
+      [
+        {
+          id: '4',
+          name: 'cde',
+          checkEnabledResult: { isEnabled: true },
+          alertTypeItem: {
+            id: 'my-alert-type',
+            iconClass: 'test',
+            name: 'test-alert',
+            description: 'Alert when testing',
+            documentationUrl: 'https://localhost.local/docs',
+            validate: () => {
+              return { errors: {} };
+            },
+            alertParamsExpression: () => null,
+            requiresAppContext: false,
+          },
+        },
+      ],
+    ],
+  ];
+
+  const groups = new Map<string, string>();
+  groups.set('abc', 'ABC');
+  groups.set('bcd', 'BCD');
+  groups.set('cde', 'CDE');
+
+  const result = [...alertTypes].sort((right, left) => alertTypeGroupCompare(right, left, groups));
+  expect(result[0]).toEqual(alertTypes[1]);
+  expect(result[1]).toEqual(alertTypes[2]);
+  expect(result[2]).toEqual(alertTypes[0]);
+});
+
+test('should sort alert types by enabled first and then by name', async () => {
+  const alertTypes: Array<{
+    id: string;
+    name: string;
+    checkEnabledResult: IsEnabledResult | IsDisabledResult;
+    alertTypeItem: AlertTypeModel;
+  }> = [
+    {
+      id: '1',
+      name: 'bcd',
+      checkEnabledResult: { isEnabled: false, message: 'gold license' },
+      alertTypeItem: {
+        id: 'my-alert-type',
+        iconClass: 'test',
+        name: 'test-alert',
+        description: 'Alert when testing',
+        documentationUrl: 'https://localhost.local/docs',
+        validate: () => {
+          return { errors: {} };
+        },
+        alertParamsExpression: () => null,
+        requiresAppContext: false,
+      },
+    },
+    {
+      id: '2',
+      name: 'abc',
+      checkEnabledResult: { isEnabled: false, message: 'platinum license' },
+      alertTypeItem: {
+        id: 'my-alert-type',
+        iconClass: 'test',
+        name: 'test-alert',
+        description: 'Alert when testing',
+        documentationUrl: 'https://localhost.local/docs',
+        validate: () => {
+          return { errors: {} };
+        },
+        alertParamsExpression: () => null,
+        requiresAppContext: false,
+      },
+    },
+    {
+      id: '3',
+      name: 'cdf',
+      checkEnabledResult: { isEnabled: true },
+      alertTypeItem: {
+        id: 'disabled-alert-type',
+        iconClass: 'test',
+        name: 'test-alert',
+        description: 'Alert when testing',
+        documentationUrl: 'https://localhost.local/docs',
+        validate: () => {
+          return { errors: {} };
+        },
+        alertParamsExpression: () => null,
+        requiresAppContext: false,
+      },
+    },
+  ];
+  const result = [...alertTypes].sort(alertTypeCompare);
+  expect(result[0]).toEqual(alertTypes[2]);
+  expect(result[1]).toEqual(alertTypes[1]);
+  expect(result[2]).toEqual(alertTypes[0]);
+});

x-pack/plugins/triggers_actions_ui/public/application/lib/alert_type_compare.ts

@@ -0,0 +1,77 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { AlertTypeModel } from '../../types';
+import { IsEnabledResult, IsDisabledResult } from './check_alert_type_enabled';
+
+export function alertTypeGroupCompare(
+  left: [
+    string,
+    Array<{
+      id: string;
+      name: string;
+      checkEnabledResult: IsEnabledResult | IsDisabledResult;
+      alertTypeItem: AlertTypeModel;
+    }>
+  ],
+  right: [
+    string,
+    Array<{
+      id: string;
+      name: string;
+      checkEnabledResult: IsEnabledResult | IsDisabledResult;
+      alertTypeItem: AlertTypeModel;
+    }>
+  ],
+  groupNames: Map<string, string> | undefined
+) {
+  const groupNameA = left[0];
+  const groupNameB = right[0];
+  const leftAlertTypesList = left[1];
+  const rightAlertTypesList = right[1];
+
+  const hasEnabledAlertTypeInListLeft =
+    leftAlertTypesList.find((alertTypeItem) => alertTypeItem.checkEnabledResult.isEnabled) !==
+    undefined;
+
+  const hasEnabledAlertTypeInListRight =
+    rightAlertTypesList.find((alertTypeItem) => alertTypeItem.checkEnabledResult.isEnabled) !==
+    undefined;
+
+  if (hasEnabledAlertTypeInListLeft && !hasEnabledAlertTypeInListRight) {
+    return -1;
+  }
+  if (!hasEnabledAlertTypeInListLeft && hasEnabledAlertTypeInListRight) {
+    return 1;
+  }
+
+  return groupNames
+    ? groupNames.get(groupNameA)!.localeCompare(groupNames.get(groupNameB)!)
+    : groupNameA.localeCompare(groupNameB);
+}
+
+export function alertTypeCompare(
+  a: {
+    id: string;
+    name: string;
+    checkEnabledResult: IsEnabledResult | IsDisabledResult;
+    alertTypeItem: AlertTypeModel;
+  },
+  b: {
+    id: string;
+    name: string;
+    checkEnabledResult: IsEnabledResult | IsDisabledResult;
+    alertTypeItem: AlertTypeModel;
+  }
+) {
+  if (a.checkEnabledResult.isEnabled === true && b.checkEnabledResult.isEnabled === false) {
+    return -1;
+  }
+  if (a.checkEnabledResult.isEnabled === false && b.checkEnabledResult.isEnabled === true) {
+    return 1;
+  }
+  return a.name.localeCompare(b.name);
+}

x-pack/plugins/triggers_actions_ui/public/application/lib/check_alert_type_enabled.test.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { AlertType } from '../../types';
+import { checkAlertTypeEnabled } from './check_alert_type_enabled';
+
+describe('checkAlertTypeEnabled', () => {
+  test(`returns isEnabled:true when alert type isn't provided`, async () => {
+    expect(checkAlertTypeEnabled()).toMatchInlineSnapshot(`
+          Object {
+            "isEnabled": true,
+          }
+      `);
+  });
+
+  test('returns isEnabled:true when alert type is enabled', async () => {
+    const alertType: AlertType = {
+      id: 'test',
+      name: 'Test',
+      actionVariables: {
+        context: [{ name: 'var1', description: 'val1' }],
+        state: [{ name: 'var2', description: 'val2' }],
+        params: [{ name: 'var3', description: 'val3' }],
+      },
+      producer: 'test',
+      actionGroups: [{ id: 'default', name: 'Default' }],
+      recoveryActionGroup: { id: 'recovered', name: 'Recovered' },
+      defaultActionGroupId: 'default',
+      authorizedConsumers: {},
+      minimumLicenseRequired: 'basic',
+      enabledInLicense: true,
+    };
+    expect(checkAlertTypeEnabled(alertType)).toMatchInlineSnapshot(`
+          Object {
+            "isEnabled": true,
+          }
+      `);
+  });
+
+  test('returns isEnabled:false when alert type is disabled by license', async () => {
+    const alertType: AlertType = {
+      id: 'test',
+      name: 'Test',
+      actionVariables: {
+        context: [{ name: 'var1', description: 'val1' }],
+        state: [{ name: 'var2', description: 'val2' }],
+        params: [{ name: 'var3', description: 'val3' }],
+      },
+      producer: 'test',
+      actionGroups: [{ id: 'default', name: 'Default' }],
+      recoveryActionGroup: { id: 'recovered', name: 'Recovered' },
+      defaultActionGroupId: 'default',
+      authorizedConsumers: {},
+      minimumLicenseRequired: 'gold',
+      enabledInLicense: false,
+    };
+    expect(checkAlertTypeEnabled(alertType)).toMatchInlineSnapshot(`
+      Object {
+        "isEnabled": false,
+        "message": "This alert type requires a Gold license.",
+      }
+    `);
+  });
+});

x-pack/plugins/triggers_actions_ui/public/application/lib/check_alert_type_enabled.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { upperFirst } from 'lodash';
+import { i18n } from '@kbn/i18n';
+import { AlertType } from '../../types';
+
+export interface IsEnabledResult {
+  isEnabled: true;
+}
+export interface IsDisabledResult {
+  isEnabled: false;
+  message: string;
+}
+
+const getLicenseCheckResult = (alertType: AlertType) => {
+  return {
+    isEnabled: false,
+    message: i18n.translate(
+      'xpack.triggersActionsUI.checkAlertTypeEnabled.alertTypeDisabledByLicenseMessage',
+      {
+        defaultMessage: 'This alert type requires a {minimumLicenseRequired} license.',
+        values: {
+          minimumLicenseRequired: upperFirst(alertType.minimumLicenseRequired),
+        },
+      }
+    ),
+  };
+};
+
+export function checkAlertTypeEnabled(alertType?: AlertType): IsEnabledResult | IsDisabledResult {
+  if (alertType?.enabledInLicense === false) {
+    return getLicenseCheckResult(alertType);
+  }
+
+  return { isEnabled: true };
+}