Fabric: handle resource tokens (#1667)

* Update contracts for new all resource messages

* Add timestamp to token message signature

* Reconstruct resource tree with databases and collections parsed from token dictionary keys

* Create FabricDatabase and FabricCollection to turn off interaction

* Remove unnecessary FabricCollection derived class

* Handle resource tokens

* Bug fix

* Fix linting issues

* Fix update document

* Fix partitition keys

* Remove special case for FabricDatabase tree node

* Modify readCollections to follow normal flow with Fabric

* Move fabric databases refresh to data access and remove special case in Explorer

* Revert Explorer.tsx changes

* Disable database context menu and delete container context menu

* Remove create database/container button for Fabric

* Fix format

* Renew token logic

* Parallelize read collections calls to speed up

* Disable readDatabaseOffer, because it is too slow for now

* Reduce TOKEN_VALIDITY_MS a bit to make sure renewal happens before expiration. Receving new tokens new refreshes databases

* Add container element for Main app in HTML

* Do not handle "openTab" message anymore

* Fix style of main div

* Simplify conditional load of the fabric .css

* Fix format

* Fix tsc can't find dynamic less import

---------

Co-authored-by: Armando Trejo Oliver <artrejo@microsoft.com>

src/hooks/useKnockoutExplorer.ts

@@ -1,7 +1,11 @@
 import { createUri } from "Common/UrlUtility";
-import { FabricMessage } from "Contracts/FabricContract";
+import { FabricDatabaseConnectionInfo, FabricMessage } from "Contracts/FabricContract";
 import Explorer from "Explorer/Explorer";
 import { useSelectedNode } from "Explorer/useSelectedNode";
+import {
+  handleRequestDatabaseResourceTokensResponse,
+  scheduleRefreshDatabaseResourceToken,
+} from "Platform/Fabric/FabricUtil";
 import { getNetworkSettingsWarningMessage } from "Utils/NetworkUtility";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import { useEffect, useState } from "react";
@@ -98,60 +102,39 @@ async function configureFabric(): Promise<Explorer> {
         }
 
         const data: FabricMessage = event.data?.data;
-
         if (!data) {
           return;
         }
 
         switch (data.type) {
           case "initialize": {
-            explorer = await configureWithFabric(data.message.endpoint);
+            const fabricDatabaseConnectionInfo: FabricDatabaseConnectionInfo = {
+              endpoint: data.message.endpoint,
+              databaseId: data.message.databaseId,
+              resourceTokens: data.message.resourceTokens as { [resourceId: string]: string },
+              resourceTokensTimestamp: data.message.resourceTokensTimestamp,
+            };
+            explorer = await createExplorerFabric(fabricDatabaseConnectionInfo);
             resolve(explorer);
+
+            explorer.refreshAllDatabases().then(() => {
+              openFirstContainer(explorer, fabricDatabaseConnectionInfo.databaseId);
+            });
+            scheduleRefreshDatabaseResourceToken();
             break;
           }
           case "newContainer":
             explorer.onNewCollectionClicked();
             break;
-          case "openTab": {
-            // Expand database first
-            const databaseName = sessionStorage.getItem("openDatabaseName") ?? data.databaseName;
-            const database = useDatabases.getState().databases.find((db) => db.id() === databaseName);
-            if (database) {
-              await database.expandDatabase();
-              useDatabases.getState().updateDatabase(database);
-              useSelectedNode.getState().setSelectedNode(database);
-
-              let collectionResourceId = data.collectionName;
-              if (collectionResourceId === undefined) {
-                // Pick first collection if collectionName not specified in message
-                collectionResourceId = database.collections()[0]?.id();
-              }
-
-              if (collectionResourceId !== undefined) {
-                // Expand collection
-                const collection = database.collections().find((coll) => coll.id() === collectionResourceId);
-                collection.expandCollection();
-                useSelectedNode.getState().setSelectedNode(collection);
-
-                handleOpenAction(
-                  {
-                    actionType: ActionType.OpenCollectionTab,
-                    databaseResourceId: databaseName,
-                    collectionResourceId: data.collectionName,
-                    tabKind: TabKind.SQLDocuments,
-                  } as DataExplorerAction,
-                  useDatabases.getState().databases,
-                  explorer,
-                );
-              }
-            }
-
-            break;
-          }
           case "authorizationToken": {
             handleCachedDataMessage(data);
             break;
           }
+          case "allResourceTokens": {
+            // TODO call handleCachedDataMessage when Fabric echoes message id back
+            handleRequestDatabaseResourceTokensResponse(explorer, data.message as FabricDatabaseConnectionInfo);
+            break;
+          }
           default:
             console.error(`Unknown Fabric message type: ${JSON.stringify(data)}`);
             break;
@@ -164,6 +147,41 @@ async function configureFabric(): Promise<Explorer> {
   });
 }
 
+const openFirstContainer = async (explorer: Explorer, databaseName: string, collectionName?: string) => {
+  // Expand database first
+  databaseName = sessionStorage.getItem("openDatabaseName") ?? databaseName;
+  const database = useDatabases.getState().databases.find((db) => db.id() === databaseName);
+  if (database) {
+    await database.expandDatabase();
+    useDatabases.getState().updateDatabase(database);
+    useSelectedNode.getState().setSelectedNode(database);
+
+    let collectionResourceId = collectionName;
+    if (collectionResourceId === undefined) {
+      // Pick first collection if collectionName not specified in message
+      collectionResourceId = database.collections()[0]?.id();
+    }
+
+    if (collectionResourceId !== undefined) {
+      // Expand collection
+      const collection = database.collections().find((coll) => coll.id() === collectionResourceId);
+      collection.expandCollection();
+      useSelectedNode.getState().setSelectedNode(collection);
+
+      handleOpenAction(
+        {
+          actionType: ActionType.OpenCollectionTab,
+          databaseResourceId: databaseName,
+          collectionResourceId: collectionName,
+          tabKind: TabKind.SQLDocuments,
+        } as DataExplorerAction,
+        useDatabases.getState().databases,
+        explorer,
+      );
+    }
+  }
+};
+
 async function configureHosted(): Promise<Explorer> {
   const win = window as unknown as HostedExplorerChildFrame;
   let explorer: Explorer;
@@ -301,8 +319,9 @@ function configureHostedWithResourceToken(config: ResourceToken): Explorer {
   return explorer;
 }
 
-function configureWithFabric(documentEndpoint: string): Explorer {
+function createExplorerFabric(fabricDatabaseConnectionInfo: FabricDatabaseConnectionInfo): Explorer {
   updateUserContext({
+    fabricDatabaseConnectionInfo,
     authType: AuthType.ConnectionString,
     databaseAccount: {
       id: "",
@@ -311,12 +330,11 @@ function configureWithFabric(documentEndpoint: string): Explorer {
       name: "Mounted",
       kind: AccountKind.Default,
       properties: {
-        documentEndpoint,
+        documentEndpoint: fabricDatabaseConnectionInfo.endpoint,
       },
     },
   });
   const explorer = new Explorer();
-  setTimeout(() => explorer.refreshAllDatabases(), 0);
   return explorer;
 }