Update alert type selection layout to rows instead of grid (#73665)

* Update layout to rows for alert types * Fix gutter usage * Update heading, remove icons * Non-working update to the combo box * Add incorrect updates with questions to fix * Fix combo box * Cleanup changes to specific to this module * fixed type checks and made combobox always visible * Added groups by producer * Added get producer name from kibana features names * Added search bar with list of alert types * Added search support functionality * fixed links to alert type * added alert type title * Fixed failing tests * Design updates to list * Remove unsed items in import list * fixed merge issue * Fixed due to comments * fixed tests * Design fixes Co-authored-by: Yuliia Naumenko <[email protected]>
elastic · Nov 9, 2020 · 2c05957 · 2c05957
1 parent 45ddd69
commit 2c05957
Show file tree

Hide file tree

Showing 11 changed files with 318 additions and 70 deletions.
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -20148,7 +20148,6 @@
     "xpack.triggersActionsUI.home.connectorsTabTitle": "コネクター",
     "xpack.triggersActionsUI.home.sectionDescription": "アラートを使用して条件を検出し、コネクターを使用してアクションを実行します。",
     "xpack.triggersActionsUI.managementSection.displayName": "アラートとアクション",
-    "xpack.triggersActionsUI.sections.actionAdd.indexAction.indexTextFieldLabel": "タグ (任意)",
     "xpack.triggersActionsUI.sections.actionConnectorAdd.cancelButtonLabel": "キャンセル",
     "xpack.triggersActionsUI.sections.actionConnectorAdd.manageLicensePlanBannerLinkTitle": "ライセンスの管理",
     "xpack.triggersActionsUI.sections.actionConnectorAdd.saveAndTestButtonLabel": "保存してテスト",
@@ -20256,7 +20255,6 @@
     "xpack.triggersActionsUI.sections.alertForm.addConnectorButtonLabel": "コネクターを作成する",
     "xpack.triggersActionsUI.sections.alertForm.addNewConnectorEmptyButton": "新規追加",
     "xpack.triggersActionsUI.sections.alertForm.alertNameLabel": "名前",
-    "xpack.triggersActionsUI.sections.alertForm.changeAlertTypeAriaLabel": "削除",
     "xpack.triggersActionsUI.sections.alertForm.checkFieldLabel": "確認間隔",
     "xpack.triggersActionsUI.sections.alertForm.checkWithTooltip": "条件を評価する頻度を定義します。",
     "xpack.triggersActionsUI.sections.alertForm.emptyConnectorsLabel": "{actionTypeName}コネクターがありません",
@@ -20273,7 +20271,6 @@
     "xpack.triggersActionsUI.sections.alertForm.renotifyFieldLabel": "通知間隔",
     "xpack.triggersActionsUI.sections.alertForm.renotifyWithTooltip": "アラートがアクティブな間にアクションを繰り返す頻度を定義します。",
     "xpack.triggersActionsUI.sections.alertForm.selectAlertActionTypeTitle": "アクションタイプを選択してください",
-    "xpack.triggersActionsUI.sections.alertForm.selectAlertTypeTitle": "トリガータイプを選択してください",
     "xpack.triggersActionsUI.sections.alertForm.selectedAlertTypeTitle": "{alertType}",
     "xpack.triggersActionsUI.sections.alertForm.unableToAddAction": "デフォルトアクショングループの定義がないのでアクションを追加できません",
     "xpack.triggersActionsUI.sections.alertForm.unableToLoadActionsMessage": "コネクターを読み込めません",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -20167,7 +20167,6 @@
     "xpack.triggersActionsUI.home.connectorsTabTitle": "连接器",
     "xpack.triggersActionsUI.home.sectionDescription": "使用告警检测条件，并使用连接器采取操作。",
     "xpack.triggersActionsUI.managementSection.displayName": "告警和操作",
-    "xpack.triggersActionsUI.sections.actionAdd.indexAction.indexTextFieldLabel": "标记（可选）",
     "xpack.triggersActionsUI.sections.actionConnectorAdd.cancelButtonLabel": "取消",
     "xpack.triggersActionsUI.sections.actionConnectorAdd.manageLicensePlanBannerLinkTitle": "管理许可证",
     "xpack.triggersActionsUI.sections.actionConnectorAdd.saveAndTestButtonLabel": "保存并测试",
@@ -20276,7 +20275,6 @@
     "xpack.triggersActionsUI.sections.alertForm.addConnectorButtonLabel": "创建连接器",
     "xpack.triggersActionsUI.sections.alertForm.addNewConnectorEmptyButton": "新添",
     "xpack.triggersActionsUI.sections.alertForm.alertNameLabel": "名称",
-    "xpack.triggersActionsUI.sections.alertForm.changeAlertTypeAriaLabel": "删除",
     "xpack.triggersActionsUI.sections.alertForm.checkFieldLabel": "检查频率",
     "xpack.triggersActionsUI.sections.alertForm.checkWithTooltip": "定义评估条件的频率。",
     "xpack.triggersActionsUI.sections.alertForm.emptyConnectorsLabel": "无 {actionTypeName} 连接器",
@@ -20293,7 +20291,6 @@
     "xpack.triggersActionsUI.sections.alertForm.renotifyFieldLabel": "通知频率",
     "xpack.triggersActionsUI.sections.alertForm.renotifyWithTooltip": "定义告警处于活动状态时重复操作的频率。",
     "xpack.triggersActionsUI.sections.alertForm.selectAlertActionTypeTitle": "选择操作类型",
-    "xpack.triggersActionsUI.sections.alertForm.selectAlertTypeTitle": "选择触发器类型",
     "xpack.triggersActionsUI.sections.alertForm.selectedAlertTypeTitle": "{alertType}",
     "xpack.triggersActionsUI.sections.alertForm.unableToAddAction": "无法添加操作，因为未定义默认操作组",
     "xpack.triggersActionsUI.sections.alertForm.unableToLoadActionsMessage": "无法加载连接器",

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/app.tsx b/x-pack/plugins/triggers_actions_ui/public/application/app.tsx
@@ -16,8 +16,8 @@ import {
   CoreStart,
   ScopedHistory,
 } from 'kibana/public';
-import { Section, routeToAlertDetails } from './constants';
 import { KibanaFeature } from '../../../features/common';
+import { Section, routeToAlertDetails } from './constants';
 import { AppContextProvider } from './app_context';
 import { ActionTypeRegistryContract, AlertTypeRegistryContract } from '../types';
 import { ChartsPluginStart } from '../../../../../src/plugins/charts/public';

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/context/alerts_context.tsx b/x-pack/plugins/triggers_actions_ui/public/application/context/alerts_context.tsx
@@ -18,6 +18,7 @@ import {
   DataPublicPluginStartUi,
   IndexPatternsContract,
 } from 'src/plugins/data/public';
+import { KibanaFeature } from '../../../../features/common';
 import { AlertTypeRegistryContract, ActionTypeRegistryContract } from '../../types';
 
 export interface AlertsContextValue<MetaData = Record<string, any>> {
@@ -34,6 +35,7 @@ export interface AlertsContextValue<MetaData = Record<string, any>> {
   metadata?: MetaData;
   dataUi?: DataPublicPluginStartUi;
   dataIndexPatterns?: IndexPatternsContract;
+  kibanaFeatures?: KibanaFeature[];
 }
 
 const AlertsContext = createContext<AlertsContextValue>(null as any);

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.test.tsx
@@ -182,8 +182,6 @@ describe('alert_add', () => {
 
     wrapper.find('[data-test-subj="my-alert-type-SelectOption"]').first().simulate('click');
 
-    expect(wrapper.contains('Metadata: some value. Fields: test.')).toBeTruthy();
-
     expect(wrapper.find('input#alertName').props().value).toBe('');
 
     expect(wrapper.find('[data-test-subj="tagsComboBox"]').first().text()).toBe('');

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.scss b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.scss
@@ -0,0 +1,4 @@
+.triggersActionsUI__alertTypeNodeHeading {
+  margin-left: $euiSizeS;
+  margin-right: $euiSizeS;
+}
diff --git a/...ck/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.test.tsx b/...ck/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.test.tsx
@@ -187,15 +187,15 @@ describe('alert_form', () => {
 
     it('renders alert type description', async () => {
       await setup();
-      wrapper.find('[data-test-subj="my-alert-type-SelectOption"]').first().simulate('click');
+      wrapper.find('button[data-test-subj="my-alert-type-SelectOption"]').first().simulate('click');
       const alertDescription = wrapper.find('[data-test-subj="alertDescription"]');
       expect(alertDescription.exists()).toBeTruthy();
       expect(alertDescription.first().text()).toContain('Alert when testing');
     });
 
     it('renders alert type documentation link', async () => {
       await setup();
-      wrapper.find('[data-test-subj="my-alert-type-SelectOption"]').first().simulate('click');
+      wrapper.find('button[data-test-subj="my-alert-type-SelectOption"]').first().simulate('click');
       const alertDocumentationLink = wrapper.find('[data-test-subj="alertDocumentationLink"]');
       expect(alertDocumentationLink.exists()).toBeTruthy();
       expect(alertDocumentationLink.first().prop('href')).toBe('https://localhost.local/docs');