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

stop tree nodes from expanding to full height, causing overlap (#1861)

This commit is contained in:
Ashley Stanton-Nurse 2024-06-06 09:33:25 -07:00 committed by GitHub
parent b5d4509d49
commit 416743c548
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 1 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -150,7 +150,6 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
data-test={`TreeNodeContainer:${treeNodeId}`} data-test={`TreeNodeContainer:${treeNodeId}`}
value={treeNodeId} value={treeNodeId}
itemType={isBranch ? "branch" : "leaf"} itemType={isBranch ? "branch" : "leaf"}
style={{ height: "100%" }}
onOpenChange={onOpenChange} onOpenChange={onOpenChange}
> >
<TreeItemLayout <TreeItemLayout

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

@ -5,11 +5,6 @@ exports[`TreeNodeComponent does not render children if the node is loading 1`] =
data-test="TreeNodeContainer:root" data-test="TreeNodeContainer:root"
itemType="branch" itemType="branch"
onOpenChange={[Function]} onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root" value="root"
> >
<TreeItemLayout <TreeItemLayout
@ -118,11 +113,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-test="TreeNodeContainer:root" data-test="TreeNodeContainer:root"
itemType="branch" itemType="branch"
onOpenChange={[Function]} onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root" value="root"
> >
<div <div
@ -136,11 +126,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
onClick={[Function]} onClick={[Function]}
onKeyDown={[Function]} onKeyDown={[Function]}
role="treeitem" role="treeitem"
style={
Object {
"height": "100%",
}
}
tabIndex={-1} tabIndex={-1}
> >
<ContextSelector.Provider <ContextSelector.Provider
@ -233,7 +218,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-fui-tree-item-value="root" data-fui-tree-item-value="root"
data-test="TreeNodeContainer:root" data-test="TreeNodeContainer:root"
role="treeitem" role="treeitem"
style="height: 100%;"
tabindex="-1" tabindex="-1"
> >
<div <div
@ -288,7 +272,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-fui-tree-item-value="root/child1Label" data-fui-tree-item-value="root/child1Label"
data-test="TreeNodeContainer:root/child1Label" data-test="TreeNodeContainer:root/child1Label"
role="treeitem" role="treeitem"
style="height: 100%;"
tabindex="0" tabindex="0"
> >
<div <div
@ -340,7 +323,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-fui-tree-item-value="root/child2LoadingLabel" data-fui-tree-item-value="root/child2LoadingLabel"
data-test="TreeNodeContainer:root/child2LoadingLabel" data-test="TreeNodeContainer:root/child2LoadingLabel"
role="treeitem" role="treeitem"
style="height: 100%;"
tabindex="-1" tabindex="-1"
> >
<div <div
@ -391,7 +373,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-fui-tree-item-value="root/child3ExpandingLabel" data-fui-tree-item-value="root/child3ExpandingLabel"
data-test="TreeNodeContainer:root/child3ExpandingLabel" data-test="TreeNodeContainer:root/child3ExpandingLabel"
role="treeitem" role="treeitem"
style="height: 100%;"
tabindex="-1" tabindex="-1"
> >
<div <div
@ -647,11 +628,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-test="TreeNodeContainer:root/child1Label" data-test="TreeNodeContainer:root/child1Label"
itemType="branch" itemType="branch"
onOpenChange={[Function]} onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root/child1Label" value="root/child1Label"
> >
<div <div
@ -665,11 +641,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
onClick={[Function]} onClick={[Function]}
onKeyDown={[Function]} onKeyDown={[Function]}
role="treeitem" role="treeitem"
style={
Object {
"height": "100%",
}
}
tabIndex={-1} tabIndex={-1}
> >
<ContextSelector.Provider <ContextSelector.Provider
@ -762,7 +733,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-fui-tree-item-value="root/child1Label" data-fui-tree-item-value="root/child1Label"
data-test="TreeNodeContainer:root/child1Label" data-test="TreeNodeContainer:root/child1Label"
role="treeitem" role="treeitem"
style="height: 100%;"
tabindex="0" tabindex="0"
> >
<div <div
@ -945,11 +915,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-test="TreeNodeContainer:root/child2LoadingLabel" data-test="TreeNodeContainer:root/child2LoadingLabel"
itemType="branch" itemType="branch"
onOpenChange={[Function]} onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root/child2LoadingLabel" value="root/child2LoadingLabel"
> >
<div <div
@ -963,11 +928,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
onClick={[Function]} onClick={[Function]}
onKeyDown={[Function]} onKeyDown={[Function]}
role="treeitem" role="treeitem"
style={
Object {
"height": "100%",
}
}
tabIndex={-1} tabIndex={-1}
> >
<ContextSelector.Provider <ContextSelector.Provider
@ -1060,7 +1020,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-fui-tree-item-value="root/child2LoadingLabel" data-fui-tree-item-value="root/child2LoadingLabel"
data-test="TreeNodeContainer:root/child2LoadingLabel" data-test="TreeNodeContainer:root/child2LoadingLabel"
role="treeitem" role="treeitem"
style="height: 100%;"
tabindex="-1" tabindex="-1"
> >
<div <div
@ -1228,11 +1187,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-test="TreeNodeContainer:root/child3ExpandingLabel" data-test="TreeNodeContainer:root/child3ExpandingLabel"
itemType="leaf" itemType="leaf"
onOpenChange={[Function]} onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root/child3ExpandingLabel" value="root/child3ExpandingLabel"
> >
<div <div
@ -1245,11 +1199,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
onClick={[Function]} onClick={[Function]}
onKeyDown={[Function]} onKeyDown={[Function]}
role="treeitem" role="treeitem"
style={
Object {
"height": "100%",
}
}
tabIndex={-1} tabIndex={-1}
> >
<ContextSelector.Provider <ContextSelector.Provider
@ -1349,7 +1298,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-fui-tree-item-value="root/child3ExpandingLabel" data-fui-tree-item-value="root/child3ExpandingLabel"
data-test="TreeNodeContainer:root/child3ExpandingLabel" data-test="TreeNodeContainer:root/child3ExpandingLabel"
role="treeitem" role="treeitem"
style="height: 100%;"
tabindex="-1" tabindex="-1"
> >
<div <div
@ -1474,11 +1422,6 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
data-test="TreeNodeContainer:root" data-test="TreeNodeContainer:root"
itemType="leaf" itemType="leaf"
onOpenChange={[Function]} onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root" value="root"
> >
<TreeItemLayout <TreeItemLayout
@ -1513,11 +1456,6 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
data-test="TreeNodeContainer:root" data-test="TreeNodeContainer:root"
itemType="leaf" itemType="leaf"
onOpenChange={[Function]} onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root" value="root"
> >
<TreeItemLayout <TreeItemLayout
@ -1557,11 +1495,6 @@ exports[`TreeNodeComponent renders a node as expandable if it has empty, but def
data-test="TreeNodeContainer:root" data-test="TreeNodeContainer:root"
itemType="branch" itemType="branch"
onOpenChange={[Function]} onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root" value="root"
> >
<TreeItemLayout <TreeItemLayout
@ -1604,11 +1537,6 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
data-test="TreeNodeContainer:root" data-test="TreeNodeContainer:root"
itemType="leaf" itemType="leaf"
onOpenChange={[Function]} onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root" value="root"
> >
<TreeItemLayout <TreeItemLayout
@ -1698,11 +1626,6 @@ exports[`TreeNodeComponent renders a single node 1`] = `
data-test="TreeNodeContainer:root" data-test="TreeNodeContainer:root"
itemType="leaf" itemType="leaf"
onOpenChange={[Function]} onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root" value="root"
> >
<TreeItemLayout <TreeItemLayout
@ -1737,11 +1660,6 @@ exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
data-test="TreeNodeContainer:root" data-test="TreeNodeContainer:root"
itemType="leaf" itemType="leaf"
onOpenChange={[Function]} onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root" value="root"
> >
<TreeItemLayout <TreeItemLayout
@ -1776,11 +1694,6 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
data-test="TreeNodeContainer:root" data-test="TreeNodeContainer:root"
itemType="branch" itemType="branch"
onOpenChange={[Function]} onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root" value="root"
> >
<TreeItemLayout <TreeItemLayout
@ -1865,11 +1778,6 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
data-test="TreeNodeContainer:root" data-test="TreeNodeContainer:root"
itemType="branch" itemType="branch"
onOpenChange={[Function]} onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root" value="root"
> >
<TreeItemLayout <TreeItemLayout
@ -1955,11 +1863,6 @@ exports[`TreeNodeComponent renders single selected leaf node as selected 1`] = `
data-test="TreeNodeContainer:root" data-test="TreeNodeContainer:root"
itemType="leaf" itemType="leaf"
onOpenChange={[Function]} onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root" value="root"
> >
<TreeItemLayout <TreeItemLayout

2
src/Explorer/Tree/ResourceTree.tsx
View File

@ -166,7 +166,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
return ( return (
<> <>
<FluentProvider theme={lightTheme} style={{ overflow: "hidden" }}> <FluentProvider theme={lightTheme} style={{ overflow: "auto" }}>
<Tree <Tree
aria-label="CosmosDB resources" aria-label="CosmosDB resources"
openItems={openItems} openItems={openItems}