random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-20 01:11:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Redesign resource tree (#1865)

Browse Source 
* start redesign work

* add left padding to all tree nodes

* fiddling with padding

* align tab bar line with first item in resource tree

* final touch ups

* fix a strange password manager autofill prompt

* add keyboard shortcuts

* revert testing change

* nudge messagebar to layout row height

* tidy up

* switch to Allotment to stop ResizeObserver issues with monaco

* refmt and fix lints

* fabric touch-ups

* update snapshots

* remove explicit react-icons dependency

* reinstall packages

* remove background from FluentProvider

* fix alignment of message bar

* undo temporary workaround

* restore refresh button

* fix e2e tests and reformat

* fix compiler error

* remove uiw/react-split

* uncomment selection change on expand
This commit is contained in:
Ashley Stanton-Nurse
2024-08-01 10:02:36 -07:00
committed by GitHub
parent 3d1f280378
commit 31773ee73b
41 changed files with 1551 additions and 2067 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/Explorer/Tree/Database.tsx
View File

@@ -3,15 +3,13 @@ import React from "react";
import * as _ from "underscore";
import { AuthType } from "../../AuthType";
import * as Constants from "../../Common/Constants";
import { readCollections, readCollectionsWithPagination } from "../../Common/dataAccess/readCollections";
import { readDatabaseOffer } from "../../Common/dataAccess/readDatabaseOffer";
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
import * as Logger from "../../Common/Logger";
import { fetchPortalNotifications } from "../../Common/PortalNotifications";
import { readCollections, readCollectionsWithPagination } from "../../Common/dataAccess/readCollections";
import { readDatabaseOffer } from "../../Common/dataAccess/readDatabaseOffer";
import * as DataModels from "../../Contracts/DataModels";
import * as ViewModels from "../../Contracts/ViewModels";
import { useSidePanel } from "../../hooks/useSidePanel";
import { useTabs } from "../../hooks/useTabs";
import { IJunoResponse, JunoClient } from "../../Juno/JunoClient";
import * as StorageUtility from "../../Shared/StorageUtility";
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
@@ -20,6 +18,8 @@ import { userContext } from "../../UserContext";
import { getCollectionName } from "../../Utils/APITypeUtils";
import { isServerlessAccount } from "../../Utils/CapabilityUtils";
import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
import { useSidePanel } from "../../hooks/useSidePanel";
import { useTabs } from "../../hooks/useTabs";
import Explorer from "../Explorer";
import { AddCollectionPanel } from "../Panes/AddCollectionPanel";
import { DatabaseSettingsTabV2 } from "../Tabs/SettingsTabV2";
@@ -52,6 +52,7 @@ export default class Database implements ViewModels.Database {
this.collections = ko.observableArray<Collection>();
this.collections.subscribe(() => useDatabases.getState().updateDatabase(this));
this.isDatabaseExpanded = ko.observable<boolean>(false);
this.isDatabaseExpanded.subscribe(() => useDatabases.getState().updateDatabase(this));
this.selectedSubnodeKind = ko.observable<ViewModels.CollectionTabKind>();
this.isDatabaseShared = ko.pureComputed(() => {
return this.offer && !!this.offer();

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

@@ -1,14 +1,8 @@
import {
BrandVariants,
FluentProvider,
Theme,
Tree,
TreeItemValue,
TreeOpenChangeData,
TreeOpenChangeEvent,
createLightTheme,
} from "@fluentui/react-components";
import { Tree, TreeItemValue, TreeOpenChangeData, TreeOpenChangeEvent } from "@fluentui/react-components";
import { Home16Regular } from "@fluentui/react-icons";
import { AuthType } from "AuthType";
import { Platform, configContext } from "ConfigContext";
import { useTreeStyles } from "Explorer/Controls/TreeComponent/Styles";
import { TreeNode, TreeNodeComponent } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
import {
createDatabaseTreeNodes,
@@ -16,9 +10,10 @@ import {
createSampleDataTreeNodes,
} from "Explorer/Tree/treeNodeUtil";
import { useDatabases } from "Explorer/useDatabases";
import { useSelectedNode } from "Explorer/useSelectedNode";
import { userContext } from "UserContext";
import { useQueryCopilot } from "hooks/useQueryCopilot";
import { useTabs } from "hooks/useTabs";
import { ReactTabKind, useTabs } from "hooks/useTabs";
import * as React from "react";
import { useEffect, useMemo } from "react";
import shallow from "zustand/shallow";
@@ -29,32 +24,9 @@ export const MyNotebooksTitle = "My Notebooks";
export const GitHubReposTitle = "GitHub repos";
interface ResourceTreeProps {
container: Explorer;
explorer: Explorer;
}
const cosmosdb: BrandVariants = {
10: "#020305",
20: "#111723",
30: "#16263D",
40: "#193253",
50: "#1B3F6A",
60: "#1B4C82",
70: "#18599B",
80: "#1267B4",
90: "#3174C2",
100: "#4F82C8",
110: "#6790CF",
120: "#7D9ED5",
130: "#92ACDC",
140: "#A6BAE2",
150: "#BAC9E9",
160: "#CDD8EF",
};
const lightTheme: Theme = {
...createLightTheme(cosmosdb),
};
export const DATA_TREE_LABEL = "DATA";
export const MY_DATA_TREE_LABEL = "MY DATA";
export const SAMPLE_DATA_TREE_LABEL = "SAMPLE DATA";
@@ -62,8 +34,9 @@ export const SAMPLE_DATA_TREE_LABEL = "SAMPLE DATA";
/**
* Top-level tree that has no label, but contains all subtrees
*/
export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: ResourceTreeProps): JSX.Element => {
const [openItems, setOpenItems] = React.useState<Iterable<TreeItemValue>>([DATA_TREE_LABEL]);
export const ResourceTree: React.FC<ResourceTreeProps> = ({ explorer }: ResourceTreeProps): JSX.Element => {
const [openItems, setOpenItems] = React.useState<TreeItemValue[]>([]);
const treeStyles = useTreeStyles();
const { isNotebookEnabled } = useNotebook(
(state) => ({
@@ -85,10 +58,11 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
isCopilotSampleDBEnabled: state.copilotSampleDBEnabled,
}));
const databaseTreeNodes =
userContext.authType === AuthType.ResourceToken
const databaseTreeNodes = useMemo(() => {
return userContext.authType === AuthType.ResourceToken
? createResourceTokenTreeNodes(resourceTokenCollection)
: createDatabaseTreeNodes(container, isNotebookEnabled, databases, refreshActiveTab);
: createDatabaseTreeNodes(explorer, isNotebookEnabled, databases, refreshActiveTab);
}, [resourceTokenCollection, databases, isNotebookEnabled, refreshActiveTab]);
const isSampleDataEnabled =
isCopilotEnabled &&
@@ -102,33 +76,42 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
: [];
}, [isSampleDataEnabled, sampleDataResourceTokenCollection]);
const headerNodes: TreeNode[] =
configContext.platform === Platform.Fabric
? []
: [
{
id: "home",
iconSrc: <Home16Regular />,
label: "Home",
isSelected: () =>
useSelectedNode.getState().selectedNode === undefined &&
useTabs.getState().activeReactTab === ReactTabKind.Home,
onClick: () => {
useSelectedNode.getState().setSelectedNode(undefined);
useTabs.getState().openAndActivateReactTab(ReactTabKind.Home);
},
},
];
const rootNodes: TreeNode[] = useMemo(() => {
if (sampleDataNodes.length > 0) {
return [
...headerNodes,
{
id: "data",
label: MY_DATA_TREE_LABEL,
className: "accordionItemHeader",
children: databaseTreeNodes,
isScrollable: true,
},
{
id: "sampleData",
label: SAMPLE_DATA_TREE_LABEL,
className: "accordionItemHeader",
children: sampleDataNodes,
},
];
} else {
return [
{
id: "data",
label: DATA_TREE_LABEL,
className: "accordionItemHeader",
children: databaseTreeNodes,
isScrollable: true,
},
];
return [...headerNodes, ...databaseTreeNodes];
}
}, [databaseTreeNodes, sampleDataNodes]);
@@ -162,23 +145,28 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
rootNodes.forEach((n) => updateOpenItems(n, undefined));
}, [rootNodes, openItems, setOpenItems]);
const handleOpenChange = (event: TreeOpenChangeEvent, data: TreeOpenChangeData) => setOpenItems(data.openItems);
const handleOpenChange = (event: TreeOpenChangeEvent, data: TreeOpenChangeData) =>
setOpenItems(Array.from(data.openItems));
return (
<>
<FluentProvider theme={lightTheme} style={{ overflow: "auto" }}>
<Tree
aria-label="CosmosDB resources"
openItems={openItems}
onOpenChange={handleOpenChange}
size="small"
style={{ height: "100%", minWidth: "290px" }}
>
{rootNodes.map((node) => (
<TreeNodeComponent key={node.label} className="dataResourceTree" node={node} treeNodeId={node.label} />
))}
</Tree>
</FluentProvider>
</>
<div className={treeStyles.treeContainer}>
<Tree
aria-label="CosmosDB resources"
openItems={openItems}
className={treeStyles.tree}
onOpenChange={handleOpenChange}
size="medium"
>
{rootNodes.map((node) => (
<TreeNodeComponent
key={node.label}
openItems={openItems}
className="dataResourceTree"
node={node}
treeNodeId={node.label}
/>
))}
</Tree>
</div>
);
};

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

@@ -21,7 +21,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"onClick": [Function],
},
],
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -30,7 +30,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"styleClass": "deleteCollectionMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "standardCollection",
@@ -61,7 +60,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"onClick": [Function],
},
],
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -70,7 +69,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"styleClass": "deleteCollectionMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "conflictsCollection",
@@ -80,7 +78,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"onExpanded": [Function],
},
],
"className": "databaseHeader",
"className": "databaseNode",
"contextMenu": [
{
"iconSrc": {},
@@ -94,7 +92,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"styleClass": "deleteDatabaseMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "standardDb",
@@ -127,7 +124,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"onClick": [Function],
},
],
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -136,7 +133,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"styleClass": "deleteCollectionMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "sampleItemsCollection",
@@ -146,7 +142,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"onExpanded": [Function],
},
],
"className": "databaseHeader",
"className": "databaseNode",
"contextMenu": [
{
"iconSrc": {},
@@ -160,7 +156,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"styleClass": "deleteDatabaseMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "sharedDatabase",
@@ -242,7 +237,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"onClick": [Function],
},
],
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -251,7 +246,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"styleClass": "deleteCollectionMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "schemaCollection",
@@ -261,12 +255,12 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"onExpanded": [Function],
},
{
"className": "loadMoreHeader",
"className": "loadMoreNode",
"label": "load more",
"onClick": [Function],
},
],
"className": "databaseHeader",
"className": "databaseNode",
"contextMenu": [
{
"iconSrc": {},
@@ -280,7 +274,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
"styleClass": "deleteDatabaseMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "giganticDatabase",
@@ -333,7 +326,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"onClick": [Function],
},
],
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -352,7 +345,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"styleClass": "deleteCollectionMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "standardCollection",
@@ -404,7 +396,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"onClick": [Function],
},
],
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -423,7 +415,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"styleClass": "deleteCollectionMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "conflictsCollection",
@@ -433,7 +424,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"onExpanded": [Function],
},
],
"className": "databaseHeader",
"className": "databaseNode",
"contextMenu": [
{
"iconSrc": {},
@@ -447,7 +438,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"styleClass": "deleteDatabaseMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "standardDb",
@@ -501,7 +491,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"onClick": [Function],
},
],
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -520,7 +510,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"styleClass": "deleteCollectionMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "sampleItemsCollection",
@@ -530,7 +519,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"onExpanded": [Function],
},
],
"className": "databaseHeader",
"className": "databaseNode",
"contextMenu": [
{
"iconSrc": {},
@@ -544,7 +533,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"styleClass": "deleteDatabaseMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "sharedDatabase",
@@ -647,7 +635,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"onClick": [Function],
},
],
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -666,7 +654,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"styleClass": "deleteCollectionMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "schemaCollection",
@@ -676,12 +663,12 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"onExpanded": [Function],
},
{
"className": "loadMoreHeader",
"className": "loadMoreNode",
"label": "load more",
"onClick": [Function],
},
],
"className": "databaseHeader",
"className": "databaseNode",
"contextMenu": [
{
"iconSrc": {},
@@ -695,7 +682,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
"styleClass": "deleteDatabaseMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "giganticDatabase",
@@ -712,7 +698,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"children": [
{
"children": undefined,
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -720,7 +706,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"onClick": [Function],
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "standardCollection",
@@ -731,7 +716,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
},
{
"children": undefined,
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -739,7 +724,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"onClick": [Function],
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "conflictsCollection",
@@ -749,7 +733,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"onExpanded": [Function],
},
],
"className": "databaseHeader",
"className": "databaseNode",
"contextMenu": [
{
"iconSrc": {},
@@ -763,7 +747,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteDatabaseMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "standardDb",
@@ -775,7 +758,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"children": [
{
"children": undefined,
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -783,7 +766,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"onClick": [Function],
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "sampleItemsCollection",
@@ -793,7 +775,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"onExpanded": [Function],
},
],
"className": "databaseHeader",
"className": "databaseNode",
"contextMenu": [
{
"iconSrc": {},
@@ -807,7 +789,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteDatabaseMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "sharedDatabase",
@@ -819,7 +800,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"children": [
{
"children": undefined,
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -827,7 +808,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"onClick": [Function],
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "schemaCollection",
@@ -837,12 +817,12 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"onExpanded": [Function],
},
{
"className": "loadMoreHeader",
"className": "loadMoreNode",
"label": "load more",
"onClick": [Function],
},
],
"className": "databaseHeader",
"className": "databaseNode",
"contextMenu": [
{
"iconSrc": {},
@@ -856,7 +836,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteDatabaseMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "giganticDatabase",
@@ -968,7 +947,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"onExpanded": [Function],
},
],
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -997,7 +976,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteCollectionMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "standardCollection",
@@ -1069,7 +1047,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"onClick": [Function],
},
],
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -1098,7 +1076,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteCollectionMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "conflictsCollection",
@@ -1108,7 +1085,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"onExpanded": [Function],
},
],
"className": "databaseHeader",
"className": "databaseNode",
"contextMenu": [
{
"iconSrc": {},
@@ -1122,7 +1099,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteDatabaseMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "standardDb",
@@ -1196,7 +1172,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"onExpanded": [Function],
},
],
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -1225,7 +1201,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteCollectionMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "sampleItemsCollection",
@@ -1235,7 +1210,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"onExpanded": [Function],
},
],
"className": "databaseHeader",
"className": "databaseNode",
"contextMenu": [
{
"iconSrc": {},
@@ -1249,7 +1224,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteDatabaseMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "sharedDatabase",
@@ -1372,7 +1346,7 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"onExpanded": [Function],
},
],
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -1401,7 +1375,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteCollectionMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "schemaCollection",
@@ -1411,12 +1384,12 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"onExpanded": [Function],
},
{
"className": "loadMoreHeader",
"className": "loadMoreNode",
"label": "load more",
"onClick": [Function],
},
],
"className": "databaseHeader",
"className": "databaseNode",
"contextMenu": [
{
"iconSrc": {},
@@ -1430,7 +1403,6 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
"styleClass": "deleteDatabaseMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "giganticDatabase",
@@ -1542,7 +1514,7 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"onExpanded": [Function],
},
],
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -1571,7 +1543,6 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"styleClass": "deleteCollectionMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "standardCollection",
@@ -1638,7 +1609,7 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"onExpanded": [Function],
},
],
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -1667,7 +1638,6 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"styleClass": "deleteCollectionMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "conflictsCollection",
@@ -1677,7 +1647,7 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"onExpanded": [Function],
},
],
"className": "databaseHeader",
"className": "databaseNode",
"contextMenu": [
{
"iconSrc": {},
@@ -1691,7 +1661,6 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"styleClass": "deleteDatabaseMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "standardDb",
@@ -1765,7 +1734,7 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"onExpanded": [Function],
},
],
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -1794,7 +1763,6 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"styleClass": "deleteCollectionMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "sampleItemsCollection",
@@ -1804,7 +1772,7 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"onExpanded": [Function],
},
],
"className": "databaseHeader",
"className": "databaseNode",
"contextMenu": [
{
"iconSrc": {},
@@ -1818,7 +1786,6 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"styleClass": "deleteDatabaseMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "sharedDatabase",
@@ -1941,7 +1908,7 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"onExpanded": [Function],
},
],
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -1970,7 +1937,6 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"styleClass": "deleteCollectionMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "schemaCollection",
@@ -1980,12 +1946,12 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"onExpanded": [Function],
},
{
"className": "loadMoreHeader",
"className": "loadMoreNode",
"label": "load more",
"onClick": [Function],
},
],
"className": "databaseHeader",
"className": "databaseNode",
"contextMenu": [
{
"iconSrc": {},
@@ -1999,7 +1965,6 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
"styleClass": "deleteDatabaseMenuItem",
},
],
"iconSrc": {},
"isExpanded": true,
"isSelected": [Function],
"label": "giganticDatabase",
@@ -2020,8 +1985,7 @@ exports[`createResourceTokenTreeNodes creates the expected tree nodes 1`] = `
"onClick": [Function],
},
],
"className": "collectionHeader",
"iconSrc": {},
"className": "collectionNode",
"isExpanded": true,
"isSelected": [Function],
"label": "testCollection",
@@ -2049,7 +2013,7 @@ exports[`createSampleDataTreeNodes creates the expected tree nodes 1`] = `
"onClick": [Function],
},
],
"className": "collectionHeader",
"className": "collectionNode",
"contextMenu": [
{
"iconSrc": {},
@@ -2057,7 +2021,6 @@ exports[`createSampleDataTreeNodes creates the expected tree nodes 1`] = `
"onClick": [Function],
},
],
"iconSrc": {},
"isExpanded": false,
"isSelected": [Function],
"label": "testCollection",
@@ -2065,8 +2028,7 @@ exports[`createSampleDataTreeNodes creates the expected tree nodes 1`] = `
"onContextMenuOpen": [Function],
},
],
"className": "databaseHeader",
"iconSrc": {},
"className": "databaseNode",
"isExpanded": false,
"label": "testDatabase",
},

19
src/Explorer/Tree/treeNodeUtil.ts
View File

@@ -7,8 +7,6 @@ import { useDatabases } from "Explorer/useDatabases";
import { getItemName } from "Utils/APITypeUtils";
import { isServerlessAccount } from "Utils/CapabilityUtils";
import { useTabs } from "hooks/useTabs";
import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
import CollectionIcon from "../../../images/tree-collection.svg";
import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
import { Platform, configContext } from "../../ConfigContext";
import * as DataModels from "../../Contracts/DataModels";
@@ -31,14 +29,12 @@ export const createSampleDataTreeNodes = (sampleDataResourceTokenCollection: Vie
const updatedSampleTree: TreeNode = {
label: sampleDataResourceTokenCollection.databaseId,
isExpanded: false,
iconSrc: CosmosDBIcon,
className: "databaseHeader",
className: "databaseNode",
children: [
{
label: sampleDataResourceTokenCollection.id(),
iconSrc: CollectionIcon,
isExpanded: false,
className: "collectionHeader",
className: "collectionNode",
contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(),
onClick: () => {
useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection);
@@ -105,10 +101,9 @@ export const createResourceTokenTreeNodes = (collection: ViewModels.CollectionBa
const collectionNode: TreeNode = {
label: collection.id(),
iconSrc: CollectionIcon,
isExpanded: true,
children,
className: "collectionHeader",
className: "collectionNode",
onClick: () => {
// Rewritten version of expandCollapseCollection
useSelectedNode.getState().setSelectedNode(collection);
@@ -158,7 +153,7 @@ export const createDatabaseTreeNodes = (
if (database.collectionsContinuationToken) {
const loadMoreNode: TreeNode = {
label: "load more",
className: "loadMoreHeader",
className: "loadMoreNode",
onClick: async () => {
await database.loadCollections();
useDatabases.getState().updateDatabase(database);
@@ -170,8 +165,7 @@ export const createDatabaseTreeNodes = (
const databaseNode: TreeNode = {
label: database.id(),
iconSrc: CosmosDBIcon,
className: "databaseHeader",
className: "databaseNode",
children: [],
isSelected: () => useSelectedNode.getState().isDataNodeSelected(database.id()),
contextMenu: ResourceTreeContextMenuButtonFactory.createDatabaseContextMenu(container, database.id()),
@@ -222,9 +216,8 @@ export const buildCollectionNode = (
const collectionNode: TreeNode = {
label: collection.id(),
iconSrc: CollectionIcon,
children: children,
className: "collectionHeader",
className: "collectionNode",
contextMenu: ResourceTreeContextMenuButtonFactory.createCollectionContextMenuButton(container, collection),
onClick: () => {
useSelectedNode.getState().setSelectedNode(collection);