Do not merge this PR using for testing purpose

dataproc_jupyter_plugin/services/bigquery.py

@@ -49,7 +49,6 @@ async def list_datasets(self, page_token, project_id):
         try:
             bigquery_url = await urls.gcp_service_url(BIGQUERY_SERVICE_NAME)
             api_endpoint = f"{bigquery_url}bigquery/v2/projects/{project_id}/datasets?pageToken={page_token}"
-
             async with self.client_session.get(
                 api_endpoint, headers=self.create_headers()
             ) as response:

src/runtime/createRunTime.tsx

@@ -1600,6 +1600,7 @@ function CreateRunTime({
                   </div>
                   <div
                     className="expand-icon"
+                    id="resource-allocation-help-icon"
                     onClick={() =>
                       window.open(
                         `${SPARK_RESOURCE_ALLOCATION_INFO_URL}`,
@@ -1615,6 +1616,7 @@ function CreateRunTime({
                 </div>
                 <div
                   className="expand-icon"
+                  id="resource-allocation-expand-icon"
                   onClick={() => handleResourceAllocationExpand()}
                 >
                   {expandResourceAllocation ? (
@@ -1647,6 +1649,7 @@ function CreateRunTime({
                   <div className="spark-properties-sub-header">Autoscaling</div>
                   <div
                     className="expand-icon"
+                    id="autoscaling-help-icon"
                     onClick={() =>
                       window.open(`${SPARK_AUTOSCALING_INFO_URL}`, '_blank')
                     }
@@ -1659,6 +1662,7 @@ function CreateRunTime({
                 </div>
                 <div
                   className="expand-icon"
+                  id="autoscaling-expand-icon"
                   onClick={() => handleAutoScalingExpand()}
                 >
                   {expandAutoScaling ? (
@@ -1699,10 +1703,12 @@ function CreateRunTime({
                       }
                       className="create-scheduler-label-style"
                       label="GPU"
+                      id="gpu-checkbox"
                     />
                   </FormGroup>
                   <div
                     className="expand-icon"
+                    id="gpu-help-icon"
                     onClick={() =>
                       window.open(`${SPARK_GPU_INFO_URL}`, '_blank')
                     }
@@ -1713,7 +1719,11 @@ function CreateRunTime({
                     />
                   </div>
                 </div>
-                <div className="expand-icon" onClick={() => handleGpuExpand()}>
+                <div
+                  className="expand-icon"
+                  id="gpu-expand-icon"
+                  onClick={() => handleGpuExpand()}
+                >
                   {expandGpu ? (
                     <iconExpandLess.react
                       tag="div"

src/runtime/sparkProperties.tsx

@@ -205,6 +205,7 @@ function SparkProperties({
                   <div className="key-message-wrapper">
                     <div
                       className="select-text-overlay-label"
+                      id={`key-${labelSplit[0]}`}
                       title={labelSplit[0]}
                     >
                       <Input
@@ -220,7 +221,10 @@ function SparkProperties({
                       />
                     </div>
                   </div>
-                  <div className="key-message-wrapper">
+                  <div
+                    className="key-message-wrapper"
+                    id={`value-${labelSplit[0]}`}
+                  >
                     <div className="select-text-overlay-label">
                       {SELECT_FIELDS.includes(labelSplit[0]) &&
                       sparkSection !== 'gpu' ? (

ui-tests/tests/bigquery_dataset_explorer.spec.ts

@@ -18,33 +18,85 @@
 import { test, expect, galata } from '@jupyterlab/galata';
 
 test('bigquery-dataset-explorer', async ({ page, request }) => {
-  const issues = await page.request.get(
-    'http://localhost:8888/dataproc-plugin/settings'
-  );
+  // Fetch Dataproc plugin settings
+  const issues = await page.request.get('http://localhost:8888/dataproc-plugin/settings');
   expect(issues.ok()).toBeTruthy();
-  const response: any = await issues.json();
+
+  // Parse response and check BigQuery integration is enabled
+  const response = await issues.json();
   expect(response.enable_bigquery_integration).toBe(true);
 
-  const tabExists = await page.isVisible(
-    'role=tab[name="Dataset Explorer - BigQuery"]'
-  );
+  // Check if the "Dataset Explorer - BigQuery" tab is visible
+  const tabExists = await page.isVisible('role=tab[name="Dataset Explorer - BigQuery"]');
 
   if (tabExists) {
-    expect(response.enable_bigquery_integration).toBe(true);
-    await page
-      .getByRole('tab', { name: 'Dataset Explorer - BigQuery' })
-      .click();
+    // Click on the "Dataset Explorer - BigQuery" tab
+    await page.getByRole('tab', { name: 'Dataset Explorer - BigQuery' }).click();
 
+    // Expand and navigate through the dataset tree
     await page.waitForSelector('div[role="treeitem"].caret-icon.down');
-
     await page.locator('div[role="treeitem"].caret-icon.down').nth(1).click();
     await page.locator('div[role="treeitem"][aria-level="1"]').first().click();
     await page.locator('div[role="treeitem"].caret-icon.down').nth(1).click();
 
+    // Wait for the dataset details to load
+    await page.getByText('Loading dataset details').waitFor({ state: "hidden" });
+
+    // Check dataset details are visible
+    await expect(page.getByText('Dataset info', { exact: true })).toBeVisible();
+    const datasetRowHeaders = [
+      'Dataset ID', 'Created', 'Default table expiration',
+      'Last modified', 'Data location', 'Description', 'Default collation',
+      'Default rounding mode', 'Time travel window', 'Storage billing model', 'Case insensitive'
+    ];
+    for (const header of datasetRowHeaders) {
+      await expect(page.getByRole('cell', { name: header, exact: true })).toBeVisible();
+    }
+
+    // Click on the first table
     await page.locator('div[role="treeitem"][aria-level="2"]').first().click();
+
+    // Wait for the table details to load
+    await page.getByText('Loading table details').waitFor({ state: "hidden" });
+
+    // Check table details are visible
+    await expect(page.getByText('Table info')).toBeVisible();
+    const tableHeaders = [
+      'Table ID', 'Created', 'Last modified', 'Table expiration',
+      'Data location', 'Default collation', 'Default rounding mode', 'Description', 'Case insensitive'
+    ];
+    for (const header of tableHeaders) {
+      await expect(page.getByRole('cell', { name: header, exact: true })).toBeVisible();
+    }
+
+    // Click on the Schema tab and check all schema fields are visible
     await page.getByText('Schema', { exact: true }).click();
+    await expect(page.getByText('Schema').nth(2)).toBeVisible();
+    const schemaHeaders = [
+      'Field name', 'Type', 'Mode', 'Key', 'Collation', 'Default Value',
+      'Policy Tags', 'Data Policies', 'Description'
+    ];
+    for (const header of schemaHeaders) {
+      await expect(page.getByRole('columnheader', { name: header, exact: true })).toBeVisible();
+    }
+
+    // Click on the Preview tab and check if data is present
     await page.getByText('Preview', { exact: true }).click();
+
+    // Wait for the preview data to load
+    await page.getByText('Loading Preview Data').waitFor({ state: "hidden" });
+
+    // Check if data is present in the preview table
+    const dataExists = await page.locator('//table[@class="clusters-list-table"]').isVisible();
+    if (dataExists) {
+      const rowCount = await page.locator('//table[@class="clusters-list-table"]//tr').count();
+      expect(rowCount).toBeGreaterThan(0);
+    } else {
+      await expect(page.getByText('No rows to display')).toBeVisible();
+    }
+
   } else {
+    // If the tab doesn't exist, verify BigQuery integration is disabled
     expect(response.enable_bigquery_integration).toBe(false);
   }
-});
+});