[ML] Functional tests - add UI permission tests

x-pack/plugins/ml/public/application/components/anomalies_table/links_menu.js

@@ -390,6 +390,7 @@ class LinksMenuUI extends Component {
           defaultMessage: 'Select action for anomaly at {time}',
           values: { time: formatHumanReadableDateTimeSeconds(anomaly.time) },
         })}
+        data-test-subj="mlAnomaliesListRowActionsButton"
       />
     );
 
@@ -404,6 +405,7 @@ class LinksMenuUI extends Component {
               this.closePopover();
               this.openCustomUrl(customUrl);
             }}
+            data-test-subj={`mlAnomaliesListRowActionCustomUrlButton_${index}`}
           >
             {customUrl.url_name}
           </EuiContextMenuItem>
@@ -420,6 +422,7 @@ class LinksMenuUI extends Component {
             this.closePopover();
             this.viewSeries();
           }}
+          data-test-subj="mlAnomaliesListRowActionViewSeriesButton"
         >
           <FormattedMessage
             id="xpack.ml.anomaliesTable.linksMenu.viewSeriesLabel"
@@ -438,6 +441,7 @@ class LinksMenuUI extends Component {
             this.closePopover();
             this.viewExamples();
           }}
+          data-test-subj="mlAnomaliesListRowActionViewExamplesButton"
         >
           <FormattedMessage
             id="xpack.ml.anomaliesTable.linksMenu.viewExamplesLabel"
@@ -456,6 +460,7 @@ class LinksMenuUI extends Component {
             this.closePopover();
             this.props.showRuleEditorFlyout(anomaly);
           }}
+          data-test-subj="mlAnomaliesListRowActionConfigureRulesButton"
         >
           <FormattedMessage
             id="xpack.ml.anomaliesTable.linksMenu.configureRulesLabel"
@@ -473,7 +478,7 @@ class LinksMenuUI extends Component {
         panelPaddingSize="none"
         anchorPosition="downLeft"
       >
-        <EuiContextMenuPanel items={items} />
+        <EuiContextMenuPanel items={items} data-test-subj="mlAnomaliesListRowActionsMenu" />
       </EuiPopover>
     );
   }

x-pack/plugins/ml/public/application/components/data_recognizer/recognized_result.js

@@ -29,7 +29,7 @@ export const RecognizedResult = ({ config, indexPattern, savedSearch }) => {
   return (
     <EuiFlexItem>
       <CreateJobLinkCard
-        data-test-subj={id}
+        data-test-subj={`mlRecognizerCard ${config.id}`}
         href={href}
         title={config.title}
         description={config.description}

x-pack/plugins/ml/public/application/components/items_grid/items_grid.js

@@ -57,14 +57,15 @@ export function ItemsGrid({
   const pageItems = items.slice(startIndex, startIndex + itemsPerPage);
   const gridItems = pageItems.map((item, index) => {
     return (
-      <EuiFlexItem key={`ml_grid_item_${index}`}>
+      <EuiFlexItem key={`ml_grid_item_${index}`} data-test-subj={`mlGridItem ${item}`}>
         <EuiCheckbox
           id={`ml_grid_item_${index}`}
           label={item}
           checked={selectedItems.indexOf(item) >= 0}
           onChange={(e) => {
             setItemSelected(item, e.target.checked);
           }}
+          data-test-subj={`mlGridItemCheckbox`}
         />
       </EuiFlexItem>
     );

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx

@@ -218,7 +218,7 @@ export const DataFrameAnalyticsList: FC<Props> = ({
 
   if (analytics.length === 0) {
     return (
-      <>
+      <div data-test-subj="mlAnalyticsJobList">
         <AnalyticsEmptyPrompt
           isManagementTable={isManagementTable}
           disabled={disabled}
@@ -227,7 +227,7 @@ export const DataFrameAnalyticsList: FC<Props> = ({
         {isSourceIndexModalVisible === true && (
           <SourceSelection onClose={() => setIsSourceIndexModalVisible(false)} />
         )}
-      </>
+      </div>
     );
   }
 
@@ -251,7 +251,7 @@ export const DataFrameAnalyticsList: FC<Props> = ({
   );
 
   return (
-    <>
+    <div data-test-subj="mlAnalyticsJobList">
       {modals}
       {!isManagementTable && <EuiSpacer size="m" />}
       <EuiFlexGroup justifyContent="spaceBetween">
@@ -301,6 +301,6 @@ export const DataFrameAnalyticsList: FC<Props> = ({
       {isSourceIndexModalVisible === true && (
         <SourceSelection onClose={() => setIsSourceIndexModalVisible(false)} />
       )}
-    </>
+    </div>
   );
 };

x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_actions/results.js

@@ -55,7 +55,7 @@ export function ResultLinks({ jobs }) {
             aria-label={openJobsInSingleMetricViewerText}
             className="results-button"
             isDisabled={singleMetricEnabled === false || jobActionsDisabled === true}
-            data-test-subj={`openJobsInSingleMetricViewer openJobsInSingleMetricViewer-${jobs[0].id}`}
+            data-test-subj="mlOpenJobsInSingleMetricViewerButton"
           />
         </EuiToolTip>
       )}
@@ -66,7 +66,7 @@ export function ResultLinks({ jobs }) {
           aria-label={openJobsInAnomalyExplorerText}
           className="results-button"
           isDisabled={jobActionsDisabled === true}
-          data-test-subj={`openJobsInAnomalyExplorer openJobsInSingleAnomalyExplorer-${jobs[0].id}`}
+          data-test-subj="mlOpenJobsInAnomalyExplorerButton"
         />
       </EuiToolTip>
       <div className="actions-border" />

x-pack/plugins/ml/public/application/jobs/jobs_list/components/multi_job_actions/actions_menu.js

@@ -57,6 +57,7 @@ class MultiJobActionsMenuUI extends Component {
         disabled={
           anyJobsDeleting || (this.canDeleteJob === false && this.canStartStopDatafeed === false)
         }
+        data-test-subj="mlADJobListMultiSelectManagementActionsButton"
       />
     );
 
@@ -69,6 +70,7 @@ class MultiJobActionsMenuUI extends Component {
           this.props.showDeleteJobModal(this.props.jobs);
           this.closePopover();
         }}
+        data-test-subj="mlADJobListMultiSelectDeleteJobActionButton"
       >
         <FormattedMessage
           id="xpack.ml.jobsList.multiJobsActions.deleteJobsLabel"
@@ -88,6 +90,7 @@ class MultiJobActionsMenuUI extends Component {
             closeJobs(this.props.jobs);
             this.closePopover();
           }}
+          data-test-subj="mlADJobListMultiSelectCloseJobActionButton"
         >
           <FormattedMessage
             id="xpack.ml.jobsList.multiJobsActions.closeJobsLabel"
@@ -108,6 +111,7 @@ class MultiJobActionsMenuUI extends Component {
             stopDatafeeds(this.props.jobs, this.props.refreshJobs);
             this.closePopover();
           }}
+          data-test-subj="mlADJobListMultiSelectStopDatafeedActionButton"
         >
           <FormattedMessage
             id="xpack.ml.jobsList.multiJobsActions.stopDatafeedsLabel"
@@ -128,6 +132,7 @@ class MultiJobActionsMenuUI extends Component {
             this.props.showStartDatafeedModal(this.props.jobs);
             this.closePopover();
           }}
+          data-test-subj="mlADJobListMultiSelectStartDatafeedActionButton"
         >
           <FormattedMessage
             id="xpack.ml.jobsList.multiJobsActions.startDatafeedsLabel"

x-pack/plugins/ml/public/application/jobs/jobs_list/components/multi_job_actions/group_selector/group_selector.js

@@ -219,6 +219,7 @@ export class GroupSelector extends Component {
           )}
           onClick={() => this.togglePopover()}
           disabled={this.canUpdateJob === false}
+          data-test-subj="mlADJobListMultiSelectEditJobGroupsButton"
         />
       </EuiToolTip>
     );

x-pack/plugins/ml/public/application/jobs/jobs_list/components/multi_job_actions/multi_job_actions.js

@@ -24,7 +24,10 @@ export class MultiJobActions extends Component {
   render() {
     const jobsSelected = this.props.selectedJobs.length > 0;
     return (
-      <div className={`multi-select-actions${jobsSelected ? '' : '-no-display'}`}>
+      <div
+        className={`multi-select-actions${jobsSelected ? '' : '-no-display'}`}
+        data-test-subj={`mlADJobListMultiSelectActionsArea ${jobsSelected ? 'active' : 'inactive'}`}
+      >
         {jobsSelected && (
           <Fragment>
             <EuiTitle size="s" style={{ display: 'inline' }}>

x-pack/plugins/ml/public/application/management/jobs_list/components/access_denied_page.tsx

@@ -23,7 +23,7 @@ import {
 
 export const AccessDeniedPage = () => (
   <Fragment>
-    <EuiPage>
+    <EuiPage data-test-subj="mlPageAccessDenied">
       <EuiPageBody>
         <EuiPageContentHeader>
           <EuiPageContentHeaderSection>

x-pack/plugins/ml/public/application/overview/components/analytics_panel/actions.tsx

@@ -48,7 +48,7 @@ export const ViewLink: FC<Props> = ({ item }) => {
         iconType="visTable"
         aria-label={viewJobResultsButtonText}
         className="results-button"
-        data-test-subj="mlAnalyticsJobViewButton"
+        data-test-subj="mlOverviewAnalyticsJobViewButton"
         isDisabled={disabled}
       >
         {i18n.translate('xpack.ml.overview.analytics.viewActionName', {

x-pack/plugins/ml/public/application/overview/components/analytics_panel/analytics_panel.tsx

@@ -100,6 +100,7 @@ export const AnalyticsPanel: FC<Props> = ({ jobCreationDisabled }) => {
               fill
               iconType="plusInCircle"
               isDisabled={jobCreationDisabled}
+              data-test-subj="mlOverviewCreateDFAJobButton"
             >
               {i18n.translate('xpack.ml.overview.analyticsList.createJobButtonText', {
                 defaultMessage: 'Create job',

x-pack/plugins/ml/public/application/overview/components/anomaly_detection_panel/anomaly_detection_panel.tsx

@@ -184,6 +184,7 @@ export const AnomalyDetectionPanel: FC<Props> = ({ jobCreationDisabled }) => {
               fill
               iconType="plusInCircle"
               isDisabled={jobCreationDisabled}
+              data-test-subj="mlOverviewCreateADJobButton"
             >
               {i18n.translate('xpack.ml.overview.anomalyDetection.createJobButtonText', {
                 defaultMessage: 'Create job',

x-pack/plugins/ml/public/application/settings/calendars/edit/calendar_form/calendar_form.js

@@ -147,6 +147,7 @@ export const CalendarForm = ({
         checked={isGlobalCalendar}
         onChange={onGlobalCalendarChange}
         disabled={saving === true || canCreateCalendar === false}
+        data-test-subj="mlCalendarApplyToAllJobsSwitch"
       />
 
       {isGlobalCalendar === false && (
@@ -166,6 +167,7 @@ export const CalendarForm = ({
               selectedOptions={selectedJobOptions}
               onChange={onJobSelection}
               isDisabled={saving === true || canCreateCalendar === false}
+              data-test-subj="mlCalendarJobSelection"
             />
           </EuiFormRow>
 
@@ -183,6 +185,7 @@ export const CalendarForm = ({
               selectedOptions={selectedGroupOptions}
               onChange={onGroupSelection}
               isDisabled={saving === true || canCreateCalendar === false}
+              data-test-subj="mlCalendarJobGroupSelection"
             />
           </EuiFormRow>
         </>

x-pack/plugins/ml/public/application/settings/calendars/edit/events_table/events_table.js

@@ -14,14 +14,15 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { TIME_FORMAT } from '../../../../../../common/constants/time_format';
 
-function DeleteButton({ onClick, canDeleteCalendar }) {
+function DeleteButton({ onClick, canDeleteCalendar, testSubj }) {
   return (
     <Fragment>
       <EuiButtonEmpty
         size="xs"
         color="danger"
         onClick={onClick}
         isDisabled={canDeleteCalendar === false}
+        data-test-subj={testSubj}
       >
         <FormattedMessage
           id="xpack.ml.calendarsEdit.eventsTable.deleteButtonLabel"
@@ -90,7 +91,7 @@ export const EventsTable = ({
       name: '',
       render: (event) => (
         <DeleteButton
-          data-test-subj="mlEventDelete"
+          testSubj="mlCalendarEventDeleteButton"
           canDeleteCalendar={canDeleteCalendar}
           onClick={() => {
             onDeleteClick(event.event_id);
@@ -105,7 +106,7 @@ export const EventsTable = ({
       <EuiButton
         isDisabled={canCreateCalendar === false}
         key="ml_new_event"
-        data-test-subj="mlNewEvent"
+        data-test-subj="mlCalendarNewEventButton"
         size="s"
         iconType="plusInCircle"
         onClick={showNewEventModal}
@@ -118,7 +119,7 @@ export const EventsTable = ({
       <EuiButton
         isDisabled={canCreateCalendar === false}
         key="ml_import_event"
-        data-test-subj="mlImportEvents"
+        data-test-subj="mlCalendarImportEventsButton"
         size="s"
         iconType="importAction"
         onClick={showImportModal}
@@ -145,6 +146,10 @@ export const EventsTable = ({
         pagination={pagination}
         sorting={sorting}
         search={showSearchBar ? search : undefined}
+        data-test-subj="mlCalendarEventsTable"
+        rowProps={(item) => ({
+          'data-test-subj': `mlCalendarEventListRow row-${item.description}`,
+        })}
       />
     </Fragment>
   );

x-pack/plugins/ml/public/application/settings/calendars/edit/import_modal/import_modal.test.js

@@ -51,7 +51,7 @@ describe('ImportModal', () => {
     instance.setState(testState);
     wrapper.update();
     expect(wrapper.state('selectedEvents').length).toBe(2);
-    const deleteButton = wrapper.find('[data-test-subj="mlEventDelete"]');
+    const deleteButton = wrapper.find('[data-test-subj="mlCalendarEventDeleteButton"]');
     const button = deleteButton.find('EuiButtonEmpty').first();
     button.simulate('click');
 

x-pack/plugins/ml/public/application/settings/calendars/edit/new_calendar.js

@@ -339,7 +339,7 @@ class NewCalendarUI extends Component {
     return (
       <Fragment>
         <NavigationMenu tabId="settings" />
-        <EuiPage className="mlCalendarEditForm">
+        <EuiPage className="mlCalendarEditForm" data-test-subj="mlPageCalendarEdit">
           <EuiPageBody>
             <EuiPageContent
               className="mlCalendarEditForm__content"