[Alerting UI]Changed rules table to support visual indication for disabled and muted alerts

x-pack/plugins/translations/translations/ja-JP.json

@@ -22901,7 +22901,6 @@
     "xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.status.active": "アクティブ",
     "xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.status.inactive": "OK",
     "xpack.triggersActionsUI.sections.alertDetails.alerts.disabledRuleTitle": "無効なルール",
-    "xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.disableTitle": "無効にする",
     "xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.muteTitle": "ミュート",
     "xpack.triggersActionsUI.sections.alertDetails.dismissButtonTitle": "閉じる",
     "xpack.triggersActionsUI.sections.alertDetails.editAlertButtonLabel": "編集",
@@ -22955,10 +22954,8 @@
     "xpack.triggersActionsUI.sections.alertsList.alertErrorReasonReading": "ルールの読み取り中にエラーが発生しました。",
     "xpack.triggersActionsUI.sections.alertsList.alertErrorReasonRunning": "ルールの実行中にエラーが発生しました。",
     "xpack.triggersActionsUI.sections.alertsList.alertErrorReasonUnknown": "不明な理由でエラーが発生しました。",
-    "xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.actionsCount": "アクション",
     "xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.actionsTex": "アクション",
     "xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.alertTypeTitle": "型",
-    "xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.intervalTitle": "次の間隔で実行",
     "xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.nameTitle": "名前",
     "xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.statusTitle": "ステータス",
     "xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.tagsText": "タグ",

x-pack/plugins/translations/translations/zh-CN.json

@@ -23262,7 +23262,6 @@
     "xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.status.active": "活动",
     "xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.status.inactive": "确定",
     "xpack.triggersActionsUI.sections.alertDetails.alerts.disabledRuleTitle": "已禁用规则",
-    "xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.disableTitle": "禁用",
     "xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.muteTitle": "静音",
     "xpack.triggersActionsUI.sections.alertDetails.dismissButtonTitle": "关闭",
     "xpack.triggersActionsUI.sections.alertDetails.editAlertButtonLabel": "编辑",
@@ -23316,10 +23315,8 @@
     "xpack.triggersActionsUI.sections.alertsList.alertErrorReasonReading": "读取规则时发生错误。",
     "xpack.triggersActionsUI.sections.alertsList.alertErrorReasonRunning": "运行规则时发生错误。",
     "xpack.triggersActionsUI.sections.alertsList.alertErrorReasonUnknown": "由于未知原因发生错误。",
-    "xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.actionsCount": "操作",
     "xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.actionsTex": "操作",
     "xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.alertTypeTitle": "类型",
-    "xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.intervalTitle": "运行间隔",
     "xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.nameTitle": "名称",
     "xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.statusTitle": "状态",
     "xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.tagsText": "标签",

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx

@@ -359,16 +359,16 @@ describe('disable button', () => {
       <AlertDetails alert={alert} alertType={alertType} actionTypes={[]} {...mockAlertApis} />
     )
       .find(EuiSwitch)
-      .find('[name="disable"]')
+      .find('[name="enable"]')
       .first();
 
     expect(enableButton.props()).toMatchObject({
-      checked: false,
+      checked: true,
       disabled: false,
     });
   });
 
-  it('should render a disable button when alert is disabled', () => {
+  it('should render a enable button when alert is disabled', () => {
     const alert = mockAlert({
       enabled: false,
     });
@@ -390,11 +390,11 @@ describe('disable button', () => {
       <AlertDetails alert={alert} alertType={alertType} actionTypes={[]} {...mockAlertApis} />
     )
       .find(EuiSwitch)
-      .find('[name="disable"]')
+      .find('[name="enable"]')
       .first();
 
     expect(enableButton.props()).toMatchObject({
-      checked: true,
+      checked: false,
       disabled: false,
     });
   });
@@ -428,7 +428,7 @@ describe('disable button', () => {
       />
     )
       .find(EuiSwitch)
-      .find('[name="disable"]')
+      .find('[name="enable"]')
       .first();
 
     enableButton.simulate('click');
@@ -468,7 +468,7 @@ describe('disable button', () => {
       />
     )
       .find(EuiSwitch)
-      .find('[name="disable"]')
+      .find('[name="enable"]')
       .first();
 
     enableButton.simulate('click');
@@ -531,14 +531,14 @@ describe('disable button', () => {
 
     // Disable the alert
     await act(async () => {
-      wrapper.find('[data-test-subj="disableSwitch"] .euiSwitch__button').first().simulate('click');
+      wrapper.find('[data-test-subj="enableSwitch"] .euiSwitch__button').first().simulate('click');
       await nextTick();
     });
     expect(disableAlert).toHaveBeenCalled();
 
     // Enable the alert
     await act(async () => {
-      wrapper.find('[data-test-subj="disableSwitch"] .euiSwitch__button').first().simulate('click');
+      wrapper.find('[data-test-subj="enableSwitch"] .euiSwitch__button').first().simulate('click');
       await nextTick();
     });
     expect(enableAlert).toHaveBeenCalled();

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx

@@ -219,10 +219,10 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
             <EuiFlexGroup justifyContent="flexEnd" wrap responsive={false} gutterSize="m">
               <EuiFlexItem grow={false}>
                 <EuiSwitch
-                  name="disable"
+                  name="enable"
                   disabled={!canSaveAlert || !alertType.enabledInLicense}
-                  checked={!isEnabled}
-                  data-test-subj="disableSwitch"
+                  checked={isEnabled}
+                  data-test-subj="enableSwitch"
                   onChange={async () => {
                     if (isEnabled) {
                       setIsEnabled(false);
@@ -237,8 +237,8 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
                   }}
                   label={
                     <FormattedMessage
-                      id="xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.disableTitle"
-                      defaultMessage="Disable"
+                      id="xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.enableTitle"
+                      defaultMessage="Enable"
                     />
                   }
                 />

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx

@@ -133,6 +133,7 @@ export const AlertEdit = ({
         aria-labelledby="flyoutAlertEditTitle"
         size="m"
         maxWidth={620}
+        ownFocus={false}
       >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="s" data-test-subj="editAlertFlyoutTitle">

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alert_status_filter.tsx

@@ -95,13 +95,13 @@ export const AlertStatusFilter: React.FunctionComponent<AlertStatusFilterProps>
 export function getHealthColor(status: AlertExecutionStatuses) {
   switch (status) {
     case 'active':
-      return 'primary';
+      return 'success';
     case 'error':
       return 'danger';
     case 'ok':
       return 'subdued';
     case 'pending':
-      return 'success';
+      return 'accent';
     default:
       return 'warning';
   }

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.scss

@@ -5,3 +5,29 @@
     color: $euiColorDarkShade;
   }
 }
+
+.alertSidebarItem {
+  &:hover,
+  &:focus-within,
+  &[class*='-isActive'] {
+    .alertSidebarItem__action {
+      opacity: 1;
+    }
+  }
+}
+
+/**
+ * 1. Only visually hide the action, so that it's still accessible to screen readers.
+ * 2. When tabbed to, this element needs to be visible for keyboard accessibility.
+ */
+.alertSidebarItem__action {
+  opacity: 0; /* 1 */
+
+  &.alertSidebarItem__mobile {
+    opacity: 1;
+  }
+
+  &:focus {
+    opacity: 1; /* 2 */
+  }
+}

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx

@@ -368,7 +368,7 @@ describe('alerts_list component with items', () => {
   it('sorts alerts when clicking the name column', async () => {
     await setup();
     wrapper
-      .find('[data-test-subj="tableHeaderCell_name_0"] .euiTableHeaderButton')
+      .find('[data-test-subj="tableHeaderCell_name_1"] .euiTableHeaderButton')
       .first()
       .simulate('click');