[7.x] [ML] Edit text for deleting calendars & add functional tests fo…

…r Calendars and Filter Lists (#77566) (#78198) Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Elastic Machine <[email protected]>
elastic · Sep 22, 2020 · bb6a65c · bb6a65c
1 parent 52c37b8
commit bb6a65c
Show file tree

Hide file tree

Showing 31 changed files with 924 additions and 41 deletions.
diff --git a/...pplication/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap b/...pplication/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap
diff --git a/x-pack/plugins/ml/public/application/settings/calendars/edit/calendar_form/calendar_form.js b/x-pack/plugins/ml/public/application/settings/calendars/edit/calendar_form/calendar_form.js
@@ -40,7 +40,7 @@ function EditHeader({ calendarId, description }) {
           />
         </h1>
       </EuiTitle>
-      <EuiText>
+      <EuiText data-test-subj={'mlCalendarDescriptionText'}>
         <p>{description}</p>
       </EuiText>
       <EuiSpacer size="l" />
@@ -116,6 +116,7 @@ export const CalendarForm = ({
               value={calendarId}
               onChange={onCalendarIdChange}
               disabled={isEdit === true || saving === true}
+              data-test-subj="mlCalendarIdInput"
             />
           </EuiFormRow>
 
@@ -132,6 +133,7 @@ export const CalendarForm = ({
               value={description}
               onChange={onDescriptionChange}
               disabled={isEdit === true || saving === true}
+              data-test-subj="mlCalendarDescriptionInput"
             />
           </EuiFormRow>
         </Fragment>

diff --git a/.../plugins/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.js b/.../plugins/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.js
@@ -257,7 +257,12 @@ export class NewEventModal extends Component {
 
     return (
       <Fragment>
-        <EuiModal onClose={closeModal} initialFocus="[name=eventDescription]" maxWidth={false}>
+        <EuiModal
+          onClose={closeModal}
+          initialFocus="[name=eventDescription]"
+          maxWidth={false}
+          data-test-subj={'mlCalendarEventForm'}
+        >
           <EuiModalHeader>
             <EuiModalHeaderTitle>
               <FormattedMessage
@@ -283,6 +288,7 @@ export class NewEventModal extends Component {
                   onChange={this.onDescriptionChange}
                   isInvalid={!description}
                   fullWidth
+                  data-test-subj={'mlCalendarEventDescriptionInput'}
                 />
               </EuiFormRow>
 
@@ -293,13 +299,18 @@ export class NewEventModal extends Component {
           </EuiModalBody>
 
           <EuiModalFooter>
-            <EuiButtonEmpty onClick={closeModal}>
+            <EuiButtonEmpty onClick={closeModal} data-test-subj={'mlCalendarCancelEventButton'}>
               <FormattedMessage
                 id="xpack.ml.calendarsEdit.newEventModal.cancelButtonLabel"
                 defaultMessage="Cancel"
               />
             </EuiButtonEmpty>
-            <EuiButton onClick={this.handleAddEvent} fill disabled={!description}>
+            <EuiButton
+              onClick={this.handleAddEvent}
+              fill
+              disabled={!description}
+              data-test-subj={'mlCalendarAddEventButton'}
+            >
               <FormattedMessage
                 id="xpack.ml.calendarsEdit.newEventModal.addButtonLabel"
                 defaultMessage="Add"

diff --git a/x-pack/plugins/ml/public/application/settings/calendars/list/calendars_list.js b/x-pack/plugins/ml/public/application/settings/calendars/list/calendars_list.js
@@ -108,10 +108,15 @@ export class CalendarsListUI extends Component {
       destroyModal = (
         <EuiOverlayMask>
           <EuiConfirmModal
+            data-test-subj={'mlCalendarDeleteConfirmation'}
             title={
               <FormattedMessage
-                id="xpack.ml.calendarsList.deleteCalendarsModal.deleteCalendarTitle"
-                defaultMessage="Delete calendar"
+                id="xpack.ml.calendarsList.deleteCalendarsModal.deleteMultipleCalendarsTitle"
+                defaultMessage="Delete {calendarsCount, plural, one {{calendarsList}} other {# calendars}}?"
+                values={{
+                  calendarsCount: selectedForDeletion.length,
+                  calendarsList: selectedForDeletion.map((c) => c.calendar_id).join(', '),
+                }}
               />
             }
             onCancel={this.closeDestroyModal}
@@ -130,18 +135,7 @@ export class CalendarsListUI extends Component {
             }
             buttonColor="danger"
             defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
-          >
-            <p>
-              <FormattedMessage
-                id="xpack.ml.calendarsList.deleteCalendarsModal.deleteCalendarsDescription"
-                defaultMessage="Delete {calendarsCount, plural, one {this calendar} other {these calendars}}? {calendarsList}"
-                values={{
-                  calendarsCount: selectedForDeletion.length,
-                  calendarsList: selectedForDeletion.map((c) => c.calendar_id).join(', '),
-                }}
-              />
-            </p>
-          </EuiConfirmModal>
+          />
         </EuiOverlayMask>
       );
     }

diff --git a/...ings/filter_lists/components/add_item_popover/__snapshots__/add_item_popover.test.js.snap b/...ings/filter_lists/components/add_item_popover/__snapshots__/add_item_popover.test.js.snap
diff --git a/.../public/application/settings/filter_lists/components/add_item_popover/add_item_popover.js b/.../public/application/settings/filter_lists/components/add_item_popover/add_item_popover.js
@@ -84,7 +84,7 @@ export class AddItemPopover extends Component {
         iconSide="right"
         onClick={this.onButtonClick}
         isDisabled={this.props.canCreateFilter === false}
-        data-test-subj="mlFilterListAddItemButton"
+        data-test-subj="mlFilterListOpenNewItemsPopoverButton"
       >
         <FormattedMessage
           id="xpack.ml.settings.filterLists.addItemPopover.addItemButtonLabel"
@@ -112,7 +112,11 @@ export class AddItemPopover extends Component {
                 />
               }
             >
-              <EuiTextArea value={this.state.itemsText} onChange={this.onItemsTextChange} />
+              <EuiTextArea
+                value={this.state.itemsText}
+                onChange={this.onItemsTextChange}
+                data-test-subj={'mlFilterListAddItemTextArea'}
+              />
             </EuiFormRow>
           </EuiForm>
           <EuiText size="xs">
@@ -127,6 +131,7 @@ export class AddItemPopover extends Component {
               <EuiButton
                 onClick={this.onAddButtonClick}
                 disabled={this.state.itemsText.length === 0}
+                data-test-subj={'mlFilterListAddItemsButton'}
               >
                 <FormattedMessage
                   id="xpack.ml.settings.filterLists.addItemPopover.addButtonLabel"

diff --git a/...s/components/delete_filter_list_modal/__snapshots__/delete_filter_list_modal.test.js.snap b/...s/components/delete_filter_list_modal/__snapshots__/delete_filter_list_modal.test.js.snap
diff --git a/...ion/settings/filter_lists/components/delete_filter_list_modal/delete_filter_list_modal.js b/...ion/settings/filter_lists/components/delete_filter_list_modal/delete_filter_list_modal.js
@@ -86,6 +86,7 @@ export class DeleteFilterListModal extends Component {
             }
             buttonColor="danger"
             defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
+            data-test-subj={'mlFilterListDeleteConfirmation'}
           />
         </EuiOverlayMask>
       );

diff --git a/...s/components/edit_description_popover/__snapshots__/edit_description_popover.test.js.snap b/...s/components/edit_description_popover/__snapshots__/edit_description_popover.test.js.snap
diff --git a/...ion/settings/filter_lists/components/edit_description_popover/edit_description_popover.js b/...ion/settings/filter_lists/components/edit_description_popover/edit_description_popover.js
@@ -102,6 +102,7 @@ export class EditDescriptionPopover extends Component {
                   name="filter_list_description"
                   value={value}
                   onChange={this.onChange}
+                  data-test-subj={'mlFilterListDescriptionInput'}
                 />
               </EuiFormRow>
             </EuiForm>