Use "compatibility" rather than "availability" on connectors table (e…

…lastic#139024) * Use compatibility rather than availability on connectors table * Replace Availability with Compatibility in create connector flyout.
ersin-erdal · Aug 26, 2022 · 5cb0c01 · 5cb0c01
1 parent 0638634
commit 5cb0c01
Show file tree

Hide file tree

Showing 11 changed files with 655 additions and 535 deletions.
diff --git a/x-pack/plugins/actions/common/connector_feature_config.test.ts b/x-pack/plugins/actions/common/connector_feature_config.test.ts
@@ -5,7 +5,11 @@
  * 2.0.
  */
 
-import { areValidFeatures, getConnectorFeatureName } from './connector_feature_config';
+import {
+  areValidFeatures,
+  getConnectorCompatibility,
+  getConnectorFeatureName,
+} from './connector_feature_config';
 
 describe('areValidFeatures', () => {
   it('returns true when all inputs are valid features', () => {
@@ -35,3 +39,16 @@ describe('getConnectorFeatureName', () => {
     expect(getConnectorFeatureName('foo')).toEqual('foo');
   });
 });
+
+describe('getConnectorCompatibility', () => {
+  it('returns the compatibility list for valid feature ids', () => {
+    expect(getConnectorCompatibility(['alerting', 'cases', 'uptime', 'siem'])).toEqual([
+      'Alerting Rules',
+      'Cases',
+    ]);
+  });
+
+  it('skips invalid feature ids', () => {
+    expect(getConnectorCompatibility(['foo', 'bar', 'cases'])).toEqual(['Cases']);
+  });
+});
diff --git a/x-pack/plugins/actions/common/connector_feature_config.ts b/x-pack/plugins/actions/common/connector_feature_config.ts
@@ -18,56 +18,86 @@ interface ConnectorFeatureConfig {
    * This will be displayed to end-users, so a translatable string is advised for i18n.
    */
   name: string;
+  compatibility: string;
 }
 
 export const AlertingConnectorFeatureId = 'alerting';
 export const CasesConnectorFeatureId = 'cases';
 export const UptimeConnectorFeatureId = 'uptime';
 export const SecurityConnectorFeatureId = 'siem';
 
+const compatibilityAlertingRules = i18n.translate(
+  'xpack.actions.availableConnectorFeatures.compatibility.alertingRules',
+  {
+    defaultMessage: 'Alerting Rules',
+  }
+);
+
+const compatibilityCases = i18n.translate(
+  'xpack.actions.availableConnectorFeatures.compatibility.cases',
+  {
+    defaultMessage: 'Cases',
+  }
+);
+
 export const AlertingConnectorFeature: ConnectorFeatureConfig = {
   id: AlertingConnectorFeatureId,
   name: i18n.translate('xpack.actions.availableConnectorFeatures.alerting', {
     defaultMessage: 'Alerting',
   }),
+  compatibility: compatibilityAlertingRules,
 };
 
 export const CasesConnectorFeature: ConnectorFeatureConfig = {
   id: CasesConnectorFeatureId,
   name: i18n.translate('xpack.actions.availableConnectorFeatures.cases', {
     defaultMessage: 'Cases',
   }),
+  compatibility: compatibilityCases,
 };
 
 export const UptimeConnectorFeature: ConnectorFeatureConfig = {
   id: UptimeConnectorFeatureId,
   name: i18n.translate('xpack.actions.availableConnectorFeatures.uptime', {
     defaultMessage: 'Uptime',
   }),
+  compatibility: compatibilityAlertingRules,
 };
 
 export const SecuritySolutionFeature: ConnectorFeatureConfig = {
   id: SecurityConnectorFeatureId,
   name: i18n.translate('xpack.actions.availableConnectorFeatures.securitySolution', {
     defaultMessage: 'Security Solution',
   }),
+  compatibility: compatibilityAlertingRules,
 };
 
-const AllAvailableConnectorFeatures: ConnectorFeatureConfig[] = [
-  AlertingConnectorFeature,
-  CasesConnectorFeature,
-  UptimeConnectorFeature,
-  SecuritySolutionFeature,
-];
+const AllAvailableConnectorFeatures = {
+  [AlertingConnectorFeature.id]: AlertingConnectorFeature,
+  [CasesConnectorFeature.id]: CasesConnectorFeature,
+  [UptimeConnectorFeature.id]: UptimeConnectorFeature,
+  [SecuritySolutionFeature.id]: SecuritySolutionFeature,
+};
 
 export function areValidFeatures(ids: string[]) {
-  return ids.every(
-    (id: string) =>
-      !!AllAvailableConnectorFeatures.find((config: ConnectorFeatureConfig) => config.id === id)
-  );
+  return ids.every((id: string) => !!AllAvailableConnectorFeatures[id]);
 }
 
 export function getConnectorFeatureName(id: string) {
-  const featureConfig = AllAvailableConnectorFeatures.find((config) => config.id === id);
+  const featureConfig = AllAvailableConnectorFeatures[id];
   return featureConfig ? featureConfig.name : id;
 }
+
+export function getConnectorCompatibility(featureIds?: string[]): string[] {
+  const compatibility = new Set<string>();
+
+  if (featureIds && featureIds.length > 0) {
+    for (const featureId of featureIds) {
+      if (AllAvailableConnectorFeatures[featureId]) {
+        compatibility.add(AllAvailableConnectorFeatures[featureId].compatibility);
+      }
+    }
+  }
+
+  return Array.from(compatibility);
+}
diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -32647,7 +32647,6 @@
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.runConnectorDisabledDescription": "Impossible d'exécuter les connecteurs",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.runConnectorName": "Exécuter",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actionTypeTitle": "Type",
-    "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.featureIdsTitle": "Disponibilité",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.fixButtonLabel": "Corriger",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.nameTitle": "Nom",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.filters.actionTypeIdName": "Type",
@@ -32675,7 +32674,6 @@
     "xpack.triggersActionsUI.sections.addAction.casesWebhookAction.error.requiredUpdateMethodText": "La méthode de mise à jour du cas est requise.",
     "xpack.triggersActionsUI.sections.addAction.webhookAction.error.requiredAuthUserNameText": "Le nom d'utilisateur est requis.",
     "xpack.triggersActionsUI.sections.addAction.webhookAction.error.requiredMethodText": "La méthode est requise.",
-    "xpack.triggersActionsUI.sections.addConnectorForm.flyoutHeaderAvailability": "Disponibilité :",
     "xpack.triggersActionsUI.sections.addConnectorForm.selectConnectorFlyoutTitle": "Sélectionner un connecteur",
     "xpack.triggersActionsUI.sections.addConnectorForm.updateSuccessNotificationText": "Création de \"{connectorName}\" effectuée",
     "xpack.triggersActionsUI.sections.addModalConnectorForm.cancelButtonLabel": "Annuler",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -32622,7 +32622,6 @@
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.runConnectorDisabledDescription": "コネクターを実行できません",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.runConnectorName": "実行",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actionTypeTitle": "型",
-    "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.featureIdsTitle": "可用性",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.fixButtonLabel": "修正",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.nameTitle": "名前",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.filters.actionTypeIdName": "型",
@@ -32650,7 +32649,6 @@
     "xpack.triggersActionsUI.sections.addAction.casesWebhookAction.error.requiredUpdateMethodText": "ケースメソッドの更新は必須です。",
     "xpack.triggersActionsUI.sections.addAction.webhookAction.error.requiredAuthUserNameText": "ユーザー名が必要です。",
     "xpack.triggersActionsUI.sections.addAction.webhookAction.error.requiredMethodText": "メソッドが必要です。",
-    "xpack.triggersActionsUI.sections.addConnectorForm.flyoutHeaderAvailability": "可用性：",
     "xpack.triggersActionsUI.sections.addConnectorForm.selectConnectorFlyoutTitle": "コネクターを選択",
     "xpack.triggersActionsUI.sections.addConnectorForm.updateSuccessNotificationText": "「{connectorName}」を作成しました",
     "xpack.triggersActionsUI.sections.addModalConnectorForm.cancelButtonLabel": "キャンセル",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -32656,7 +32656,6 @@
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.runConnectorDisabledDescription": "无法运行连接器",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.runConnectorName": "运行",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actionTypeTitle": "类型",
-    "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.featureIdsTitle": "可用性",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.fixButtonLabel": "修复",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.nameTitle": "名称",
     "xpack.triggersActionsUI.sections.actionsConnectorsList.filters.actionTypeIdName": "类型",
@@ -32684,7 +32683,6 @@
     "xpack.triggersActionsUI.sections.addAction.casesWebhookAction.error.requiredUpdateMethodText": "“更新案例方法”必填。",
     "xpack.triggersActionsUI.sections.addAction.webhookAction.error.requiredAuthUserNameText": "“用户名”必填。",
     "xpack.triggersActionsUI.sections.addAction.webhookAction.error.requiredMethodText": "“方法”必填",
-    "xpack.triggersActionsUI.sections.addConnectorForm.flyoutHeaderAvailability": "可用性：",
     "xpack.triggersActionsUI.sections.addConnectorForm.selectConnectorFlyoutTitle": "选择连接器",
     "xpack.triggersActionsUI.sections.addConnectorForm.updateSuccessNotificationText": "已创建“{connectorName}”",
     "xpack.triggersActionsUI.sections.addModalConnectorForm.cancelButtonLabel": "取消",

diff --git a/...s_ui/public/application/sections/action_connector_form/create_connector_flyout/header.tsx b/...s_ui/public/application/sections/action_connector_form/create_connector_flyout/header.tsx
@@ -19,22 +19,21 @@ import {
   EuiBetaBadge,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { getConnectorFeatureName } from '@kbn/actions-plugin/common';
 import { betaBadgeProps } from '../beta_badge_props';
 
 interface Props {
   icon?: IconType | null;
   actionTypeName?: string | null;
   actionTypeMessage?: string | null;
-  featureIds?: string[] | null;
+  compatibility?: string[] | null;
   isExperimental?: boolean;
 }
 
 const FlyoutHeaderComponent: React.FC<Props> = ({
   icon,
   actionTypeName,
   actionTypeMessage,
-  featureIds,
+  compatibility,
   isExperimental,
 }) => {
   return (
@@ -74,23 +73,23 @@ const FlyoutHeaderComponent: React.FC<Props> = ({
               <EuiText size="s" color="subdued">
                 {actionTypeMessage}
               </EuiText>
-              {featureIds && featureIds.length > 0 && (
+              {compatibility && compatibility.length > 0 && (
                 <>
                   <EuiSpacer size="m" />
                   <EuiFlexGroup
-                    data-test-subj="create-connector-flyout-header-availability"
+                    data-test-subj="create-connector-flyout-header-compatibility"
                     wrap
                     responsive={false}
                     gutterSize="xs"
                     alignItems="center"
                   >
                     <FormattedMessage
-                      id="xpack.triggersActionsUI.sections.addConnectorForm.flyoutHeaderAvailability"
-                      defaultMessage="Availability:"
+                      id="xpack.triggersActionsUI.sections.addConnectorForm.flyoutHeaderCompatibility"
+                      defaultMessage="Compatibility:"
                     />{' '}
-                    {featureIds.map((featureId: string) => (
-                      <EuiFlexItem grow={false} key={featureId}>
-                        <EuiBadge color="default">{getConnectorFeatureName(featureId)}</EuiBadge>
+                    {compatibility.map((compatibilityItem: string) => (
+                      <EuiFlexItem grow={false} key={compatibilityItem}>
+                        <EuiBadge color="default">{compatibilityItem}</EuiBadge>
                       </EuiFlexItem>
                     ))}
                   </EuiFlexGroup>

diff --git a/.../public/application/sections/action_connector_form/create_connector_flyout/index.test.tsx b/.../public/application/sections/action_connector_form/create_connector_flyout/index.test.tsx
@@ -246,7 +246,7 @@ describe('CreateConnectorFlyout', () => {
       expect(getByText('Select a connector')).toBeInTheDocument();
     });
 
-    it('shows the feature id badges when the connector type is selected', async () => {
+    it('shows the compatibility badges when the connector type is selected', async () => {
       const { getByTestId, getByText } = appMockRenderer.render(
         <CreateConnectorFlyout
           actionTypeRegistry={actionTypeRegistry}
@@ -266,9 +266,8 @@ describe('CreateConnectorFlyout', () => {
         expect(getByTestId('test-connector-text-field')).toBeInTheDocument();
       });
 
-      expect(getByTestId('create-connector-flyout-header-availability')).toBeInTheDocument();
-      expect(getByText('Alerting')).toBeInTheDocument();
-      expect(getByText('Security Solution')).toBeInTheDocument();
+      expect(getByTestId('create-connector-flyout-header-compatibility')).toBeInTheDocument();
+      expect(getByText('Alerting Rules')).toBeInTheDocument();
     });
 
     it('shows the icon when the connector type is selected', async () => {

diff --git a/...ns_ui/public/application/sections/action_connector_form/create_connector_flyout/index.tsx b/...ns_ui/public/application/sections/action_connector_form/create_connector_flyout/index.tsx
@@ -8,6 +8,7 @@
 import React, { memo, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { EuiFlyout, EuiFlyoutBody } from '@elastic/eui';
 
+import { getConnectorCompatibility } from '@kbn/actions-plugin/common';
 import {
   ActionConnector,
   ActionType,
@@ -156,7 +157,7 @@ const CreateConnectorFlyoutComponent: React.FC<CreateConnectorFlyoutProps> = ({
         icon={actionTypeModel?.iconClass}
         actionTypeName={actionType?.name}
         actionTypeMessage={actionTypeModel?.selectMessage}
-        featureIds={actionType?.supportedFeatureIds}
+        compatibility={getConnectorCompatibility(actionType?.supportedFeatureIds)}
         isExperimental={actionTypeModel?.isExperimental}
       />
       <EuiFlyoutBody