[Query Copilot] Update sample data resource tree item stylings (#1530)

* Update sample data resource tree item stylings

* Clean up sample data tree

---------

Co-authored-by: Victor Meng <vimeng@microsoft.com>

less/resourceTree.less

@@ -28,4 +28,4 @@
   .clickDisabled {
     pointer-events: none;
   }
-}
+}

src/Explorer/Controls/Accordion/AccordionComponent.tsx

@@ -25,6 +25,7 @@ export class AccordionComponent extends React.Component<AccordionComponentProps>
 export interface AccordionItemComponentProps {
   title: string;
   isExpanded?: boolean;
+  containerStyles?: React.CSSProperties;
   styles?: React.CSSProperties;
 }
 
@@ -54,9 +55,9 @@ export class AccordionItemComponent extends React.Component<AccordionItemCompone
   }
 
   public render(): JSX.Element {
-    const { styles } = this.props;
+    const { containerStyles, styles } = this.props;
     return (
-      <div className="accordionItemContainer">
+      <div className="accordionItemContainer" style={{ ...containerStyles }}>
         <div className="accordionItemHeader" onClick={this.onHeaderClick} onKeyPress={this.onHeaderKeyPress}>
           {this.renderCollapseExpandIcon()}
           {this.props.title}

src/Explorer/Tree/ResourceTree.tsx

@@ -790,14 +790,10 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       {!isNotebookEnabled && isSampleDataEnabled && (
         <>
           <AccordionComponent>
-            <AccordionItemComponent
+            <AccordionItemComponent title={"MY DATA"} isExpanded={!gitHubNotebooksContentRoot}>
-              title={"MY DATA"}
-              isExpanded={!gitHubNotebooksContentRoot}
-              styles={{ maxHeight: 230 }}
-            >
               <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
             </AccordionItemComponent>
-            <AccordionItemComponent title={"SAMPLE DATA"}>
+            <AccordionItemComponent title={"SAMPLE DATA"} containerStyles={{ display: "table" }}>
               <SampleDataTree sampleDataResourceTokenCollection={sampleDataResourceTokenCollection} />
             </AccordionItemComponent>
           </AccordionComponent>
@@ -808,14 +804,10 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       {isNotebookEnabled && isSampleDataEnabled && (
         <>
           <AccordionComponent>
-            <AccordionItemComponent
+            <AccordionItemComponent title={"MY DATA"} isExpanded={!gitHubNotebooksContentRoot}>
-              title={"MY DATA"}
-              isExpanded={!gitHubNotebooksContentRoot}
-              styles={{ maxHeight: 130 }}
-            >
               <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
             </AccordionItemComponent>
-            <AccordionItemComponent title={"SAMPLE DATA"}>
+            <AccordionItemComponent title={"SAMPLE DATA"} containerStyles={{ display: "table" }}>
               <SampleDataTree sampleDataResourceTokenCollection={sampleDataResourceTokenCollection} />
             </AccordionItemComponent>
             <AccordionItemComponent title={"NOTEBOOKS"}>

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<TreeNode | undefined>(undefined);
+  const buildSampleDataTree = (): TreeNode => {
-
+    const updatedSampleTree: TreeNode = {
-  useEffect(() => {
+      label: sampleDataResourceTokenCollection.databaseId,
-    if (sampleDataResourceTokenCollection) {
+      isExpanded: true,
-      const updatedSampleTree: TreeNode = {
+      iconSrc: CosmosDBIcon,
-        label: sampleDataResourceTokenCollection.databaseId,
+      className: "databaseHeader",
-        isExpanded: false,
+      children: [
-        iconSrc: CosmosDBIcon,
+        {
-        className: "databaseHeader",
+          label: sampleDataResourceTokenCollection.id(),
-        children: [
+          iconSrc: CollectionIcon,
-          {
+          isExpanded: false,
-            label: sampleDataResourceTokenCollection.id(),
+          className: "collectionHeader",
-            iconSrc: CollectionIcon,
+          contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(),
-            isExpanded: false,
+          onClick: () => {
-            className: "dataResourceTree",
+            useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection);
-            contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(),
+            useCommandBar.getState().setContextButtons([]);
-            onClick: () => {
+            useTabs
-              // Rewritten version of expandCollapseCollection
+              .getState()
-              useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection);
+              .refreshActiveTab(
-              useCommandBar.getState().setContextButtons([]);
+                (tab: TabsBase) =>
-              useTabs
+                  tab.collection?.id() === sampleDataResourceTokenCollection.id() &&
-                .getState()
+                  tab.collection.databaseId === sampleDataResourceTokenCollection.databaseId
-                .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]
-                    ),
-              },
-            ],
           },
-        ],
+          isSelected: () =>
-      };
+            useSelectedNode
-      setRoot(updatedSampleTree);
+              .getState()
-    }
+              .isDataNodeSelected(sampleDataResourceTokenCollection.databaseId, sampleDataResourceTokenCollection.id()),
-  }, [sampleDataResourceTokenCollection]);
+          onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection),
+          children: [
+            {
+              label: "Items",
+              onClick: () => sampleDataResourceTokenCollection.onDocumentDBDocumentsClick(),
+              isSelected: () =>
+                useSelectedNode
+                  .getState()
+                  .isDataNodeSelected(
+                    sampleDataResourceTokenCollection.databaseId,
+                    sampleDataResourceTokenCollection.id(),
+                    [ViewModels.CollectionTabKind.Documents]
+                  ),
+            },
+          ],
+        },
+      ],
+    };
 
-  return <TreeComponent className="dataResourceTree" rootNode={root || { label: "Sample data not initialized." }} />;
+    return {
+      label: undefined,
+      isExpanded: true,
+      children: [updatedSampleTree],
+    };
+  };
+
+  return (
+    <TreeComponent
+      className="dataResourceTree"
+      rootNode={sampleDataResourceTokenCollection ? buildSampleDataTree() : { label: "Sample data not initialized." }}
+    />
+  );
 };