[Security Solution] Unskip cypress tests

src/plugins/data/public/ui/filter_bar/filter_item.tsx

@@ -145,7 +145,14 @@ export function FilterItem(props: Props) {
     const dataTestSubjNegated = filter.meta.negate ? 'filter-negated' : '';
     const dataTestSubjDisabled = `filter-${isDisabled(labelConfig) ? 'disabled' : 'enabled'}`;
     const dataTestSubjPinned = `filter-${isFilterPinned(filter) ? 'pinned' : 'unpinned'}`;
-    return `filter ${dataTestSubjDisabled} ${dataTestSubjKey} ${dataTestSubjValue} ${dataTestSubjPinned} ${dataTestSubjNegated}`;
+    return classNames(
+      'filter',
+      dataTestSubjDisabled,
+      dataTestSubjKey,
+      dataTestSubjValue,
+      dataTestSubjPinned,
+      dataTestSubjNegated
+    );
   }
 
   function getPanels() {

test/functional/services/filter_bar.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import classNames from 'classnames';
 import { FtrProviderContext } from '../ftr_provider_context';
 
 export function FilterBarProvider({ getService, getPageObjects }: FtrProviderContext) {
@@ -45,7 +46,14 @@ export function FilterBarProvider({ getService, getPageObjects }: FtrProviderCon
       const filterPinnedState = pinned ? 'pinned' : 'unpinned';
       const filterNegatedState = negated ? 'filter-negated' : '';
       return testSubjects.exists(
-        `filter filter-${filterActivationState} filter-key-${key} filter-value-${value} filter-${filterPinnedState} ${filterNegatedState}`,
+        classNames(
+          'filter',
+          `filter-${filterActivationState}`,
+          key !== '' && `filter-key-${key}`,
+          value !== '' && `filter-value-${value}`,
+          `filter-${filterPinnedState}`,
+          filterNegatedState
+        ),
         {
           allowHidden: true,
         }

x-pack/plugins/security_solution/cypress/integration/timeline_data_providers.spec.ts

@@ -25,9 +25,7 @@ import { closeTimeline, createNewTimeline } from '../tasks/timeline';
 import { HOSTS_URL } from '../urls/navigation';
 import { cleanKibana } from '../tasks/common';
 
-// FLAKY: https://github.com/elastic/kibana/issues/85098
-// FLAKY: https://github.com/elastic/kibana/issues/62060
-describe.skip('timeline data providers', () => {
+describe('timeline data providers', () => {
   before(() => {
     cleanKibana();
     loginAndWaitForPage(HOSTS_URL);

x-pack/plugins/security_solution/cypress/screens/timeline.ts

@@ -84,6 +84,18 @@ export const SAVE_FILTER_BTN = '[data-test-subj="saveFilter"]';
 export const SEARCH_OR_FILTER_CONTAINER =
   '[data-test-subj="timeline-search-or-filter-search-container"]';
 
+export const QUERY_TAB_EVENTS_TABLE = '[data-test-subj="query-events-table"]';
+
+export const QUERY_TAB_EVENTS_BODY = '[data-test-subj="query-tab-flyout-body"]';
+
+export const QUERY_TAB_EVENTS_FOOTER = '[data-test-subj="query-tab-flyout-footer"]';
+
+export const PINNED_TAB_EVENTS_TABLE = '[data-test-subj="pinned-events-table"]';
+
+export const PINNED_TAB_EVENTS_BODY = '[data-test-subj="pinned-tab-flyout-body"]';
+
+export const PINNED_TAB_EVENTS_FOOTER = '[data-test-subj="pinned-tab-flyout-footer"]';
+
 export const SERVER_SIDE_EVENT_COUNT = '[data-test-subj="server-side-event-count"]';
 
 export const STAR_ICON = '[data-test-subj="timeline-favorite-empty-star"]';
@@ -106,10 +118,8 @@ export const TIMELINE_DROPPED_DATA_PROVIDERS = '[data-test-subj="providerContain
 export const TIMELINE_FIELDS_BUTTON =
   '[data-test-subj="timeline"] [data-test-subj="show-field-browser"]';
 
-export const TIMELINE_FILTER = (filter: TimelineFilter) => {
-  // The space at the end of the line is required. We want to keep it until it is updated.
-  return `[data-test-subj="filter filter-enabled filter-key-${filter.field} filter-value-${filter.value} filter-unpinned "]`;
-};
+export const TIMELINE_FILTER = (filter: TimelineFilter) =>
+  `[data-test-subj="filter filter-enabled filter-key-${filter.field} filter-value-${filter.value} filter-unpinned"]`;
 
 export const TIMELINE_FILTER_FIELD = '[data-test-subj="filterFieldSuggestionList"]';
 
@@ -122,9 +132,9 @@ export const TIMELINE_FILTER_VALUE =
 
 export const TIMELINE_FLYOUT = '[data-test-subj="eui-flyout"]';
 
-export const TIMELINE_FLYOUT_HEADER = '[data-test-subj="eui-flyout-header"]';
+export const TIMELINE_FLYOUT_HEADER = '[data-test-subj="query-tab-flyout-header"]';
 
-export const TIMELINE_FLYOUT_BODY = '[data-test-subj="eui-flyout-body"]';
+export const TIMELINE_FLYOUT_BODY = '[data-test-subj="query-tab-flyout-body"]';
 
 export const TIMELINE_INSPECT_BUTTON = `${TIMELINE_FLYOUT} [data-test-subj="inspect-icon-button"]`;
 

x-pack/plugins/security_solution/cypress/tasks/timeline.ts

@@ -49,6 +49,7 @@ import {
   TIMELINE_EDIT_MODAL_OPEN_BUTTON,
   TIMELINE_EDIT_MODAL_SAVE_BUTTON,
   QUERY_TAB_BUTTON,
+  QUERY_TAB_EVENTS_FOOTER,
 } from '../screens/timeline';
 import { TIMELINES_TABLE } from '../screens/timelines';
 
@@ -118,7 +119,6 @@ export const closeTimeline = () => {
 
 export const createNewTimeline = () => {
   cy.get(TIMELINE_SETTINGS_ICON).filter(':visible').click({ force: true });
-  cy.wait(1000);
   cy.get(CREATE_NEW_TIMELINE).should('be.visible');
   cy.get(CREATE_NEW_TIMELINE).click();
 };
@@ -166,7 +166,8 @@ export const pinFirstEvent = () => {
 
 export const populateTimeline = () => {
   executeTimelineKQL(hostExistsQuery);
-  cy.get(SERVER_SIDE_EVENT_COUNT)
+  cy.get(QUERY_TAB_EVENTS_FOOTER)
+    .find(SERVER_SIDE_EVENT_COUNT)
     .invoke('text')
     .then((strCount) => {
       const intCount = +strCount;

x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx

@@ -179,7 +179,7 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
           <EventsTable
             $activePage={activePage}
             $columnCount={columnHeaders.length + 1}
-            data-test-subj="events-table"
+            data-test-subj={`${tabType}-events-table`}
             columnWidths={columnWidths}
             onKeyDown={onKeyDown}
             $rowCount={data.length}

x-pack/plugins/security_solution/public/timelines/components/timeline/pinned_tab_content/index.test.tsx

@@ -21,6 +21,7 @@ import { useTimelineEventsDetails } from '../../../containers/details/index';
 import { useSourcererScope } from '../../../../common/containers/sourcerer';
 import { mockSourcererScope } from '../../../../common/containers/sourcerer/mocks';
 import { PinnedTabContentComponent, Props as PinnedTabContentComponentProps } from '.';
+import { TimelineTabs } from '../../../store/timeline/model';
 
 jest.mock('../../../containers/index', () => ({
   useTimelineEvents: jest.fn(),
@@ -117,7 +118,9 @@ describe('PinnedTabContent', () => {
         </TestProviders>
       );
 
-      expect(wrapper.find('[data-test-subj="events-table"]').exists()).toEqual(true);
+      expect(
+        wrapper.find(`[data-test-subj="${TimelineTabs.pinned}-events-table"]`).exists()
+      ).toEqual(true);
     });
 
     it('it shows the timeline footer', () => {

x-pack/plugins/security_solution/public/timelines/components/timeline/pinned_tab_content/index.tsx

@@ -172,10 +172,13 @@ export const PinnedTabContentComponent: React.FC<Props> = ({
 
   return (
     <>
-      <FullWidthFlexGroup>
+      <FullWidthFlexGroup data-test-subj={`${TimelineTabs.pinned}-tab`}>
         <ScrollableFlexItem grow={2}>
           <EventDetailsWidthProvider>
-            <StyledEuiFlyoutBody data-test-subj="eui-flyout-body" className="timeline-flyout-body">
+            <StyledEuiFlyoutBody
+              data-test-subj={`${TimelineTabs.pinned}-tab-flyout-body`}
+              className="timeline-flyout-body"
+            >
               <StatefulBody
                 activePage={pageInfo.activePage}
                 browserFields={browserFields}
@@ -191,7 +194,7 @@ export const PinnedTabContentComponent: React.FC<Props> = ({
               />
             </StyledEuiFlyoutBody>
             <StyledEuiFlyoutFooter
-              data-test-subj="eui-flyout-footer"
+              data-test-subj={`${TimelineTabs.pinned}-tab-flyout-footer`}
               className="timeline-flyout-footer"
             >
               <Footer

x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.test.tsx

@@ -145,7 +145,9 @@ describe('Timeline', () => {
         </TestProviders>
       );
 
-      expect(wrapper.find('[data-test-subj="events-table"]').exists()).toEqual(true);
+      expect(
+        wrapper.find(`[data-test-subj="${TimelineTabs.query}-events-table"]`).exists()
+      ).toEqual(true);
     });
 
     test('it does render the timeline table when the source is loading with no events', () => {
@@ -162,7 +164,9 @@ describe('Timeline', () => {
         </TestProviders>
       );
 
-      expect(wrapper.find('[data-test-subj="events-table"]').exists()).toEqual(true);
+      expect(
+        wrapper.find(`[data-test-subj="${TimelineTabs.query}-events-table"]`).exists()
+      ).toEqual(true);
       expect(wrapper.find('[data-test-subj="events"]').exists()).toEqual(false);
     });
 
@@ -173,7 +177,9 @@ describe('Timeline', () => {
         </TestProviders>
       );
 
-      expect(wrapper.find('[data-test-subj="events-table"]').exists()).toEqual(true);
+      expect(
+        wrapper.find(`[data-test-subj="${TimelineTabs.query}-events-table"]`).exists()
+      ).toEqual(true);
       expect(wrapper.find('[data-test-subj="events"]').exists()).toEqual(false);
     });
 
@@ -184,7 +190,9 @@ describe('Timeline', () => {
         </TestProviders>
       );
 
-      expect(wrapper.find('[data-test-subj="events-table"]').exists()).toEqual(true);
+      expect(
+        wrapper.find(`[data-test-subj="${TimelineTabs.query}-events-table"]`).exists()
+      ).toEqual(true);
       expect(wrapper.find('[data-test-subj="events"]').exists()).toEqual(false);
     });
 

x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx

@@ -292,7 +292,10 @@ export const QueryTabContentComponent: React.FC<Props> = ({
       <FullWidthFlexGroup>
         <ScrollableFlexItem grow={2}>
           <HideShowContainer $isVisible={!timelineFullScreen}>
-            <StyledEuiFlyoutHeader data-test-subj="eui-flyout-header" hasBorder={false}>
+            <StyledEuiFlyoutHeader
+              data-test-subj={`${activeTab}-tab-flyout-header`}
+              hasBorder={false}
+            >
               <EuiFlexGroup gutterSize="s" data-test-subj="timeline-date-picker-container">
                 <DatePicker grow={1}>
                   <SuperDatePicker id="timeline" timelineId={timelineId} />
@@ -322,7 +325,10 @@ export const QueryTabContentComponent: React.FC<Props> = ({
           </HideShowContainer>
 
           <EventDetailsWidthProvider>
-            <StyledEuiFlyoutBody data-test-subj="eui-flyout-body" className="timeline-flyout-body">
+            <StyledEuiFlyoutBody
+              data-test-subj={`${TimelineTabs.query}-tab-flyout-body`}
+              className="timeline-flyout-body"
+            >
               <StatefulBody
                 activePage={pageInfo.activePage}
                 browserFields={browserFields}
@@ -339,7 +345,7 @@ export const QueryTabContentComponent: React.FC<Props> = ({
             </StyledEuiFlyoutBody>
 
             <StyledEuiFlyoutFooter
-              data-test-subj="eui-flyout-footer"
+              data-test-subj={`${TimelineTabs.query}-tab-flyout-footer`}
               className="timeline-flyout-footer"
             >
               {!isBlankTimeline && (