mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-20 01:11:25 +00:00
[Query Copilot] Resource tree styling and New query button (#1519)
* Styling implemented related with the work item * Sample container New query button implementation * Fixing related with the not rendering Sample Data * Fix race condition when rendering sample data resource tree * Remove export keyword for updateContextForSampleData * Copilot New Query should open Copilot tab * showing buttons in sample command bar --------- Co-authored-by: Predrag Klepic <v-prklepic@microsoft.com> Co-authored-by: Victor Meng <vimeng@microsoft.com>
This commit is contained in:
@@ -790,7 +790,11 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
|
||||
{!isNotebookEnabled && isSampleDataEnabled && (
|
||||
<>
|
||||
<AccordionComponent>
|
||||
<AccordionItemComponent title={"MY DATA"} isExpanded={!gitHubNotebooksContentRoot}>
|
||||
<AccordionItemComponent
|
||||
title={"MY DATA"}
|
||||
isExpanded={!gitHubNotebooksContentRoot}
|
||||
styles={{ maxHeight: 230 }}
|
||||
>
|
||||
<TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
|
||||
</AccordionItemComponent>
|
||||
<AccordionItemComponent title={"SAMPLE DATA"}>
|
||||
@@ -804,7 +808,11 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
|
||||
{isNotebookEnabled && isSampleDataEnabled && (
|
||||
<>
|
||||
<AccordionComponent>
|
||||
<AccordionItemComponent title={"MY DATA"} isExpanded={!gitHubNotebooksContentRoot}>
|
||||
<AccordionItemComponent
|
||||
title={"MY DATA"}
|
||||
isExpanded={!gitHubNotebooksContentRoot}
|
||||
styles={{ maxHeight: 130 }}
|
||||
>
|
||||
<TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
|
||||
</AccordionItemComponent>
|
||||
<AccordionItemComponent title={"SAMPLE DATA"}>
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
|
||||
import TabsBase from "Explorer/Tabs/TabsBase";
|
||||
import { useSelectedNode } from "Explorer/useSelectedNode";
|
||||
import { useTabs } from "hooks/useTabs";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
|
||||
import CollectionIcon from "../../../images/tree-collection.svg";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import * as ResourceTreeContextMenuButtonFactory from "../ContextMenuButtonFactory";
|
||||
import { TreeComponent, TreeNode } from "../Controls/TreeComponent/TreeComponent";
|
||||
|
||||
export const SampleDataTree = ({
|
||||
@@ -15,14 +20,36 @@ export const SampleDataTree = ({
|
||||
if (sampleDataResourceTokenCollection) {
|
||||
const updatedSampleTree: TreeNode = {
|
||||
label: sampleDataResourceTokenCollection.databaseId,
|
||||
isExpanded: true,
|
||||
isExpanded: false,
|
||||
iconSrc: CosmosDBIcon,
|
||||
className: "databaseHeader",
|
||||
children: [
|
||||
{
|
||||
label: sampleDataResourceTokenCollection.id(),
|
||||
iconSrc: CollectionIcon,
|
||||
isExpanded: true,
|
||||
className: "collectionHeader",
|
||||
isExpanded: false,
|
||||
className: "dataResourceTree",
|
||||
contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(
|
||||
sampleDataResourceTokenCollection
|
||||
),
|
||||
onClick: () => {
|
||||
// Rewritten version of expandCollapseCollection
|
||||
useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection);
|
||||
useCommandBar.getState().setContextButtons([]);
|
||||
useTabs().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",
|
||||
@@ -35,7 +62,5 @@ export const SampleDataTree = ({
|
||||
}
|
||||
}, [sampleDataResourceTokenCollection]);
|
||||
|
||||
return (
|
||||
<TreeComponent className="sampleDataResourceTree" rootNode={root || { label: "Sample data not initialized." }} />
|
||||
);
|
||||
return <TreeComponent className="dataResourceTree" rootNode={root || { label: "Sample data not initialized." }} />;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user