Redesign resource tree (#1865)

* start redesign work

* add left padding to all tree nodes

* fiddling with padding

* align tab bar line with first item in resource tree

* final touch ups

* fix a strange password manager autofill prompt

* add keyboard shortcuts

* revert testing change

* nudge messagebar to layout row height

* tidy up

* switch to Allotment to stop ResizeObserver issues with monaco

* refmt and fix lints

* fabric touch-ups

* update snapshots

* remove explicit react-icons dependency

* reinstall packages

* remove background from FluentProvider

* fix alignment of message bar

* undo temporary workaround

* restore refresh button

* fix e2e tests and reformat

* fix compiler error

* remove uiw/react-split

* uncomment selection change on expand

src/Main.tsx

@@ -6,10 +6,9 @@ import { initializeIcons, loadTheme } from "@fluentui/react";
 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 "bootstrap/dist/css/bootstrap.css";
 import { useCarousel } from "hooks/useCarousel";
-import React, { useState } from "react";
+import React from "react";
 import ReactDOM from "react-dom";
 import "../externals/jquery-ui.min.css";
 import "../externals/jquery-ui.min.js";
@@ -21,7 +20,9 @@ import "../externals/jquery.typeahead.min.js";
 // Image Dependencies
 import { Platform } from "ConfigContext";
 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";
@@ -36,8 +37,6 @@ import "../less/menus.less";
 import "../less/messagebox.less";
 import "../less/resourceTree.less";
 import "../less/tree.less";
-import { CollapsedResourceTree } from "./Common/CollapsedResourceTree";
-import { ResourceTreeContainer } from "./Common/ResourceTreeContainer";
 import * as StyleConstants from "./Common/StyleConstants";
 import "./Explorer/Controls/Accordion/AccordionComponent.less";
 import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
@@ -56,7 +55,6 @@ import { NotificationConsole } from "./Explorer/Menus/NotificationConsole/Notifi
 import "./Explorer/Panes/PanelComponent.less";
 import { SidePanel } from "./Explorer/Panes/PanelContainerComponent";
 import "./Explorer/SplashScreen/SplashScreen.less";
-import { Tabs } from "./Explorer/Tabs/Tabs";
 import "./Libs/jquery";
 import { appThemeFabric } from "./Platform/Fabric/FabricTheme";
 import "./Shared/appInsights";
@@ -66,7 +64,6 @@ import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
 initializeIcons();
 
 const App: React.FunctionComponent = () => {
-  const [isLeftPaneExpanded, setIsLeftPaneExpanded] = useState<boolean>(true);
   const isCarouselOpen = useCarousel((state) => state.shouldOpen);
   const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
 
@@ -78,15 +75,6 @@ const App: React.FunctionComponent = () => {
   StyleConstants.updateStyles();
   const explorer = useKnockoutExplorer(config?.platform);
 
-  const toggleLeftPaneExpanded = () => {
-    setIsLeftPaneExpanded(!isLeftPaneExpanded);
-    if (isLeftPaneExpanded) {
-      document.getElementById("expandToggleLeftPaneButton").focus();
-    } else {
-      document.getElementById("collapseToggleLeftPaneButton").focus();
-    }
-  };
-
   if (!explorer) {
     return <LoadingExplorer />;
   }
@@ -99,29 +87,7 @@ const App: React.FunctionComponent = () => {
           {/* Main Command Bar - Start */}
           <CommandBar container={explorer} />
           {/* Collections Tree and Tabs - Begin */}
-          <div className="resourceTreeAndTabs">
-            {/* Collections Tree - Start */}
-            {userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo" && (
-              <div id="resourcetree" data-test="resourceTreeId" className="resourceTree">
-                <div className="collectionsTreeWithSplitter">
-                  {/* Collections Tree Expanded - Start */}
-                  <ResourceTreeContainer
-                    container={explorer}
-                    toggleLeftPaneExpanded={toggleLeftPaneExpanded}
-                    isLeftPaneExpanded={isLeftPaneExpanded}
-                  />
-                  {/* Collections Tree Expanded - End */}
-                  {/* Collections Tree Collapsed - Start */}
-                  <CollapsedResourceTree
-                    toggleLeftPaneExpanded={toggleLeftPaneExpanded}
-                    isLeftPaneExpanded={isLeftPaneExpanded}
-                  />
-                  {/* Collections Tree Collapsed - End */}
-                </div>
-              </div>
-            )}
-            <Tabs explorer={explorer} />
-          </div>
+          <SidebarContainer explorer={explorer} />
           {/* Collections Tree and Tabs - End */}
           <div
             className="dataExplorerErrorConsoleContainer"