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/Explorer/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import { Link, MessageBar, MessageBarButton, MessageBarType } from "@fluentui/react";
+import { IMessageBarStyles, Link, MessageBar, MessageBarButton, MessageBarType } from "@fluentui/react";
 import { CassandraProxyEndpoints, MongoProxyEndpoints } from "Common/Constants";
 import { sendMessage } from "Common/MessageHandler";
 import { Platform, configContext, updateConfigContext } from "ConfigContext";
@@ -14,6 +14,7 @@ import { PostgresConnectTab } from "Explorer/Tabs/PostgresConnectTab";
 import { QuickstartTab } from "Explorer/Tabs/QuickstartTab";
 import { VcoreMongoConnectTab } from "Explorer/Tabs/VCoreMongoConnectTab";
 import { VcoreMongoQuickstartTab } from "Explorer/Tabs/VCoreMongoQuickstartTab";
+import { LayoutConstants } from "Explorer/Theme/ThemeUtil";
 import { KeyboardAction, KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
 import { hasRUThresholdBeenConfigured } from "Shared/StorageUtility";
 import { userContext } from "UserContext";
@@ -53,11 +54,19 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
     });
   }, [setKeyboardHandlers]);
 
+  const defaultMessageBarStyles: IMessageBarStyles = {
+    root: {
+      height: `${LayoutConstants.rowHeight}px`,
+      overflow: "auto",
+    },
+  };
+
   return (
     <div className="tabsManagerContainer">
       {networkSettingsWarning && (
         <MessageBar
           messageBarType={MessageBarType.warning}
+          styles={defaultMessageBarStyles}
           actions={
             <MessageBarButton
               onClick={() =>
@@ -84,6 +93,7 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
             setShowRUThresholdMessageBar(false);
           }}
           styles={{
+            ...defaultMessageBarStyles,
             innerText: {
               fontWeight: "bold",
             },
@@ -103,6 +113,7 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
       {showMongoAndCassandraProxiesNetworkSettingsWarningState && (
         <MessageBar
           messageBarType={MessageBarType.warning}
+          styles={defaultMessageBarStyles}
           onDismiss={() => {
             setShowMongoAndCassandraProxiesNetworkSettingsWarningState(false);
           }}
@@ -111,23 +122,21 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
           re-enable "Allow access from Azure Portal" on the Networking blade for your account.`}
         </MessageBar>
       )}
-      <div id="content" className="flexContainer hideOverflows">
-        <div className="nav-tabs-margin">
-          <ul className="nav nav-tabs level navTabHeight" id="navTabs" role="tablist">
-            {openedReactTabs.map((tab) => (
-              <TabNav key={ReactTabKind[tab]} active={activeReactTab === tab} tabKind={tab} />
-            ))}
-            {openedTabs.map((tab) => (
-              <TabNav key={tab.tabId} tab={tab} active={activeTab === tab} />
-            ))}
-          </ul>
-        </div>
-        <div className="tabPanesContainer">
-          {activeReactTab !== undefined && getReactTabContent(activeReactTab, explorer)}
-          {openedTabs.map((tab) => (
-            <TabPane key={tab.tabId} tab={tab} active={activeTab === tab} />
+      <div className="nav-tabs-margin">
+        <ul className="nav nav-tabs level navTabHeight" id="navTabs" role="tablist">
+          {openedReactTabs.map((tab) => (
+            <TabNav key={ReactTabKind[tab]} active={activeReactTab === tab} tabKind={tab} />
           ))}
-        </div>
+          {openedTabs.map((tab) => (
+            <TabNav key={tab.tabId} tab={tab} active={activeTab === tab} />
+          ))}
+        </ul>
+      </div>
+      <div className="tabPanesContainer">
+        {activeReactTab !== undefined && getReactTabContent(activeReactTab, explorer)}
+        {openedTabs.map((tab) => (
+          <TabPane key={tab.tabId} tab={tab} active={activeTab === tab} />
+        ))}
       </div>
     </div>
   );