random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Ashley Stanton-Nurse 2024-09-04 13:07:27 -07:00 committed by GitHub
parent b4973e8367
commit e8a5658799
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 452 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
less/documentDB.less
View File

@ -1906,8 +1906,14 @@ input::-webkit-calendar-picker-indicator::after {
} }
.nav-tabs-margin { .nav-tabs-margin {
padding-top: 5px; height: 32px;
background-color: #f2f2f2; background-color: #f2f2f2;
.nav-tabs {
display: flex;
align-items: flex-end;
height: 100%;
}
} }
.navTabHeight { .navTabHeight {

3
src/Explorer/Controls/TreeComponent/Styles.ts
View File

@ -17,7 +17,7 @@ export const useTreeStyles = makeStyles({
minWidth: "100%", minWidth: "100%",
rowGap: "0px", rowGap: "0px",
paddingTop: "0px", paddingTop: "0px",
[treeIconWidth]: "20px", [treeIconWidth]: "16px",
[leafNodeSpacing]: "24px", [leafNodeSpacing]: "24px",
}, },
nodeIcon: { nodeIcon: {
@ -32,7 +32,6 @@ export const useTreeStyles = makeStyles({
fontSize: tokens.fontSizeBase300, fontSize: tokens.fontSizeBase300,
height: tokens.layoutRowHeight, height: tokens.layoutRowHeight,
...cosmosShorthands.borderBottom(), ...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. // Some sneaky CSS variables stuff to change the background color of the action button on hover.
[actionButtonBackground]: tokens.colorNeutralBackground1, [actionButtonBackground]: tokens.colorNeutralBackground1,

15
src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
View File

@ -149,15 +149,16 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
// We use the expandIcon slot to hold the node icon too. // 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. // We only show a node icon for leaf nodes, even if a branch node has an iconSrc.
const expandIcon = isLoading ? ( const treeIcon =
<Spinner size="extra-tiny" /> node.iconSrc === undefined ? undefined : typeof node.iconSrc === "string" ? (
) : !isBranch ? (
typeof node.iconSrc === "string" ? (
<img src={node.iconSrc} className={treeStyles.nodeIcon} alt="" /> <img src={node.iconSrc} className={treeStyles.nodeIcon} alt="" />
) : ( ) : (
node.iconSrc node.iconSrc
) );
) : openItems.includes(treeNodeId) ? (
const expandIcon = isLoading ? (
<Spinner size="extra-tiny" />
) : !isBranch ? undefined : openItems.includes(treeNodeId) ? (
<ChevronDown20Regular data-test="TreeNode/CollapseIcon" /> <ChevronDown20Regular data-test="TreeNode/CollapseIcon" />
) : ( ) : (
<ChevronRight20Regular data-text="TreeNode/ExpandIcon" /> <ChevronRight20Regular data-text="TreeNode/ExpandIcon" />
@ -174,7 +175,6 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
<TreeItemLayout <TreeItemLayout
className={mergeClasses( className={mergeClasses(
treeStyles.treeItemLayout, treeStyles.treeItemLayout,
expandIcon ? undefined : treeStyles.treeItemLayoutNoIcon,
shouldShowAsSelected && treeStyles.selectedItem, shouldShowAsSelected && treeStyles.selectedItem,
node.className && treeStyles[node.className], node.className && treeStyles[node.className],
)} )}
@ -200,6 +200,7 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
), ),
} }
} }
iconBefore={treeIcon}
expandIcon={expandIcon} expandIcon={expandIcon}
> >
<span className={treeStyles.nodeLabel}>{node.label}</span> <span className={treeStyles.nodeLabel}>{node.label}</span>

280
src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
View File

@ -10,13 +10,20 @@ exports[`TreeNodeComponent does not render children if the node is loading 1`] =
> >
<TreeItemLayout <TreeItemLayout
actions={false} actions={false}
className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl" className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root" data-test="TreeNode:root"
expandIcon={ expandIcon={
<ChevronRight20Regular <ChevronRight20Regular
data-text="TreeNode/ExpandIcon" data-text="TreeNode/ExpandIcon"
/> />
} }
iconBefore={
<img
alt=""
className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="rootIcon"
/>
}
> >
<span <span
className="___1h29e9h_0000000 fz5stix" className="___1h29e9h_0000000 fz5stix"
@ -156,7 +163,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
"itemType": "branch", "itemType": "branch",
"layoutRef": { "layoutRef": {
"current": <div "current": <div
class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl" class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root" data-test="TreeNode:root"
> >
<div <div
@ -179,6 +186,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
/> />
</svg> </svg>
</div> </div>
<div
aria-hidden="true"
class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
>
<img
alt=""
class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="rootIcon"
/>
</div>
<div <div
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
@ -208,7 +225,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
tabindex="-1" tabindex="-1"
> >
<div <div
class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl" class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root" data-test="TreeNode:root"
> >
<div <div
@ -231,6 +248,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
/> />
</svg> </svg>
</div> </div>
<div
aria-hidden="true"
class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
>
<img
alt=""
class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="rootIcon"
/>
</div>
<div <div
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
@ -242,7 +269,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
</div> </div>
</div> </div>
<div <div
class="fui-Tree rnv2ez3 ___jy13a00_lpffjy0 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n" class="fui-Tree rnv2ez3 ___17a32do_7zrvj80 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
data-test="Tree:root" data-test="Tree:root"
role="tree" role="tree"
> >
@ -256,7 +283,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
tabindex="0" tabindex="0"
> >
<div <div
class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl" class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root/child1Label" data-test="TreeNode:root/child1Label"
> >
<div <div
@ -279,6 +306,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
/> />
</svg> </svg>
</div> </div>
<div
aria-hidden="true"
class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
>
<img
alt=""
class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="child1Icon"
/>
</div>
<div <div
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
@ -300,7 +337,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
tabindex="-1" tabindex="-1"
> >
<div <div
class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl" class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root/child2LoadingLabel" data-test="TreeNode:root/child2LoadingLabel"
> >
<div <div
@ -323,6 +360,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
/> />
</svg> </svg>
</div> </div>
<div
aria-hidden="true"
class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
>
<img
alt=""
class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="child2LoadingIcon"
/>
</div>
<div <div
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
@ -343,7 +390,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
tabindex="-1" tabindex="-1"
> >
<div <div
class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl" class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root/child3ExpandingLabel" data-test="TreeNode:root/child3ExpandingLabel"
> >
<div <div
@ -363,6 +410,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
</span> </span>
</div> </div>
</div> </div>
<div
aria-hidden="true"
class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
>
<img
alt=""
class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="child3ExpandingIcon"
/>
</div>
<div <div
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
@ -383,16 +440,23 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
> >
<TreeItemLayout <TreeItemLayout
actions={false} actions={false}
className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl" className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root" data-test="TreeNode:root"
expandIcon={ expandIcon={
<ChevronRight20Regular <ChevronRight20Regular
data-text="TreeNode/ExpandIcon" data-text="TreeNode/ExpandIcon"
/> />
} }
iconBefore={
<img
alt=""
className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="rootIcon"
/>
}
> >
<div <div
className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl" className="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root" data-test="TreeNode:root"
> >
<div <div
@ -419,6 +483,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
</svg> </svg>
</ChevronRight20Regular> </ChevronRight20Regular>
</div> </div>
<div
aria-hidden={true}
className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
>
<img
alt=""
className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="rootIcon"
/>
</div>
<div <div
className="fui-TreeItemLayout__main rklbe47" className="fui-TreeItemLayout__main rklbe47"
> >
@ -431,7 +505,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
</div> </div>
</TreeItemLayout> </TreeItemLayout>
<Tree <Tree
className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n" className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
data-test="Tree:root" data-test="Tree:root"
> >
<TreeProvider <TreeProvider
@ -499,7 +573,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
} }
> >
<div <div
className="fui-Tree rnv2ez3 ___jy13a00_lpffjy0 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n" className="fui-Tree rnv2ez3 ___17a32do_7zrvj80 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
data-test="Tree:root" data-test="Tree:root"
role="tree" role="tree"
> >
@ -587,7 +661,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
"itemType": "branch", "itemType": "branch",
"layoutRef": { "layoutRef": {
"current": <div "current": <div
class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl" class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root/child1Label" data-test="TreeNode:root/child1Label"
> >
<div <div
@ -610,6 +684,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
/> />
</svg> </svg>
</div> </div>
<div
aria-hidden="true"
class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
>
<img
alt=""
class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="child1Icon"
/>
</div>
<div <div
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
@ -639,7 +723,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
tabindex="0" tabindex="0"
> >
<div <div
class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl" class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root/child1Label" data-test="TreeNode:root/child1Label"
> >
<div <div
@ -662,6 +746,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
/> />
</svg> </svg>
</div> </div>
<div
aria-hidden="true"
class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
>
<img
alt=""
class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="child1Icon"
/>
</div>
<div <div
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
@ -680,16 +774,23 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
> >
<TreeItemLayout <TreeItemLayout
actions={false} actions={false}
className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl" className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root/child1Label" data-test="TreeNode:root/child1Label"
expandIcon={ expandIcon={
<ChevronRight20Regular <ChevronRight20Regular
data-text="TreeNode/ExpandIcon" data-text="TreeNode/ExpandIcon"
/> />
} }
iconBefore={
<img
alt=""
className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="child1Icon"
/>
}
> >
<div <div
className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl" className="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root/child1Label" data-test="TreeNode:root/child1Label"
> >
<div <div
@ -716,6 +817,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
</svg> </svg>
</ChevronRight20Regular> </ChevronRight20Regular>
</div> </div>
<div
aria-hidden={true}
className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
>
<img
alt=""
className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="child1Icon"
/>
</div>
<div <div
className="fui-TreeItemLayout__main rklbe47" className="fui-TreeItemLayout__main rklbe47"
> >
@ -728,7 +839,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
</div> </div>
</TreeItemLayout> </TreeItemLayout>
<Tree <Tree
className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n" className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
data-test="Tree:root/child1Label" data-test="Tree:root/child1Label"
> >
<TreeProvider <TreeProvider
@ -821,7 +932,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
"itemType": "branch", "itemType": "branch",
"layoutRef": { "layoutRef": {
"current": <div "current": <div
class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl" class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root/child2LoadingLabel" data-test="TreeNode:root/child2LoadingLabel"
> >
<div <div
@ -844,6 +955,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
/> />
</svg> </svg>
</div> </div>
<div
aria-hidden="true"
class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
>
<img
alt=""
class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="child2LoadingIcon"
/>
</div>
<div <div
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
@ -873,7 +994,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
tabindex="-1" tabindex="-1"
> >
<div <div
class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl" class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root/child2LoadingLabel" data-test="TreeNode:root/child2LoadingLabel"
> >
<div <div
@ -896,6 +1017,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
/> />
</svg> </svg>
</div> </div>
<div
aria-hidden="true"
class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
>
<img
alt=""
class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="child2LoadingIcon"
/>
</div>
<div <div
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
@ -914,16 +1045,23 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
> >
<TreeItemLayout <TreeItemLayout
actions={false} actions={false}
className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl" className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root/child2LoadingLabel" data-test="TreeNode:root/child2LoadingLabel"
expandIcon={ expandIcon={
<ChevronRight20Regular <ChevronRight20Regular
data-text="TreeNode/ExpandIcon" data-text="TreeNode/ExpandIcon"
/> />
} }
iconBefore={
<img
alt=""
className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="child2LoadingIcon"
/>
}
> >
<div <div
className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl" className="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root/child2LoadingLabel" data-test="TreeNode:root/child2LoadingLabel"
> >
<div <div
@ -950,6 +1088,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
</svg> </svg>
</ChevronRight20Regular> </ChevronRight20Regular>
</div> </div>
<div
aria-hidden={true}
className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
>
<img
alt=""
className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="child2LoadingIcon"
/>
</div>
<div <div
className="fui-TreeItemLayout__main rklbe47" className="fui-TreeItemLayout__main rklbe47"
> >
@ -1039,7 +1187,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
"itemType": "leaf", "itemType": "leaf",
"layoutRef": { "layoutRef": {
"current": <div "current": <div
class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl" class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root/child3ExpandingLabel" data-test="TreeNode:root/child3ExpandingLabel"
> >
<div <div
@ -1059,6 +1207,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
</span> </span>
</div> </div>
</div> </div>
<div
aria-hidden="true"
class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
>
<img
alt=""
class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="child3ExpandingIcon"
/>
</div>
<div <div
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
@ -1087,7 +1245,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
tabindex="-1" tabindex="-1"
> >
<div <div
class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl" class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root/child3ExpandingLabel" data-test="TreeNode:root/child3ExpandingLabel"
> >
<div <div
@ -1107,6 +1265,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
</span> </span>
</div> </div>
</div> </div>
<div
aria-hidden="true"
class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
>
<img
alt=""
class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="child3ExpandingIcon"
/>
</div>
<div <div
class="fui-TreeItemLayout__main rklbe47" class="fui-TreeItemLayout__main rklbe47"
> >
@ -1125,9 +1293,9 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
> >
<TreeItemLayout <TreeItemLayout
actions={false} actions={false}
className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl" className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root/child3ExpandingLabel" data-test="TreeNode:root/child3ExpandingLabel"
expandIcon={ iconBefore={
<img <img
alt="" alt=""
className="___i3nbrx0_0000000 f1do9gdl fbv8p0b" className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@ -1136,12 +1304,12 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
} }
> >
<div <div
className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl" className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root/child3ExpandingLabel" data-test="TreeNode:root/child3ExpandingLabel"
> >
<div <div
aria-hidden={true} aria-hidden={true}
className="fui-TreeItemLayout__expandIcon rh4pu5o" className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
> >
<img <img
alt="" alt=""
@ -1184,9 +1352,9 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
> >
<TreeItemLayout <TreeItemLayout
actions={false} actions={false}
className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl" className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root" data-test="TreeNode:root"
expandIcon={ iconBefore={
<img <img
alt="" alt=""
className="___i3nbrx0_0000000 f1do9gdl fbv8p0b" className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@ -1213,13 +1381,20 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
> >
<TreeItemLayout <TreeItemLayout
actions={false} actions={false}
className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl" className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root" data-test="TreeNode:root"
expandIcon={ expandIcon={
<Spinner <Spinner
size="extra-tiny" size="extra-tiny"
/> />
} }
iconBefore={
<img
alt=""
className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="rootIcon"
/>
}
> >
<span <span
className="___1h29e9h_0000000 fz5stix" className="___1h29e9h_0000000 fz5stix"
@ -1240,13 +1415,20 @@ exports[`TreeNodeComponent renders a node as expandable if it has empty, but def
> >
<TreeItemLayout <TreeItemLayout
actions={false} actions={false}
className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl" className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root" data-test="TreeNode:root"
expandIcon={ expandIcon={
<ChevronRight20Regular <ChevronRight20Regular
data-text="TreeNode/ExpandIcon" data-text="TreeNode/ExpandIcon"
/> />
} }
iconBefore={
<img
alt=""
className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="rootIcon"
/>
}
> >
<span <span
className="___1h29e9h_0000000 fz5stix" className="___1h29e9h_0000000 fz5stix"
@ -1313,9 +1495,9 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
"className": "___1r8p62d_0000000 f1xg1ack f1e31b4d", "className": "___1r8p62d_0000000 f1xg1ack f1e31b4d",
} }
} }
className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl" className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root" data-test="TreeNode:root"
expandIcon={ iconBefore={
<img <img
alt="" alt=""
className="___i3nbrx0_0000000 f1do9gdl fbv8p0b" className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@ -1363,9 +1545,9 @@ exports[`TreeNodeComponent renders a single node 1`] = `
> >
<TreeItemLayout <TreeItemLayout
actions={false} actions={false}
className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl" className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root" data-test="TreeNode:root"
expandIcon={ iconBefore={
<img <img
alt="" alt=""
className="___i3nbrx0_0000000 f1do9gdl fbv8p0b" className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@ -1392,9 +1574,9 @@ exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
> >
<TreeItemLayout <TreeItemLayout
actions={false} actions={false}
className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl" className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root" data-test="TreeNode:root"
expandIcon={ iconBefore={
<img <img
alt="" alt=""
className="___i3nbrx0_0000000 f1do9gdl fbv8p0b" className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@ -1421,13 +1603,20 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
> >
<TreeItemLayout <TreeItemLayout
actions={false} actions={false}
className="___kqkdor0_ihxn0o0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl" className="___rq9vxg0_1ykn2d2 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
data-test="TreeNode:root" data-test="TreeNode:root"
expandIcon={ expandIcon={
<ChevronRight20Regular <ChevronRight20Regular
data-text="TreeNode/ExpandIcon" data-text="TreeNode/ExpandIcon"
/> />
} }
iconBefore={
<img
alt=""
className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="rootIcon"
/>
}
> >
<span <span
className="___1h29e9h_0000000 fz5stix" className="___1h29e9h_0000000 fz5stix"
@ -1436,7 +1625,7 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
</span> </span>
</TreeItemLayout> </TreeItemLayout>
<Tree <Tree
className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n" className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
data-test="Tree:root" data-test="Tree:root"
> >
<TreeNodeComponent <TreeNodeComponent
@ -1497,13 +1686,20 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
> >
<TreeItemLayout <TreeItemLayout
actions={false} actions={false}
className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl" className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
data-test="TreeNode:root" data-test="TreeNode:root"
expandIcon={ expandIcon={
<ChevronRight20Regular <ChevronRight20Regular
data-text="TreeNode/ExpandIcon" data-text="TreeNode/ExpandIcon"
/> />
} }
iconBefore={
<img
alt=""
className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
src="rootIcon"
/>
}
> >
<span <span
className="___1h29e9h_0000000 fz5stix" className="___1h29e9h_0000000 fz5stix"
@ -1512,7 +1708,7 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
</span> </span>
</TreeItemLayout> </TreeItemLayout>
<Tree <Tree
className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n" className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
data-test="Tree:root" data-test="Tree:root"
> >
<TreeNodeComponent <TreeNodeComponent
@ -1574,9 +1770,9 @@ exports[`TreeNodeComponent renders single selected leaf node as selected 1`] = `
> >
<TreeItemLayout <TreeItemLayout
actions={false} actions={false}
className="___kqkdor0_ihxn0o0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl" className="___rq9vxg0_1ykn2d2 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
data-test="TreeNode:root" data-test="TreeNode:root"
expandIcon={ iconBefore={
<img <img
alt="" alt=""
className="___i3nbrx0_0000000 f1do9gdl fbv8p0b" className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"

4
src/Explorer/Sidebar.tsx
View File

@ -86,7 +86,7 @@ const useSidebarStyles = makeStyles({
}, },
}, },
globalCommandsMenuButton: { globalCommandsMenuButton: {
display: "initial", display: "inline-flex",
"@container (min-width: 250px)": { "@container (min-width: 250px)": {
display: "none", display: "none",
}, },
@ -280,7 +280,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
{/* Collections Tree - Start */} {/* Collections Tree - Start */}
{hasSidebar && ( {hasSidebar && (
// When collapsed, we force the pane to 24 pixels wide and make it non-resizable. // When collapsed, we force the pane to 24 pixels wide and make it non-resizable.
<Allotment.Pane minSize={24} preferredSize={300}> <Allotment.Pane minSize={24} preferredSize={250}>
<CosmosFluentProvider className={mergeClasses(styles.sidebar)}> <CosmosFluentProvider className={mergeClasses(styles.sidebar)}>
<div className={styles.sidebarContainer}> <div className={styles.sidebarContainer}>
{loading && ( {loading && (

76
src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap
View File

@ -348,7 +348,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
> >
<List <List
direction="ltr" direction="ltr"
height={-36} height={-32}
itemCount={3} itemCount={3}
itemData={ itemData={
[ [
@ -387,7 +387,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
}, },
] ]
} }
itemSize={36} itemSize={32}
layout="vertical" layout="vertical"
overscanCount={2} overscanCount={2}
style={ style={
@ -404,7 +404,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
{ {
"WebkitOverflowScrolling": "touch", "WebkitOverflowScrolling": "touch",
"direction": "ltr", "direction": "ltr",
"height": -36, "height": -32,
"overflow": "auto", "overflow": "auto",
"overflowY": "scroll", "overflowY": "scroll",
"position": "relative", "position": "relative",
@ -416,7 +416,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
<div <div
style={ style={
{ {
"height": 108, "height": 96,
"pointerEvents": undefined, "pointerEvents": undefined,
"width": "100%", "width": "100%",
} }
@ -464,7 +464,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
key="0" key="0"
style={ style={
{ {
"height": 36, "height": 32,
"left": 0, "left": 0,
"position": "absolute", "position": "absolute",
"right": undefined, "right": undefined,
@ -482,7 +482,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
style={ style={
{ {
"cursor": "pointer", "cursor": "pointer",
"height": 36, "height": 32,
"left": 0, "left": 0,
"position": "absolute", "position": "absolute",
"right": undefined, "right": undefined,
@ -500,7 +500,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
style={ style={
{ {
"cursor": "pointer", "cursor": "pointer",
"height": 36, "height": 32,
"left": 0, "left": 0,
"position": "absolute", "position": "absolute",
"right": undefined, "right": undefined,
@ -653,11 +653,11 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
key="1" key="1"
style={ style={
{ {
"height": 36, "height": 32,
"left": 0, "left": 0,
"position": "absolute", "position": "absolute",
"right": undefined, "right": undefined,
"top": 36, "top": 32,
"width": "100%", "width": "100%",
} }
} }
@ -671,11 +671,11 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
style={ style={
{ {
"cursor": "pointer", "cursor": "pointer",
"height": 36, "height": 32,
"left": 0, "left": 0,
"position": "absolute", "position": "absolute",
"right": undefined, "right": undefined,
"top": 36, "top": 32,
"userSelect": "none", "userSelect": "none",
"width": "100%", "width": "100%",
} }
@ -689,11 +689,11 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
style={ style={
{ {
"cursor": "pointer", "cursor": "pointer",
"height": 36, "height": 32,
"left": 0, "left": 0,
"position": "absolute", "position": "absolute",
"right": undefined, "right": undefined,
"top": 36, "top": 32,
"userSelect": "none", "userSelect": "none",
"width": "100%", "width": "100%",
} }
@ -842,11 +842,11 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
key="2" key="2"
style={ style={
{ {
"height": 36, "height": 32,
"left": 0, "left": 0,
"position": "absolute", "position": "absolute",
"right": undefined, "right": undefined,
"top": 72, "top": 64,
"width": "100%", "width": "100%",
} }
} }
@ -860,11 +860,11 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
style={ style={
{ {
"cursor": "pointer", "cursor": "pointer",
"height": 36, "height": 32,
"left": 0, "left": 0,
"position": "absolute", "position": "absolute",
"right": undefined, "right": undefined,
"top": 72, "top": 64,
"userSelect": "none", "userSelect": "none",
"width": "100%", "width": "100%",
} }
@ -878,11 +878,11 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
style={ style={
{ {
"cursor": "pointer", "cursor": "pointer",
"height": 36, "height": 32,
"left": 0, "left": 0,
"position": "absolute", "position": "absolute",
"right": undefined, "right": undefined,
"top": 72, "top": 64,
"userSelect": "none", "userSelect": "none",
"width": "100%", "width": "100%",
} }
@ -1387,7 +1387,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
> >
<List <List
direction="ltr" direction="ltr"
height={-36} height={-32}
itemCount={3} itemCount={3}
itemData={ itemData={
[ [
@ -1426,7 +1426,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
}, },
] ]
} }
itemSize={36} itemSize={32}
layout="vertical" layout="vertical"
overscanCount={2} overscanCount={2}
style={ style={
@ -1443,7 +1443,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
{ {
"WebkitOverflowScrolling": "touch", "WebkitOverflowScrolling": "touch",
"direction": "ltr", "direction": "ltr",
"height": -36, "height": -32,
"overflow": "auto", "overflow": "auto",
"overflowY": "scroll", "overflowY": "scroll",
"position": "relative", "position": "relative",
@ -1455,7 +1455,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
<div <div
style={ style={
{ {
"height": 108, "height": 96,
"pointerEvents": undefined, "pointerEvents": undefined,
"width": "100%", "width": "100%",
} }
@ -1503,7 +1503,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
key="0" key="0"
style={ style={
{ {
"height": 36, "height": 32,
"left": 0, "left": 0,
"position": "absolute", "position": "absolute",
"right": undefined, "right": undefined,
@ -1521,7 +1521,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
style={ style={
{ {
"cursor": "pointer", "cursor": "pointer",
"height": 36, "height": 32,
"left": 0, "left": 0,
"position": "absolute", "position": "absolute",
"right": undefined, "right": undefined,
@ -1539,7 +1539,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
style={ style={
{ {
"cursor": "pointer", "cursor": "pointer",
"height": 36, "height": 32,
"left": 0, "left": 0,
"position": "absolute", "position": "absolute",
"right": undefined, "right": undefined,
@ -1732,11 +1732,11 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
key="1" key="1"
style={ style={
{ {
"height": 36, "height": 32,
"left": 0, "left": 0,
"position": "absolute", "position": "absolute",
"right": undefined, "right": undefined,
"top": 36, "top": 32,
"width": "100%", "width": "100%",
} }
} }
@ -1750,11 +1750,11 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
style={ style={
{ {
"cursor": "pointer", "cursor": "pointer",
"height": 36, "height": 32,
"left": 0, "left": 0,
"position": "absolute", "position": "absolute",
"right": undefined, "right": undefined,
"top": 36, "top": 32,
"userSelect": "none", "userSelect": "none",
"width": "100%", "width": "100%",
} }
@ -1768,11 +1768,11 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
style={ style={
{ {
"cursor": "pointer", "cursor": "pointer",
"height": 36, "height": 32,
"left": 0, "left": 0,
"position": "absolute", "position": "absolute",
"right": undefined, "right": undefined,
"top": 36, "top": 32,
"userSelect": "none", "userSelect": "none",
"width": "100%", "width": "100%",
} }
@ -1961,11 +1961,11 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
key="2" key="2"
style={ style={
{ {
"height": 36, "height": 32,
"left": 0, "left": 0,
"position": "absolute", "position": "absolute",
"right": undefined, "right": undefined,
"top": 72, "top": 64,
"width": "100%", "width": "100%",
} }
} }
@ -1979,11 +1979,11 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
style={ style={
{ {
"cursor": "pointer", "cursor": "pointer",
"height": 36, "height": 32,
"left": 0, "left": 0,
"position": "absolute", "position": "absolute",
"right": undefined, "right": undefined,
"top": 72, "top": 64,
"userSelect": "none", "userSelect": "none",
"width": "100%", "width": "100%",
} }
@ -1997,11 +1997,11 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
style={ style={
{ {
"cursor": "pointer", "cursor": "pointer",
"height": 36, "height": 32,
"left": 0, "left": 0,
"position": "absolute", "position": "absolute",
"right": undefined, "right": undefined,
"top": 72, "top": 64,
"userSelect": "none", "userSelect": "none",
"width": "100%", "width": "100%",
} }

3
src/Explorer/Tabs/Tabs.tsx
View File

@ -100,8 +100,7 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
}, },
}} }}
> >
{`To prevent queries from using excessive RUs, Data Explorer has a 5,000 RU default limit. To modify or remove {`Data Explorer has a 5,000 RU default limit. To adjust the limit, go to the Settings page and find "RU Threshold".`}
the limit, go to the Settings cog on the right and find "RU Threshold".`}
<Link <Link
className="underlinedLink" className="underlinedLink"
href="https://review.learn.microsoft.com/en-us/azure/cosmos-db/data-explorer?branch=main#configure-request-unit-threshold" href="https://review.learn.microsoft.com/en-us/azure/cosmos-db/data-explorer?branch=main#configure-request-unit-threshold"

30
src/Explorer/Theme/ThemeUtil.tsx
View File

@ -16,7 +16,7 @@ import React from "react";
import { appThemeFabricTealBrandRamp } from "../../Platform/Fabric/FabricTheme"; import { appThemeFabricTealBrandRamp } from "../../Platform/Fabric/FabricTheme";
export const LayoutConstants = { export const LayoutConstants = {
rowHeight: 36, rowHeight: 32,
}; };
// Our CosmosFluentProvider has the same props as a FluentProvider. // Our CosmosFluentProvider has the same props as a FluentProvider.
@ -91,15 +91,30 @@ const appThemePortalBrandRamp: BrandVariants = {
160: "#CDD8EF", 160: "#CDD8EF",
}; };
const cosmosThemeElements = { export enum LayoutSize {
layoutRowHeight: `${LayoutConstants.rowHeight}px`, Compact,
// TODO: Cozy and Roomy layouts.
}
interface CosmosThemeElements {
layoutRowHeight: string;
}
export type CosmosTheme = Theme & CosmosThemeElements;
const sizeMappings: Record<LayoutSize, Partial<Theme> & CosmosThemeElements> = {
[LayoutSize.Compact]: {
layoutRowHeight: "32px",
fontSizeBase300: "13px",
},
};
const cosmosTheme = {
sidebarMinimumWidth: "200px", sidebarMinimumWidth: "200px",
sidebarInitialWidth: "300px", sidebarInitialWidth: "300px",
}; };
export type CosmosTheme = Theme & typeof cosmosThemeElements; export const tokens = themeToTokensObject({ ...webLightTheme, ...cosmosTheme, ...sizeMappings[LayoutSize.Compact] });
export const tokens = themeToTokensObject({ ...webLightTheme, ...cosmosThemeElements });
export const cosmosShorthands = { export const cosmosShorthands = {
border: () => shorthands.border("1px", "solid", tokens.colorNeutralStroke2), border: () => shorthands.border("1px", "solid", tokens.colorNeutralStroke2),
@ -117,6 +132,7 @@ export function getPlatformTheme(platform: Platform): CosmosTheme {
return { return {
...baseTheme, ...baseTheme,
...cosmosThemeElements, ...cosmosTheme,
...sizeMappings[LayoutSize.Compact], // TODO: Allow for different layout sizes.
}; };
} }

123
src/Explorer/Tree/__snapshots__/treeNodeUtil.test.ts.snap
View File

@ -30,6 +30,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"styleClass": "deleteCollectionMenuItem", "styleClass": "deleteCollectionMenuItem",
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "standardCollection", "label": "standardCollection",
@ -69,6 +72,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"styleClass": "deleteCollectionMenuItem", "styleClass": "deleteCollectionMenuItem",
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "conflictsCollection", "label": "conflictsCollection",
@ -92,6 +98,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"styleClass": "deleteDatabaseMenuItem", "styleClass": "deleteDatabaseMenuItem",
}, },
], ],
"iconSrc": <DatabaseRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "standardDb", "label": "standardDb",
@ -102,6 +111,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
{ {
"children": [ "children": [
{ {
"iconSrc": <SettingsRegular
fontSize={16}
/>,
"id": "", "id": "",
"isSelected": [Function], "isSelected": [Function],
"label": "Scale", "label": "Scale",
@ -133,6 +145,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"styleClass": "deleteCollectionMenuItem", "styleClass": "deleteCollectionMenuItem",
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "sampleItemsCollection", "label": "sampleItemsCollection",
@ -156,6 +171,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"styleClass": "deleteDatabaseMenuItem", "styleClass": "deleteDatabaseMenuItem",
}, },
], ],
"iconSrc": <DatabaseRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "sharedDatabase", "label": "sharedDatabase",
@ -246,6 +264,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"styleClass": "deleteCollectionMenuItem", "styleClass": "deleteCollectionMenuItem",
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "schemaCollection", "label": "schemaCollection",
@ -274,6 +295,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"styleClass": "deleteDatabaseMenuItem", "styleClass": "deleteDatabaseMenuItem",
}, },
], ],
"iconSrc": <DatabaseRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "giganticDatabase", "label": "giganticDatabase",
@ -345,6 +369,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"styleClass": "deleteCollectionMenuItem", "styleClass": "deleteCollectionMenuItem",
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "standardCollection", "label": "standardCollection",
@ -415,6 +442,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"styleClass": "deleteCollectionMenuItem", "styleClass": "deleteCollectionMenuItem",
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "conflictsCollection", "label": "conflictsCollection",
@ -438,6 +468,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"styleClass": "deleteDatabaseMenuItem", "styleClass": "deleteDatabaseMenuItem",
}, },
], ],
"iconSrc": <DatabaseRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "standardDb", "label": "standardDb",
@ -448,6 +481,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
{ {
"children": [ "children": [
{ {
"iconSrc": <SettingsRegular
fontSize={16}
/>,
"id": "", "id": "",
"isSelected": [Function], "isSelected": [Function],
"label": "Scale", "label": "Scale",
@ -510,6 +546,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"styleClass": "deleteCollectionMenuItem", "styleClass": "deleteCollectionMenuItem",
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "sampleItemsCollection", "label": "sampleItemsCollection",
@ -533,6 +572,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"styleClass": "deleteDatabaseMenuItem", "styleClass": "deleteDatabaseMenuItem",
}, },
], ],
"iconSrc": <DatabaseRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "sharedDatabase", "label": "sharedDatabase",
@ -654,6 +696,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"styleClass": "deleteCollectionMenuItem", "styleClass": "deleteCollectionMenuItem",
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "schemaCollection", "label": "schemaCollection",
@ -682,6 +727,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"styleClass": "deleteDatabaseMenuItem", "styleClass": "deleteDatabaseMenuItem",
}, },
], ],
"iconSrc": <DatabaseRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "giganticDatabase", "label": "giganticDatabase",
@ -706,6 +754,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"onClick": [Function], "onClick": [Function],
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "standardCollection", "label": "standardCollection",
@ -724,6 +775,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"onClick": [Function], "onClick": [Function],
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "conflictsCollection", "label": "conflictsCollection",
@ -747,6 +801,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteDatabaseMenuItem", "styleClass": "deleteDatabaseMenuItem",
}, },
], ],
"iconSrc": <DatabaseRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "standardDb", "label": "standardDb",
@ -766,6 +823,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"onClick": [Function], "onClick": [Function],
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "sampleItemsCollection", "label": "sampleItemsCollection",
@ -789,6 +849,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteDatabaseMenuItem", "styleClass": "deleteDatabaseMenuItem",
}, },
], ],
"iconSrc": <DatabaseRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "sharedDatabase", "label": "sharedDatabase",
@ -808,6 +871,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"onClick": [Function], "onClick": [Function],
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "schemaCollection", "label": "schemaCollection",
@ -836,6 +902,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteDatabaseMenuItem", "styleClass": "deleteDatabaseMenuItem",
}, },
], ],
"iconSrc": <DatabaseRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "giganticDatabase", "label": "giganticDatabase",
@ -976,6 +1045,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteCollectionMenuItem", "styleClass": "deleteCollectionMenuItem",
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "standardCollection", "label": "standardCollection",
@ -1076,6 +1148,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteCollectionMenuItem", "styleClass": "deleteCollectionMenuItem",
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "conflictsCollection", "label": "conflictsCollection",
@ -1099,6 +1174,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteDatabaseMenuItem", "styleClass": "deleteDatabaseMenuItem",
}, },
], ],
"iconSrc": <DatabaseRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "standardDb", "label": "standardDb",
@ -1109,6 +1187,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
{ {
"children": [ "children": [
{ {
"iconSrc": <SettingsRegular
fontSize={16}
/>,
"id": "", "id": "",
"isSelected": [Function], "isSelected": [Function],
"label": "Scale", "label": "Scale",
@ -1201,6 +1282,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteCollectionMenuItem", "styleClass": "deleteCollectionMenuItem",
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "sampleItemsCollection", "label": "sampleItemsCollection",
@ -1224,6 +1308,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteDatabaseMenuItem", "styleClass": "deleteDatabaseMenuItem",
}, },
], ],
"iconSrc": <DatabaseRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "sharedDatabase", "label": "sharedDatabase",
@ -1375,6 +1462,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteCollectionMenuItem", "styleClass": "deleteCollectionMenuItem",
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "schemaCollection", "label": "schemaCollection",
@ -1403,6 +1493,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteDatabaseMenuItem", "styleClass": "deleteDatabaseMenuItem",
}, },
], ],
"iconSrc": <DatabaseRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "giganticDatabase", "label": "giganticDatabase",
@ -1543,6 +1636,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"styleClass": "deleteCollectionMenuItem", "styleClass": "deleteCollectionMenuItem",
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "standardCollection", "label": "standardCollection",
@ -1638,6 +1734,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"styleClass": "deleteCollectionMenuItem", "styleClass": "deleteCollectionMenuItem",
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "conflictsCollection", "label": "conflictsCollection",
@ -1661,6 +1760,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"styleClass": "deleteDatabaseMenuItem", "styleClass": "deleteDatabaseMenuItem",
}, },
], ],
"iconSrc": <DatabaseRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "standardDb", "label": "standardDb",
@ -1671,6 +1773,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
{ {
"children": [ "children": [
{ {
"iconSrc": <SettingsRegular
fontSize={16}
/>,
"id": "", "id": "",
"isSelected": [Function], "isSelected": [Function],
"label": "Scale", "label": "Scale",
@ -1763,6 +1868,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"styleClass": "deleteCollectionMenuItem", "styleClass": "deleteCollectionMenuItem",
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "sampleItemsCollection", "label": "sampleItemsCollection",
@ -1786,6 +1894,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"styleClass": "deleteDatabaseMenuItem", "styleClass": "deleteDatabaseMenuItem",
}, },
], ],
"iconSrc": <DatabaseRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "sharedDatabase", "label": "sharedDatabase",
@ -1937,6 +2048,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"styleClass": "deleteCollectionMenuItem", "styleClass": "deleteCollectionMenuItem",
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "schemaCollection", "label": "schemaCollection",
@ -1965,6 +2079,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"styleClass": "deleteDatabaseMenuItem", "styleClass": "deleteDatabaseMenuItem",
}, },
], ],
"iconSrc": <DatabaseRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "giganticDatabase", "label": "giganticDatabase",
@ -1986,6 +2103,9 @@ exports[`createResourceTokenTreeNodes creates the expected tree nodes 1`] = `
}, },
], ],
"className": "collectionNode", "className": "collectionNode",
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": true, "isExpanded": true,
"isSelected": [Function], "isSelected": [Function],
"label": "testCollection", "label": "testCollection",
@ -2021,6 +2141,9 @@ exports[`createSampleDataTreeNodes creates the expected tree nodes 1`] = `
"onClick": [Function], "onClick": [Function],
}, },
], ],
"iconSrc": <DocumentMultipleRegular
fontSize={16}
/>,
"isExpanded": false, "isExpanded": false,
"isSelected": [Function], "isSelected": [Function],
"label": "testCollection", "label": "testCollection",

11
src/Explorer/Tree/treeNodeUtil.ts → src/Explorer/Tree/treeNodeUtil.tsx
View File

@ -1,3 +1,4 @@
import { DatabaseRegular, DocumentMultipleRegular, SettingsRegular } from "@fluentui/react-icons";
import { TreeNode } from "Explorer/Controls/TreeComponent/TreeNodeComponent"; import { TreeNode } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
import TabsBase from "Explorer/Tabs/TabsBase"; import TabsBase from "Explorer/Tabs/TabsBase";
import StoredProcedure from "Explorer/Tree/StoredProcedure"; import StoredProcedure from "Explorer/Tree/StoredProcedure";
@ -7,6 +8,7 @@ import { useDatabases } from "Explorer/useDatabases";
import { getItemName } from "Utils/APITypeUtils"; import { getItemName } from "Utils/APITypeUtils";
import { isServerlessAccount } from "Utils/CapabilityUtils"; import { isServerlessAccount } from "Utils/CapabilityUtils";
import { useTabs } from "hooks/useTabs"; import { useTabs } from "hooks/useTabs";
import React from "react";
import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility"; import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
import { Platform, configContext } from "../../ConfigContext"; import { Platform, configContext } from "../../ConfigContext";
import * as DataModels from "../../Contracts/DataModels"; import * as DataModels from "../../Contracts/DataModels";
@ -25,6 +27,10 @@ export const shouldShowScriptNodes = (): boolean => {
); );
}; };
const TreeDatabaseIcon = <DatabaseRegular fontSize={16} />;
const TreeSettingsIcon = <SettingsRegular fontSize={16} />;
const TreeCollectionIcon = <DocumentMultipleRegular fontSize={16} />;
export const createSampleDataTreeNodes = (sampleDataResourceTokenCollection: ViewModels.CollectionBase): TreeNode[] => { export const createSampleDataTreeNodes = (sampleDataResourceTokenCollection: ViewModels.CollectionBase): TreeNode[] => {
const updatedSampleTree: TreeNode = { const updatedSampleTree: TreeNode = {
label: sampleDataResourceTokenCollection.databaseId, label: sampleDataResourceTokenCollection.databaseId,
@ -36,6 +42,7 @@ export const createSampleDataTreeNodes = (sampleDataResourceTokenCollection: Vie
isExpanded: false, isExpanded: false,
className: "collectionNode", className: "collectionNode",
contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(), contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(),
iconSrc: TreeCollectionIcon,
onClick: () => { onClick: () => {
useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection); useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection);
useCommandBar.getState().setContextButtons([]); useCommandBar.getState().setContextButtons([]);
@ -104,6 +111,7 @@ export const createResourceTokenTreeNodes = (collection: ViewModels.CollectionBa
isExpanded: true, isExpanded: true,
children, children,
className: "collectionNode", className: "collectionNode",
iconSrc: TreeCollectionIcon,
onClick: () => { onClick: () => {
// Rewritten version of expandCollapseCollection // Rewritten version of expandCollapseCollection
useSelectedNode.getState().setSelectedNode(collection); useSelectedNode.getState().setSelectedNode(collection);
@ -133,6 +141,7 @@ export const createDatabaseTreeNodes = (
databaseNode.children.push({ databaseNode.children.push({
id: database.isSampleDB ? "sampleScaleSettings" : "", id: database.isSampleDB ? "sampleScaleSettings" : "",
label: "Scale", label: "Scale",
iconSrc: TreeSettingsIcon,
isSelected: () => isSelected: () =>
useSelectedNode useSelectedNode
.getState() .getState()
@ -169,6 +178,7 @@ export const createDatabaseTreeNodes = (
children: [], children: [],
isSelected: () => useSelectedNode.getState().isDataNodeSelected(database.id()), isSelected: () => useSelectedNode.getState().isDataNodeSelected(database.id()),
contextMenu: ResourceTreeContextMenuButtonFactory.createDatabaseContextMenu(container, database.id()), contextMenu: ResourceTreeContextMenuButtonFactory.createDatabaseContextMenu(container, database.id()),
iconSrc: TreeDatabaseIcon,
onExpanded: async () => { onExpanded: async () => {
useSelectedNode.getState().setSelectedNode(database); useSelectedNode.getState().setSelectedNode(database);
if (!databaseNode.children || databaseNode.children?.length === 0) { if (!databaseNode.children || databaseNode.children?.length === 0) {
@ -219,6 +229,7 @@ export const buildCollectionNode = (
children: children, children: children,
className: "collectionNode", className: "collectionNode",
contextMenu: ResourceTreeContextMenuButtonFactory.createCollectionContextMenuButton(container, collection), contextMenu: ResourceTreeContextMenuButtonFactory.createCollectionContextMenuButton(container, collection),
iconSrc: TreeCollectionIcon,
onClick: () => { onClick: () => {
useSelectedNode.getState().setSelectedNode(collection); useSelectedNode.getState().setSelectedNode(collection);
collection.openTab(); collection.openTab();