Refactor: Extract root components architecture with comprehensive tests

Co-authored-by: Laurent Nguyen <languye@microsoft.com>

src/Explorer/ContainerCopy/ContainerCopyPanel.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
-import { Dialog } from "../Controls/Dialog";
-import { SidePanel } from "../Panes/PanelContainerComponent";
+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";

src/RootComponents/App.test.tsx

@@ -2,7 +2,7 @@ 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 { updateStyles } from "../Common/StyleConstants";
 import { Platform } from "../ConfigContext";
 import { useConfig } from "../hooks/useConfig";
 import { useKnockoutExplorer } from "../hooks/useKnockoutExplorer";
@@ -150,13 +150,15 @@ describe("App", () => {
   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(StyleConstants.updateStyles);
+    mockUpdateStyles = jest.mocked(updateStyles);
 
     const mockUseMetricScenario = jest.mocked(useMetricScenario);
     mockUseMetricScenario.mockReturnValue({

src/RootComponents/App.tsx

@@ -40,9 +40,12 @@ const App = (): JSX.Element => {
   // 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
-  }, []);
+    // 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) {

src/RootComponents/Root.test.tsx

@@ -88,6 +88,19 @@ describe("Root", () => {
     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();
   });