Add Sample Data to Resource Tree (#1499)

* Add Sample Data to Resource Tree * Format * Fix strict build * Fix lint * Fixed implementation to show Sample data container * Udated logic based on TokenCollection * Re-configure copilot flag --------- Co-authored-by: Predrag Klepic <v-prklepic@microsoft.com>
2025-12-20 01:11:25 +00:00 · 2023-06-29 08:47:46 -07:00
parent f3c96b91bd
commit ceed162491
9 changed files with 234 additions and 47 deletions
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -1,39 +1,39 @@
 import { Link } from "@fluentui/react/lib/Link";
 import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
 import { IGalleryItem } from "Juno/JunoClient";
+import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointValidation";
 import * as ko from "knockout";
 import React from "react";
 import _ from "underscore";
-import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointValidation";
 import shallow from "zustand/shallow";
 import { AuthType } from "../AuthType";
 import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
 import * as Constants from "../Common/Constants";
 import { Areas, ConnectionStatusType, HttpStatusCodes, Notebook, PoolIdType } from "../Common/Constants";
-import { readCollection } from "../Common/dataAccess/readCollection";
-import { readDatabases } from "../Common/dataAccess/readDatabases";
 import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHandlingUtils";
 import * as Logger from "../Common/Logger";
 import { QueriesClient } from "../Common/QueriesClient";
+import { readCollection, readSampleCollection } from "../Common/dataAccess/readCollection";
+import { readDatabases } from "../Common/dataAccess/readDatabases";
 import * as DataModels from "../Contracts/DataModels";
 import { ContainerConnectionInfo, IPhoenixServiceInfo, IProvisionData, IResponse } from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 import { GitHubOAuthService } from "../GitHub/GitHubOAuthService";
-import { useSidePanel } from "../hooks/useSidePanel";
-import { useTabs } from "../hooks/useTabs";
 import { PhoenixClient } from "../Phoenix/PhoenixClient";
 import * as ExplorerSettings from "../Shared/ExplorerSettings";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../UserContext";
 import { getCollectionName, getUploadName } from "../Utils/APITypeUtils";
-import { update } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
-import { listByDatabaseAccount } from "../Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces";
 import { stringToBlob } from "../Utils/BlobUtils";
 import { isCapabilityEnabled } from "../Utils/CapabilityUtils";
 import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
+import { update } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
+import { listByDatabaseAccount } from "../Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces";
+import { useSidePanel } from "../hooks/useSidePanel";
+import { useTabs } from "../hooks/useTabs";
 import "./ComponentRegisterer";
 import { DialogProps, useDialog } from "./Controls/Dialog";
 import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
@@ -1272,5 +1272,26 @@ export default class Explorer {
    if (useNotebook.getState().isPhoenixNotebooks) {
      await this.initNotebooks(userContext.databaseAccount);
    }
+
+    await this.refreshSampleData();
+  }
+
+  public async refreshSampleData(): Promise<void> {
+    if (!userContext.sampleDataConnectionInfo) {
+      return;
+    }
+
+    const collection: DataModels.Collection = await readSampleCollection();
+    if (!collection) {
+      return;
+    }
+
+    const databaseId = userContext.sampleDataConnectionInfo?.databaseId;
+    if (!databaseId) {
+      return;
+    }
+
+    const sampleDataResourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection);
+    useDatabases.setState({ sampleDataResourceTokenCollection });
  }
 }
--- a/src/Explorer/Tree/ResourceTree.tsx
+++ b/src/Explorer/Tree/ResourceTree.tsx
@@ -1,14 +1,15 @@
 import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
-import * as React from "react";
+import { SampleDataTree } from "Explorer/Tree/SampleDataTree";
 import { getItemName } from "Utils/APITypeUtils";
+import * as React from "react";
 import shallow from "zustand/shallow";
 import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
-import DeleteIcon from "../../../images/delete.svg";
 import GalleryIcon from "../../../images/GalleryIcon.svg";
-import FileIcon from "../../../images/notebook/file-cosmos.svg";
+import DeleteIcon from "../../../images/delete.svg";
 import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
 import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg";
 import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
+import FileIcon from "../../../images/notebook/file-cosmos.svg";
 import PublishIcon from "../../../images/notebook/publish_content.svg";
 import RefreshIcon from "../../../images/refresh-cosmos.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
@@ -16,14 +17,14 @@ import { Areas, ConnectionStatusType, Notebook } from "../../Common/Constants";
 import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { useSidePanel } from "../../hooks/useSidePanel";
-import { useTabs } from "../../hooks/useTabs";
 import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
 import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { isServerlessAccount } from "../../Utils/CapabilityUtils";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
+import { useSidePanel } from "../../hooks/useSidePanel";
+import { useTabs } from "../../hooks/useTabs";
 import * as ResourceTreeContextMenuButtonFactory from "../ContextMenuButtonFactory";
 import { AccordionComponent, AccordionItemComponent } from "../Controls/Accordion/AccordionComponent";
 import { useDialog } from "../Controls/Dialog";
@@ -764,23 +765,59 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
  };

  const dataRootNode = buildDataTree();
+  const isSampleDataEnabled = userContext.sampleDataConnectionInfo && userContext.apiType === "SQL";
+  const sampleDataResourceTokenCollection = useDatabases((state) => state.sampleDataResourceTokenCollection);

-  if (isNotebookEnabled) {
-    return (
-      <>
-        <AccordionComponent>
-          <AccordionItemComponent title={"DATA"} isExpanded={!gitHubNotebooksContentRoot}>
-            <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
-          </AccordionItemComponent>
-          <AccordionItemComponent title={"NOTEBOOKS"}>
-            <TreeComponent className="notebookResourceTree" rootNode={buildNotebooksTree()} />
-          </AccordionItemComponent>
-        </AccordionComponent>
+  return (
+    <>
+      {!isNotebookEnabled && !isSampleDataEnabled && (
+        <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
+      )}
+      {isNotebookEnabled && !isSampleDataEnabled && (
+        <>
+          <AccordionComponent>
+            <AccordionItemComponent title={"DATA"} isExpanded={!gitHubNotebooksContentRoot}>
+              <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
+            </AccordionItemComponent>
+            <AccordionItemComponent title={"NOTEBOOKS"}>
+              <TreeComponent className="notebookResourceTree" rootNode={buildNotebooksTree()} />
+            </AccordionItemComponent>
+          </AccordionComponent>

-        {buildGalleryCallout()}
-      </>
-    );
-  }
+          {buildGalleryCallout()}
+        </>
+      )}
+      {!isNotebookEnabled && isSampleDataEnabled && (
+        <>
+          <AccordionComponent>
+            <AccordionItemComponent title={"MY DATA"} isExpanded={!gitHubNotebooksContentRoot}>
+              <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
+            </AccordionItemComponent>
+            <AccordionItemComponent title={"SAMPLE DATA"}>
+              <SampleDataTree sampleDataResourceTokenCollection={sampleDataResourceTokenCollection} />
+            </AccordionItemComponent>
+          </AccordionComponent>

-  return <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />;
+          {buildGalleryCallout()}
+        </>
+      )}
+      {isNotebookEnabled && isSampleDataEnabled && (
+        <>
+          <AccordionComponent>
+            <AccordionItemComponent title={"MY DATA"} isExpanded={!gitHubNotebooksContentRoot}>
+              <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
+            </AccordionItemComponent>
+            <AccordionItemComponent title={"SAMPLE DATA"}>
+              <SampleDataTree sampleDataResourceTokenCollection={sampleDataResourceTokenCollection} />
+            </AccordionItemComponent>
+            <AccordionItemComponent title={"NOTEBOOKS"}>
+              <TreeComponent className="notebookResourceTree" rootNode={buildNotebooksTree()} />
+            </AccordionItemComponent>
+          </AccordionComponent>
+
+          {buildGalleryCallout()}
+        </>
+      )}
+    </>
+  );
 };
--- a/src/Explorer/Tree/SampleDataTree.tsx
+++ b/src/Explorer/Tree/SampleDataTree.tsx
@@ -0,0 +1,41 @@
+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 { TreeComponent, TreeNode } from "../Controls/TreeComponent/TreeComponent";
+
+export const SampleDataTree = ({
+  sampleDataResourceTokenCollection,
+}: {
+  sampleDataResourceTokenCollection: ViewModels.CollectionBase;
+}): JSX.Element => {
+  const [root, setRoot] = useState<TreeNode | undefined>(undefined);
+
+  useEffect(() => {
+    if (sampleDataResourceTokenCollection) {
+      const updatedSampleTree: TreeNode = {
+        label: sampleDataResourceTokenCollection.databaseId,
+        isExpanded: true,
+        iconSrc: CosmosDBIcon,
+        children: [
+          {
+            label: sampleDataResourceTokenCollection.id(),
+            iconSrc: CollectionIcon,
+            isExpanded: true,
+            className: "collectionHeader",
+            children: [
+              {
+                label: "Items",
+              },
+            ],
+          },
+        ],
+      };
+      setRoot(updatedSampleTree);
+    }
+  }, [sampleDataResourceTokenCollection]);
+
+  return (
+    <TreeComponent className="sampleDataResourceTree" rootNode={root || { label: "Sample data not initialized." }} />
+  );
+};
--- a/src/Explorer/useDatabases.ts
+++ b/src/Explorer/useDatabases.ts
@@ -8,6 +8,7 @@ import { useSelectedNode } from "./useSelectedNode";
 interface DatabasesState {
  databases: ViewModels.Database[];
  resourceTokenCollection: ViewModels.CollectionBase;
+  sampleDataResourceTokenCollection: ViewModels.CollectionBase;
  updateDatabase: (database: ViewModels.Database) => void;
  addDatabases: (databases: ViewModels.Database[]) => void;
  deleteDatabase: (database: ViewModels.Database) => void;
@@ -28,6 +29,7 @@ interface DatabasesState {
 export const useDatabases: UseStore<DatabasesState> = create((set, get) => ({
  databases: [],
  resourceTokenCollection: undefined,
+  sampleDataResourceTokenCollection: undefined,
  updateDatabase: (updatedDatabase: ViewModels.Database) =>
    set((state) => {
      const updatedDatabases = state.databases.map((database: ViewModels.Database) => {