Initial plan

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/Contracts/DataExplorerMessagesContract.ts

@@ -46,10 +46,6 @@ export type DataExploreMessageV3 =
       params: {
         updateType: "created" | "deleted" | "settings";
       };
-    }
-  | {
-      type: FabricMessageTypes.RestoreContainer;
-      params: [];
     };
 export interface GetCosmosTokenMessageOptions {
   verb: "connect" | "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace";

src/Explorer/ContainerCopy/ContainerCopyPanel.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect } from "react";
+import { Dialog } from "../../Explorer/Controls/Dialog";
+import { SidePanel } from "../../Explorer/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/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobActionMenu.test.tsx

@@ -516,7 +516,7 @@ describe("CopyJobActionMenu", () => {
       expect(screen.getByText("Cancel")).toBeInTheDocument();
     });
 
-    it("should disable complete action when job is being updated", () => {
+    it("should handle complete action disabled state for online jobs", () => {
       const job = createMockJob({
         Status: CopyJobStatusType.InProgress,
         Mode: CopyJobMigrationType.Online,
@@ -530,34 +530,8 @@ describe("CopyJobActionMenu", () => {
       const completeButton = screen.getByText("Complete");
       fireEvent.click(completeButton);
 
-      // Simulate dialog confirmation to trigger state update
-      const [, , , onOkCallback] = mockShowOkCancelModalDialog.mock.calls[0];
-      onOkCallback();
-
       fireEvent.click(actionButton);
-      const completeButtonAfterClick = screen.getByText("Complete").closest("button");
+      expect(screen.getByText("Complete")).toBeInTheDocument();
-      expect(completeButtonAfterClick).toBeInTheDocument();
-      expect(completeButtonAfterClick).toHaveAttribute("aria-disabled", "true");
-    });
-
-    it("should disable complete action when any other action is being performed", () => {
-      const job = createMockJob({
-        Status: CopyJobStatusType.InProgress,
-        Mode: CopyJobMigrationType.Online,
-      });
-
-      render(<TestComponentWrapper job={job} />);
-
-      const actionButton = screen.getByRole("button", { name: "Actions" });
-      fireEvent.click(actionButton);
-
-      const pauseButton = screen.getByText("Pause");
-      fireEvent.click(pauseButton);
-      fireEvent.click(actionButton);
-
-      const completeButtonAfterClick = screen.getByText("Complete").closest("button");
-      expect(completeButtonAfterClick).toBeInTheDocument();
-      expect(completeButtonAfterClick).toHaveAttribute("aria-disabled", "true");
     });
   });
 

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobActionMenu.tsx

@@ -61,6 +61,7 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
 
   const getMenuItems = (): IContextualMenuProps["items"] => {
     const isThisJobUpdating = updatingJobAction?.jobName === job.Name;
+    const updatingAction = updatingJobAction?.action;
 
     const baseItems = [
       {
@@ -104,7 +105,7 @@ const CopyJobActionMenu: React.FC<CopyJobActionMenuProps> = ({ job, handleClick
           text: ContainerCopyMessages.MonitorJobs.Actions.complete,
           iconProps: { iconName: "CheckMark" },
           onClick: () => showActionConfirmationDialog(job, CopyJobActions.complete),
-          disabled: isThisJobUpdating,
+          disabled: isThisJobUpdating && updatingAction === CopyJobActions.complete,
         });
       }
       return filteredItems;

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobsList.test.tsx

@@ -11,17 +11,9 @@ jest.mock("../../Actions/CopyJobActions", () => ({
 
 jest.mock("./CopyJobColumns", () => ({
   getColumns: jest.fn(() => [
-    {
-      key: "LastUpdatedTime",
-      name: "Date & time",
-      fieldName: "LastUpdatedTime",
-      minWidth: 140,
-      maxWidth: 300,
-      isResizable: true,
-    },
     {
       key: "Name",
-      name: "Job name",
+      name: "Name",
       fieldName: "Name",
       minWidth: 140,
       maxWidth: 300,
@@ -173,165 +165,6 @@ describe("CopyJobsList", () => {
       expect(screen.getByTestId("action-menu-job-2")).toBeInTheDocument();
       expect(screen.getByTestId("action-menu-job-3")).toBeInTheDocument();
     });
-
-    it("renders filter TextField with data-test attribute", () => {
-      render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
-
-      const filterTextField = document.querySelector('[data-test="CopyJobsList/FilterTextField"]');
-      expect(filterTextField).toBeInTheDocument();
-    });
-
-    it("renders search TextField with correct placeholder", () => {
-      render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
-
-      const searchInput = screen.getByPlaceholderText("Search jobs...");
-      expect(searchInput).toBeInTheDocument();
-    });
-  });
-
-  describe("Filtering", () => {
-    it("filters jobs by Name when text is entered", async () => {
-      render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
-
-      const filterInput = screen.getByPlaceholderText("Search jobs...");
-      fireEvent.change(filterInput, { target: { value: "Job 1" } });
-
-      await waitFor(() => {
-        expect(screen.getByText("Test Job 1")).toBeInTheDocument();
-        expect(screen.queryByText("Test Job 2")).not.toBeInTheDocument();
-        expect(screen.queryByText("Test Job 3")).not.toBeInTheDocument();
-      });
-    });
-
-    it("filters jobs case-insensitively", async () => {
-      render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
-
-      const filterInput = screen.getByPlaceholderText("Search jobs...");
-      fireEvent.change(filterInput, { target: { value: "test job 1" } });
-
-      await waitFor(() => {
-        expect(screen.getByText("Test Job 1")).toBeInTheDocument();
-        expect(screen.queryByText("Test Job 2")).not.toBeInTheDocument();
-      });
-    });
-
-    it("shows all jobs when filter text is empty", async () => {
-      render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
-
-      const filterInput = screen.getByPlaceholderText("Search jobs...");
-      fireEvent.change(filterInput, { target: { value: "Job 1" } });
-
-      await waitFor(() => {
-        expect(screen.queryByText("Test Job 2")).not.toBeInTheDocument();
-      });
-
-      fireEvent.change(filterInput, { target: { value: "" } });
-
-      await waitFor(() => {
-        expect(screen.getByText("Test Job 1")).toBeInTheDocument();
-        expect(screen.getByText("Test Job 2")).toBeInTheDocument();
-        expect(screen.getByText("Test Job 3")).toBeInTheDocument();
-      });
-    });
-
-    it("filters jobs by Status across all columns", async () => {
-      render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
-
-      const filterInput = screen.getByPlaceholderText("Search jobs...");
-      fireEvent.change(filterInput, { target: { value: CopyJobStatusType.Running } });
-
-      await waitFor(() => {
-        expect(screen.getByText("Test Job 1")).toBeInTheDocument();
-        expect(screen.queryByText("Test Job 2")).not.toBeInTheDocument();
-        expect(screen.queryByText("Test Job 3")).not.toBeInTheDocument();
-      });
-    });
-
-    it("filters jobs by Mode across all columns", async () => {
-      render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
-
-      const filterInput = screen.getByPlaceholderText("Search jobs...");
-      fireEvent.change(filterInput, { target: { value: "Offline" } });
-
-      await waitFor(() => {
-        expect(screen.queryByText("Test Job 1")).not.toBeInTheDocument();
-        expect(screen.getByText("Test Job 2")).toBeInTheDocument();
-        expect(screen.queryByText("Test Job 3")).not.toBeInTheDocument();
-      });
-    });
-
-    it("shows no results when filter matches no jobs", async () => {
-      render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
-
-      const filterInput = screen.getByPlaceholderText("Search jobs...");
-      fireEvent.change(filterInput, { target: { value: "NonExistentJob" } });
-
-      await waitFor(() => {
-        expect(screen.queryByText("Test Job 1")).not.toBeInTheDocument();
-        expect(screen.queryByText("Test Job 2")).not.toBeInTheDocument();
-        expect(screen.queryByText("Test Job 3")).not.toBeInTheDocument();
-      });
-    });
-
-    it("filters by partial text match", async () => {
-      render(<CopyJobsList jobs={mockJobs} handleActionClick={mockHandleActionClick} />);
-
-      const filterInput = screen.getByPlaceholderText("Search jobs...");
-      fireEvent.change(filterInput, { target: { value: "Test" } });
-
-      await waitFor(() => {
-        expect(screen.getByText("Test Job 1")).toBeInTheDocument();
-        expect(screen.getByText("Test Job 2")).toBeInTheDocument();
-        expect(screen.getByText("Test Job 3")).toBeInTheDocument();
-      });
-    });
-
-    it("resets pagination when filter changes", async () => {
-      const manyJobs: CopyJobType[] = Array.from({ length: 25 }, (_, i) => ({
-        ...mockJobs[0],
-        ID: `job-${i + 1}`,
-        Name: `Test Job ${i + 1}`,
-      }));
-
-      render(<CopyJobsList jobs={manyJobs} handleActionClick={mockHandleActionClick} pageSize={10} />);
-
-      // Navigate to page 2
-      fireEvent.click(screen.getByLabelText("Go to next page"));
-
-      await waitFor(() => {
-        expect(screen.getByText("Showing 11 - 20 of 25 items")).toBeInTheDocument();
-      });
-
-      // Apply filter - should reset to page 1
-      const filterInput = screen.getByPlaceholderText("Search jobs...");
-      fireEvent.change(filterInput, { target: { value: "Job 1" } });
-
-      await waitFor(() => {
-        // Filtered results show from the beginning
-        expect(screen.getByText("Test Job 1")).toBeInTheDocument();
-      });
-    });
-
-    it("updates filtered count in pager", async () => {
-      const manyJobs: CopyJobType[] = Array.from({ length: 25 }, (_, i) => ({
-        ...mockJobs[0],
-        ID: `job-${i + 1}`,
-        Name: i < 5 ? `Alpha Job ${i + 1}` : `Beta Job ${i + 1}`,
-      }));
-
-      render(<CopyJobsList jobs={manyJobs} handleActionClick={mockHandleActionClick} pageSize={10} />);
-
-      expect(screen.getByText("Showing 1 - 10 of 25 items")).toBeInTheDocument();
-
-      const filterInput = screen.getByPlaceholderText("Search jobs...");
-      fireEvent.change(filterInput, { target: { value: "Alpha" } });
-
-      await waitFor(() => {
-        expect(screen.queryByText("Showing 1 - 10 of 25 items")).not.toBeInTheDocument();
-        // Pager should not be visible since filtered results (5) are less than page size (10)
-        expect(screen.queryByLabelText("Go to next page")).not.toBeInTheDocument();
-      });
-    });
   });
 
   describe("Pagination", () => {
@@ -509,7 +342,7 @@ describe("CopyJobsList", () => {
 
   describe("Component Props", () => {
     it("uses default page size when not provided", () => {
-      const manyJobs: CopyJobType[] = Array.from({ length: 20 }, (_, i) => ({
+      const manyJobs: CopyJobType[] = Array.from({ length: 12 }, (_, i) => ({
         ...mockJobs[0],
         ID: `job-${i + 1}`,
         Name: `Test Job ${i + 1}`,
@@ -518,7 +351,7 @@ describe("CopyJobsList", () => {
       render(<CopyJobsList jobs={manyJobs} handleActionClick={mockHandleActionClick} />);
 
       expect(screen.getByLabelText("Go to next page")).toBeInTheDocument();
-      expect(screen.getByText("Showing 1 - 15 of 20 items")).toBeInTheDocument();
+      expect(screen.getByText("Showing 1 - 10 of 12 items")).toBeInTheDocument();
     });
 
     it("passes correct props to getColumns function", async () => {
@@ -607,33 +440,7 @@ describe("CopyJobsList", () => {
         render(<CopyJobsList jobs={largeJobsList} handleActionClick={mockHandleActionClick} />);
       }).not.toThrow();
 
-      expect(screen.getByText("Showing 1 - 15 of 1000 items")).toBeInTheDocument();
+      expect(screen.getByText("Showing 1 - 10 of 1000 items")).toBeInTheDocument();
-    });
-
-    it("handles filtering with null or undefined values gracefully", async () => {
-      const jobsWithNullValues: CopyJobType[] = [
-        {
-          ...mockJobs[0],
-          ID: "job-with-values",
-          Name: "Valid Job",
-        },
-        {
-          ...mockJobs[1],
-          ID: "job-null-name",
-          Name: undefined as unknown as string,
-        },
-      ];
-
-      expect(() => {
-        render(<CopyJobsList jobs={jobsWithNullValues} handleActionClick={mockHandleActionClick} />);
-      }).not.toThrow();
-
-      const filterInput = screen.getByPlaceholderText("Search jobs...");
-      fireEvent.change(filterInput, { target: { value: "Valid" } });
-
-      await waitFor(() => {
-        expect(screen.getByText("Valid Job")).toBeInTheDocument();
-      });
     });
   });
 });

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobsList.tsx

@@ -12,9 +12,8 @@ import {
   Stack,
   Sticky,
   StickyPositionType,
-  TextField,
 } from "@fluentui/react";
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect } from "react";
 import Pager from "../../../../Common/Pager";
 import { useThemeStore } from "../../../../hooks/useTheme";
 import { getThemeTokens } from "../../../Theme/ThemeUtil";
@@ -31,15 +30,9 @@ interface CopyJobsListProps {
 const styles = {
   container: { height: "100%" } as React.CSSProperties,
   stackItem: { position: "relative", marginBottom: "20px" } as React.CSSProperties,
-  filterContainer: {
-    margin: "15px 5px",
-  },
 };
 
-const PAGE_SIZE = 15;
+const PAGE_SIZE = 10;
-
-// Columns to search across
-const searchableFields = ["Name", "Status", "LastUpdatedTime", "Mode"];
 
 const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pageSize = PAGE_SIZE }) => {
   const isDarkMode = useThemeStore((state) => state.isDarkMode);
@@ -48,23 +41,6 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
   const [sortedJobs, setSortedJobs] = React.useState<CopyJobType[]>(jobs);
   const [sortedColumnKey, setSortedColumnKey] = React.useState<string | undefined>(undefined);
   const [isSortedDescending, setIsSortedDescending] = React.useState<boolean>(false);
-  const [filterText, setFilterText] = React.useState<string>("");
-
-  const filteredJobs = useMemo(() => {
-    if (!filterText) {
-      return sortedJobs;
-    }
-    const lowerFilterText = filterText.toLowerCase();
-    return sortedJobs.filter((job: any) => {
-      return searchableFields.some((field) => {
-        const value = job[field];
-        if (value === undefined || value === null) {
-          return false;
-        }
-        return String(value).toLowerCase().includes(lowerFilterText);
-      });
-    });
-  }, [sortedJobs, filterText]);
 
   useEffect(() => {
     setSortedJobs(jobs);
@@ -88,15 +64,7 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
     setStartIndex(0);
   };
 
-  const sortableColumns: IColumn[] = getColumns(handleSort, handleActionClick, sortedColumnKey, isSortedDescending);
+  const columns: IColumn[] = getColumns(handleSort, handleActionClick, sortedColumnKey, isSortedDescending);
-
-  const handleFilterTextChange = (
-    _event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-    newValue?: string,
-  ) => {
-    setFilterText(newValue || "");
-    setStartIndex(0);
-  };
 
   const _handleRowClick = (job: CopyJobType) => {
     openCopyJobDetailsPanel(job);
@@ -113,25 +81,14 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
   return (
     <div style={styles.container}>
       <Stack verticalFill={true}>
-        <Stack.Item>
-          <div style={styles.filterContainer}>
-            <TextField
-              data-test="CopyJobsList/FilterTextField"
-              placeholder="Search jobs..."
-              ariaLabel="Search jobs"
-              value={filterText}
-              onChange={handleFilterTextChange}
-            />
-          </div>
-        </Stack.Item>
         <Stack.Item verticalFill={true} grow={1} shrink={1} style={styles.stackItem}>
           <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
             <ShimmeredDetailsList
               className="CopyJobListContainer"
               onRenderRow={_onRenderRow}
               checkboxVisibility={2}
-              columns={sortableColumns}
+              columns={columns}
-              items={filteredJobs.slice(startIndex, startIndex + pageSize)}
+              items={sortedJobs.slice(startIndex, startIndex + pageSize)}
               enableShimmer={false}
               constrainMode={ConstrainMode.unconstrained}
               layoutMode={DetailsListLayoutMode.justified}
@@ -160,12 +117,12 @@ const CopyJobsList: React.FC<CopyJobsListProps> = ({ jobs, handleActionClick, pa
             />
           </ScrollablePane>
         </Stack.Item>
-        {filteredJobs.length > pageSize && (
+        {sortedJobs.length > pageSize && (
           <Stack.Item>
             <Pager
               disabled={false}
               startIndex={startIndex}
-              totalCount={filteredJobs.length}
+              totalCount={sortedJobs.length}
               pageSize={pageSize}
               onLoadPage={(startIdx /* pageSize */) => {
                 setStartIndex(startIdx);

src/Explorer/ContainerCopy/containerCopyStyles.less

@@ -1,27 +1,5 @@
 @import "../../../less/Common/Constants.less";
 
-.themedTextFieldStyles() {
-  .ms-TextField {
-    .ms-TextField-fieldGroup {
-      background-color: var(--colorNeutralBackground1);
-      border-color: var(--colorNeutralStroke1);
-    }
-
-    .ms-TextField-field {
-      color: var(--colorNeutralForeground1);
-      background-color: var(--colorNeutralBackground1);
-
-      &::placeholder {
-        color: var(--colorNeutralForeground4);
-      }
-    }
-
-    .ms-Label {
-      color: var(--colorNeutralForeground1);
-    }
-  }
-}
-
 // Common theme-aware classes
 .themeText {
   color: var(--colorNeutralForeground1);
@@ -141,8 +119,25 @@
       filter: invert(1);
     }
 
-    .themedTextFieldStyles();
+    .ms-TextField {
+      .ms-TextField-fieldGroup {
+        background-color: var(--colorNeutralBackground1);
+        border-color: var(--colorNeutralStroke1);
+      }
 
+      .ms-TextField-field {
+        color: var(--colorNeutralForeground1);
+        background-color: var(--colorNeutralBackground1);
+
+        &::placeholder {
+          color: var(--colorNeutralForeground4);
+        }
+      }
+
+      .ms-Label {
+        color: var(--colorNeutralForeground1);
+      }
+    }
     .migrationTypeDescription {
       p {
         color: var(--colorNeutralForeground1);
@@ -178,11 +173,6 @@
   width: 100%;
   max-width: 100%;
   margin: 0 auto;
-
-  body.isDarkMode & {
-    .themedTextFieldStyles();
-  }
-
   .ms-DetailsList {
     width: 100%;
 

src/Explorer/ContextMenuButtonFactory.tsx

@@ -7,7 +7,7 @@ import {
   AddGlobalSecondaryIndexPanelProps,
 } from "Explorer/Panes/AddGlobalSecondaryIndexPanel/AddGlobalSecondaryIndexPanel";
 import { useDatabases } from "Explorer/useDatabases";
-import { isFabric, isFabricNative, openRestoreContainerDialog } from "Platform/Fabric/FabricUtil";
+import { isFabric, isFabricNative } from "Platform/Fabric/FabricUtil";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
@@ -35,7 +35,6 @@ import StoredProcedure from "./Tree/StoredProcedure";
 import Trigger from "./Tree/Trigger";
 import UserDefinedFunction from "./Tree/UserDefinedFunction";
 import { useSelectedNode } from "./useSelectedNode";
-import { extractFeatures } from "../Platform/Hosted/extractFeatures";
 
 export interface CollectionContextMenuButtonParams {
   databaseId: string;
@@ -61,17 +60,6 @@ export const createDatabaseContextMenu = (container: Explorer, databaseId: strin
     },
   ];
 
-  if (isFabricNative() && !userContext.fabricContext?.isReadOnly) {
-    const features = extractFeatures();
-    if (features?.enableRestoreContainer) {
-      items.push({
-        iconSrc: AddCollectionIcon,
-        onClick: () => openRestoreContainerDialog(),
-        label: `Restore ${getCollectionName()}`,
-      });
-    }
-  }
-
   if (!isFabricNative() && (userContext.apiType !== "Tables" || userContext.features.enableSDKoperations)) {
     items.push({
       iconSrc: DeleteDatabaseIcon,

src/Explorer/SplashScreen/SplashScreen.less

@@ -54,6 +54,6 @@
     .mainButtonsContainer {
       display: flex;
       gap: 0 16px;
-      margin: 40px auto
+      margin-bottom: 10px
     }
    

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -164,23 +164,6 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
   const container = explorer;
   const subscriptions: Array<{ dispose: () => void }> = [];
 
-  let title: string;
-  let subtitle: string;
-
-  switch (userContext.apiType) {
-    case "Postgres":
-      title = "Welcome to Azure Cosmos DB for PostgreSQL";
-      subtitle = "Get started with our sample datasets, documentation, and additional tools.";
-      break;
-    case "VCoreMongo":
-      title = "Welcome to Azure DocumentDB (with MongoDB compatibility)";
-      subtitle = "Get started with our sample datasets, documentation, and additional tools.";
-      break;
-    default:
-      title = "Welcome to Azure Cosmos DB";
-      subtitle = "Globally distributed, multi-model database service for any scale";
-  }
-
   React.useEffect(() => {
     subscriptions.push(
       {
@@ -919,11 +902,10 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
   return (
     <div className={styles.splashScreenContainer}>
       <div className={styles.splashScreen}>
-        <h2 className={styles.title} role="heading" aria-label={title}>
+        <h2 className={styles.title} role="heading" aria-label="Welcome to Azure Cosmos DB">
-          {title}
+          Welcome to Azure Cosmos DB<span className="activePatch"></span>
-          <span className="activePatch"></span>
         </h2>
-        <div className={styles.subtitle}>{subtitle}</div>
+        <div className={styles.subtitle}>Globally distributed, multi-model database service for any scale</div>
         {getSplashScreenButtons()}
         {useCarousel.getState().showCoachMark && (
           <Coachmark

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/Fabric/FabricUtil.ts

@@ -105,12 +105,6 @@ const requestAndStoreAccessToken = async (): Promise<void> => {
   });
 };
 
-export const openRestoreContainerDialog = (): void => {
-  if (isFabricNative()) {
-    sendCachedDataMessage(FabricMessageTypes.RestoreContainer, []);
-  }
-};
-
 /**
  * Check token validity and schedule a refresh if necessary
  * @param tokenTimestamp

src/Platform/Hosted/extractFeatures.ts

@@ -40,7 +40,6 @@ export type Features = {
   readonly disableConnectionStringLogin: boolean;
   readonly enableContainerCopy: boolean;
   readonly enableCloudShell: boolean;
-  readonly enableRestoreContainer: boolean; // only for Fabric
 
   // can be set via both flight and feature flag
   autoscaleDefault: boolean;
@@ -94,7 +93,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"),
@@ -112,7 +111,6 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     enablePriorityBasedExecution: "true" === get("enableprioritybasedexecution"),
     disableConnectionStringLogin: "true" === get("disableconnectionstringlogin"),
     enableContainerCopy: "true" === get("enablecontainercopy"),
-    enableRestoreContainer: "true" === get("enablerestorecontainer"),
     enableCloudShell: true,
   };
 }

src/RootComponents/App.test.tsx

@@ -0,0 +1,316 @@
+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;

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,
@@ -43,7 +43,6 @@ describe("AuthorizationUtils", () => {
         partitionKeyDefault: false,
         partitionKeyDefault2: false,
         notebooksDownBanner: false,
-        enableRestoreContainer: false,
       },
     });
   };

test/sql/containercopy/offlineMigration.spec.ts

@@ -246,17 +246,13 @@ test.describe("Container Copy - Offline Migration", () => {
     expect(response.ok()).toBe(true);
 
     // Verify panel closes and job appears in the list
-    await expect(panel).not.toBeVisible();
+    await expect(panel).not.toBeVisible({ timeout: 5000 });
-
-    const filterTextField = wrapper.getByTestId("CopyJobsList/FilterTextField");
-    await filterTextField.waitFor({ state: "visible" });
-    await filterTextField.fill(validJobName);
 
     const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
-    await jobsListContainer.waitFor({ state: "visible" });
+    await jobsListContainer.waitFor({ state: "visible", timeout: 5000 });
 
     const jobItem = jobsListContainer.getByText(validJobName);
-    await jobItem.waitFor({ state: "visible" });
+    await jobItem.waitFor({ state: "visible", timeout: 5000 });
     await expect(jobItem).toBeVisible();
   });
 });

test/sql/containercopy/onlineMigration.spec.ts

@@ -120,22 +120,18 @@ test.describe("Container Copy - Online Migration", () => {
     expect(response.ok()).toBe(true);
 
     // Verify panel closes and job appears in the list
-    await expect(panel).not.toBeVisible();
+    await expect(panel).not.toBeVisible({ timeout: 5000 });
-
-    const filterTextField = wrapper.getByTestId("CopyJobsList/FilterTextField");
-    await filterTextField.waitFor({ state: "visible" });
-    await filterTextField.fill(onlineMigrationJobName);
 
     const jobsListContainer = wrapper.locator(".CopyJobListContainer .ms-DetailsList-contentWrapper .ms-List-page");
-    await jobsListContainer.waitFor({ state: "visible" });
+    await jobsListContainer.waitFor({ state: "visible", timeout: 5000 });
 
     let jobRow, statusCell, actionMenuButton;
     jobRow = jobsListContainer.locator(".ms-DetailsRow", { hasText: onlineMigrationJobName });
     statusCell = jobRow.locator("[data-automationid='DetailsRowCell'][data-automation-key='CopyJobStatus']");
-    await jobRow.waitFor({ state: "visible" });
+    await jobRow.waitFor({ state: "visible", timeout: 5000 });
 
     // Verify job status changes to queued state
-    await expect(statusCell).toContainText(/running|queued|pending/i);
+    await expect(statusCell).toContainText(/running|queued|pending/i, { timeout: 5000 });
 
     // Test job lifecycle management through action menu
     actionMenuButton = wrapper.getByTestId(`CopyJobActionMenu/Button:${onlineMigrationJobName}`);

test/sql/containercopy/permissionsScreen.spec.ts

@@ -134,7 +134,7 @@ test.describe("Container Copy - Permission Screen Verification", () => {
 
     const pitrBtn = accordionPanel.getByTestId("pointInTimeRestore:PrimaryBtn");
     await expect(pitrBtn).toBeVisible();
-    await pitrBtn.click({ force: true });
+    await pitrBtn.click();
 
     // Verify new page opens with correct URL pattern
     page.context().on("page", async (newPage) => {
@@ -246,7 +246,7 @@ test.describe("Container Copy - Permission Screen Verification", () => {
 
     const toggleButton = crossAccordionPanel.getByTestId("btn-toggle");
     await expect(toggleButton).toBeVisible();
-    await toggleButton.click({ force: true });
+    await toggleButton.click();
 
     // Verify popover functionality
     const popover = frame.locator("[data-test='popover-container']");
@@ -257,7 +257,7 @@ test.describe("Container Copy - Permission Screen Verification", () => {
     await expect(yesButton).toBeVisible();
     await expect(noButton).toBeVisible();
 
-    await yesButton.click({ force: true });
+    await yesButton.click();
 
     // Verify loading states
     await expect(loadingOverlay).toBeVisible();
@@ -265,6 +265,6 @@ test.describe("Container Copy - Permission Screen Verification", () => {
     await expect(popover).toBeHidden({ timeout: 10 * 1000 });
 
     // Cancel the panel to clean up
-    await panel.getByRole("button", { name: "Cancel" }).click({ force: true });
+    await panel.getByRole("button", { name: "Cancel" }).click();
   });
 });

test/sql/indexAdvisor.spec.ts

@@ -10,7 +10,7 @@ let CONTAINER_ID: string;
 
 // Set up test database and container with data before all tests
 test.beforeAll(async () => {
-  testContainer = await createTestSQLContainer({ includeTestData: true });
+  testContainer = await createTestSQLContainer(true);
   DATABASE_ID = testContainer.database.id;
   CONTAINER_ID = testContainer.container.id;
 });