Fix test import inconsistency to match actual usage pattern

Co-authored-by: BChoudhury-ms <201893606+BChoudhury-ms@users.noreply.github.com>

src/Common/ErrorHandlingUtils.ts

@@ -7,27 +7,16 @@ import { HttpStatusCodes } from "./Constants";
 import { logError } from "./Logger";
 import { sendMessage } from "./MessageHandler";
 
-export interface HandleErrorOptions {
+export const handleError = (error: string | ARMError | Error, area: string, consoleErrorPrefix?: string): void => {
-  /** Optional redacted error to use for telemetry logging instead of the original error */
-  redactedError?: string | ARMError | Error;
-}
-
-export const handleError = (
-  error: string | ARMError | Error,
-  area: string,
-  consoleErrorPrefix?: string,
-  options?: HandleErrorOptions,
-): void => {
   const errorMessage = getErrorMessage(error);
   const errorCode = error instanceof ARMError ? error.code : undefined;
 
-  // logs error to data explorer console (always shows original, non-redacted message)
+  // logs error to data explorer console
   const consoleErrorMessage = consoleErrorPrefix ? `${consoleErrorPrefix}:\n ${errorMessage}` : errorMessage;
   logConsoleError(consoleErrorMessage);
 
-  // logs error to both app insight and kusto (use redacted message if provided)
+  // logs error to both app insight and kusto
-  const telemetryErrorMessage = options?.redactedError ? getErrorMessage(options.redactedError) : errorMessage;
+  logError(errorMessage, area, errorCode);
-  logError(telemetryErrorMessage, area, errorCode);
 
   // checks for errors caused by firewall and sends them to portal to handle
   sendNotificationForError(errorMessage, errorCode);

src/Common/dataAccess/deleteDocument.ts

@@ -44,8 +44,7 @@ export const deleteDocuments = async (
   documentIds: DocumentId[],
   abortSignal: AbortSignal,
 ): Promise<IBulkDeleteResult[]> => {
-  const totalCount = documentIds.length;
+  const clearMessage = logConsoleProgress(`Deleting ${documentIds.length} ${getEntityName(true)}`);
-  const clearMessage = logConsoleProgress(`Deleting ${totalCount} ${getEntityName(true)}`);
   try {
     const v2Container = await client().database(collection.databaseId).container(collection.id());
 
@@ -84,7 +83,11 @@ export const deleteDocuments = async (
     const flatAllResult = Array.prototype.concat.apply([], allResult);
     return flatAllResult;
   } catch (error) {
-    handleError(error, "DeleteDocuments", `Error while deleting ${totalCount} ${getEntityName(totalCount > 1)}`);
+    handleError(
+      error,
+      "DeleteDocuments",
+      `Error while deleting ${documentIds.length} ${getEntityName(documentIds.length > 1)}`,
+    );
     throw error;
   } finally {
     clearMessage();

src/Common/dataAccess/queryDocumentsPage.test.ts

@@ -1,171 +0,0 @@
-import { redactSyntaxErrorMessage } from "./queryDocumentsPage";
-
-/* Typical error to redact looks like this (the message property contains a JSON string with nested structure):
-{
-  "message": "{\"code\":\"BadRequest\",\"message\":\"{\\\"errors\\\":[{\\\"severity\\\":\\\"Error\\\",\\\"location\\\":{\\\"start\\\":0,\\\"end\\\":5},\\\"code\\\":\\\"SC1001\\\",\\\"message\\\":\\\"Syntax error, incorrect syntax near 'Crazy'.\\\"}]}\\r\\nActivityId: d5424e10-51bd-46f7-9aec-7b40bed36f17, Windows/10.0.20348 cosmos-netstandard-sdk/3.18.0\"}"
-}
-*/
-
-// Helper to create the nested error structure that matches what the SDK returns
-const createNestedError = (
-  errors: Array<{ severity?: string; location?: { start: number; end: number }; code: string; message: string }>,
-  activityId: string = "test-activity-id",
-): { message: string } => {
-  const innerErrorsJson = JSON.stringify({ errors });
-  const innerMessage = `${innerErrorsJson}\r\n${activityId}`;
-  const outerJson = JSON.stringify({ code: "BadRequest", message: innerMessage });
-  return { message: outerJson };
-};
-
-// Helper to parse the redacted result
-const parseRedactedResult = (result: { message: string }) => {
-  const outerParsed = JSON.parse(result.message);
-  const [innerErrorsJson, activityIdPart] = outerParsed.message.split("\r\n");
-  const innerErrors = JSON.parse(innerErrorsJson);
-  return { outerParsed, innerErrors, activityIdPart };
-};
-
-describe("redactSyntaxErrorMessage", () => {
-  it("should redact SC1001 error message", () => {
-    const error = createNestedError(
-      [
-        {
-          severity: "Error",
-          location: { start: 0, end: 5 },
-          code: "SC1001",
-          message: "Syntax error, incorrect syntax near 'Crazy'.",
-        },
-      ],
-      "ActivityId: d5424e10-51bd-46f7-9aec-7b40bed36f17",
-    );
-
-    const result = redactSyntaxErrorMessage(error) as { message: string };
-    const { outerParsed, innerErrors, activityIdPart } = parseRedactedResult(result);
-
-    expect(outerParsed.code).toBe("BadRequest");
-    expect(innerErrors.errors[0].message).toBe("__REDACTED__");
-    expect(activityIdPart).toContain("ActivityId: d5424e10-51bd-46f7-9aec-7b40bed36f17");
-  });
-
-  it("should redact SC2001 error message", () => {
-    const error = createNestedError(
-      [
-        {
-          severity: "Error",
-          location: { start: 0, end: 10 },
-          code: "SC2001",
-          message: "Some sensitive syntax error message.",
-        },
-      ],
-      "ActivityId: abc123",
-    );
-
-    const result = redactSyntaxErrorMessage(error) as { message: string };
-    const { outerParsed, innerErrors, activityIdPart } = parseRedactedResult(result);
-
-    expect(outerParsed.code).toBe("BadRequest");
-    expect(innerErrors.errors[0].message).toBe("__REDACTED__");
-    expect(activityIdPart).toContain("ActivityId: abc123");
-  });
-
-  it("should redact multiple errors with SC1001 and SC2001 codes", () => {
-    const error = createNestedError(
-      [
-        { severity: "Error", code: "SC1001", message: "First error" },
-        { severity: "Error", code: "SC2001", message: "Second error" },
-      ],
-      "ActivityId: xyz",
-    );
-
-    const result = redactSyntaxErrorMessage(error) as { message: string };
-    const { innerErrors } = parseRedactedResult(result);
-
-    expect(innerErrors.errors[0].message).toBe("__REDACTED__");
-    expect(innerErrors.errors[1].message).toBe("__REDACTED__");
-  });
-
-  it("should not redact errors with other codes", () => {
-    const error = createNestedError(
-      [{ severity: "Error", code: "SC9999", message: "This should not be redacted." }],
-      "ActivityId: test123",
-    );
-
-    const result = redactSyntaxErrorMessage(error);
-
-    expect(result).toBe(error); // Should return original error unchanged
-  });
-
-  it("should not modify non-BadRequest errors", () => {
-    const innerMessage = JSON.stringify({ errors: [{ code: "SC1001", message: "Should not be redacted" }] });
-    const error = {
-      message: JSON.stringify({ code: "NotFound", message: innerMessage }),
-    };
-
-    const result = redactSyntaxErrorMessage(error);
-
-    expect(result).toBe(error);
-  });
-
-  it("should handle errors without message property", () => {
-    const error = { code: "BadRequest" };
-
-    const result = redactSyntaxErrorMessage(error);
-
-    expect(result).toBe(error);
-  });
-
-  it("should handle non-object errors", () => {
-    const stringError = "Simple string error";
-    const nullError: null = null;
-    const undefinedError: undefined = undefined;
-
-    expect(redactSyntaxErrorMessage(stringError)).toBe(stringError);
-    expect(redactSyntaxErrorMessage(nullError)).toBe(nullError);
-    expect(redactSyntaxErrorMessage(undefinedError)).toBe(undefinedError);
-  });
-
-  it("should handle malformed JSON in message", () => {
-    const error = {
-      message: "not valid json",
-    };
-
-    const result = redactSyntaxErrorMessage(error);
-
-    expect(result).toBe(error);
-  });
-
-  it("should handle message without ActivityId suffix", () => {
-    const innerErrorsJson = JSON.stringify({
-      errors: [{ severity: "Error", code: "SC1001", message: "Syntax error near something." }],
-    });
-    const error = {
-      message: JSON.stringify({ code: "BadRequest", message: innerErrorsJson + "\r\n" }),
-    };
-
-    const result = redactSyntaxErrorMessage(error) as { message: string };
-    const { innerErrors } = parseRedactedResult(result);
-
-    expect(innerErrors.errors[0].message).toBe("__REDACTED__");
-  });
-
-  it("should preserve other error properties", () => {
-    const baseError = createNestedError([{ code: "SC1001", message: "Error" }], "ActivityId: test");
-    const error = {
-      ...baseError,
-      statusCode: 400,
-      additionalInfo: "extra data",
-    };
-
-    const result = redactSyntaxErrorMessage(error) as {
-      message: string;
-      statusCode: number;
-      additionalInfo: string;
-    };
-
-    expect(result.statusCode).toBe(400);
-    expect(result.additionalInfo).toBe("extra data");
-
-    const { innerErrors } = parseRedactedResult(result);
-    expect(innerErrors.errors[0].message).toBe("__REDACTED__");
-  });
-});

src/Common/dataAccess/queryDocumentsPage.ts

@@ -4,51 +4,6 @@ import { getEntityName } from "../DocumentUtility";
 import { handleError } from "../ErrorHandlingUtils";
 import { MinimalQueryIterator, nextPage } from "../IteratorUtilities";
 
-// Redact sensitive information from BadRequest errors with specific codes
-export const redactSyntaxErrorMessage = (error: unknown): unknown => {
-  const codesToRedact = ["SC1001", "SC2001"];
-
-  try {
-    // Handle error objects with a message property
-    if (error && typeof error === "object" && "message" in error) {
-      const errorObj = error as { code?: string; message?: string };
-      if (typeof errorObj.message === "string") {
-        // Parse the inner JSON from the message
-        const innerJson = JSON.parse(errorObj.message);
-        if (innerJson.code === "BadRequest" && typeof innerJson.message === "string") {
-          const [innerErrorsJson, activityIdPart] = innerJson.message.split("\r\n");
-          const innerErrorsObj = JSON.parse(innerErrorsJson);
-          if (Array.isArray(innerErrorsObj.errors)) {
-            let modified = false;
-            innerErrorsObj.errors = innerErrorsObj.errors.map((err: { code?: string; message?: string }) => {
-              if (err.code && codesToRedact.includes(err.code)) {
-                modified = true;
-                return { ...err, message: "__REDACTED__" };
-              }
-              return err;
-            });
-
-            if (modified) {
-              // Reconstruct the message with the redacted content
-              const redactedMessage = JSON.stringify(innerErrorsObj) + `\r\n${activityIdPart}`;
-              const redactedError = {
-                ...error,
-                message: JSON.stringify({ ...innerJson, message: redactedMessage }),
-                body: undefined as unknown, // Clear body to avoid sensitive data
-              };
-              return redactedError;
-            }
-          }
-        }
-      }
-    }
-  } catch {
-    // If parsing fails, return the original error
-  }
-
-  return error;
-};
-
 export const queryDocumentsPage = async (
   resourceName: string,
   documentsIterator: MinimalQueryIterator,
@@ -63,12 +18,7 @@ export const queryDocumentsPage = async (
     logConsoleInfo(`Successfully fetched ${itemCount} ${entityName} for container ${resourceName}`);
     return result;
   } catch (error) {
-    // Redact sensitive information for telemetry while showing original in console
+    handleError(error, "QueryDocumentsPage", `Failed to query ${entityName} for container ${resourceName}`);
-    const redactedError = redactSyntaxErrorMessage(error);
-
-    handleError(error, "QueryDocumentsPage", `Failed to query ${entityName} for container ${resourceName}`, {
-      redactedError: redactedError as Error,
-    });
     throw error;
   } finally {
     clearMessage();

src/Explorer/ContainerCopy/ContainerCopyPanel.tsx

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

src/Main.tsx

@@ -2,18 +2,9 @@
 import "./ReactDevTools";
 
 // CSS Dependencies
-import { initializeIcons, loadTheme, useTheme } from "@fluentui/react";
+import { initializeIcons } 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 "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,182 +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 } from "./Metrics/MetricScenarioProvider";
-import { MetricScenarioProvider, useMetricScenario } from "./Metrics/MetricScenarioProvider";
+import Root from "./RootComponents/Root";
-import { ApplicationMetricPhase } from "./Metrics/ScenarioConfig";
-import { useInteractive } from "./Metrics/useMetricPhases";
-import { appThemeFabric } from "./Platform/Fabric/FabricTheme";
 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(() => {
-    // Only start scenario after config is initialized to avoid race conditions
-    // with message handlers that depend on configContext.platform
-    if (config) {
-      startScenario(MetricScenario.ApplicationLoad);
-    }
-  }, [config, startScenario]);
-
-  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} />
-              <SidePanel />
-              <Dialog />
-            </>
-          ) : (
-            <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(
@@ -227,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/NotebookViewer/NotebookViewer.tsx

@@ -0,0 +1,88 @@
+import { initializeIcons } from "@fluentui/react";
+import "bootstrap/dist/css/bootstrap.css";
+import React from "react";
+import * as ReactDOM from "react-dom";
+import { configContext, initializeConfiguration } from "../ConfigContext";
+import { GalleryHeaderComponent } from "../Explorer/Controls/Header/GalleryHeaderComponent";
+import { GalleryTab } from "../Explorer/Controls/NotebookGallery/GalleryViewerComponent";
+import {
+  NotebookViewerComponent,
+  NotebookViewerComponentProps,
+} from "../Explorer/Controls/NotebookViewer/NotebookViewerComponent";
+import * as FileSystemUtil from "../Explorer/Notebook/FileSystemUtil";
+import { IGalleryItem, JunoClient } from "../Juno/JunoClient";
+import * as GalleryUtils from "../Utils/GalleryUtils";
+
+const onInit = async () => {
+  initializeIcons();
+  await initializeConfiguration();
+  const galleryViewerProps = GalleryUtils.getGalleryViewerProps(window.location.search);
+  const notebookViewerProps = GalleryUtils.getNotebookViewerProps(window.location.search);
+  let backNavigationText: string;
+  let onBackClick: () => void;
+  if (galleryViewerProps.selectedTab !== undefined) {
+    backNavigationText = GalleryUtils.getTabTitle(galleryViewerProps.selectedTab);
+    onBackClick = () =>
+      (window.location.href = `${configContext.hostedExplorerURL}gallery.html?tab=${
+        GalleryTab[galleryViewerProps.selectedTab]
+      }`);
+  }
+  const hideInputs = notebookViewerProps.hideInputs;
+
+  const notebookUrl = decodeURIComponent(notebookViewerProps.notebookUrl);
+
+  const galleryItemId = notebookViewerProps.galleryItemId;
+  let galleryItem: IGalleryItem;
+
+  if (galleryItemId) {
+    const junoClient = new JunoClient();
+    const galleryItemJunoResponse = await junoClient.getNotebookInfo(galleryItemId);
+    galleryItem = galleryItemJunoResponse.data;
+  }
+
+  // The main purpose of hiding the prompt is to hide everything when hiding inputs.
+  // It is generally not very useful to just hide the prompt.
+  const hidePrompts = hideInputs;
+
+  render(notebookUrl, backNavigationText, hideInputs, hidePrompts, galleryItem, onBackClick);
+};
+
+const render = (
+  notebookUrl: string,
+  backNavigationText: string,
+  hideInputs?: boolean,
+  hidePrompts?: boolean,
+  galleryItem?: IGalleryItem,
+  onBackClick?: () => void,
+) => {
+  const props: NotebookViewerComponentProps = {
+    junoClient: galleryItem ? new JunoClient() : undefined,
+    notebookUrl,
+    galleryItem,
+    backNavigationText,
+    hideInputs,
+    hidePrompts,
+    onBackClick: onBackClick,
+    onTagClick: undefined,
+  };
+
+  if (galleryItem) {
+    document.title = FileSystemUtil.stripExtension(galleryItem.name, "ipynb");
+  }
+
+  const element = (
+    <>
+      <header>
+        <GalleryHeaderComponent />
+      </header>
+      <div style={{ marginLeft: 120, marginRight: 120 }}>
+        <NotebookViewerComponent {...props} />
+      </div>
+    </>
+  );
+
+  ReactDOM.render(element, document.getElementById("notebookContent"));
+};
+
+// Entry point
+window.addEventListener("load", onInit);

src/Platform/Hosted/extractFeatures.ts

@@ -94,7 +94,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     notebookBasePath: get("notebookbasepath"),
     notebookServerToken: get("notebookservertoken"),
     notebookServerUrl: get("notebookserverurl"),
-    sandboxNotebookOutputs: true,
+    sandboxNotebookOutputs: "true" === get("sandboxnotebookoutputs", "true"),
     selfServeType: get("selfservetype"),
     showMinRUSurvey: "true" === get("showminrusurvey"),
     ttl90Days: "true" === get("ttl90days"),

src/RootComponents/App.test.tsx

@@ -0,0 +1,314 @@
+import { loadTheme } from "@fluentui/react";
+import "@testing-library/jest-dom";
+import { render, screen, waitFor } from "@testing-library/react";
+import React from "react";
+import * as StyleConstants 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(() => {
+    mockStartScenario = jest.fn();
+    mockCompletePhase = jest.fn();
+
+    mockUseKnockoutExplorer = jest.mocked(useKnockoutExplorer);
+    mockUseConfig = jest.mocked(useConfig);
+    mockLoadTheme = jest.mocked(loadTheme);
+    mockUpdateStyles = jest.mocked(StyleConstants.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,94 @@
+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 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;

src/Utils/AuthorizationUtils.test.ts

@@ -27,7 +27,7 @@ describe("AuthorizationUtils", () => {
         enableKoResourceTree: false,
         enableThroughputBuckets: false,
         hostedDataExplorer: false,
-        sandboxNotebookOutputs: true,
+        sandboxNotebookOutputs: false,
         showMinRUSurvey: false,
         ttl90Days: false,
         enableThroughputCap: false,