Index advisor implementation

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -303,7 +303,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         () => {
           this.refreshCollectionData();
         },
-        (state) => state.indexingPolicies[this.collection.id()],
+        (state) => state.indexingPolicies[this.collection?.id()],
       );
       this.refreshCollectionData();
     }
@@ -873,9 +873,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     const numberOfRegions = userContext.databaseAccount?.properties.locations?.length || 1;
     const throughputDelta = (newThroughput - this.offer.autoscaleMaxThroughput) * numberOfRegions;
     if (throughputCap && throughputCap !== -1 && throughputCap - this.totalThroughputUsed < throughputDelta) {
-      throughputError = `Your account is currently configured with a total throughput limit of ${throughputCap} RU/s. This update isn't possible because it would increase the total throughput to ${
-        this.totalThroughputUsed + throughputDelta
-      } RU/s. Change total throughput limit in cost management.`;
+      throughputError = `Your account is currently configured with a total throughput limit of ${throughputCap} RU/s. This update isn't possible because it would increase the total throughput to ${this.totalThroughputUsed + throughputDelta
+        } RU/s. Change total throughput limit in cost management.`;
     }
     this.setState({ autoPilotThroughput: newThroughput, throughputError });
   };
@@ -886,9 +885,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     const numberOfRegions = userContext.databaseAccount?.properties.locations?.length || 1;
     const throughputDelta = (newThroughput - this.offer.manualThroughput) * numberOfRegions;
     if (throughputCap && throughputCap !== -1 && throughputCap - this.totalThroughputUsed < throughputDelta) {
-      throughputError = `Your account is currently configured with a total throughput limit of ${throughputCap} RU/s. This update isn't possible because it would increase the total throughput to ${
-        this.totalThroughputUsed + throughputDelta
-      } RU/s. Change total throughput limit in cost management.`;
+      throughputError = `Your account is currently configured with a total throughput limit of ${throughputCap} RU/s. This update isn't possible because it would increase the total throughput to ${this.totalThroughputUsed + throughputDelta
+        } RU/s. Change total throughput limit in cost management.`;
     }
     this.setState({ throughput: newThroughput, throughputError });
   };
@@ -1008,8 +1006,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       newCollection.changeFeedPolicy =
         this.changeFeedPolicyVisible && this.state.changeFeedPolicy === ChangeFeedPolicyState.On
           ? {
-              retentionDuration: Constants.BackendDefaults.maxChangeFeedRetentionDuration,
-            }
+            retentionDuration: Constants.BackendDefaults.maxChangeFeedRetentionDuration,
+          }
           : undefined;
 
       newCollection.analyticalStorageTtl = this.getAnalyticalStorageTtl();

test/sql/indexAdvisor.spec.ts

@@ -0,0 +1,53 @@
+import { expect, test } from "@playwright/test";
+
+import { DataExplorer, TestAccount } from "../fx";
+
+// Using existing database and container from environment variables
+// Set these in your test environment or they'll use defaults
+const DATABASE_ID = process.env.INDEX_ADVISOR_TEST_DATABASE || "t_db05_1765364190570";
+const CONTAINER_ID = process.env.INDEX_ADVISOR_TEST_CONTAINER || "testcontainer";
+
+test("Index Advisor tab loads without errors", async ({ page }) => {
+  const explorer = await DataExplorer.open(page, TestAccount.SQL);
+
+  // Wait for and expand the database node
+  const databaseNode = await explorer.waitForNode(DATABASE_ID);
+  await databaseNode.expand();
+
+  // Wait for and expand the container node
+  const containerNode = await explorer.waitForNode(`${DATABASE_ID}/${CONTAINER_ID}`);
+  await containerNode.expand();
+
+  // Click on "New SQL Query" from the container's context menu
+  await containerNode.openContextMenu();
+  await containerNode.contextMenuItem("New SQL Query").click();
+
+  // Wait for the query tab to fully load
+  await page.waitForTimeout(3000);
+
+  // Wait for the query tab to load
+  const queryTab = explorer.queryTab("tab0");
+  await queryTab.editor().locator.waitFor({ timeout: 30 * 1000 });
+  await queryTab.executeCTA.waitFor();
+
+  // Click on the specific query tab (tab0) to make sure it's active
+  const queryTabHeader = explorer.frame.getByRole("tab", { name: "Query 1" });
+  await queryTabHeader.click();
+  await page.waitForTimeout(1000);
+
+  // Click in the editor and execute the query
+  await queryTab.editor().locator.click();
+  const executeQueryButton = explorer.commandBarButton("Execute Query");
+  await executeQueryButton.waitFor({ state: "visible", timeout: 10000 });
+  await executeQueryButton.click();
+
+  // Wait for results to load
+  await expect(queryTab.resultsEditor.locator).toBeAttached({ timeout: 60 * 1000 });
+
+  // Click on the Index Advisor tab
+  const indexAdvisorTab = queryTab.resultsView.getByTestId("QueryTab/ResultsPane/ResultsView/IndexAdvisorTab");
+  await indexAdvisorTab.click();
+
+  // Verify the Index Advisor tab is visible and loaded
+  await expect(indexAdvisorTab).toHaveAttribute("aria-selected", "true");
+});