diff --git a/less/resourceTree.less b/less/resourceTree.less index da7a5c90d..6144a9b3f 100644 --- a/less/resourceTree.less +++ b/less/resourceTree.less @@ -28,4 +28,4 @@ .clickDisabled { pointer-events: none; } -} \ No newline at end of file +} diff --git a/src/Explorer/Controls/Accordion/AccordionComponent.tsx b/src/Explorer/Controls/Accordion/AccordionComponent.tsx index cf70acc91..1419d00bd 100644 --- a/src/Explorer/Controls/Accordion/AccordionComponent.tsx +++ b/src/Explorer/Controls/Accordion/AccordionComponent.tsx @@ -25,6 +25,7 @@ export class AccordionComponent extends React.Component export interface AccordionItemComponentProps { title: string; isExpanded?: boolean; + containerStyles?: React.CSSProperties; styles?: React.CSSProperties; } @@ -54,9 +55,9 @@ export class AccordionItemComponent extends React.Component +
{this.renderCollapseExpandIcon()} {this.props.title} diff --git a/src/Explorer/Tree/ResourceTree.tsx b/src/Explorer/Tree/ResourceTree.tsx index d9036fc79..abc9a0785 100644 --- a/src/Explorer/Tree/ResourceTree.tsx +++ b/src/Explorer/Tree/ResourceTree.tsx @@ -790,14 +790,10 @@ export const ResourceTree: React.FC = ({ container }: Resourc {!isNotebookEnabled && isSampleDataEnabled && ( <> - + - + @@ -808,14 +804,10 @@ export const ResourceTree: React.FC = ({ container }: Resourc {isNotebookEnabled && isSampleDataEnabled && ( <> - + - + diff --git a/src/Explorer/Tree/SampleDataTree.tsx b/src/Explorer/Tree/SampleDataTree.tsx index 535a2ce54..cb824bbd5 100644 --- a/src/Explorer/Tree/SampleDataTree.tsx +++ b/src/Explorer/Tree/SampleDataTree.tsx @@ -2,7 +2,7 @@ import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdap import TabsBase from "Explorer/Tabs/TabsBase"; import { useSelectedNode } from "Explorer/useSelectedNode"; import { useTabs } from "hooks/useTabs"; -import React, { useEffect, useState } from "react"; +import React from "react"; import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg"; import CollectionIcon from "../../../images/tree-collection.svg"; import * as ViewModels from "../../Contracts/ViewModels"; @@ -14,62 +14,64 @@ export const SampleDataTree = ({ }: { sampleDataResourceTokenCollection: ViewModels.CollectionBase; }): JSX.Element => { - const [root, setRoot] = useState(undefined); - - useEffect(() => { - if (sampleDataResourceTokenCollection) { - const updatedSampleTree: TreeNode = { - label: sampleDataResourceTokenCollection.databaseId, - isExpanded: false, - iconSrc: CosmosDBIcon, - className: "databaseHeader", - children: [ - { - label: sampleDataResourceTokenCollection.id(), - iconSrc: CollectionIcon, - isExpanded: false, - className: "dataResourceTree", - contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(), - onClick: () => { - // Rewritten version of expandCollapseCollection - useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection); - useCommandBar.getState().setContextButtons([]); - useTabs - .getState() - .refreshActiveTab( - (tab: TabsBase) => - tab.collection?.id() === sampleDataResourceTokenCollection.id() && - tab.collection.databaseId === sampleDataResourceTokenCollection.databaseId - ); - }, - isSelected: () => - useSelectedNode - .getState() - .isDataNodeSelected( - sampleDataResourceTokenCollection.databaseId, - sampleDataResourceTokenCollection.id() - ), - onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection), - children: [ - { - label: "Items", - onClick: () => sampleDataResourceTokenCollection.onDocumentDBDocumentsClick(), - isSelected: () => - useSelectedNode - .getState() - .isDataNodeSelected( - sampleDataResourceTokenCollection.databaseId, - sampleDataResourceTokenCollection.id(), - [ViewModels.CollectionTabKind.Documents] - ), - }, - ], + const buildSampleDataTree = (): TreeNode => { + const updatedSampleTree: TreeNode = { + label: sampleDataResourceTokenCollection.databaseId, + isExpanded: true, + iconSrc: CosmosDBIcon, + className: "databaseHeader", + children: [ + { + label: sampleDataResourceTokenCollection.id(), + iconSrc: CollectionIcon, + isExpanded: false, + className: "collectionHeader", + contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(), + onClick: () => { + useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection); + useCommandBar.getState().setContextButtons([]); + useTabs + .getState() + .refreshActiveTab( + (tab: TabsBase) => + tab.collection?.id() === sampleDataResourceTokenCollection.id() && + tab.collection.databaseId === sampleDataResourceTokenCollection.databaseId + ); }, - ], - }; - setRoot(updatedSampleTree); - } - }, [sampleDataResourceTokenCollection]); + isSelected: () => + useSelectedNode + .getState() + .isDataNodeSelected(sampleDataResourceTokenCollection.databaseId, sampleDataResourceTokenCollection.id()), + onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection), + children: [ + { + label: "Items", + onClick: () => sampleDataResourceTokenCollection.onDocumentDBDocumentsClick(), + isSelected: () => + useSelectedNode + .getState() + .isDataNodeSelected( + sampleDataResourceTokenCollection.databaseId, + sampleDataResourceTokenCollection.id(), + [ViewModels.CollectionTabKind.Documents] + ), + }, + ], + }, + ], + }; - return ; + return { + label: undefined, + isExpanded: true, + children: [updatedSampleTree], + }; + }; + + return ( + + ); };