add app.tsx for data browsing folder

Author: tculig

src/test/suite/connectionController.test.ts

@@ -1416,6 +1416,7 @@ suite('Connection Controller Test Suite', function () {
       );
     });
 
+    // eslint-disable-next-line mocha/no-skipped-tests
     test.skip('should track SAVED_CONNECTIONS_LOADED event on load of saved connections', async function () {
       testSandbox.replace(testStorageController, 'get', (key, storage) => {
         if (

src/test/suite/mdbExtensionController.test.ts

@@ -736,6 +736,7 @@ suite('MDBExtensionController Test Suite', function () {
 
     // Starting server 7.0, the outcome of dropping nonexistent collections is successful SERVER-43894
     // TODO: update or delete the test according to VSCODE-461
+    // eslint-disable-next-line mocha/no-skipped-tests
     test.skip('mdb.dropCollection fails when a collection does not exist', async function () {
       const testConnectionController =
         mdbTestExtension.testExtensionController._connectionController;

src/test/suite/telemetry/connectionTelemetry.test.ts

@@ -638,6 +638,7 @@ suite('ConnectionTelemetry Controller Test Suite', function () {
 
   // TODO: Enable test back when Insider is fixed https://jira.mongodb.org/browse/VSCODE-452
   // MS GitHub Issue: https://github.com/microsoft/vscode/issues/188676
+  // eslint-disable-next-line mocha/no-skipped-tests
   suite.skip('with live connection', function () {
     this.timeout(20000);
     let dataServ;

src/test/suite/telemetry/telemetryService.test.ts

@@ -275,6 +275,7 @@ suite('Telemetry Controller Test Suite', function () {
     });
 
     // TODO: re-enable two tests after https://jira.mongodb.org/browse/VSCODE-432
+    // eslint-disable-next-line mocha/no-skipped-tests
     test.skip('track mongodb playground loaded event', async function () {
       const docPath = path.resolve(
         __dirname,
@@ -294,6 +295,7 @@ suite('Telemetry Controller Test Suite', function () {
       );
     });
 
+    // eslint-disable-next-line mocha/no-skipped-tests
     test.skip('track mongodbjs playground loaded event', async function () {
       const docPath = path.resolve(
         __dirname,
@@ -535,6 +537,7 @@ suite('Telemetry Controller Test Suite', function () {
       });
     });
 
+    // eslint-disable-next-line mocha/no-skipped-tests
     test.skip('track saved connections loaded', function () {
       testTelemetryService.track(
         new SavedConnectionsLoadedTelemetryEvent({

src/views/data-browsing-app/app.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { LeafyGreenProvider } from '@mongodb-js/compass-components';
+import { useDetectVsCodeDarkMode } from './use-detect-vscode-dark-mode';
+import PreviewPage from './preview-page';
+
+const App: React.FC = () => {
+  const darkMode = useDetectVsCodeDarkMode();
+
+  return (
+    <LeafyGreenProvider darkMode={darkMode}>
+      <PreviewPage />
+    </LeafyGreenProvider>
+  );
+};
+
+export default App;

src/views/data-browsing-app/index.tsx

@@ -1,9 +1,8 @@
-import * as React from 'react';
+import React from 'react';
 import { createRoot } from 'react-dom/client';
 
-import PreviewApp from './preview-app';
+import App from './app';
 
 const container = document.getElementById('root');
-const root = createRoot(container!);
-root.render(<PreviewApp />);
-
+const root = createRoot(container);
+root.render(<App />);

…/views/data-browsing-app/preview-app.tsx …views/data-browsing-app/preview-page.tsxsrc/views/data-browsing-app/preview-app.tsx renamed to src/views/data-browsing-app/preview-page.tsx src/views/data-browsing-app/preview-app.tsx renamed to src/views/data-browsing-app/preview-page.tsx

@@ -9,8 +9,8 @@ import {
   MenuItem,
   css,
   spacing,
+  useDarkMode,
 } from '@mongodb-js/compass-components';
-import { useDetectVsCodeDarkMode } from './use-detect-vscode-dark-mode';
 import {
   PreviewMessageType,
   type MessageFromExtensionToWebview,
@@ -111,7 +111,6 @@ const spinnerStyles = css({
 });
 
 const PreviewApp: React.FC = () => {
-  const darkMode = useDetectVsCodeDarkMode();
   const [documents, setDocuments] = useState<PreviewDocument[]>([]);
   const [sortOption, setSortOption] = useState<SortOption>('default');
   const [itemsPerPage, setItemsPerPage] = useState<number>(10);
@@ -120,6 +119,7 @@ const PreviewApp: React.FC = () => {
   const [settingsMenuOpen, setSettingsMenuOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [totalCountInCollection, setTotalCountInCollection] = useState<number | null>(null);
+  const darkMode = useDarkMode();
 
   const totalDocuments = documents.length;
   const totalPages = Math.max(1, Math.ceil(totalDocuments / itemsPerPage));
@@ -226,7 +226,6 @@ const PreviewApp: React.FC = () => {
   };
 
   return (
-    <LeafyGreenProvider darkMode={darkMode}>
       <div
         style={{
           backgroundColor: darkMode ? '#1E1E1E' : '#FFFFFF',
@@ -396,7 +395,6 @@ const PreviewApp: React.FC = () => {
           )}
         </div>
       </div>
-    </LeafyGreenProvider>
   );
 };