[Data Explorer][Discover][Function Test] Fix ciGroup4 (#5099)

* add data-render-complete and data-shared-item for test convenience
* change docTableFieldCount to dataGridTableCellCount to fetch data grid cell
* add methods in data grid service to reuse current massive selenium tests
* update tests

Issue Resolve
#5098
#5058

Signed-off-by: Anan Zhuang <ananzh@amazon.com>

package.json

@@ -466,4 +466,4 @@
     "node": ">=14.20.1 <19",
     "yarn": "^1.22.10"
   }
-}
+}

src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx

@@ -32,6 +32,7 @@ export interface DataGridTableProps {
   services: DiscoverServices;
   isToolbarVisible?: boolean;
   isContextView?: boolean;
+  isLoading?: boolean;
 }
 
 export const DataGridTable = ({
@@ -47,6 +48,7 @@ export const DataGridTable = ({
   displayTimeColumn,
   isToolbarVisible = true,
   isContextView = false,
+  isLoading = false,
 }: DataGridTableProps) => {
   const [inspectedHit, setInspectedHit] = useState<OpenSearchSearchHit | undefined>();
   const rowCount = useMemo(() => (rows ? rows.length : 0), [rows]);
@@ -166,7 +168,7 @@ export const DataGridTable = ({
         indexPattern,
       }}
     >
-      <>
+      <div data-render-complete={!isLoading} data-shared-item="">
         <EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
           <EuiPanel paddingSize="s" style={{ height: '100%' }}>
             {table}
@@ -183,7 +185,7 @@ export const DataGridTable = ({
             onClose={() => setInspectedHit(undefined)}
           />
         )}
-      </>
+      </div>
     </DiscoverGridContextProvider>
   );
 };

src/plugins/discover/public/embeddable/search_embeddable_component.tsx

@@ -42,7 +42,12 @@ export function SearchEmbeddableComponent({ searchProps }: SearchEmbeddableProps
 
   return (
     <I18nProvider>
-      <EuiFlexGroup gutterSize="xs" direction="column" responsive={false}>
+      <EuiFlexGroup
+        gutterSize="xs"
+        direction="column"
+        responsive={false}
+        data-test-subj="embeddedSavedSearchDocTable"
+      >
         {discoverEmbeddableProps.totalHitCount !== 0 ? (
           <EuiFlexItem>
             <DataGridTableMemoized {...discoverEmbeddableProps} />

test/functional/apps/dashboard/dashboard_state.js

@@ -90,8 +90,11 @@ export default function ({ getService, getPageObjects }) {
       expect(colorChoiceRetained).to.be(true);
     });
 
-    // the following three tests are skipped because of save search save window bug:
-    // https://github.com/opensearch-project/OpenSearch-Dashboards/issues/4698
+    // TODO: Revert the following changes on the following 3 saved search tests
+    // once issue https://github.com/opensearch-project/OpenSearch-Dashboards/issues/5071 is resolved.
+    // The issue causes the previously saved object to not load automatically when navigating back to discover from the dashboard.
+    // Currently, we need to re-open the saved search in discover.
+    // The expected behavior is for the saved object to persist and load as it did in previous versions of discover.
     it('Saved search with no changes will update when the saved object changes', async () => {
       await PageObjects.dashboard.gotoDashboardLandingPage();
 
@@ -111,11 +114,12 @@ export default function ({ getService, getPageObjects }) {
       expect(inViewMode).to.be(true);
 
       await PageObjects.header.clickDiscover();
-      // Add load save search here since discover link won't take it to the save search link for
-      // the legacy discover plugin
+      // add load save search here since discover link won't take it to the save search link
       await PageObjects.discover.loadSavedSearch('my search');
+      await PageObjects.timePicker.setHistoricalDataRange();
+
       await PageObjects.discover.clickFieldListItemAdd('agent');
-      await PageObjects.discover.saveSearch('my search');
+      await PageObjects.discover.saveSearch('my search', false);
       await PageObjects.header.waitUntilLoadingHasFinished();
 
       await PageObjects.header.clickDashboard();
@@ -133,9 +137,9 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.dashboard.saveDashboard('Has local edits');
 
       await PageObjects.header.clickDiscover();
-      // Add load save search here since discover link won't take it to the save search link for
-      // the legacy discover plugin
+      // add load save search here since discover link won't take it to the save search link
       await PageObjects.discover.loadSavedSearch('my search');
+      await PageObjects.timePicker.setHistoricalDataRange();
       await PageObjects.discover.clickFieldListItemAdd('clientip');
       await PageObjects.discover.saveSearch('my search');
       await PageObjects.header.waitUntilLoadingHasFinished();
@@ -152,9 +156,10 @@ export default function ({ getService, getPageObjects }) {
       const currentQuery = await queryBar.getQueryString();
       expect(currentQuery).to.equal('');
       const currentUrl = await browser.getCurrentUrl();
-      const newUrl = currentUrl.replace('query:%27%27', 'query:%27abc12345678910%27');
-      // Don't add the timestamp to the url or it will cause a hard refresh and we want to test a
-      // soft refresh.
+
+      // due to previous re-open saved search, history is changed.
+      // query is in both _g and _a. We need to change query in _a.
+      const newUrl = currentUrl.replace(/query:%27%27/g, 'query:%27abc12345678910%27');
       await browser.get(newUrl.toString(), false);
       await PageObjects.header.waitUntilLoadingHasFinished();
 

test/functional/apps/dashboard/dashboard_time_picker.js

@@ -67,14 +67,15 @@ export default function ({ getService, getPageObjects }) {
         name: 'saved search',
         fields: ['bytes', 'agent'],
       });
-      await dashboardExpect.docTableFieldCount(150);
+      // Current data grid loads 100 rows per page by default with inspect button and time range
+      await dashboardExpect.dataGridTableCellCount(400);
 
       // Set to time range with no data
       await PageObjects.timePicker.setAbsoluteRange(
         'Jan 1, 2000 @ 00:00:00.000',
         'Jan 1, 2000 @ 01:00:00.000'
       );
-      await dashboardExpect.docTableFieldCount(0);
+      await dashboardExpect.dataGridTableCellCount(0);
     });
 
     it('Timepicker start, end, interval values are set by url', async () => {

test/functional/page_objects/discover_page.ts

@@ -42,6 +42,7 @@ export function DiscoverPageProvider({ getService, getPageObjects }: FtrProvider
   const defaultFindTimeout = config.get('timeouts.find');
   const opensearchChart = getService('opensearchChart');
   const docTable = getService('docTable');
+  const dataGridTable = getService('dataGrid');
 
   /*
    * This page is left unchanged since some of the other selenium tests, ex. dashboard tests, visualization tests
@@ -104,7 +105,7 @@ export function DiscoverPageProvider({ getService, getPageObjects }: FtrProvider
     }
 
     public async getColumnHeaders() {
-      return await docTable.getHeaderFields('embeddedSavedSearchDocTable');
+      return await dataGridTable.getHeaderFields();
     }
 
     public async openLoadSavedSearchPanel() {
@@ -353,9 +354,8 @@ export function DiscoverPageProvider({ getService, getPageObjects }: FtrProvider
       await header.waitUntilLoadingHasFinished();
     }
 
-    public async removeHeaderColumn(name: string) {
-      await testSubjects.moveMouseTo(`docTableHeader-${name}`);
-      await testSubjects.click(`docTableRemoveHeader-${name}`);
+    public async removeHeaderColumn(columnName: string) {
+      await dataGridTable.clickRemoveColumn(columnName);
     }
 
     public async openSidebarFieldFilter() {

test/functional/services/dashboard/expectations.ts

@@ -69,10 +69,10 @@ export function DashboardExpectProvider({ getService, getPageObjects }: FtrProvi
       });
     }
 
-    async docTableFieldCount(expectedCount: number) {
-      log.debug(`DashboardExpect.docTableFieldCount(${expectedCount})`);
+    async dataGridTableCellCount(expectedCount: number) {
+      log.debug(`DashboardExpect.dataGridTableCellCount(${expectedCount})`);
       await retry.try(async () => {
-        const docTableCells = await testSubjects.findAll('docTableField', findTimeout);
+        const docTableCells = await testSubjects.findAll('dataGridRowCell', findTimeout);
         expect(docTableCells.length).to.be(expectedCount);
       });
     }

test/functional/services/data_grid.ts

@@ -37,6 +37,7 @@ interface TabbedGridData {
 
 export function DataGridProvider({ getService }: FtrProviderContext) {
   const find = getService('find');
+  const testSubjects = getService('testSubjects');
 
   class DataGrid {
     async getDataGridTableData(): Promise<TabbedGridData> {
@@ -66,6 +67,35 @@ export function DataGridProvider({ getService }: FtrProviderContext) {
         rows,
       };
     }
+
+    /**
+     * Retrieves the header fields of the data grid.
+     *
+     * @returns {Promise<string[]>} An array containing names of the header fields.
+     */
+    async getHeaderFields(): Promise<string[]> {
+      const headerNames = [];
+      // Locate header cells, ignoring the inspect document button column
+      const headerCells = await find.allByCssSelector(
+        '.euiDataGridHeaderCell__button > .euiDataGridHeaderCell__content'
+      );
+
+      for (const cell of headerCells) {
+        const headerName = await cell.getAttribute('textContent');
+        headerNames.push(headerName.trim());
+      }
+      return Promise.resolve(headerNames);
+    }
+
+    /**
+     * Clicks to remove a specified column from the data grid.
+     *
+     * @param {string} columnName - The name of the column to be removed.
+     */
+    async clickRemoveColumn(columnName: string) {
+      await testSubjects.click(`dataGridHeaderCell-${columnName}`);
+      await find.clickByButtonText('Remove column');
+    }
   }
 
   return new DataGrid();