added tests

elastic · Jul 7, 2021 · 04aafa4 · 04aafa4
1 parent c9cc124
commit 04aafa4
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 115 deletions.
diff --git a/...rs_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx b/...rs_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();

diff --git a/...riggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx b/...riggers_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"
                     />
                   }
                 />

diff --git a/...iggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx b/...iggers_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');
 

diff --git a/...ns/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx b/...ns/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx
@@ -36,7 +36,6 @@ import {
 import { useHistory } from 'react-router-dom';
 
 import { isEmpty } from 'lodash';
-import moment from 'moment';
 import { ActionType, Alert, AlertTableItem, AlertTypeIndex, Pagination } from '../../../../types';
 import { AlertAdd, AlertEdit } from '../../alert_form';
 import { BulkOperationPopover } from '../../common/components/bulk_operation_popover';
@@ -323,30 +322,24 @@ export const AlertsList: React.FunctionComponent = () => {
     );
   };
 
-  const disabledLabel = i18n.translate(
-    'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.disabledLabel',
-    { defaultMessage: 'Disabled' }
-  );
-  const enabledLabel = i18n.translate(
-    'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.enabledLabel',
-    { defaultMessage: 'Active' }
-  );
-
   const alertsTableColumns = [
     {
-      name: '',
-      width: '120px',
-      render(item: AlertTableItem) {
-        let isEnabled = !!item.enabled;
+      field: 'enabled',
+      name: i18n.translate(
+        'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.enabledTitle',
+        { defaultMessage: 'Enabled' }
+      ),
+      width: '90px',
+      render(enabled: boolean | undefined, item: AlertTableItem) {
+        let isEnabled = !!enabled;
         return (
           <EuiSwitch
-            name="disable"
+            name="enable"
             disabled={!item.isEditable || !item.enabledInLicense}
             compressed
             checked={isEnabled}
-            data-test-subj="disableSwitch"
+            data-test-subj="enableSwitch"
             onChange={async () => {
-              const enabled = item.enabled;
               asyncScheduler.schedule(async () => {
                 if (enabled) {
                   await disableAlert({ http, id: item.id });
@@ -358,10 +351,11 @@ export const AlertsList: React.FunctionComponent = () => {
                 loadAlertsData();
               }, 10);
             }}
-            label={!item.enabled ? disabledLabel : enabledLabel}
+            label=""
           />
         );
       },
+      sortable: true,
       'data-test-subj': 'alertsTableCell-enabled',
     },
     {
@@ -418,27 +412,6 @@ export const AlertsList: React.FunctionComponent = () => {
         return renderAlertExecutionStatus(item.executionStatus, item);
       },
     },
-    {
-      field: 'lastUpdated',
-      width: '100px',
-      name: i18n.translate(
-        'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.lastUpdatedTitle',
-        { defaultMessage: 'Last updated' }
-      ),
-      render: (_count: number, item: AlertTableItem) => {
-        const today = moment(Date.now());
-        const updatedAt = moment(item.updatedAt);
-        const lastUpdatedMin = today.diff(updatedAt, 'minutes');
-        const lastUpdatedSec = today.diff(updatedAt, 'seconds');
-        return (
-          <EuiText size="s" key={item.id}>
-            {lastUpdatedMin === 0 ? `${lastUpdatedSec}s ago` : `${lastUpdatedMin}m ago`}
-          </EuiText>
-        );
-      },
-      sortable: true,
-      'data-test-subj': 'alertsTableCell-lastUpdated',
-    },
     {
       field: 'alertType',
       name: i18n.translate(
@@ -468,25 +441,38 @@ export const AlertsList: React.FunctionComponent = () => {
     },
     {
       field: 'schedule.interval',
-      width: '15%',
+      width: '6%',
       name: i18n.translate(
         'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.scheduleTitle',
         { defaultMessage: 'Schedule' }
       ),
-      render: (interval: number, item: AlertTableItem) => {
+      render: (interval: number) => {
         return (
-          <EuiFlexGroup wrap responsive={false} gutterSize="xs">
-            <EuiFlexItem>
-              <EuiText size="s">
-                <EuiIcon color="subdued" type="clock" />
-                &nbsp;
-                {interval}
-              </EuiText>
-            </EuiFlexItem>
-            <EuiFlexItem>
+          <EuiText size="s">
+            <EuiIcon color="subdued" type="clock" />
+            &nbsp;
+            {interval}
+          </EuiText>
+        );
+      },
+      sortable: false,
+      truncateText: false,
+      'data-test-subj': 'alertsTableCell-interval',
+    },
+    {
+      width: '9%',
+      name: i18n.translate(
+        'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.actionsTitle',
+        { defaultMessage: 'Actions' }
+      ),
+      render: (item: AlertTableItem) => {
+        return (
+          <EuiFlexGroup wrap responsive={false} gutterSize="s">
+            <EuiFlexItem grow={false}>
               <div>
                 <EuiText
-                  size="s"
+                  size="m"
+                  data-test-subj="actionsCount"
                   title={i18n.translate(
                     'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.actionsCountTooltip',
                     { defaultMessage: 'Number of actions attached to the rule' }
@@ -498,9 +484,9 @@ export const AlertsList: React.FunctionComponent = () => {
                 </EuiText>
               </div>
             </EuiFlexItem>
-            <EuiFlexItem>
-              {item.muteAll ? (
-                <div>
+            <EuiFlexItem grow={false}>
+              <div>
+                {item.muteAll ? (
                   <EuiToolTip
                     position="bottom"
                     content={
@@ -512,6 +498,7 @@ export const AlertsList: React.FunctionComponent = () => {
                   >
                     <EuiButtonIcon
                       color={'danger'}
+                      data-test-subj="unmuteIconButton"
                       onClick={async () => {
                         asyncScheduler.schedule(async () => {
                           await unmuteAlert({ http, id: item.id });
@@ -522,11 +509,10 @@ export const AlertsList: React.FunctionComponent = () => {
                       aria-label={'unmute'}
                     />
                   </EuiToolTip>
-                </div>
-              ) : (
-                <div className="alertSidebarItem">
+                ) : (
                   <EuiToolTip
                     position="bottom"
+                    data-test-subj="muteButton"
                     content={
                       <FormattedMessage
                         id="xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.muteButtonTooltip"
@@ -536,7 +522,7 @@ export const AlertsList: React.FunctionComponent = () => {
                   >
                     <EuiButtonIcon
                       color={'primary'}
-                      className="alertSidebarItem__action"
+                      data-test-subj="muteIconButton"
                       onClick={async () => {
                         asyncScheduler.schedule(async () => {
                           await muteAlert({ http, id: item.id });
@@ -547,15 +533,13 @@ export const AlertsList: React.FunctionComponent = () => {
                       aria-label={'mute'}
                     />
                   </EuiToolTip>
-                </div>
-              )}
+                )}
+              </div>
             </EuiFlexItem>
           </EuiFlexGroup>
         );
       },
-      sortable: false,
-      truncateText: false,
-      'data-test-subj': 'alertsTableCell-interval',
+      'data-test-subj': 'alertsTableCell-actions',
     },
     {
       name: '',

diff --git a/...actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss b/...actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss
@@ -4,20 +4,6 @@
   }
 }
 
-.actCollapsedItemActions__item {
-  padding: $euiSizeM;
-}
-
-.actCollapsedItemActions {
-  display: flex;
-
-  .actCollapsedItemActions__deleteIcon {
-    width: $euiSwitchWidthCompressed;
-    text-align: center;
-  }
-
-  .actCollapsedItemActions__Label {
-    padding-left: $euiSizeS;
-    padding-top: $euiSizeXS * .5;
-  }
+button[data-test-subj="deleteAlert"] {
+  color: $euiColorDanger;
 }
diff --git a/...ions_ui/public/application/sections/alerts_list/components/collapsed_item_actions_new.tsx b/...ions_ui/public/application/sections/alerts_list/components/collapsed_item_actions_new.tsx
@@ -61,7 +61,7 @@ export const CollapsedItemActions: React.FunctionComponent<ComponentOpts> = ({
       items: [
         {
           disabled: !(item.isEditable && !isDisabled) || !item.enabledInLicense,
-          'data-test-subj': 'muteSwitch',
+          'data-test-subj': 'muteButton',
           onClick: async () => {
             const muteAll = isMuted;
             asyncScheduler.schedule(async () => {
@@ -86,7 +86,7 @@ export const CollapsedItemActions: React.FunctionComponent<ComponentOpts> = ({
         },
         {
           disabled: !item.isEditable || !item.enabledInLicense,
-          'data-test-subj': 'disableSwitch',
+          'data-test-subj': 'disableButton',
           onClick: async () => {
             const enabled = !isDisabled;
             asyncScheduler.schedule(async () => {
@@ -140,7 +140,7 @@ export const CollapsedItemActions: React.FunctionComponent<ComponentOpts> = ({
       panelPaddingSize="none"
       data-test-subj="collapsedItemActions"
     >
-      <EuiContextMenu initialPanelId={0} panels={panels} />
+      <EuiContextMenu initialPanelId={0} panels={panels} className="actCollapsedItemActions" />
     </EuiPopover>
   );
 };