From fb6c0caca6aafcc668081c6dc1e3a91df5a56d3d Mon Sep 17 00:00:00 2001
From: v-darkora <134300273+v-darkora@users.noreply.github.com>
Date: Thu, 13 Jul 2023 09:17:29 +0200
Subject: [PATCH] [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                        |   2 +-
 .../Controls/Accordion/AccordionComponent.tsx |   5 +-
 src/Explorer/Tree/ResourceTree.tsx            |  16 +--
 src/Explorer/Tree/SampleDataTree.tsx          | 116 +++++++++---------
 4 files changed, 67 insertions(+), 72 deletions(-)

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<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}
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<ResourceTreeProps> = ({ container }: Resourc
       {!isNotebookEnabled && isSampleDataEnabled && (
         <>
           <AccordionComponent>
-            <AccordionItemComponent
-              title={"MY DATA"}
-              isExpanded={!gitHubNotebooksContentRoot}
-              styles={{ maxHeight: 230 }}
-            >
+            <AccordionItemComponent title={"MY DATA"} isExpanded={!gitHubNotebooksContentRoot}>
               <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
-              title={"MY DATA"}
-              isExpanded={!gitHubNotebooksContentRoot}
-              styles={{ maxHeight: 130 }}
-            >
+            <AccordionItemComponent title={"MY DATA"} isExpanded={!gitHubNotebooksContentRoot}>
               <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
             </AccordionItemComponent>
-            <AccordionItemComponent title={"SAMPLE DATA"}>
+            <AccordionItemComponent title={"SAMPLE DATA"} containerStyles={{ display: "table" }}>
               <SampleDataTree sampleDataResourceTokenCollection={sampleDataResourceTokenCollection} />
             </AccordionItemComponent>
             <AccordionItemComponent title={"NOTEBOOKS"}>
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<TreeNode | undefined>(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 <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." }}
+    />
+  );
 };