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/DocumentsTabV2/DocumentsTableComponent.tsx

@@ -23,8 +23,9 @@ import {
   useTableSelection,
 } from "@fluentui/react-components";
 import { NormalizedEventKey } from "Common/Constants";
-import { INITIAL_SELECTED_ROW_INDEX } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
+import { INITIAL_SELECTED_ROW_INDEX, useDocumentsTabStyles } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
 import { selectionHelper } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
+import { LayoutConstants } from "Explorer/Theme/ThemeUtil";
 import { isEnvironmentCtrlPressed, isEnvironmentShiftPressed } from "Utils/KeyboardUtils";
 import React, { useCallback, useMemo } from "react";
 import { FixedSizeList as List, ListChildComponentProps } from "react-window";
@@ -67,6 +68,8 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
   columnHeaders,
   isSelectionDisabled,
 }: IDocumentsTableComponentProps) => {
+  const styles = useDocumentsTabStyles();
+
   const initialSizingOptions: TableColumnSizingOptions = {
     id: {
       idealWidth: 280,
@@ -168,7 +171,12 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
     return (
       <TableRow
         aria-rowindex={index + 2}
-        style={{ ...style, cursor: "pointer", userSelect: "none" }}
+        className={styles.tableRow}
+        style={{
+          ...style,
+          cursor: "pointer",
+          userSelect: "none",
+        }}
         key={item.id}
         aria-selected={selected}
         appearance={appearance}
@@ -187,7 +195,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
         {columns.map((column) => (
           <TableCell
             key={column.columnId}
-            className="documentsTableCell"
+            className={styles.tableCell}
             // When clicking on a cell with shift/ctrl key, onKeyDown is called instead of onClick.
             onClick={(e: React.MouseEvent<Element, MouseEvent>) => onTableCellClicked(e, index)}
             onKeyPress={(e: React.KeyboardEvent<Element>) => onIdClicked(e, index)}
@@ -258,15 +266,15 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
     role: "grid",
     ...columnSizing.getTableProps(),
     ...keyboardNavAttr,
-    size: "extra-small",
+    size: "small",
     ref: tableRef,
     ...style,
   };
 
   return (
-    <Table className="documentsTable" noNativeElements {...tableProps}>
-      <TableHeader className="documentsTableHeader">
-        <TableRow style={{ width: size ? size.width - 15 : "100%" }}>
+    <Table noNativeElements {...tableProps}>
+      <TableHeader>
+        <TableRow className={styles.tableRow} style={{ width: size ? size.width - 15 : "100%" }}>
           {!isSelectionDisabled && (
             <TableSelectionCell
               checked={allRowsSelected ? true : someRowsSelected ? "mixed" : false}
@@ -279,7 +287,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
             <Menu openOnContext key={column.columnId}>
               <MenuTrigger>
                 <TableHeaderCell
-                  className="documentsTableCell"
+                  className={styles.tableCell}
                   key={column.columnId}
                   {...columnSizing.getTableHeaderCellProps(column.columnId)}
                 >
@@ -299,9 +307,9 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
       </TableHeader>
       <TableBody>
         <List
-          height={size !== undefined ? size.height - 32 /* table header */ - 21 /* load more */ : 0}
+          height={size !== undefined ? size.height - LayoutConstants.rowHeight /* table header */ : 0}
           itemCount={items.length}
-          itemSize={30}
+          itemSize={LayoutConstants.rowHeight}
           width={size ? size.width : 0}
           itemData={rows}
           style={{ overflowY: "scroll" }}