Refactor: Extract root components architecture with comprehensive tests

* fixed bottom border for fabric

* fixed scrollbar

* reverted last

* updated the review comments

* Fixed scroll , updated the home page UI box shadow, header font weight, margin between boxed , subtab underline for fabric fixed

---------

Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>

less/Common/Constants.less

@@ -128,7 +128,7 @@
 @provisionDatabaseThroughputInfo: 200px;
 
 //tabs container
-@ActiveTabHeight: 31px;
+@ActiveTabHeight: 32px;
 @ActiveTabWidth: 141px;
 @TabsHeight: 30px;
 @TabsWidth: 140px;

less/documentDB.less

@@ -2643,7 +2643,7 @@ a:link {
 
 .tabPanesContainer {
   flex-grow: 1;
-  overflow-y: scroll;
+  overflow: hidden;
   background-color: var(--colorNeutralBackground1);
   color: var(--colorNeutralForeground1);
 }
@@ -2651,6 +2651,7 @@ a:link {
 .tabs-container {
   height: 100%;
   width: 100%;
+  overflow-y: auto;
 }
 
 .paddingspan4 {
@@ -2677,7 +2678,7 @@ a:link {
   width: @ActiveTabWidth;
 }
 
-.nav-tabs > li.active .contentWrapper {
+.nav-tabs > li.active .contentWrapper .tabNavText  {
   border-bottom: 2px solid var(--colorCompoundBrandBackground);
 }
 

less/documentDBFabric.less

@@ -7,6 +7,7 @@ html {
 body {
   font-family: @FabricFont;
   background-color: #f5f5f5;
+  --colorCompoundBrandBackground: @FabricAccentMedium;
 }
 
 a {
@@ -41,7 +42,7 @@ a:focus {
 }
 
 .nav-tabs-margin {
-  padding-top: 5px;
+  padding-top: 0px;
   background-color: #ffffff;
 }
 
@@ -68,17 +69,20 @@ a:focus {
 }
 
 .nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
-  border-bottom: 2px solid #e0e0e0;
+  border-bottom: none;
 }
 
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content,
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover {
-  border-bottom: 2px solid @FabricAccentMedium;
+  border-bottom: none;
 }
 
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
   border-bottom: 0px none transparent;
 }
+.nav-tabs > li.active .contentWrapper .tabNavText  {
+  border-bottom: 2px solid @FabricAccentMedium;
+}
 
 .tabNavContentContainer {
   padding: @SmallSpace 0px @SmallSpace 0px;

src/Explorer/ContainerCopy/ContainerCopyPanel.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from "react";
+import { SidePanel } from "../../Explorer/Panes/PanelContainerComponent";
 import CopyJobCommandBar from "./CommandBar/CopyJobCommandBar";
 import "./containerCopyStyles.less";
 import { MonitorCopyJobsRefState } from "./MonitorCopyJobs/MonitorCopyJobRefState";
@@ -16,6 +17,7 @@ const ContainerCopyPanel: React.FC<ContainerCopyProps> = ({ explorer }) => {
     <div id="containerCopyWrapper" className="flexContainer hideOverflows">
       <CopyJobCommandBar explorer={explorer} />
       <MonitorCopyJobs ref={monitorCopyJobsRef} explorer={explorer} />
+      <SidePanel />
     </div>
   );
 };

src/Explorer/Controls/Settings/SettingsComponent.test.tsx

@@ -1,8 +1,5 @@
-import { IndexingPolicy } from "@azure/cosmos";
-import { act } from "@testing-library/react";
 import { AuthType } from "AuthType";
 import { shallow } from "enzyme";
-import { useIndexingPolicyStore } from "Explorer/Tabs/QueryTab/ResultsView";
 import ko from "knockout";
 import React from "react";
 import { updateCollection } from "../../../Common/dataAccess/updateCollection";
@@ -447,49 +444,3 @@ describe("SettingsComponent", () => {
     expect(settingsComponentInstance.isSaveSettingsButtonEnabled()).toBe(true);
   });
 });
-
-describe("SettingsComponent - indexing policy subscription", () => {
-  const baseProps: SettingsComponentProps = {
-    settingsTab: new CollectionSettingsTabV2({
-      collection: collection,
-      tabKind: ViewModels.CollectionTabKind.CollectionSettingsV2,
-      title: "Scale & Settings",
-      tabPath: "",
-      node: undefined,
-    }),
-  };
-
-  it("subscribes to the correct container's indexing policy and updates state on change", async () => {
-    const containerId = collection.id();
-    const mockIndexingPolicy: IndexingPolicy = {
-      automatic: false,
-      indexingMode: "lazy",
-      includedPaths: [{ path: "/foo/*" }],
-      excludedPaths: [{ path: "/bar/*" }],
-      compositeIndexes: [],
-      spatialIndexes: [],
-      vectorIndexes: [],
-      fullTextIndexes: [],
-    };
-
-    const wrapper = shallow(<SettingsComponent {...baseProps} />);
-    const instance = wrapper.instance() as SettingsComponent;
-
-    await act(async () => {
-      useIndexingPolicyStore.setState({
-        indexingPolicies: {
-          [containerId]: mockIndexingPolicy,
-        },
-      });
-      // Wait for the async refreshCollectionData to complete
-      await new Promise((resolve) => setTimeout(resolve, 0));
-    });
-
-    wrapper.update();
-
-    expect(wrapper.state("indexingPolicyContent")).toEqual(mockIndexingPolicy);
-    expect(wrapper.state("indexingPolicyContentBaseline")).toEqual(mockIndexingPolicy);
-    // @ts-expect-error: rawDataModel is intentionally accessed for test validation
-    expect(instance.collection.rawDataModel.indexingPolicy).toEqual(mockIndexingPolicy);
-  });
-});

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -13,7 +13,6 @@ import {
   ThroughputBucketsComponent,
   ThroughputBucketsComponentProps,
 } from "Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent";
-import { useIndexingPolicyStore } from "Explorer/Tabs/QueryTab/ResultsView";
 import { useDatabases } from "Explorer/useDatabases";
 import { isFabricNative } from "Platform/Fabric/FabricUtil";
 import { isCapabilityEnabled, isVectorSearchEnabled } from "Utils/CapabilityUtils";
@@ -74,6 +73,7 @@ import {
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
 } from "./SettingsUtils";
+
 interface SettingsV2TabInfo {
   tab: SettingsV2TabTypes;
   content: JSX.Element;
@@ -182,7 +182,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private totalThroughputUsed: number;
   private throughputBucketsEnabled: boolean;
   public mongoDBCollectionResource: MongoDBCollectionResource;
-  private unsubscribe: () => void;
+
   constructor(props: SettingsComponentProps) {
     super(props);
 
@@ -312,13 +312,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     if (this.isCollectionSettingsTab) {
       this.refreshIndexTransformationProgress();
       this.loadMongoIndexes();
-      this.unsubscribe = useIndexingPolicyStore.subscribe(
-        () => {
-          this.refreshCollectionData();
-        },
-        (state) => state.indexingPolicies[this.collection?.id()],
-      );
-      this.refreshCollectionData();
     }
 
     this.setBaseline();
@@ -326,11 +319,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       useCommandBar.getState().setContextButtons(this.getTabsButtons());
     }
   }
-  componentWillUnmount(): void {
-    if (this.unsubscribe) {
-      this.unsubscribe();
-    }
-  }
+
   componentDidUpdate(): void {
     if (this.props.settingsTab.isActive()) {
       useCommandBar.getState().setContextButtons(this.getTabsButtons());
@@ -860,6 +849,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         { name: "name_of_property", query: "query_to_compute_property" },
       ] as DataModels.ComputedProperties;
     }
+
     const throughputBuckets = this.offer?.throughputBuckets;
 
     return {
@@ -1019,31 +1009,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       startKey,
     );
   };
-  private refreshCollectionData = async (): Promise<void> => {
-    const containerId = this.collection.id();
-    const latestIndexingPolicy = useIndexingPolicyStore.getState().indexingPolicies[containerId];
-    const rawPolicy = latestIndexingPolicy ?? this.collection.indexingPolicy();
-
-    const latestCollection: DataModels.IndexingPolicy = {
-      automatic: rawPolicy?.automatic ?? true,
-      indexingMode: rawPolicy?.indexingMode ?? "consistent",
-      includedPaths: rawPolicy?.includedPaths ?? [],
-      excludedPaths: rawPolicy?.excludedPaths ?? [],
-      compositeIndexes: rawPolicy?.compositeIndexes ?? [],
-      spatialIndexes: rawPolicy?.spatialIndexes ?? [],
-      vectorIndexes: rawPolicy?.vectorIndexes ?? [],
-      fullTextIndexes: rawPolicy?.fullTextIndexes ?? [],
-    };
-
-    this.collection.rawDataModel.indexingPolicy = latestCollection;
-    this.setState({
-      indexingPolicyContent: latestCollection,
-      indexingPolicyContentBaseline: latestCollection,
-    });
-  };
 
   private saveCollectionSettings = async (startKey: number): Promise<void> => {
     const newCollection: DataModels.Collection = { ...this.collection.rawDataModel };
+
     if (
       this.state.isSubSettingsSaveable ||
       this.state.isContainerPolicyDirty ||
@@ -1283,6 +1252,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       onScaleDiscardableChange: this.onScaleDiscardableChange,
       throughputError: this.state.throughputError,
     };
+
     if (!this.isCollectionSettingsTab) {
       return (
         <div className="settingsV2MainContainer">

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/IndexingPolicyRefreshComponent.tsx

@@ -1,10 +1,10 @@
-import { MessageBar, MessageBarType } from "@fluentui/react";
 import * as React from "react";
-import { handleError } from "../../../../../Common/ErrorHandlingUtils";
+import { MessageBar, MessageBarType } from "@fluentui/react";
 import {
   mongoIndexTransformationRefreshingMessage,
   renderMongoIndexTransformationRefreshMessage,
 } from "../../SettingsRenderUtils";
+import { handleError } from "../../../../../Common/ErrorHandlingUtils";
 import { isIndexTransforming } from "../../SettingsUtils";
 
 export interface IndexingPolicyRefreshComponentProps {

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -153,16 +153,6 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKey",
                 ],
                 "rawDataModel": {
-                  "indexingPolicy": {
-                    "automatic": true,
-                    "compositeIndexes": [],
-                    "excludedPaths": [],
-                    "fullTextIndexes": [],
-                    "includedPaths": [],
-                    "indexingMode": "consistent",
-                    "spatialIndexes": [],
-                    "vectorIndexes": [],
-                  },
                   "uniqueKeyPolicy": {
                     "uniqueKeys": [
                       {
@@ -274,16 +264,6 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKey",
                 ],
                 "rawDataModel": {
-                  "indexingPolicy": {
-                    "automatic": true,
-                    "compositeIndexes": [],
-                    "excludedPaths": [],
-                    "fullTextIndexes": [],
-                    "includedPaths": [],
-                    "indexingMode": "consistent",
-                    "spatialIndexes": [],
-                    "vectorIndexes": [],
-                  },
                   "uniqueKeyPolicy": {
                     "uniqueKeys": [
                       {
@@ -496,16 +476,6 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKey",
                 ],
                 "rawDataModel": {
-                  "indexingPolicy": {
-                    "automatic": true,
-                    "compositeIndexes": [],
-                    "excludedPaths": [],
-                    "fullTextIndexes": [],
-                    "includedPaths": [],
-                    "indexingMode": "consistent",
-                    "spatialIndexes": [],
-                    "vectorIndexes": [],
-                  },
                   "uniqueKeyPolicy": {
                     "uniqueKeys": [
                       {
@@ -683,16 +653,6 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKey",
                 ],
                 "rawDataModel": {
-                  "indexingPolicy": {
-                    "automatic": true,
-                    "compositeIndexes": [],
-                    "excludedPaths": [],
-                    "fullTextIndexes": [],
-                    "includedPaths": [],
-                    "indexingMode": "consistent",
-                    "spatialIndexes": [],
-                    "vectorIndexes": [],
-                  },
                   "uniqueKeyPolicy": {
                     "uniqueKeys": [
                       {

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -61,7 +61,8 @@ const useStyles = makeStyles({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    minHeight: "100vh",
+    height: "100%",
+    overflowY: "auto",
     backgroundColor: "var(--colorNeutralBackground1)",
     color: "var(--colorNeutralForeground1)",
   },
@@ -73,20 +74,19 @@ const useStyles = makeStyles({
   },
   title: {
     fontSize: "48px",
-    fontWeight: "500",
+    fontWeight: "400",
     margin: "16px auto",
     color: "var(--colorNeutralForeground1)",
   },
   subtitle: {
     fontSize: "18px",
-    marginBottom: "40px",
     color: "var(--colorNeutralForeground2)",
   },
   cardContainer: {
     display: "grid",
     gridTemplateColumns: "repeat(2, 1fr)",
     gap: "16px",
-    width: "66%",
+    width: "60%",
     margin: "0 auto",
     backgroundColor: "var(--colorNeutralBackground1)",
     color: "var(--colorNeutralForeground1)",
@@ -100,7 +100,7 @@ const useStyles = makeStyles({
     color: "var(--colorNeutralForeground1)",
     border: "1px solid var(--colorNeutralStroke1)",
     borderRadius: "4px",
-    boxShadow: "var(--shadow4)",
+    boxShadow: "rgba(0, 0, 0, 0.25) 0px 4px 4px",
     cursor: "pointer",
     minHeight: "150px",
     "&:hover": {
@@ -128,11 +128,10 @@ const useStyles = makeStyles({
     textAlign: "left",
   },
   moreStuffContainer: {
-    display: "grid",
-    gridTemplateColumns: "repeat(3, 1fr)",
+    display: "flex",
+    justifyContent: "space-between",
     gap: "32px",
-    width: "66%",
-    margin: "40px auto",
+    width: "90%",
   },
   moreStuffColumn: {
     display: "flex",
@@ -227,7 +226,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
       return (
         <Stack
           className="splashStackContainer"
-          style={{ width: "66%", cursor: "pointer", margin: "40px auto" }}
+          style={{ width: "60%", cursor: "pointer", margin: "40px auto" }}
           tokens={{ childrenGap: 16 }}
         >
           <Stack className="splashStackRow" horizontal>
@@ -903,9 +902,9 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
   return (
     <div className={styles.splashScreenContainer}>
       <div className={styles.splashScreen}>
-        <h1 className={styles.title} role="heading" aria-label="Welcome to Azure Cosmos DB">
+        <h2 className={styles.title} role="heading" aria-label="Welcome to Azure Cosmos DB">
           Welcome to Azure Cosmos DB<span className="activePatch"></span>
-        </h1>
+        </h2>
         <div className={styles.subtitle}>Globally distributed, multi-model database service for any scale</div>
         {getSplashScreenButtons()}
         {useCarousel.getState().showCoachMark && (

src/Explorer/SplashScreen/SplashScreenButton.tsx

@@ -15,7 +15,7 @@ const useStyles = makeStyles({
   button: {
     border: "1px solid var(--colorNeutralStroke1)",
     boxSizing: "border-box",
-    boxShadow: "var(--shadow4)",
+    boxShadow: "rgba(0, 0, 0, 0.25) 0px 4px 4px",
     borderRadius: "4px",
     padding: "32px 16px",
     backgroundColor: "var(--colorNeutralBackground1)",

src/Explorer/Tabs/QueryTab/IndexAdvisorUtils.tsx

@@ -1,107 +0,0 @@
-import { CircleFilled } from "@fluentui/react-icons";
-import type { IIndexMetric } from "Explorer/Tabs/QueryTab/ResultsView";
-import { useIndexAdvisorStyles } from "Explorer/Tabs/QueryTab/StylesAdvisor";
-import * as React from "react";
-
-// SDK response format
-export interface IndexMetricsResponse {
-  UtilizedIndexes?: {
-    SingleIndexes?: Array<{ IndexSpec: string; IndexImpactScore?: string }>;
-    CompositeIndexes?: Array<{ IndexSpecs: string[]; IndexImpactScore?: string }>;
-  };
-  PotentialIndexes?: {
-    SingleIndexes?: Array<{ IndexSpec: string; IndexImpactScore?: string }>;
-    CompositeIndexes?: Array<{ IndexSpecs: string[]; IndexImpactScore?: string }>;
-  };
-}
-
-export function parseIndexMetrics(indexMetrics: IndexMetricsResponse): {
-  included: IIndexMetric[];
-  notIncluded: IIndexMetric[];
-} {
-  const included: IIndexMetric[] = [];
-  const notIncluded: IIndexMetric[] = [];
-
-  // Process UtilizedIndexes (Included in Current Policy)
-  if (indexMetrics.UtilizedIndexes) {
-    // Single indexes
-    indexMetrics.UtilizedIndexes.SingleIndexes?.forEach((index) => {
-      included.push({
-        index: index.IndexSpec,
-        impact: index.IndexImpactScore || "Utilized",
-        section: "Included",
-        path: index.IndexSpec,
-      });
-    });
-
-    // Composite indexes
-    indexMetrics.UtilizedIndexes.CompositeIndexes?.forEach((index) => {
-      const compositeSpec = index.IndexSpecs.join(", ");
-      included.push({
-        index: compositeSpec,
-        impact: index.IndexImpactScore || "Utilized",
-        section: "Included",
-        composite: index.IndexSpecs.map((spec) => {
-          const [path, order] = spec.trim().split(/\s+/);
-          return {
-            path: path.trim(),
-            order: order?.toLowerCase() === "desc" ? "descending" : "ascending",
-          };
-        }),
-      });
-    });
-  }
-
-  // Process PotentialIndexes (Not Included in Current Policy)
-  if (indexMetrics.PotentialIndexes) {
-    // Single indexes
-    indexMetrics.PotentialIndexes.SingleIndexes?.forEach((index) => {
-      notIncluded.push({
-        index: index.IndexSpec,
-        impact: index.IndexImpactScore || "Unknown",
-        section: "Not Included",
-        path: index.IndexSpec,
-      });
-    });
-
-    // Composite indexes
-    indexMetrics.PotentialIndexes.CompositeIndexes?.forEach((index) => {
-      const compositeSpec = index.IndexSpecs.join(", ");
-      notIncluded.push({
-        index: compositeSpec,
-        impact: index.IndexImpactScore || "Unknown",
-        section: "Not Included",
-        composite: index.IndexSpecs.map((spec) => {
-          const [path, order] = spec.trim().split(/\s+/);
-          return {
-            path: path.trim(),
-            order: order?.toLowerCase() === "desc" ? "descending" : "ascending",
-          };
-        }),
-      });
-    });
-  }
-
-  return { included, notIncluded };
-}
-
-export const renderImpactDots = (impact: string): JSX.Element => {
-  const style = useIndexAdvisorStyles();
-  let count = 0;
-
-  if (impact === "High") {
-    count = 3;
-  } else if (impact === "Medium") {
-    count = 2;
-  } else if (impact === "Low") {
-    count = 1;
-  }
-
-  return (
-    <div className={style.indexAdvisorImpactDots}>
-      {Array.from({ length: count }).map((_, i) => (
-        <CircleFilled key={i} className={style.indexAdvisorImpactDot} />
-      ))}
-    </div>
-  );
-};

src/Explorer/Tabs/QueryTab/QueryResultSection.tsx

@@ -3,21 +3,18 @@ import QueryError from "Common/QueryError";
 import { IndeterminateProgressBar } from "Explorer/Controls/IndeterminateProgressBar";
 import { MessageBanner } from "Explorer/Controls/MessageBanner";
 import { useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles";
-import useZoomLevel from "hooks/useZoomLevel";
 import React from "react";
-import { conditionalClass } from "Utils/StyleUtils";
 import RunQuery from "../../../../images/RunQuery.png";
 import { QueryResults } from "../../../Contracts/ViewModels";
 import { ErrorList } from "./ErrorList";
 import { ResultsView } from "./ResultsView";
+import useZoomLevel from "hooks/useZoomLevel";
+import { conditionalClass } from "Utils/StyleUtils";
 
 export interface ResultsViewProps {
   isMongoDB: boolean;
   queryResults: QueryResults;
   executeQueryDocumentsPage: (firstItemIndex: number) => Promise<void>;
-  queryEditorContent?: string;
-  databaseId?: string;
-  containerId?: string;
 }
 
 interface QueryResultProps extends ResultsViewProps {
@@ -52,8 +49,6 @@ export const QueryResultSection: React.FC<QueryResultProps> = ({
   queryResults,
   executeQueryDocumentsPage,
   isExecuting,
-  databaseId,
-  containerId,
 }: QueryResultProps): JSX.Element => {
   const styles = useQueryTabStyles();
   const maybeSubQuery = queryEditorContent && /.*\(.*SELECT.*\)/i.test(queryEditorContent);
@@ -96,9 +91,6 @@ export const QueryResultSection: React.FC<QueryResultProps> = ({
           queryResults={queryResults}
           executeQueryDocumentsPage={executeQueryDocumentsPage}
           isMongoDB={isMongoDB}
-          queryEditorContent={queryEditorContent}
-          databaseId={databaseId}
-          containerId={containerId}
         />
       ) : (
         <ExecuteQueryCallToAction />

src/Explorer/Tabs/QueryTab/QueryTabComponent.test.tsx

@@ -52,9 +52,8 @@ describe("QueryTabComponent", () => {
         copilotVersion: "v3.0",
       },
     });
-
     const propsMock: Readonly<IQueryTabComponentProps> = {
-      collection: { databaseId: "CopilotSampleDB", id: () => "CopilotContainer" },
+      collection: { databaseId: "CopilotSampleDB" },
       onTabAccessor: () => jest.fn(),
       isExecutionError: false,
       tabId: "mockTabId",

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -28,7 +28,6 @@ import { useMonacoTheme } from "hooks/useTheme";
 import React, { Fragment, createRef } from "react";
 import "react-splitter-layout/lib/index.css";
 import { format } from "react-string-format";
-import create from "zustand";
 //TODO: Uncomment next two lines when query copilot is reinstated in DE
 // import QueryCommandIcon from "../../../../images/CopilotCommand.svg";
 // import LaunchCopilot from "../../../../images/CopilotTabIcon.svg";
@@ -58,20 +57,6 @@ import { SaveQueryPane } from "../../Panes/SaveQueryPane/SaveQueryPane";
 import TabsBase from "../TabsBase";
 import "./QueryTabComponent.less";
 
-export interface QueryMetadataStore {
-  userQuery: string;
-  databaseId: string;
-  containerId: string;
-  setMetadata: (query1: string, db: string, container: string) => void;
-}
-
-export const useQueryMetadataStore = create<QueryMetadataStore>((set) => ({
-  userQuery: "",
-  databaseId: "",
-  containerId: "",
-  setMetadata: (query1, db, container) => set({ userQuery: query1, databaseId: db, containerId: container }),
-}));
-
 enum ToggleState {
   Result,
   QueryMetrics,
@@ -279,10 +264,6 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
   }
 
   public onExecuteQueryClick = async (): Promise<void> => {
-    const query1 = this.state.sqlQueryEditorContent;
-    const db = this.props.collection.databaseId;
-    const container = this.props.collection.id();
-    useQueryMetadataStore.getState().setMetadata(query1, db, container);
     this._iterator = undefined;
 
     setTimeout(async () => {
@@ -799,8 +780,6 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
                   errors={this.props.copilotStore?.errors}
                   isExecuting={this.props.copilotStore?.isExecuting}
                   queryResults={this.props.copilotStore?.queryResults}
-                  databaseId={this.props.collection.databaseId}
-                  containerId={this.props.collection.id()}
                   executeQueryDocumentsPage={(firstItemIndex: number) =>
                     QueryDocumentsPerPage(
                       firstItemIndex,
@@ -816,8 +795,6 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
                   errors={this.state.errors}
                   isExecuting={this.state.isExecuting}
                   queryResults={this.state.queryResults}
-                  databaseId={this.props.collection.databaseId}
-                  containerId={this.props.collection.id()}
                   executeQueryDocumentsPage={(firstItemIndex: number) =>
                     this._executeQueryDocumentsPage(firstItemIndex)
                   }

src/Explorer/Tabs/QueryTab/ResultsView.test.tsx

@@ -1,170 +0,0 @@
-import "@testing-library/jest-dom";
-import { render, screen, waitFor } from "@testing-library/react";
-import { IndexAdvisorTab } from "Explorer/Tabs/QueryTab/ResultsView";
-import React from "react";
-
-const mockReplace = jest.fn();
-const mockFetchAll = jest.fn();
-const mockRead = jest.fn();
-const mockLogConsoleProgress = jest.fn();
-const mockHandleError = jest.fn();
-
-const indexMetricsResponse = {
-  UtilizedIndexes: {
-    SingleIndexes: [{ IndexSpec: "/foo/?", IndexImpactScore: "High" }],
-    CompositeIndexes: [{ IndexSpecs: ["/baz/? DESC", "/qux/? ASC"], IndexImpactScore: "Low" }],
-  },
-  PotentialIndexes: {
-    SingleIndexes: [{ IndexSpec: "/bar/?", IndexImpactScore: "Medium" }],
-    CompositeIndexes: [] as Array<{ IndexSpecs: string[]; IndexImpactScore?: string }>,
-  },
-};
-
-const mockQueryResults = {
-  documents: [] as unknown[],
-  hasMoreResults: false,
-  itemCount: 0,
-  firstItemIndex: 0,
-  lastItemIndex: 0,
-  requestCharge: 0,
-  activityId: "test-activity-id",
-};
-
-mockRead.mockResolvedValue({
-  resource: {
-    indexingPolicy: {
-      automatic: true,
-      indexingMode: "consistent",
-      includedPaths: [{ path: "/*" }, { path: "/foo/?" }],
-      excludedPaths: [],
-    },
-    partitionKey: "pk",
-  },
-});
-
-mockReplace.mockResolvedValue({
-  resource: {
-    indexingPolicy: {
-      automatic: true,
-      indexingMode: "consistent",
-      includedPaths: [{ path: "/*" }],
-      excludedPaths: [],
-    },
-  },
-});
-
-jest.mock("Common/CosmosClient", () => ({
-  client: () => ({
-    database: () => ({
-      container: () => ({
-        items: {
-          query: () => ({
-            fetchAll: mockFetchAll,
-          }),
-        },
-        read: mockRead,
-        replace: mockReplace,
-      }),
-    }),
-  }),
-}));
-
-jest.mock("./StylesAdvisor", () => ({
-  useIndexAdvisorStyles: () => ({}),
-}));
-
-jest.mock("../../../Utils/NotificationConsoleUtils", () => ({
-  logConsoleProgress: (...args: unknown[]) => {
-    mockLogConsoleProgress(...args);
-    return () => {};
-  },
-}));
-
-jest.mock("../../../Common/ErrorHandlingUtils", () => ({
-  handleError: (...args: unknown[]) => mockHandleError(...args),
-}));
-
-beforeEach(() => {
-  jest.clearAllMocks();
-  mockFetchAll.mockResolvedValue({ indexMetrics: indexMetricsResponse });
-});
-
-describe("IndexAdvisorTab Basic Tests", () => {
-  test("component renders without crashing", () => {
-    const { container } = render(
-      <IndexAdvisorTab queryEditorContent="SELECT * FROM c" databaseId="db1" containerId="col1" />,
-    );
-    expect(container).toBeTruthy();
-  });
-
-  test("renders component and handles missing parameters", () => {
-    const { container } = render(<IndexAdvisorTab />);
-    expect(container).toBeTruthy();
-    // Should not crash when parameters are missing
-  });
-
-  test("fetches index metrics with query results", async () => {
-    render(
-      <IndexAdvisorTab
-        queryResults={mockQueryResults}
-        queryEditorContent="SELECT * FROM c"
-        databaseId="db1"
-        containerId="col1"
-      />,
-    );
-    await waitFor(() => expect(mockFetchAll).toHaveBeenCalled());
-  });
-
-  test("displays content after loading", async () => {
-    render(
-      <IndexAdvisorTab
-        queryResults={mockQueryResults}
-        queryEditorContent="SELECT * FROM c"
-        databaseId="db1"
-        containerId="col1"
-      />,
-    );
-    // Wait for the component to finish loading
-    await waitFor(() => expect(mockFetchAll).toHaveBeenCalled());
-    // Component should have rendered some content
-    expect(screen.getByText(/Index Advisor/i)).toBeInTheDocument();
-  });
-
-  test("calls log console progress when fetching metrics", async () => {
-    render(
-      <IndexAdvisorTab
-        queryResults={mockQueryResults}
-        queryEditorContent="SELECT * FROM c"
-        databaseId="db1"
-        containerId="col1"
-      />,
-    );
-    await waitFor(() => expect(mockLogConsoleProgress).toHaveBeenCalled());
-  });
-
-  test("handles error when fetch fails", async () => {
-    mockFetchAll.mockRejectedValueOnce(new Error("fetch failed"));
-    render(
-      <IndexAdvisorTab
-        queryResults={mockQueryResults}
-        queryEditorContent="SELECT * FROM c"
-        databaseId="db1"
-        containerId="col1"
-      />,
-    );
-    await waitFor(() => expect(mockHandleError).toHaveBeenCalled(), { timeout: 3000 });
-  });
-
-  test("renders with all required props", () => {
-    const { container } = render(
-      <IndexAdvisorTab
-        queryResults={mockQueryResults}
-        queryEditorContent="SELECT * FROM c"
-        databaseId="testDb"
-        containerId="testContainer"
-      />,
-    );
-    expect(container).toBeTruthy();
-    expect(container.firstChild).toBeTruthy();
-  });
-});

src/Explorer/Tabs/QueryTab/ResultsView.tsx

@@ -1,8 +1,5 @@
-import type { CompositePath, IndexingPolicy } from "@azure/cosmos";
-import { FontIcon } from "@fluentui/react";
 import {
   Button,
-  Checkbox,
   DataGrid,
   DataGridBody,
   DataGridCell,
@@ -11,45 +8,28 @@ import {
   DataGridRow,
   SelectTabData,
   SelectTabEvent,
-  Spinner,
   Tab,
   TabList,
-  Table,
-  TableBody,
-  TableCell,
   TableColumnDefinition,
-  TableHeader,
-  TableRow,
   createTableColumn,
 } from "@fluentui/react-components";
-import { ArrowDownloadRegular, ChevronDown20Regular, ChevronRight20Regular, CopyRegular } from "@fluentui/react-icons";
-import copy from "clipboard-copy";
+import { ArrowDownloadRegular, CopyRegular } from "@fluentui/react-icons";
 import { HttpHeaders } from "Common/Constants";
 import MongoUtility from "Common/MongoUtility";
 import { QueryMetrics } from "Contracts/DataModels";
-import { QueryResults } from "Contracts/ViewModels";
 import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
-import {
-  parseIndexMetrics,
-  renderImpactDots,
-  type IndexMetricsResponse,
-} from "Explorer/Tabs/QueryTab/IndexAdvisorUtils";
 import { IDocument } from "Explorer/Tabs/QueryTab/QueryTabComponent";
 import { useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles";
-import React, { useCallback, useEffect, useState } from "react";
 import { userContext } from "UserContext";
-import { logConsoleProgress } from "Utils/NotificationConsoleUtils";
-import create from "zustand";
-import { client } from "../../../Common/CosmosClient";
-import { handleError } from "../../../Common/ErrorHandlingUtils";
-import { sampleDataClient } from "../../../Common/SampleDataClient";
+import copy from "clipboard-copy";
+import React, { useCallback, useState } from "react";
 import { ResultsViewProps } from "./QueryResultSection";
-import { useIndexAdvisorStyles } from "./StylesAdvisor";
+
 enum ResultsTabs {
   Results = "results",
   QueryStats = "queryStats",
-  IndexAdvisor = "indexadv",
 }
+
 const ResultsTab: React.FC<ResultsViewProps> = ({ queryResults, isMongoDB, executeQueryDocumentsPage }) => {
   const styles = useQueryTabStyles();
   /* eslint-disable react/prop-types */
@@ -543,331 +523,14 @@ const QueryStatsTab: React.FC<Pick<ResultsViewProps, "queryResults">> = ({ query
   );
 };
 
-export interface IIndexMetric {
-  index: string;
-  impact: string;
-  section: "Included" | "Not Included" | "Header";
-  path?: string;
-  composite?: { path: string; order: string }[];
-}
-export const IndexAdvisorTab: React.FC<{
-  queryResults?: QueryResults;
-  queryEditorContent?: string;
-  databaseId?: string;
-  containerId?: string;
-}> = ({ queryResults, queryEditorContent, databaseId, containerId }) => {
-  const style = useIndexAdvisorStyles();
-
-  const [loading, setLoading] = useState(false);
-  const [indexMetrics, setIndexMetrics] = useState<IndexMetricsResponse | null>(null);
-  const [showIncluded, setShowIncluded] = useState(true);
-  const [showNotIncluded, setShowNotIncluded] = useState(true);
-  const [selectedIndexes, setSelectedIndexes] = useState<IIndexMetric[]>([]);
-  const [selectAll, setSelectAll] = useState(false);
-  const [updateMessageShown, setUpdateMessageShown] = useState(false);
-  const [included, setIncludedIndexes] = useState<IIndexMetric[]>([]);
-  const [notIncluded, setNotIncludedIndexes] = useState<IIndexMetric[]>([]);
-  const [isUpdating, setIsUpdating] = useState(false);
-  const [justUpdatedPolicy, setJustUpdatedPolicy] = useState(false);
-  const indexingMetricsDocLink = "https://learn.microsoft.com/azure/cosmos-db/nosql/index-metrics";
-
-  const fetchIndexMetrics = async () => {
-    if (!queryEditorContent || !databaseId || !containerId) {
-      return;
-    }
-
-    setLoading(true);
-    const clearMessage = logConsoleProgress(`Querying items with IndexMetrics in container ${containerId}`);
-    try {
-      const querySpec = {
-        query: queryEditorContent,
-      };
-
-      // Use sampleDataClient for CopilotSampleDB, regular client for other databases
-      const cosmosClient = databaseId === "CopilotSampleDB" ? sampleDataClient() : client();
-
-      const sdkResponse = await cosmosClient
-        .database(databaseId)
-        .container(containerId)
-        .items.query(querySpec, {
-          populateIndexMetrics: true,
-        })
-        .fetchAll();
-
-      const parsedMetrics =
-        typeof sdkResponse.indexMetrics === "string" ? JSON.parse(sdkResponse.indexMetrics) : sdkResponse.indexMetrics;
-
-      setIndexMetrics(parsedMetrics);
-    } catch (error) {
-      handleError(error, "queryItemsWithIndexMetrics", `Error querying items from ${containerId}`);
-    } finally {
-      clearMessage();
-      setLoading(false);
-    }
-  };
-
-  // Fetch index metrics when query results change (i.e., when Execute Query is clicked)
-  useEffect(() => {
-    if (queryEditorContent && databaseId && containerId && queryResults) {
-      fetchIndexMetrics();
-    }
-  }, [queryResults]);
-
-  useEffect(() => {
-    if (!indexMetrics) {
-      return;
-    }
-
-    const { included, notIncluded } = parseIndexMetrics(indexMetrics);
-    setIncludedIndexes(included);
-    setNotIncludedIndexes(notIncluded);
-    if (justUpdatedPolicy) {
-      setJustUpdatedPolicy(false);
-    } else {
-      setUpdateMessageShown(false);
-    }
-  }, [indexMetrics]);
-
-  useEffect(() => {
-    const allSelected =
-      notIncluded.length > 0 && notIncluded.every((item) => selectedIndexes.some((s) => s.index === item.index));
-    setSelectAll(allSelected);
-  }, [selectedIndexes, notIncluded]);
-
-  const handleCheckboxChange = (indexObj: IIndexMetric, checked: boolean) => {
-    if (checked) {
-      setSelectedIndexes((prev) => [...prev, indexObj]);
-    } else {
-      setSelectedIndexes((prev) => prev.filter((item) => item.index !== indexObj.index));
-    }
-  };
-
-  const handleSelectAll = (checked: boolean) => {
-    setSelectAll(checked);
-    setSelectedIndexes(checked ? notIncluded : []);
-  };
-
-  const handleUpdatePolicy = async () => {
-    setIsUpdating(true);
-    try {
-      const containerRef = client().database(databaseId).container(containerId);
-      const { resource: containerDef } = await containerRef.read();
-
-      const newIncludedPaths = selectedIndexes
-        .filter((index) => !index.composite)
-        .map((index) => {
-          return {
-            path: index.path,
-          };
-        });
-
-      const newCompositeIndexes: CompositePath[][] = selectedIndexes
-        .filter((index) => Array.isArray(index.composite))
-        .map(
-          (index) =>
-            (index.composite as { path: string; order: string }[]).map((comp) => ({
-              path: comp.path,
-              order: comp.order === "descending" ? "descending" : "ascending",
-            })) as CompositePath[],
-        );
-
-      const updatedPolicy: IndexingPolicy = {
-        ...containerDef.indexingPolicy,
-        includedPaths: [...(containerDef.indexingPolicy?.includedPaths || []), ...newIncludedPaths],
-        compositeIndexes: [...(containerDef.indexingPolicy?.compositeIndexes || []), ...newCompositeIndexes],
-        automatic: containerDef.indexingPolicy?.automatic ?? true,
-        indexingMode: containerDef.indexingPolicy?.indexingMode ?? "consistent",
-        excludedPaths: containerDef.indexingPolicy?.excludedPaths ?? [],
-      };
-      await containerRef.replace({
-        id: containerId,
-        partitionKey: containerDef.partitionKey,
-        indexingPolicy: updatedPolicy,
-      });
-      useIndexingPolicyStore.getState().setIndexingPolicyFor(containerId, updatedPolicy);
-      const selectedIndexSet = new Set(selectedIndexes.map((s) => s.index));
-      const updatedNotIncluded: typeof notIncluded = [];
-      const newlyIncluded: typeof included = [];
-      for (const item of notIncluded) {
-        if (selectedIndexSet.has(item.index)) {
-          newlyIncluded.push(item);
-        } else {
-          updatedNotIncluded.push(item);
-        }
-      }
-      const newIncluded = [...included, ...newlyIncluded];
-      const newNotIncluded = updatedNotIncluded;
-      setIncludedIndexes(newIncluded);
-      setNotIncludedIndexes(newNotIncluded);
-      setSelectedIndexes([]);
-      setSelectAll(false);
-      setUpdateMessageShown(true);
-      setJustUpdatedPolicy(true);
-    } catch (err) {
-      console.error("Failed to update indexing policy:", err);
-    } finally {
-      setIsUpdating(false);
-    }
-  };
-
-  const renderRow = (item: IIndexMetric, index: number) => {
-    const isHeader = item.section === "Header";
-    const isNotIncluded = item.section === "Not Included";
-
-    return (
-      <TableRow key={index}>
-        <TableCell colSpan={2}>
-          <div className={style.indexAdvisorGrid}>
-            {isNotIncluded ? (
-              <Checkbox
-                checked={selectedIndexes.some((selected) => selected.index === item.index)}
-                onChange={(_, data) => handleCheckboxChange(item, data.checked === true)}
-              />
-            ) : isHeader && item.index === "Not Included in Current Policy" && notIncluded.length > 0 ? (
-              <Checkbox checked={selectAll} onChange={(_, data) => handleSelectAll(data.checked === true)} />
-            ) : (
-              <div className={style.indexAdvisorCheckboxSpacer}></div>
-            )}
-            {isHeader ? (
-              <span
-                style={{ cursor: "pointer" }}
-                onClick={() => {
-                  if (item.index === "Included in Current Policy") {
-                    setShowIncluded(!showIncluded);
-                  } else if (item.index === "Not Included in Current Policy") {
-                    setShowNotIncluded(!showNotIncluded);
-                  }
-                }}
-              >
-                {item.index === "Included in Current Policy" ? (
-                  showIncluded ? (
-                    <ChevronDown20Regular />
-                  ) : (
-                    <ChevronRight20Regular />
-                  )
-                ) : showNotIncluded ? (
-                  <ChevronDown20Regular />
-                ) : (
-                  <ChevronRight20Regular />
-                )}
-              </span>
-            ) : (
-              <div className={style.indexAdvisorChevronSpacer}></div>
-            )}
-            <div className={isHeader ? style.indexAdvisorRowBold : style.indexAdvisorRowNormal}>{item.index}</div>
-            <div className={isHeader ? style.indexAdvisorRowImpactHeader : style.indexAdvisorRowImpact}>
-              {!isHeader && item.impact}
-            </div>
-            <div>{!isHeader && renderImpactDots(item.impact)}</div>
-          </div>
-        </TableCell>
-      </TableRow>
-    );
-  };
-  const indexMetricItems = React.useMemo(() => {
-    const items: IIndexMetric[] = [];
-    items.push({ index: "Not Included in Current Policy", impact: "", section: "Header" });
-    if (showNotIncluded) {
-      notIncluded.forEach((item) => items.push({ ...item, section: "Not Included" }));
-    }
-    items.push({ index: "Included in Current Policy", impact: "", section: "Header" });
-    if (showIncluded) {
-      included.forEach((item) => items.push({ ...item, section: "Included" }));
-    }
-    return items;
-  }, [included, notIncluded, showIncluded, showNotIncluded]);
-
-  if (loading) {
-    return (
-      <div>
-        <Spinner
-          size="small"
-          style={
-            {
-              "--spinner-size": "16px",
-              "--spinner-thickness": "2px",
-              "--spinner-color": "#0078D4",
-            } as React.CSSProperties
-          }
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <div className={style.indexAdvisorMessage}>
-        {updateMessageShown ? (
-          <>
-            <span className={style.indexAdvisorSuccessIcon}>
-              <FontIcon iconName="CheckMark" style={{ color: "white", fontSize: 12 }} />
-            </span>
-            <span>
-              Your indexing policy has been updated with the new included paths. You may review the changes in Scale &
-              Settings.
-            </span>
-          </>
-        ) : (
-          <>
-            <span>
-              Index Advisor uses Indexing Metrics to suggest query paths that, when included in your indexing policy,
-              can improve the performance of this query by reducing RU costs and lowering latency.{" "}
-              <a href={indexingMetricsDocLink} target="_blank" rel="noopener noreferrer">
-                Learn more about Indexing Metrics
-              </a>
-              .{" "}
-            </span>
-          </>
-        )}
-      </div>
-      <div className={style.indexAdvisorTitle}>Indexes analysis</div>
-      <Table className={style.indexAdvisorTable}>
-        <TableHeader>
-          <TableRow>
-            <TableCell colSpan={2}>
-              <div className={style.indexAdvisorGrid}>
-                <div className={style.indexAdvisorCheckboxSpacer}></div>
-                <div className={style.indexAdvisorChevronSpacer}></div>
-                <div>Index</div>
-                <div>
-                  <span style={{ whiteSpace: "nowrap" }}>Estimated Impact</span>
-                </div>
-              </div>
-            </TableCell>
-          </TableRow>
-        </TableHeader>
-        <TableBody>{indexMetricItems.map(renderRow)}</TableBody>
-      </Table>
-      {selectedIndexes.length > 0 && (
-        <div className={style.indexAdvisorButtonBar}>
-          {isUpdating ? (
-            <div className={style.indexAdvisorButtonSpinner}>
-              <Spinner size="tiny" />{" "}
-            </div>
-          ) : (
-            <button onClick={handleUpdatePolicy} className={style.indexAdvisorButton}>
-              Update Indexing Policy with selected index(es)
-            </button>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-export const ResultsView: React.FC<ResultsViewProps> = ({
-  isMongoDB,
-  queryResults,
-  executeQueryDocumentsPage,
-  queryEditorContent,
-  databaseId,
-  containerId,
-}) => {
+export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResults, executeQueryDocumentsPage }) => {
   const styles = useQueryTabStyles();
   const [activeTab, setActiveTab] = useState<ResultsTabs>(ResultsTabs.Results);
 
   const onTabSelect = useCallback((event: SelectTabEvent, data: SelectTabData) => {
     setActiveTab(data.value as ResultsTabs);
   }, []);
+
   return (
     <div data-test="QueryTab/ResultsPane/ResultsView" className={styles.queryResultsTabPanel}>
       <TabList selectedValue={activeTab} onTabSelect={onTabSelect}>
@@ -885,13 +548,6 @@ export const ResultsView: React.FC<ResultsViewProps> = ({
         >
           Query Stats
         </Tab>
-        <Tab
-          data-test="QueryTab/ResultsPane/ResultsView/IndexAdvisorTab"
-          id={ResultsTabs.IndexAdvisor}
-          value={ResultsTabs.IndexAdvisor}
-        >
-          Index Advisor
-        </Tab>
       </TabList>
       <div className={styles.queryResultsTabContentContainer}>
         {activeTab === ResultsTabs.Results && (
@@ -902,30 +558,7 @@ export const ResultsView: React.FC<ResultsViewProps> = ({
           />
         )}
         {activeTab === ResultsTabs.QueryStats && <QueryStatsTab queryResults={queryResults} />}
-        {activeTab === ResultsTabs.IndexAdvisor && (
-          <IndexAdvisorTab
-            queryResults={queryResults}
-            queryEditorContent={queryEditorContent}
-            databaseId={databaseId}
-            containerId={containerId}
-          />
-        )}
       </div>
     </div>
   );
 };
-export interface IndexingPolicyStore {
-  indexingPolicies: { [containerId: string]: IndexingPolicy };
-  setIndexingPolicyFor: (containerId: string, indexingPolicy: IndexingPolicy) => void;
-}
-
-export const useIndexingPolicyStore = create<IndexingPolicyStore>((set) => ({
-  indexingPolicies: {},
-  setIndexingPolicyFor: (containerId, indexingPolicy) =>
-    set((state) => ({
-      indexingPolicies: {
-        ...state.indexingPolicies,
-        [containerId]: { ...indexingPolicy },
-      },
-    })),
-}));

src/Explorer/Tabs/QueryTab/StylesAdvisor.ts

@@ -1,95 +0,0 @@
-import { makeStyles } from "@fluentui/react-components";
-export type IndexAdvisorStyles = ReturnType<typeof useIndexAdvisorStyles>;
-export const useIndexAdvisorStyles = makeStyles({
-  indexAdvisorMessage: {
-    padding: "1rem",
-    fontSize: "1.2rem",
-    display: "flex",
-    alignItems: "center",
-    gap: "0.5rem",
-  },
-  indexAdvisorSuccessIcon: {
-    width: "18px",
-    height: "18px",
-    borderRadius: "50%",
-    backgroundColor: "#107C10",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  indexAdvisorTitle: {
-    padding: "1rem",
-    fontSize: "1.3rem",
-    fontWeight: "bold",
-  },
-  indexAdvisorTable: {
-    display: "block",
-    alignItems: "center",
-    marginBottom: "7rem",
-  },
-  indexAdvisorGrid: {
-    display: "grid",
-    gridTemplateColumns: "30px 30px 1fr 50px 120px",
-    alignItems: "center",
-    gap: "15px",
-    fontWeight: "bold",
-  },
-  indexAdvisorCheckboxSpacer: {
-    width: "18px",
-    height: "18px",
-  },
-  indexAdvisorChevronSpacer: {
-    width: "24px",
-  },
-  indexAdvisorRowBold: {
-    fontWeight: "bold",
-  },
-  indexAdvisorRowNormal: {
-    fontWeight: "normal",
-  },
-  indexAdvisorRowImpactHeader: {
-    fontSize: 0,
-  },
-  indexAdvisorRowImpact: {
-    fontWeight: "normal",
-  },
-  indexAdvisorImpactDot: {
-    color: "#0078D4",
-    fontSize: "12px",
-    display: "inline-flex",
-  },
-  indexAdvisorImpactDots: {
-    display: "flex",
-    alignItems: "center",
-    gap: "4px",
-  },
-  indexAdvisorButtonBar: {
-    padding: "1rem",
-    marginTop: "-7rem",
-    flexWrap: "wrap",
-  },
-  indexAdvisorButtonSpinner: {
-    marginTop: "1rem",
-    minWidth: "320px",
-    minHeight: "40px",
-    display: "flex",
-    alignItems: "left",
-    justifyContent: "left",
-    marginLeft: "10rem",
-  },
-  indexAdvisorButton: {
-    backgroundColor: "#0078D4",
-    color: "white",
-    padding: "8px 16px",
-    border: "none",
-    borderRadius: "4px",
-    cursor: "pointer",
-    marginTop: "1rem",
-    fontSize: "1rem",
-    fontWeight: 500,
-    transition: "background 0.2s",
-    ":hover": {
-      backgroundColor: "#005a9e",
-    },
-  },
-});

src/Explorer/Tabs/QueryTab/useQueryMetadataStore.ts

@@ -1,15 +0,0 @@
-import create from "zustand";
-
-interface QueryMetadataStore {
-  userQuery: string;
-  databaseId: string;
-  containerId: string;
-  setMetadata: (query1: string, db: string, container: string) => void;
-}
-
-export const useQueryMetadataStore = create<QueryMetadataStore>((set) => ({
-  userQuery: "",
-  databaseId: "",
-  containerId: "",
-  setMetadata: (query1, db, container) => set({ userQuery: query1, databaseId: db, containerId: container }),
-}));

src/Main.tsx

@@ -2,18 +2,9 @@
 import "./ReactDevTools";
 
 // CSS Dependencies
-import { initializeIcons, loadTheme, useTheme } from "@fluentui/react";
-import { FluentProvider, makeStyles, webDarkTheme, webLightTheme } from "@fluentui/react-components";
-import { Platform } from "ConfigContext";
-import ContainerCopyPanel from "Explorer/ContainerCopy/ContainerCopyPanel";
-import Explorer from "Explorer/Explorer";
-import { QuickstartCarousel } from "Explorer/Quickstart/QuickstartCarousel";
-import { MongoQuickstartTutorial } from "Explorer/Quickstart/Tutorials/MongoQuickstartTutorial";
-import { SQLQuickstartTutorial } from "Explorer/Quickstart/Tutorials/SQLQuickstartTutorial";
-import { userContext } from "UserContext";
+import { initializeIcons } from "@fluentui/react";
 import "allotment/dist/style.css";
 import "bootstrap/dist/css/bootstrap.css";
-import { useCarousel } from "hooks/useCarousel";
 import React from "react";
 import ReactDOM from "react-dom";
 import "../externals/jquery-ui.min.css";
@@ -24,13 +15,8 @@ import "../externals/jquery.dataTables.min.css";
 import "../externals/jquery.typeahead.min.css";
 import "../externals/jquery.typeahead.min.js";
 // Image Dependencies
-import { SidePanel } from "Explorer/Panes/PanelContainerComponent";
-import { QueryCopilotCarousel } from "Explorer/QueryCopilot/CopilotCarousel";
-import { SidebarContainer } from "Explorer/Sidebar";
-import { KeyboardShortcutRoot } from "KeyboardShortcuts";
 import "allotment/dist/style.css";
 import "../images/CosmosDB_rgb_ui_lighttheme.ico";
-import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";
 import "../images/favicon.ico";
 import "../less/TableStyles/CustomizeColumns.less";
 import "../less/TableStyles/EntityEditor.less";
@@ -42,175 +28,29 @@ import "../less/infobox.less";
 import "../less/menus.less";
 import "../less/messagebox.less";
 import "../less/resourceTree.less";
-import * as StyleConstants from "./Common/StyleConstants";
 import "./Explorer/Controls/Accordion/AccordionComponent.less";
 import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
-import { Dialog } from "./Explorer/Controls/Dialog";
 import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
 import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
 import "./Explorer/Controls/Notebook/NotebookTerminalComponent.less";
 import "./Explorer/Controls/TreeComponent/treeComponent.less";
-import { ErrorBoundary } from "./Explorer/ErrorBoundary";
 import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
 import "./Explorer/Menus/CommandBar/CommandBarComponent.less";
-import { CommandBar } from "./Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import "./Explorer/Menus/CommandBar/ConnectionStatusComponent.less";
 import "./Explorer/Menus/CommandBar/MemoryTrackerComponent.less";
 import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
-import { NotificationConsole } from "./Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
 import "./Explorer/Panes/PanelComponent.less";
 import "./Explorer/SplashScreen/SplashScreen.less";
 import "./Libs/jquery";
-import MetricScenario from "./Metrics/MetricEvents";
-import { MetricScenarioProvider, useMetricScenario } from "./Metrics/MetricScenarioProvider";
-import { ApplicationMetricPhase } from "./Metrics/ScenarioConfig";
-import { useInteractive } from "./Metrics/useMetricPhases";
-import { appThemeFabric } from "./Platform/Fabric/FabricTheme";
+import { MetricScenarioProvider } from "./Metrics/MetricScenarioProvider";
+import Root from "./RootComponents/Root";
 import "./Shared/appInsights";
-import { useConfig } from "./hooks/useConfig";
-import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
-import { useThemeStore } from "./hooks/useTheme";
 import "./less/DarkModeMenus.less";
 import "./less/ThemeSystem.less";
+
 // Initialize icons before React is loaded
 initializeIcons(undefined, { disableWarnings: true });
 
-const useStyles = makeStyles({
-  root: {
-    height: "100vh",
-    width: "100vw",
-    backgroundColor: "var(--colorNeutralBackground1)",
-    color: "var(--colorNeutralForeground1)",
-  },
-});
-
-const App = (): JSX.Element => {
-  const config = useConfig();
-  const styles = useStyles();
-  // theme is used for application-wide styling
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const theme = useTheme();
-
-  // Load Fabric theme and styles only once when platform is Fabric
-  React.useEffect(() => {
-    if (config?.platform === Platform.Fabric) {
-      loadTheme(appThemeFabric);
-      import("../less/documentDBFabric.less");
-    }
-    StyleConstants.updateStyles();
-  }, [config?.platform]);
-
-  const explorer = useKnockoutExplorer(config?.platform);
-
-  // Scenario-based health tracking: start ApplicationLoad and complete phases.
-  const { startScenario, completePhase } = useMetricScenario();
-  React.useEffect(() => {
-    startScenario(MetricScenario.ApplicationLoad);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  React.useEffect(() => {
-    if (explorer) {
-      completePhase(MetricScenario.ApplicationLoad, ApplicationMetricPhase.ExplorerInitialized);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [explorer]);
-
-  if (!explorer) {
-    return <LoadingExplorer />;
-  }
-
-  return (
-    <div id="Main" className={styles.root}>
-      <KeyboardShortcutRoot>
-        <div className="flexContainer" aria-hidden="false">
-          {userContext.features.enableContainerCopy && userContext.apiType === "SQL" ? (
-            <ContainerCopyPanel explorer={explorer} />
-          ) : (
-            <DivExplorer explorer={explorer} />
-          )}
-        </div>
-      </KeyboardShortcutRoot>
-    </div>
-  );
-};
-
-const DivExplorer: React.FC<{ explorer: Explorer }> = ({ explorer }) => {
-  const isCarouselOpen = useCarousel((state) => state.shouldOpen);
-  const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
-  useInteractive(MetricScenario.ApplicationLoad);
-
-  return (
-    <div
-      className="flexContainer"
-      style={{
-        flex: 1,
-        display: "flex",
-        flexDirection: "column",
-        backgroundColor: "var(--colorNeutralBackground1)",
-        color: "var(--colorNeutralForeground1)",
-      }}
-      aria-hidden="false"
-      data-test="DataExplorerRoot"
-    >
-      <div
-        id="divExplorer"
-        className="flexContainer hideOverflows"
-        style={{
-          flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          backgroundColor: "var(--colorNeutralBackground1)",
-          color: "var(--colorNeutralForeground1)",
-        }}
-      >
-        <div id="freeTierTeachingBubble"> </div>
-        <CommandBar container={explorer} />
-        <SidebarContainer explorer={explorer} />
-        <div
-          className="dataExplorerErrorConsoleContainer"
-          role="contentinfo"
-          aria-label="Notification console"
-          id="explorerNotificationConsole"
-          style={{
-            backgroundColor: "var(--colorNeutralBackground1)",
-            color: "var(--colorNeutralForeground1)",
-          }}
-        >
-          <NotificationConsole />
-        </div>
-      </div>
-      <SidePanel />
-      <Dialog />
-      {<QuickstartCarousel isOpen={isCarouselOpen} />}
-      {<SQLQuickstartTutorial />}
-      {<MongoQuickstartTutorial />}
-      {<QueryCopilotCarousel isOpen={isCopilotCarouselOpen} explorer={explorer} />}
-    </div>
-  );
-};
-
-const Root: React.FC = () => {
-  // Use React state to track isDarkMode and subscribe to changes
-  const [isDarkMode, setIsDarkMode] = React.useState(useThemeStore.getState().isDarkMode);
-  const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
-
-  // Subscribe to theme changes
-  React.useEffect(() => {
-    return useThemeStore.subscribe((state) => {
-      setIsDarkMode(state.isDarkMode);
-    });
-  }, []);
-
-  return (
-    <ErrorBoundary>
-      <FluentProvider theme={currentTheme}>
-        <App />
-      </FluentProvider>
-    </ErrorBoundary>
-  );
-};
-
 const mainElement = document.getElementById("Main");
 if (mainElement) {
   ReactDOM.render(
@@ -220,24 +60,3 @@ if (mainElement) {
     mainElement,
   );
 }
-
-function LoadingExplorer(): JSX.Element {
-  const styles = useStyles();
-  return (
-    <div className={styles.root}>
-      <div className="splashLoaderContainer">
-        <div className="splashLoaderContentContainer">
-          <p className="connectExplorerContent">
-            <img src={hdeConnectImage} alt="Azure Cosmos DB" />
-          </p>
-          <p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
-            Welcome to Azure Cosmos DB
-          </p>
-          <p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
-            Connecting...
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}

src/Metrics/MetricScenarioProvider.tsx

@@ -3,7 +3,7 @@ import MetricScenario from "./MetricEvents";
 import { MetricPhase } from "./ScenarioConfig";
 import { scenarioMonitor } from "./ScenarioMonitor";
 
-interface MetricScenarioContextValue {
+export interface MetricScenarioContextValue {
   startScenario: (scenario: MetricScenario) => void;
   startPhase: (scenario: MetricScenario, phase: MetricPhase) => void;
   completePhase: (scenario: MetricScenario, phase: MetricPhase) => void;

src/RootComponents/App.test.tsx

@@ -0,0 +1,317 @@
+import { loadTheme } from "@fluentui/react";
+import "@testing-library/jest-dom";
+import { render, screen, waitFor } from "@testing-library/react";
+import React from "react";
+import { updateStyles } from "../Common/StyleConstants";
+import { Platform } from "../ConfigContext";
+import { useConfig } from "../hooks/useConfig";
+import { useKnockoutExplorer } from "../hooks/useKnockoutExplorer";
+import { MetricScenarioContextValue, useMetricScenario } from "../Metrics/MetricScenarioProvider";
+import App from "./App";
+
+const mockUserContext = {
+  features: { enableContainerCopy: false },
+  apiType: "SQL",
+};
+
+jest.mock("@fluentui/react", () => ({
+  loadTheme: jest.fn(),
+  makeStyles: jest.fn(() => () => ({
+    root: "mock-app-root-class",
+  })),
+  MessageBarType: {
+    error: "error",
+    warning: "warning",
+    info: "info",
+    success: "success",
+  },
+  SpinnerSize: {
+    xSmall: "xSmall",
+    small: "small",
+    medium: "medium",
+    large: "large",
+  },
+}));
+
+jest.mock("../Common/StyleConstants", () => ({
+  StyleConstants: {
+    BaseMedium: "#000000",
+    AccentMediumHigh: "#0078d4",
+    AccentMedium: "#106ebe",
+    AccentLight: "#deecf9",
+    AccentAccentExtra: "#0078d4",
+    FabricAccentMediumHigh: "#0078d4",
+    FabricAccentMedium: "#106ebe",
+    FabricAccentLight: "#deecf9",
+    PortalAccentMediumHigh: "#0078d4",
+    PortalAccentMedium: "#106ebe",
+    PortalAccentLight: "#deecf9",
+  },
+  updateStyles: jest.fn(),
+}));
+
+jest.mock("./LoadingExplorer", () => {
+  const MockLoadingExplorer = () => {
+    return <div data-testid="mock-loading-explorer">Loading Explorer</div>;
+  };
+  MockLoadingExplorer.displayName = "MockLoadingExplorer";
+  return MockLoadingExplorer;
+});
+
+jest.mock("./ExplorerContainer", () => {
+  const MockExplorerContainer = ({ explorer }: { explorer: unknown }) => {
+    return (
+      <div data-testid="mock-explorer-container">Explorer Container - {explorer ? "with explorer" : "no explorer"}</div>
+    );
+  };
+  MockExplorerContainer.displayName = "MockExplorerContainer";
+  return MockExplorerContainer;
+});
+
+jest.mock("../Explorer/ContainerCopy/ContainerCopyPanel", () => {
+  const MockContainerCopyPanel = ({ explorer }: { explorer: unknown }) => {
+    return (
+      <div data-testid="mock-container-copy-panel">
+        Container Copy Panel - {explorer ? "with explorer" : "no explorer"}
+      </div>
+    );
+  };
+  MockContainerCopyPanel.displayName = "MockContainerCopyPanel";
+  return MockContainerCopyPanel;
+});
+
+jest.mock("../KeyboardShortcuts", () => ({
+  KeyboardShortcutRoot: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="mock-keyboard-shortcut-root">{children}</div>
+  ),
+}));
+
+jest.mock("../UserContext", () => ({
+  get userContext() {
+    return mockUserContext;
+  },
+}));
+
+const mockConfig = {
+  platform: Platform.Portal,
+};
+
+const mockExplorer = {
+  id: "test-explorer",
+  name: "Test Explorer",
+};
+
+jest.mock("../hooks/useConfig", () => ({
+  useConfig: jest.fn(() => mockConfig),
+}));
+
+jest.mock("../hooks/useKnockoutExplorer", () => ({
+  useKnockoutExplorer: jest.fn(),
+}));
+
+jest.mock("../Metrics/MetricScenarioProvider", () => ({
+  useMetricScenario: jest.fn(() => ({
+    startScenario: jest.fn(),
+    completePhase: jest.fn(),
+  })),
+}));
+
+jest.mock("../Metrics/MetricEvents", () => ({
+  __esModule: true,
+  default: {
+    ApplicationLoad: "ApplicationLoad",
+  },
+}));
+
+jest.mock("../Metrics/ScenarioConfig", () => ({
+  ApplicationMetricPhase: {
+    ExplorerInitialized: "ExplorerInitialized",
+  },
+  CommonMetricPhase: {
+    Interactive: "Interactive",
+  },
+}));
+
+jest.mock("../Platform/Fabric/FabricTheme", () => ({
+  appThemeFabric: { name: "fabric-theme" },
+}));
+
+describe("App", () => {
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    mockUserContext.features = { enableContainerCopy: false };
+    mockUserContext.apiType = "SQL";
+  });
+  let mockStartScenario: jest.Mock;
+  let mockCompletePhase: jest.Mock;
+  let mockUseKnockoutExplorer: jest.Mock;
+  let mockUseConfig: jest.Mock;
+  let mockLoadTheme: jest.Mock;
+  let mockUpdateStyles: jest.Mock;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockStartScenario = jest.fn();
+    mockCompletePhase = jest.fn();
+
+    mockUseKnockoutExplorer = jest.mocked(useKnockoutExplorer);
+    mockUseConfig = jest.mocked(useConfig);
+    mockLoadTheme = jest.mocked(loadTheme);
+    mockUpdateStyles = jest.mocked(updateStyles);
+    
+    const mockUseMetricScenario = jest.mocked(useMetricScenario);
+    mockUseMetricScenario.mockReturnValue({
+        startScenario: mockStartScenario,
+        completePhase: mockCompletePhase
+    } as unknown as MetricScenarioContextValue);
+
+    mockUseConfig.mockReturnValue(mockConfig);
+    mockUseKnockoutExplorer.mockReturnValue(null);
+  });
+
+  test("should render loading explorer when explorer is not ready", () => {
+    mockUseKnockoutExplorer.mockReturnValue(null);
+
+    render(<App />);
+
+    expect(screen.getByTestId("mock-loading-explorer")).toBeInTheDocument();
+    expect(screen.queryByTestId("mock-explorer-container")).not.toBeInTheDocument();
+  });
+
+  test("should render explorer container when explorer is ready", () => {
+    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
+
+    render(<App />);
+
+    expect(screen.getByTestId("mock-explorer-container")).toBeInTheDocument();
+    expect(screen.queryByTestId("mock-loading-explorer")).not.toBeInTheDocument();
+  });
+
+  test("should start metric scenario on mount", () => {
+    render(<App />);
+
+    expect(mockStartScenario).toHaveBeenCalledWith("ApplicationLoad");
+    expect(mockStartScenario).toHaveBeenCalledTimes(1);
+  });
+
+  test("should complete metric phase when explorer is initialized", async () => {
+    const { rerender } = render(<App />);
+
+    expect(mockCompletePhase).not.toHaveBeenCalled();
+
+    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
+    rerender(<App />);
+
+    await waitFor(() => {
+      expect(mockCompletePhase).toHaveBeenCalledWith("ApplicationLoad", "ExplorerInitialized");
+    });
+  });
+
+  test("should load fabric theme when platform is Fabric", () => {
+    const fabricConfig = { platform: Platform.Fabric };
+    mockUseConfig.mockReturnValue(fabricConfig);
+    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
+
+    render(<App />);
+
+    expect(mockLoadTheme).toHaveBeenCalledWith({ name: "fabric-theme" });
+  });
+
+  test("should not load fabric theme when platform is not Fabric", () => {
+    const portalConfig = { platform: Platform.Portal };
+    mockUseConfig.mockReturnValue(portalConfig);
+
+    render(<App />);
+
+    expect(mockLoadTheme).not.toHaveBeenCalled();
+  });
+
+  test("should always call updateStyles", () => {
+    render(<App />);
+
+    expect(mockUpdateStyles).toHaveBeenCalled();
+  });
+
+  test("should render container copy panel when container copy is enabled and API is SQL", () => {
+    mockUserContext.features = { enableContainerCopy: true };
+    mockUserContext.apiType = "SQL";
+    
+    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
+
+    render(<App />);
+
+    expect(screen.getByTestId("mock-container-copy-panel")).toBeInTheDocument();
+    expect(screen.queryByTestId("mock-explorer-container")).not.toBeInTheDocument();
+  });
+
+  test("should render explorer container when container copy is disabled", () => {
+    mockUserContext.features = { enableContainerCopy: false };
+    mockUserContext.apiType = "SQL";
+    
+    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
+
+    render(<App />);
+
+    expect(screen.getByTestId("mock-explorer-container")).toBeInTheDocument();
+    expect(screen.queryByTestId("mock-container-copy-panel")).not.toBeInTheDocument();
+  });
+
+  test("should render explorer container when API is not SQL", () => {
+    mockUserContext.features = { enableContainerCopy: true };
+    mockUserContext.apiType = "MongoDB";
+    
+    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
+
+    render(<App />);
+
+    expect(screen.getByTestId("mock-explorer-container")).toBeInTheDocument();
+    expect(screen.queryByTestId("mock-container-copy-panel")).not.toBeInTheDocument();
+  });
+
+  test("should have correct DOM structure", () => {
+    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
+
+    const { container } = render(<App />);
+
+    const mainDiv = container.querySelector("#Main");
+    expect(mainDiv).toBeInTheDocument();
+    expect(mainDiv).toHaveClass("mock-app-root-class");
+
+    expect(screen.getByTestId("mock-keyboard-shortcut-root")).toBeInTheDocument();
+
+    const flexContainer = container.querySelector(".flexContainer");
+    expect(flexContainer).toBeInTheDocument();
+    expect(flexContainer).toHaveAttribute("aria-hidden", "false");
+  });
+
+  test("should handle config changes for Fabric platform", () => {
+    const { rerender } = render(<App />);
+
+    const fabricConfig = { platform: Platform.Fabric };
+    mockUseConfig.mockReturnValue(fabricConfig);
+
+    rerender(<App />);
+
+    expect(mockLoadTheme).toHaveBeenCalledWith({ name: "fabric-theme" });
+  });
+
+  test("should pass explorer to child components", () => {
+    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
+
+    render(<App />);
+
+    expect(screen.getByText("Explorer Container - with explorer")).toBeInTheDocument();
+  });
+
+  test("should handle null config gracefully", () => {
+    mockUseConfig.mockReturnValue(null);
+    mockUseKnockoutExplorer.mockReturnValue(mockExplorer);
+
+    expect(() => render(<App />)).not.toThrow();
+
+    expect(mockLoadTheme).not.toHaveBeenCalled();
+    expect(mockUpdateStyles).toHaveBeenCalled();
+  });
+});

src/RootComponents/App.tsx

@@ -0,0 +1,73 @@
+import { loadTheme, makeStyles } from "@fluentui/react";
+import React from "react";
+import * as StyleConstants from "../Common/StyleConstants";
+import { Platform } from "../ConfigContext";
+import ContainerCopyPanel from "../Explorer/ContainerCopy/ContainerCopyPanel";
+import { useConfig } from "../hooks/useConfig";
+import { useKnockoutExplorer } from "../hooks/useKnockoutExplorer";
+import { KeyboardShortcutRoot } from "../KeyboardShortcuts";
+import MetricScenario from "../Metrics/MetricEvents";
+import { useMetricScenario } from "../Metrics/MetricScenarioProvider";
+import { ApplicationMetricPhase } from "../Metrics/ScenarioConfig";
+import { appThemeFabric } from "../Platform/Fabric/FabricTheme";
+import { userContext } from "../UserContext";
+import ExplorerContainer from "./ExplorerContainer";
+import LoadingExplorer from "./LoadingExplorer";
+
+const useStyles = makeStyles({
+  root: {
+    height: "100vh",
+    width: "100vw",
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
+  },
+});
+
+const App = (): JSX.Element => {
+  const config = useConfig();
+  const styles = useStyles();
+  // Load Fabric theme and styles only once when platform is Fabric
+  React.useEffect(() => {
+    if (config?.platform === Platform.Fabric) {
+      loadTheme(appThemeFabric);
+      import("../../less/documentDBFabric.less");
+    }
+    StyleConstants.updateStyles();
+  }, [config?.platform]);
+
+  const explorer = useKnockoutExplorer(config?.platform);
+
+  // Scenario-based health tracking: start ApplicationLoad and complete phases.
+  const { startScenario, completePhase } = useMetricScenario();
+  React.useEffect(() => {
+    startScenario(MetricScenario.ApplicationLoad);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  React.useEffect(() => {
+    if (explorer) {
+      completePhase(MetricScenario.ApplicationLoad, ApplicationMetricPhase.ExplorerInitialized);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [explorer]);
+
+  if (!explorer) {
+    return <LoadingExplorer />;
+  }
+
+  return (
+    <div id="Main" className={styles.root}>
+      <KeyboardShortcutRoot>
+        <div className="flexContainer" aria-hidden="false">
+          {userContext.features.enableContainerCopy && userContext.apiType === "SQL" ? (
+            <ContainerCopyPanel explorer={explorer} />
+          ) : (
+            <ExplorerContainer explorer={explorer} />
+          )}
+        </div>
+      </KeyboardShortcutRoot>
+    </div>
+  );
+};
+
+export default App;

src/RootComponents/ExplorerContainer.test.tsx

@@ -0,0 +1,183 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import Explorer from "../Explorer/Explorer";
+import { useCarousel } from "../hooks/useCarousel";
+import { useInteractive } from "../Metrics/useMetricPhases";
+import ExplorerContainer from "./ExplorerContainer";
+
+jest.mock("../Explorer/Controls/Dialog", () => ({
+  Dialog: () => <div data-testid="mock-dialog">Dialog</div>,
+}));
+
+jest.mock("../Explorer/Menus/CommandBar/CommandBarComponentAdapter", () => ({
+  CommandBar: ({ container }: { container: Explorer }) => (
+    <div data-testid="mock-command-bar">CommandBar - {container ? "with explorer" : "no explorer"}</div>
+  ),
+}));
+
+jest.mock("../Explorer/Menus/NotificationConsole/NotificationConsoleComponent", () => ({
+  NotificationConsole: () => <div data-testid="mock-notification-console">NotificationConsole</div>,
+}));
+
+jest.mock("../Explorer/Panes/PanelContainerComponent", () => ({
+  SidePanel: () => <div data-testid="mock-side-panel">SidePanel</div>,
+}));
+
+jest.mock("../Explorer/QueryCopilot/CopilotCarousel", () => ({
+  QueryCopilotCarousel: ({ isOpen, explorer }: { isOpen: boolean; explorer: Explorer }) => (
+    <div data-testid="mock-copilot-carousel">
+      CopilotCarousel - {isOpen ? "open" : "closed"} - {explorer ? "with explorer" : "no explorer"}
+    </div>
+  ),
+}));
+
+jest.mock("../Explorer/Quickstart/QuickstartCarousel", () => ({
+  QuickstartCarousel: ({ isOpen }: { isOpen: boolean }) => (
+    <div data-testid="mock-quickstart-carousel">QuickstartCarousel - {isOpen ? "open" : "closed"}</div>
+  ),
+}));
+
+jest.mock("../Explorer/Quickstart/Tutorials/MongoQuickstartTutorial", () => ({
+  MongoQuickstartTutorial: () => <div data-testid="mock-mongo-tutorial">MongoQuickstartTutorial</div>,
+}));
+
+jest.mock("../Explorer/Quickstart/Tutorials/SQLQuickstartTutorial", () => ({
+  SQLQuickstartTutorial: () => <div data-testid="mock-sql-tutorial">SQLQuickstartTutorial</div>,
+}));
+
+jest.mock("../Explorer/Sidebar", () => ({
+  SidebarContainer: ({ explorer }: { explorer: Explorer }) => (
+    <div data-testid="mock-sidebar-container">SidebarContainer - {explorer ? "with explorer" : "no explorer"}</div>
+  ),
+}));
+
+jest.mock("../hooks/useCarousel", () => ({
+  useCarousel: jest.fn((selector) => {
+    if (selector.toString().includes("shouldOpen")) {
+      return true;
+    }
+    if (selector.toString().includes("showCopilotCarousel")) {
+      return false;
+    }
+    return false;
+  }),
+}));
+
+jest.mock("../Metrics/useMetricPhases", () => ({
+  useInteractive: jest.fn(),
+}));
+
+jest.mock("../Metrics/MetricEvents", () => ({
+  __esModule: true,
+  default: {
+    ApplicationLoad: "ApplicationLoad",
+  },
+}));
+
+describe("ExplorerContainer", () => {
+  let mockExplorer: Explorer;
+
+  beforeEach(() => {
+    mockExplorer = {
+      id: "test-explorer",
+      name: "Test Explorer",
+    } as unknown as Explorer;
+
+    jest.clearAllMocks();
+  });
+
+  test("should render explorer container with all components", () => {
+    const { container } = render(<ExplorerContainer explorer={mockExplorer} />);
+
+    const mainContainer = container.querySelector('[data-test="DataExplorerRoot"]');
+    expect(mainContainer).toBeInTheDocument();
+    expect(mainContainer).toHaveClass("flexContainer");
+
+    expect(screen.getByTestId("mock-command-bar")).toBeInTheDocument();
+    expect(screen.getByTestId("mock-sidebar-container")).toBeInTheDocument();
+    expect(screen.getByTestId("mock-notification-console")).toBeInTheDocument();
+    expect(screen.getByTestId("mock-side-panel")).toBeInTheDocument();
+    expect(screen.getByTestId("mock-dialog")).toBeInTheDocument();
+    expect(screen.getByTestId("mock-quickstart-carousel")).toBeInTheDocument();
+    expect(screen.getByTestId("mock-sql-tutorial")).toBeInTheDocument();
+    expect(screen.getByTestId("mock-mongo-tutorial")).toBeInTheDocument();
+    expect(screen.getByTestId("mock-copilot-carousel")).toBeInTheDocument();
+  });
+
+  test("should pass explorer to components that need it", () => {
+    render(<ExplorerContainer explorer={mockExplorer} />);
+
+    expect(screen.getByText("CommandBar - with explorer")).toBeInTheDocument();
+    expect(screen.getByText("SidebarContainer - with explorer")).toBeInTheDocument();
+    expect(screen.getByText("CopilotCarousel - closed - with explorer")).toBeInTheDocument();
+  });
+
+  test("should have correct DOM structure", () => {
+    const { container } = render(<ExplorerContainer explorer={mockExplorer} />);
+
+    const mainContainer = container.querySelector('[data-test="DataExplorerRoot"]');
+    expect(mainContainer).toBeInTheDocument();
+    expect(mainContainer).toHaveAttribute("aria-hidden", "false");
+
+    const divExplorer = container.querySelector("#divExplorer");
+    expect(divExplorer).toBeInTheDocument();
+    expect(divExplorer).toHaveClass("flexContainer", "hideOverflows");
+
+    const freeTierBubble = container.querySelector("#freeTierTeachingBubble");
+    expect(freeTierBubble).toBeInTheDocument();
+
+    const notificationContainer = container.querySelector("#explorerNotificationConsole");
+    expect(notificationContainer).toBeInTheDocument();
+    expect(notificationContainer).toHaveClass("dataExplorerErrorConsoleContainer");
+    expect(notificationContainer).toHaveAttribute("role", "contentinfo");
+    expect(notificationContainer).toHaveAttribute("aria-label", "Notification console");
+  });
+
+  test("should apply correct inline styles", () => {
+    const { container } = render(<ExplorerContainer explorer={mockExplorer} />);
+
+    const mainContainer = container.querySelector('[data-test="DataExplorerRoot"]');
+    expect(mainContainer).toHaveStyle({
+      flex: "1",
+      display: "flex",
+      flexDirection: "column",
+      backgroundColor: "var(--colorNeutralBackground1)",
+      color: "var(--colorNeutralForeground1)",
+    });
+
+    const divExplorer = container.querySelector("#divExplorer");
+    expect(divExplorer).toHaveStyle({
+      flex: "1",
+      display: "flex",
+      flexDirection: "column",
+    });
+  });
+
+  test("should handle carousel states correctly", () => {
+    const mockUseCarousel = jest.mocked(useCarousel);
+
+    mockUseCarousel.mockImplementation((selector: { toString: () => string | string[] }) => {
+      if (selector.toString().includes("shouldOpen")) {
+        return false;
+      }
+      if (selector.toString().includes("showCopilotCarousel")) {
+        return true;
+      }
+      return false;
+    });
+
+    render(<ExplorerContainer explorer={mockExplorer} />);
+
+    expect(screen.getByText("QuickstartCarousel - closed")).toBeInTheDocument();
+    expect(screen.getByText("CopilotCarousel - open - with explorer")).toBeInTheDocument();
+  });
+
+  test("should call useInteractive hook with correct metric", () => {
+    const mockUseInteractive = jest.mocked(useInteractive);
+
+    render(<ExplorerContainer explorer={mockExplorer} />);
+
+    expect(mockUseInteractive).toHaveBeenCalledWith("ApplicationLoad");
+  });
+});

src/RootComponents/ExplorerContainer.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { Dialog } from "../Explorer/Controls/Dialog";
+import Explorer from "../Explorer/Explorer";
+import { CommandBar } from "../Explorer/Menus/CommandBar/CommandBarComponentAdapter";
+import { NotificationConsole } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
+import { SidePanel } from "../Explorer/Panes/PanelContainerComponent";
+import { QueryCopilotCarousel } from "../Explorer/QueryCopilot/CopilotCarousel";
+import { QuickstartCarousel } from "../Explorer/Quickstart/QuickstartCarousel";
+import { MongoQuickstartTutorial } from "../Explorer/Quickstart/Tutorials/MongoQuickstartTutorial";
+import { SQLQuickstartTutorial } from "../Explorer/Quickstart/Tutorials/SQLQuickstartTutorial";
+import { SidebarContainer } from "../Explorer/Sidebar";
+import { useCarousel } from "../hooks/useCarousel";
+import MetricScenario from "../Metrics/MetricEvents";
+import { useInteractive } from "../Metrics/useMetricPhases";
+
+const ExplorerContainer: React.FC<{ explorer: Explorer }> = ({ explorer }) => {
+  const isCarouselOpen = useCarousel((state) => state.shouldOpen);
+  const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
+  useInteractive(MetricScenario.ApplicationLoad);
+
+  return (
+    <div
+      className="flexContainer"
+      style={{
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "var(--colorNeutralBackground1)",
+        color: "var(--colorNeutralForeground1)",
+      }}
+      aria-hidden="false"
+      data-test="DataExplorerRoot"
+    >
+      <div
+        id="divExplorer"
+        className="flexContainer hideOverflows"
+        style={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          backgroundColor: "var(--colorNeutralBackground1)",
+          color: "var(--colorNeutralForeground1)",
+        }}
+      >
+        <div id="freeTierTeachingBubble"> </div>
+        <CommandBar container={explorer} />
+        <SidebarContainer explorer={explorer} />
+        <div
+          className="dataExplorerErrorConsoleContainer"
+          role="contentinfo"
+          aria-label="Notification console"
+          id="explorerNotificationConsole"
+          style={{
+            backgroundColor: "var(--colorNeutralBackground1)",
+            color: "var(--colorNeutralForeground1)",
+          }}
+        >
+          <NotificationConsole />
+        </div>
+      </div>
+      <SidePanel />
+      <Dialog />
+      {<QuickstartCarousel isOpen={isCarouselOpen} />}
+      {<SQLQuickstartTutorial />}
+      {<MongoQuickstartTutorial />}
+      {<QueryCopilotCarousel isOpen={isCopilotCarouselOpen} explorer={explorer} />}
+    </div>
+  );
+};
+
+export default ExplorerContainer;

src/RootComponents/LoadingExplorer.test.tsx

@@ -0,0 +1,71 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import LoadingExplorer from "./LoadingExplorer";
+
+jest.mock("../../images/HdeConnectCosmosDB.svg", () => "test-hde-connect-image.svg");
+
+jest.mock("@fluentui/react-components", () => ({
+  makeStyles: jest.fn(() => () => ({
+    root: "mock-root-class",
+  })),
+}));
+
+describe("LoadingExplorer", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("should render loading explorer component", () => {
+    render(<LoadingExplorer />);
+
+    const container = screen.getByRole("alert");
+    expect(container).toBeInTheDocument();
+    expect(container).toHaveTextContent("Connecting...");
+  });
+
+  test("should display welcome title", () => {
+    render(<LoadingExplorer />);
+
+    const title = screen.getByText("Welcome to Azure Cosmos DB");
+    expect(title).toBeInTheDocument();
+    expect(title).toHaveAttribute("id", "explorerLoadingStatusTitle");
+  });
+
+  test("should display connecting status text", () => {
+    render(<LoadingExplorer />);
+
+    const statusText = screen.getByText("Connecting...");
+    expect(statusText).toBeInTheDocument();
+    expect(statusText).toHaveAttribute("id", "explorerLoadingStatusText");
+    expect(statusText).toHaveAttribute("role", "alert");
+  });
+
+  test("should render Azure Cosmos DB image", () => {
+    render(<LoadingExplorer />);
+
+    const image = screen.getByAltText("Azure Cosmos DB");
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAttribute("src", "test-hde-connect-image.svg");
+  });
+
+  test("should have correct class structure", () => {
+    render(<LoadingExplorer />);
+
+    const splashContainer = document.querySelector(".splashLoaderContainer");
+    expect(splashContainer).toBeInTheDocument();
+
+    const contentContainer = document.querySelector(".splashLoaderContentContainer");
+    expect(contentContainer).toBeInTheDocument();
+
+    const connectContent = document.querySelector(".connectExplorerContent");
+    expect(connectContent).toBeInTheDocument();
+  });
+
+  test("should apply CSS classes correctly", () => {
+    const { container } = render(<LoadingExplorer />);
+
+    const rootDiv = container.firstChild as HTMLElement;
+    expect(rootDiv).toHaveClass("mock-root-class");
+  });
+});

src/RootComponents/LoadingExplorer.tsx

@@ -0,0 +1,36 @@
+import { makeStyles } from "@fluentui/react-components";
+import React from "react";
+import hdeConnectImage from "../../images/HdeConnectCosmosDB.svg";
+
+const useStyles = makeStyles({
+  root: {
+    height: "100vh",
+    width: "100vw",
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
+  },
+});
+
+function LoadingExplorer(): JSX.Element {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.root}>
+      <div className="splashLoaderContainer">
+        <div className="splashLoaderContentContainer">
+          <p className="connectExplorerContent">
+            <img src={hdeConnectImage} alt="Azure Cosmos DB" />
+          </p>
+          <p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
+            Welcome to Azure Cosmos DB
+          </p>
+          <p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
+            Connecting...
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default LoadingExplorer;

src/RootComponents/Root.test.tsx

@@ -0,0 +1,107 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import Root from "./Root";
+
+jest.mock("../Explorer/ErrorBoundary", () => ({
+  ErrorBoundary: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="mock-error-boundary">{children}</div>
+  ),
+}));
+
+jest.mock("@fluentui/react-components", () => ({
+  FluentProvider: ({ children, theme }: { children: React.ReactNode; theme: { colorNeutralBackground1: string } }) => (
+    <div
+      data-testid="mock-fluent-provider"
+      data-theme={theme.colorNeutralBackground1 === "dark" ? "webDarkTheme" : "webLightTheme"}
+    >
+      {children}
+    </div>
+  ),
+  webLightTheme: { colorNeutralBackground1: "light" },
+  webDarkTheme: { colorNeutralBackground1: "dark" },
+}));
+
+jest.mock("./App", () => ({
+  __esModule: true,
+  default: () => <div data-testid="mock-app">App</div>,
+}));
+
+const createMockStore = (isDarkMode: boolean = false) => ({
+  getState: jest.fn(() => ({ isDarkMode })),
+  subscribe: jest.fn(() => jest.fn()),
+});
+
+const mockThemeStore = createMockStore(false);
+
+jest.mock("../hooks/useTheme", () => ({
+  get useThemeStore() {
+    return mockThemeStore;
+  },
+}));
+
+describe("Root", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("should render Root component with all child components", () => {
+    render(<Root />);
+
+    expect(screen.getByTestId("mock-error-boundary")).toBeInTheDocument();
+    expect(screen.getByTestId("mock-fluent-provider")).toBeInTheDocument();
+    expect(screen.getByTestId("mock-app")).toBeInTheDocument();
+  });
+
+  test("should have correct component hierarchy", () => {
+    render(<Root />);
+
+    const errorBoundary = screen.getByTestId("mock-error-boundary");
+    const fluentProvider = screen.getByTestId("mock-fluent-provider");
+    const app = screen.getByTestId("mock-app");
+
+    expect(errorBoundary).toContainElement(fluentProvider);
+    expect(fluentProvider).toContainElement(app);
+  });
+
+  test("should subscribe to theme changes on mount", () => {
+    render(<Root />);
+
+    expect(mockThemeStore.subscribe).toHaveBeenCalled();
+    expect(mockThemeStore.subscribe).toHaveBeenCalledWith(expect.any(Function));
+  });
+
+  test("should get initial theme state", () => {
+    render(<Root />);
+
+    expect(mockThemeStore.getState).toHaveBeenCalled();
+  });
+
+  test("should handle component unmounting", () => {
+    const mockUnsubscribe = jest.fn();
+    mockThemeStore.subscribe.mockReturnValue(mockUnsubscribe);
+
+    const { unmount } = render(<Root />);
+
+    unmount();
+
+    expect(mockUnsubscribe).toHaveBeenCalled();
+  });
+
+  test("should call getState to initialize theme", () => {
+    render(<Root />);
+
+    expect(mockThemeStore.getState).toHaveBeenCalledTimes(1);
+  });
+
+  test("should handle theme subscription properly", () => {
+    render(<Root />);
+
+    expect(mockThemeStore.subscribe).toHaveBeenCalledTimes(1);
+    expect(mockThemeStore.getState).toHaveBeenCalled();
+  });
+
+  test("should render without errors", () => {
+    expect(() => render(<Root />)).not.toThrow();
+  });
+});

src/RootComponents/Root.tsx

@@ -0,0 +1,28 @@
+import { FluentProvider, webDarkTheme, webLightTheme } from "@fluentui/react-components";
+import React from "react";
+import { ErrorBoundary } from "../Explorer/ErrorBoundary";
+import { useThemeStore } from "../hooks/useTheme";
+import App from "./App";
+
+const Root: React.FC = () => {
+  // Use React state to track isDarkMode and subscribe to changes
+  const [isDarkMode, setIsDarkMode] = React.useState(useThemeStore.getState().isDarkMode);
+  const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
+
+  // Subscribe to theme changes
+  React.useEffect(() => {
+    return useThemeStore.subscribe((state) => {
+      setIsDarkMode(state.isDarkMode);
+    });
+  }, []);
+
+  return (
+    <ErrorBoundary>
+      <FluentProvider theme={currentTheme}>
+        <App />
+      </FluentProvider>
+    </ErrorBoundary>
+  );
+};
+
+export default Root;

test/sql/indexAdvisor.spec.ts

@@ -1,148 +0,0 @@
-import { expect, test, type Page } from "@playwright/test";
-
-import { DataExplorer, TestAccount } from "../fx";
-import { createTestSQLContainer, TestContainerContext } from "../testData";
-
-// Test container context for setup and cleanup
-let testContainer: TestContainerContext;
-let DATABASE_ID: string;
-let CONTAINER_ID: string;
-
-// Set up test database and container with data before all tests
-test.beforeAll(async () => {
-  testContainer = await createTestSQLContainer(true);
-  DATABASE_ID = testContainer.database.id;
-  CONTAINER_ID = testContainer.container.id;
-});
-
-// Clean up test database after all tests
-test.afterAll(async () => {
-  if (testContainer) {
-    await testContainer.dispose();
-  }
-});
-
-// Helper function to set up query tab and navigate to Index Advisor
-async function setupIndexAdvisorTab(page: Page, customQuery?: string) {
-
-  const explorer = await DataExplorer.open(page, TestAccount.SQL);
-  const databaseNode = await explorer.waitForNode(DATABASE_ID);
-  await databaseNode.expand();
-  await page.waitForTimeout(2000);
-
-  const containerNode = await explorer.waitForNode(`${DATABASE_ID}/${CONTAINER_ID}`);
-  await containerNode.openContextMenu();
-  await containerNode.contextMenuItem("New SQL Query").click();
-  await page.waitForTimeout(2000);
-
-  const queryTab = explorer.queryTab("tab0");
-  await queryTab.editor().locator.waitFor({ timeout: 30 * 1000 });
-  await queryTab.editor().locator.click();
-
-  if (customQuery) {
-    // Clear the default query and type the custom query
-    await page.keyboard.press("Control+A");
-    await page.waitForTimeout(100);
-    await page.keyboard.type(customQuery);
-    await page.waitForTimeout(500);
-  }
-
-  const executeQueryButton = explorer.commandBarButton("Execute Query");
-  await executeQueryButton.click();
-  await expect(queryTab.resultsEditor.locator).toBeAttached({ timeout: 60 * 1000 });
-
-  const indexAdvisorTab = queryTab.resultsView.getByTestId("QueryTab/ResultsPane/ResultsView/IndexAdvisorTab");
-  await indexAdvisorTab.click();
-  await page.waitForTimeout(2000);
-
-  return { explorer, queryTab, indexAdvisorTab };
-}
-
-test("Index Advisor tab loads without errors", async ({ page }) => {
-  const { indexAdvisorTab } = await setupIndexAdvisorTab(page);
-  await expect(indexAdvisorTab).toHaveAttribute("aria-selected", "true");
-});
-
-test("Verify UI sections are collapsible", async ({ page }) => {
-  const { explorer } = await setupIndexAdvisorTab(page);
-
-  // Verify both section headers exist
-  const includedHeader = explorer.frame.getByText("Included in Current Policy", { exact: true });
-  const notIncludedHeader = explorer.frame.getByText("Not Included in Current Policy", { exact: true });
-  
-  await expect(includedHeader).toBeVisible();
-  await expect(notIncludedHeader).toBeVisible();
-
-  // Test collapsibility by checking if chevron/arrow icon changes state
-  // Both sections should be expandable/collapsible regardless of content
-  await includedHeader.click();
-  await page.waitForTimeout(300);
-  await includedHeader.click();
-  await page.waitForTimeout(300);
-
-  await notIncludedHeader.click();
-  await page.waitForTimeout(300);
-  await notIncludedHeader.click();
-  await page.waitForTimeout(300);
-});
-
-test("Verify SDK response structure - Case 1: Empty response", async ({ page }) => {
-  const { explorer } = await setupIndexAdvisorTab(page);
-
-  // Verify both section headers still exist even with no data
-  await expect(explorer.frame.getByText("Included in Current Policy", { exact: true })).toBeVisible();
-  await expect(explorer.frame.getByText("Not Included in Current Policy", { exact: true })).toBeVisible();
-
-  // Verify table headers
-  const table = explorer.frame.locator("table");
-  await expect(table.getByText("Index", { exact: true })).toBeVisible();
-  await expect(table.getByText("Estimated Impact", { exact: true })).toBeVisible();
-
-  // Verify "Update Indexing Policy" button is NOT visible when there are no potential indexes
-  const updateButton = explorer.frame.getByRole("button", { name: /Update Indexing Policy/i });
-  await expect(updateButton).not.toBeVisible();
-});
-
-test("Verify index suggestions and apply potential index", async ({ page }) => {
-  const customQuery = 'SELECT * FROM c WHERE c.partitionKey = "partition_1" ORDER BY c.randomData';
-  const { explorer } = await setupIndexAdvisorTab(page, customQuery);
-
-  // Wait for Index Advisor to process the query
-  await page.waitForTimeout(2000);
-
-  // Verify "Not Included in Current Policy" section has suggestions
-  const notIncludedHeader = explorer.frame.getByText("Not Included in Current Policy", { exact: true });
-  await expect(notIncludedHeader).toBeVisible();
-
-  // Find the checkbox for the suggested composite index
-  // The composite index should be /partitionKey ASC, /randomData ASC
-  const checkboxes = explorer.frame.locator('input[type="checkbox"]');
-  const checkboxCount = await checkboxes.count();
-  
-  // Should have at least one checkbox for the potential index
-  expect(checkboxCount).toBeGreaterThan(0);
-
-  // Select the first checkbox (the high-impact composite index)
-  await checkboxes.first().check();
-  await page.waitForTimeout(500);
-
-  // Verify "Update Indexing Policy" button becomes visible
-  const updateButton = explorer.frame.getByRole("button", { name: /Update Indexing Policy/i });
-  await expect(updateButton).toBeVisible();
-
-  // Click the "Update Indexing Policy" button
-  await updateButton.click();
-  await page.waitForTimeout(1000);
-
-  // Verify success message appears
-  const successMessage = explorer.frame.getByText(/Your indexing policy has been updated with the new included paths/i);
-  await expect(successMessage).toBeVisible();
-
-  // Verify the message mentions reviewing changes in Scale & Settings
-  const reviewMessage = explorer.frame.getByText(/You may review the changes in Scale & Settings/i);
-  await expect(reviewMessage).toBeVisible();
-
-  // Verify the checkmark icon is shown
-  const checkmarkIcon = explorer.frame.locator('[data-icon-name="CheckMark"]');
-  await expect(checkmarkIcon).toBeVisible();
-});