From e8a565879993518d1547a7c876c0dc03b28b7486 Mon Sep 17 00:00:00 2001 From: Ashley Stanton-Nurse Date: Wed, 4 Sep 2024 13:07:27 -0700 Subject: [PATCH] Reduce extra spacing in the new tree and items tab (#1951) * reduce layout row size and default font size * icons for the tree * refmt and update snapshots * remove commented out code --- less/documentDB.less | 8 +- src/Explorer/Controls/TreeComponent/Styles.ts | 3 +- .../TreeComponent/TreeNodeComponent.tsx | 15 +- .../TreeNodeComponent.test.tsx.snap | 280 +++++++++++++++--- src/Explorer/Sidebar.tsx | 4 +- .../DocumentsTableComponent.test.tsx.snap | 76 ++--- src/Explorer/Tabs/Tabs.tsx | 3 +- src/Explorer/Theme/ThemeUtil.tsx | 30 +- .../__snapshots__/treeNodeUtil.test.ts.snap | 123 ++++++++ .../{treeNodeUtil.ts => treeNodeUtil.tsx} | 11 + 10 files changed, 452 insertions(+), 101 deletions(-) rename src/Explorer/Tree/{treeNodeUtil.ts => treeNodeUtil.tsx} (97%) diff --git a/less/documentDB.less b/less/documentDB.less index ee4dba4b6..1abbc9b30 100644 --- a/less/documentDB.less +++ b/less/documentDB.less @@ -1906,8 +1906,14 @@ input::-webkit-calendar-picker-indicator::after { } .nav-tabs-margin { - padding-top: 5px; + height: 32px; background-color: #f2f2f2; + + .nav-tabs { + display: flex; + align-items: flex-end; + height: 100%; + } } .navTabHeight { diff --git a/src/Explorer/Controls/TreeComponent/Styles.ts b/src/Explorer/Controls/TreeComponent/Styles.ts index 14247e657..a81923f35 100644 --- a/src/Explorer/Controls/TreeComponent/Styles.ts +++ b/src/Explorer/Controls/TreeComponent/Styles.ts @@ -17,7 +17,7 @@ export const useTreeStyles = makeStyles({ minWidth: "100%", rowGap: "0px", paddingTop: "0px", - [treeIconWidth]: "20px", + [treeIconWidth]: "16px", [leafNodeSpacing]: "24px", }, nodeIcon: { @@ -32,7 +32,6 @@ export const useTreeStyles = makeStyles({ fontSize: tokens.fontSizeBase300, height: tokens.layoutRowHeight, ...cosmosShorthands.borderBottom(), - paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`, // Some sneaky CSS variables stuff to change the background color of the action button on hover. [actionButtonBackground]: tokens.colorNeutralBackground1, diff --git a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx index 1a4a5dbae..39dbf3c0f 100644 --- a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx +++ b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx @@ -149,15 +149,16 @@ export const TreeNodeComponent: React.FC = ({ // We use the expandIcon slot to hold the node icon too. // We only show a node icon for leaf nodes, even if a branch node has an iconSrc. - const expandIcon = isLoading ? ( - - ) : !isBranch ? ( - typeof node.iconSrc === "string" ? ( + const treeIcon = + node.iconSrc === undefined ? undefined : typeof node.iconSrc === "string" ? ( ) : ( node.iconSrc - ) - ) : openItems.includes(treeNodeId) ? ( + ); + + const expandIcon = isLoading ? ( + + ) : !isBranch ? undefined : openItems.includes(treeNodeId) ? ( ) : ( @@ -174,7 +175,6 @@ export const TreeNodeComponent: React.FC = ({ = ({ ), } } + iconBefore={treeIcon} expandIcon={expandIcon} > {node.label} diff --git a/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap b/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap index f031061af..80e4d1f19 100644 --- a/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap +++ b/src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap @@ -10,13 +10,20 @@ exports[`TreeNodeComponent does not render children if the node is loading 1`] = > } + iconBefore={ + + } >
+
@@ -208,7 +225,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = ` tabindex="-1" >
+
@@ -242,7 +269,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
@@ -256,7 +283,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = ` tabindex="0" >
+
@@ -300,7 +337,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = ` tabindex="-1" >
+
@@ -343,7 +390,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = ` tabindex="-1" >
+
@@ -383,16 +440,23 @@ exports[`TreeNodeComponent fully renders a tree 1`] = ` > } + iconBefore={ + + } >
+
+ +
@@ -431,7 +505,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
@@ -587,7 +661,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = ` "itemType": "branch", "layoutRef": { "current":
+
@@ -639,7 +723,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = ` tabindex="0" >
+
@@ -680,16 +774,23 @@ exports[`TreeNodeComponent fully renders a tree 1`] = ` > } + iconBefore={ + + } >
+
+ +
@@ -728,7 +839,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
+
@@ -873,7 +994,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = ` tabindex="-1" >
+
@@ -914,16 +1045,23 @@ exports[`TreeNodeComponent fully renders a tree 1`] = ` > } + iconBefore={ + + } >
+
+ +
@@ -1039,7 +1187,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = ` "itemType": "leaf", "layoutRef": { "current":
+
@@ -1087,7 +1245,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = ` tabindex="-1" >
+
@@ -1125,9 +1293,9 @@ exports[`TreeNodeComponent fully renders a tree 1`] = ` >
} + iconBefore={ + + } > } + iconBefore={ + + } > } + iconBefore={ + + } > } + iconBefore={ + + } > = ({ explorer }) => { {/* Collections Tree - Start */} {hasSidebar && ( // When collapsed, we force the pane to 24 pixels wide and make it non-resizable. - +
{loading && ( diff --git a/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap index 4acf5348f..de8c56663 100644 --- a/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap +++ b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap @@ -348,7 +348,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec > { }, }} > - {`To prevent queries from using excessive RUs, Data Explorer has a 5,000 RU default limit. To modify or remove - the limit, go to the Settings cog on the right and find "RU Threshold".`} + {`Data Explorer has a 5,000 RU default limit. To adjust the limit, go to the Settings page and find "RU Threshold".`} & CosmosThemeElements> = { + [LayoutSize.Compact]: { + layoutRowHeight: "32px", + fontSizeBase300: "13px", + }, +}; + +const cosmosTheme = { sidebarMinimumWidth: "200px", sidebarInitialWidth: "300px", }; -export type CosmosTheme = Theme & typeof cosmosThemeElements; - -export const tokens = themeToTokensObject({ ...webLightTheme, ...cosmosThemeElements }); +export const tokens = themeToTokensObject({ ...webLightTheme, ...cosmosTheme, ...sizeMappings[LayoutSize.Compact] }); export const cosmosShorthands = { border: () => shorthands.border("1px", "solid", tokens.colorNeutralStroke2), @@ -117,6 +132,7 @@ export function getPlatformTheme(platform: Platform): CosmosTheme { return { ...baseTheme, - ...cosmosThemeElements, + ...cosmosTheme, + ...sizeMappings[LayoutSize.Compact], // TODO: Allow for different layout sizes. }; } diff --git a/src/Explorer/Tree/__snapshots__/treeNodeUtil.test.ts.snap b/src/Explorer/Tree/__snapshots__/treeNodeUtil.test.ts.snap index 42029b374..787443041 100644 --- a/src/Explorer/Tree/__snapshots__/treeNodeUtil.test.ts.snap +++ b/src/Explorer/Tree/__snapshots__/treeNodeUtil.test.ts.snap @@ -30,6 +30,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca "styleClass": "deleteCollectionMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "standardCollection", @@ -69,6 +72,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca "styleClass": "deleteCollectionMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "conflictsCollection", @@ -92,6 +98,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca "styleClass": "deleteDatabaseMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "standardDb", @@ -102,6 +111,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca { "children": [ { + "iconSrc": , "id": "", "isSelected": [Function], "label": "Scale", @@ -133,6 +145,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca "styleClass": "deleteCollectionMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "sampleItemsCollection", @@ -156,6 +171,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca "styleClass": "deleteDatabaseMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "sharedDatabase", @@ -246,6 +264,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca "styleClass": "deleteCollectionMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "schemaCollection", @@ -274,6 +295,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca "styleClass": "deleteDatabaseMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "giganticDatabase", @@ -345,6 +369,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo "styleClass": "deleteCollectionMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "standardCollection", @@ -415,6 +442,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo "styleClass": "deleteCollectionMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "conflictsCollection", @@ -438,6 +468,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo "styleClass": "deleteDatabaseMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "standardDb", @@ -448,6 +481,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo { "children": [ { + "iconSrc": , "id": "", "isSelected": [Function], "label": "Scale", @@ -510,6 +546,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo "styleClass": "deleteCollectionMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "sampleItemsCollection", @@ -533,6 +572,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo "styleClass": "deleteDatabaseMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "sharedDatabase", @@ -654,6 +696,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo "styleClass": "deleteCollectionMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "schemaCollection", @@ -682,6 +727,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo "styleClass": "deleteDatabaseMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "giganticDatabase", @@ -706,6 +754,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ "onClick": [Function], }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "standardCollection", @@ -724,6 +775,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ "onClick": [Function], }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "conflictsCollection", @@ -747,6 +801,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ "styleClass": "deleteDatabaseMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "standardDb", @@ -766,6 +823,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ "onClick": [Function], }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "sampleItemsCollection", @@ -789,6 +849,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ "styleClass": "deleteDatabaseMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "sharedDatabase", @@ -808,6 +871,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ "onClick": [Function], }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "schemaCollection", @@ -836,6 +902,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ "styleClass": "deleteDatabaseMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "giganticDatabase", @@ -976,6 +1045,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ "styleClass": "deleteCollectionMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "standardCollection", @@ -1076,6 +1148,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ "styleClass": "deleteCollectionMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "conflictsCollection", @@ -1099,6 +1174,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ "styleClass": "deleteDatabaseMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "standardDb", @@ -1109,6 +1187,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ { "children": [ { + "iconSrc": , "id": "", "isSelected": [Function], "label": "Scale", @@ -1201,6 +1282,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ "styleClass": "deleteCollectionMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "sampleItemsCollection", @@ -1224,6 +1308,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ "styleClass": "deleteDatabaseMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "sharedDatabase", @@ -1375,6 +1462,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ "styleClass": "deleteCollectionMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "schemaCollection", @@ -1403,6 +1493,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ "styleClass": "deleteDatabaseMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "giganticDatabase", @@ -1543,6 +1636,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe "styleClass": "deleteCollectionMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "standardCollection", @@ -1638,6 +1734,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe "styleClass": "deleteCollectionMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "conflictsCollection", @@ -1661,6 +1760,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe "styleClass": "deleteDatabaseMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "standardDb", @@ -1671,6 +1773,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe { "children": [ { + "iconSrc": , "id": "", "isSelected": [Function], "label": "Scale", @@ -1763,6 +1868,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe "styleClass": "deleteCollectionMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "sampleItemsCollection", @@ -1786,6 +1894,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe "styleClass": "deleteDatabaseMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "sharedDatabase", @@ -1937,6 +2048,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe "styleClass": "deleteCollectionMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "schemaCollection", @@ -1965,6 +2079,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe "styleClass": "deleteDatabaseMenuItem", }, ], + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "giganticDatabase", @@ -1986,6 +2103,9 @@ exports[`createResourceTokenTreeNodes creates the expected tree nodes 1`] = ` }, ], "className": "collectionNode", + "iconSrc": , "isExpanded": true, "isSelected": [Function], "label": "testCollection", @@ -2021,6 +2141,9 @@ exports[`createSampleDataTreeNodes creates the expected tree nodes 1`] = ` "onClick": [Function], }, ], + "iconSrc": , "isExpanded": false, "isSelected": [Function], "label": "testCollection", diff --git a/src/Explorer/Tree/treeNodeUtil.ts b/src/Explorer/Tree/treeNodeUtil.tsx similarity index 97% rename from src/Explorer/Tree/treeNodeUtil.ts rename to src/Explorer/Tree/treeNodeUtil.tsx index e2cc769a6..b6ec04e01 100644 --- a/src/Explorer/Tree/treeNodeUtil.ts +++ b/src/Explorer/Tree/treeNodeUtil.tsx @@ -1,3 +1,4 @@ +import { DatabaseRegular, DocumentMultipleRegular, SettingsRegular } from "@fluentui/react-icons"; import { TreeNode } from "Explorer/Controls/TreeComponent/TreeNodeComponent"; import TabsBase from "Explorer/Tabs/TabsBase"; import StoredProcedure from "Explorer/Tree/StoredProcedure"; @@ -7,6 +8,7 @@ import { useDatabases } from "Explorer/useDatabases"; import { getItemName } from "Utils/APITypeUtils"; import { isServerlessAccount } from "Utils/CapabilityUtils"; import { useTabs } from "hooks/useTabs"; +import React from "react"; import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility"; import { Platform, configContext } from "../../ConfigContext"; import * as DataModels from "../../Contracts/DataModels"; @@ -25,6 +27,10 @@ export const shouldShowScriptNodes = (): boolean => { ); }; +const TreeDatabaseIcon = ; +const TreeSettingsIcon = ; +const TreeCollectionIcon = ; + export const createSampleDataTreeNodes = (sampleDataResourceTokenCollection: ViewModels.CollectionBase): TreeNode[] => { const updatedSampleTree: TreeNode = { label: sampleDataResourceTokenCollection.databaseId, @@ -36,6 +42,7 @@ export const createSampleDataTreeNodes = (sampleDataResourceTokenCollection: Vie isExpanded: false, className: "collectionNode", contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(), + iconSrc: TreeCollectionIcon, onClick: () => { useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection); useCommandBar.getState().setContextButtons([]); @@ -104,6 +111,7 @@ export const createResourceTokenTreeNodes = (collection: ViewModels.CollectionBa isExpanded: true, children, className: "collectionNode", + iconSrc: TreeCollectionIcon, onClick: () => { // Rewritten version of expandCollapseCollection useSelectedNode.getState().setSelectedNode(collection); @@ -133,6 +141,7 @@ export const createDatabaseTreeNodes = ( databaseNode.children.push({ id: database.isSampleDB ? "sampleScaleSettings" : "", label: "Scale", + iconSrc: TreeSettingsIcon, isSelected: () => useSelectedNode .getState() @@ -169,6 +178,7 @@ export const createDatabaseTreeNodes = ( children: [], isSelected: () => useSelectedNode.getState().isDataNodeSelected(database.id()), contextMenu: ResourceTreeContextMenuButtonFactory.createDatabaseContextMenu(container, database.id()), + iconSrc: TreeDatabaseIcon, onExpanded: async () => { useSelectedNode.getState().setSelectedNode(database); if (!databaseNode.children || databaseNode.children?.length === 0) { @@ -219,6 +229,7 @@ export const buildCollectionNode = ( children: children, className: "collectionNode", contextMenu: ResourceTreeContextMenuButtonFactory.createCollectionContextMenuButton(container, collection), + iconSrc: TreeCollectionIcon, onClick: () => { useSelectedNode.getState().setSelectedNode(collection); collection.openTab();