Merge branch 'master' of https://github.com/Azure/cosmos-explorer into migrate/QueryTablesTab

.eslintignore

@@ -239,15 +239,7 @@ src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
 src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx
 src/NotebookViewer/NotebookViewer.tsx
 src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
-src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx
-src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponentAdapter.tsx
-src/Explorer/Controls/ResizeSensorReactComponent/ResizeSensorComponent.tsx
-src/Explorer/Controls/Spark/ClusterSettingsComponent.tsx
-src/Explorer/Controls/Spark/ClusterSettingsComponentAdapter.tsx
-src/Explorer/Controls/Tabs/TabComponent.tsx
-src/Explorer/Controls/TreeComponent/TreeComponent.test.tsx
 src/Explorer/Controls/TreeComponent/TreeComponent.tsx
-src/Explorer/Graph/GraphExplorerComponent/EditorNeighborsComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/EditorNodePropertiesComponent.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/EditorNodePropertiesComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx

src/Explorer/ContextMenuButtonFactory.tsx

@@ -16,6 +16,7 @@ import { userContext } from "../UserContext";
 import { getCollectionName, getDatabaseName } from "../Utils/APITypeUtils";
 import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
 import Explorer from "./Explorer";
+import { useNotebook } from "./Notebook/useNotebook";
 import { DeleteCollectionConfirmationPane } from "./Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane";
 import { DeleteDatabaseConfirmationPanel } from "./Panes/DeleteDatabaseConfirmationPanel";
 import StoredProcedure from "./Tree/StoredProcedure";
@@ -81,13 +82,13 @@ export const createCollectionContextMenuButton = (
       iconSrc: HostedTerminalIcon,
       onClick: () => {
         const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
-        if (container.isShellEnabled()) {
+        if (useNotebook.getState().isShellEnabled) {
           container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
         } else {
           selectedCollection && selectedCollection.onNewMongoShellClick();
         }
       },
-      label: container.isShellEnabled() ? "Open Mongo Shell" : "New Shell",
+      label: useNotebook.getState().isShellEnabled ? "Open Mongo Shell" : "New Shell",
     });
   }
 

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -30,7 +30,7 @@ import * as DataModels from "../../../Contracts/DataModels";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 
-const title: string = "Open Saved Queries";
+const title = "Open Saved Queries";
 
 export interface QueriesGridComponentProps {
   queriesClient: QueriesClient;
@@ -196,9 +196,9 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
       {
         key: "Action",
         name: "Action",
-        fieldName: null,
+        fieldName: undefined,
         minWidth: 70,
-        onRender: (query: Query, index: number, column: IColumn) => {
+        onRender: (query: Query) => {
           const buttonProps: IButtonProps = {
             iconProps: {
               iconName: "More",
@@ -214,19 +214,15 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                 {
                   key: "Open",
                   text: "Open query",
-                  onClick: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, menuItem: any) => {
+                  onClick: () => {
                     this.props.onQuerySelect(query);
                   },
                 },
                 {
                   key: "Delete",
                   text: "Delete query",
-                  onClick: async (
+                  onClick: async () => {
-                    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-                    menuItem: any
-                  ) => {
                     if (window.confirm("Are you sure you want to delete this query?")) {
-                      const container = window.dataExplorer;
                       const startKey: number = TelemetryProcessor.traceStart(Action.DeleteSavedQuery, {
                         dataExplorerArea: Constants.Areas.ContextualPane,
                         paneTitle: title,

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -16,7 +16,6 @@ import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/T
 import { userContext } from "../../../UserContext";
 import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
 import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
-import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import { useCommandBar } from "../../Menus/CommandBar/CommandBarComponentAdapter";
 import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
@@ -110,7 +109,6 @@ export interface SettingsComponentState {
 
   initialNotification: DataModels.Notification;
   selectedTab: SettingsV2TabTypes;
-  offerLoaded: boolean;
 }
 
 export class SettingsComponent extends React.Component<SettingsComponentProps, SettingsComponentState> {
@@ -195,7 +193,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
 
       initialNotification: undefined,
       selectedTab: SettingsV2TabTypes.ScaleTab,
-      offerLoaded: !!this.offer,
     };
 
     this.saveSettingsButton = {
@@ -217,7 +214,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     if (this.isCollectionSettingsTab) {
       this.refreshIndexTransformationProgress();
       this.loadMongoIndexes();
-      this.loadCollectionOffer();
     }
 
     this.setAutoPilotStates();
@@ -372,34 +368,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     });
   };
 
-  private async loadCollectionOffer() {
-    try {
-      this.props.settingsTab.isExecuting(true);
-      await this.collection.loadOffer();
-      this.props.settingsTab.tabTitle(this.collection.offer() ? "Settings" : "Scale & Settings");
-      this.setState({ offerLoaded: true });
-    } catch (error) {
-      this.props.settingsTab.isExecutionError(true);
-      const errorMessage = getErrorMessage(error);
-      traceFailure(
-        Action.Tab,
-        {
-          databaseName: this.collection.databaseId,
-          collectionName: this.collection.id(),
-
-          dataExplorerArea: Constants.Areas.Tab,
-          tabTitle: this.props.settingsTab.tabTitle,
-          error: errorMessage,
-          errorStack: getErrorStack(error),
-        },
-        this.props.settingsTab.onLoadStartKey
-      );
-      logConsoleError(`Error while fetching container settings for container ${this.collection.id()}: ${errorMessage}`);
-    } finally {
-      this.props.settingsTab.isExecuting(false);
-    }
-  }
-
   private getMongoIndexesToSave = (): MongoIndex[] => {
     let finalIndexes: MongoIndex[] = [];
     this.state.currentMongoIndexes?.map((mongoIndex: MongoIndex, index: number) => {
@@ -937,10 +905,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       );
     }
 
-    if (!this.state.offerLoaded) {
-      return <></>;
-    }
-
     const subSettingsComponentProps: SubSettingsComponentProps = {
       collection: this.collection,
       isAnalyticalStorageEnabled: this.isAnalyticalStorageEnabled,

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -30,17 +30,9 @@ exports[`SettingsComponent renders 1`] = `
               "container": Explorer {
                 "_isInitializingNotebooks": false,
                 "_resetNotebookWorkspace": [Function],
-                "isAccountReady": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
-                "isNotebookEnabled": [Function],
-                "isNotebooksEnabledForAccount": [Function],
                 "isSchemaEnabled": [Function],
-                "isShellEnabled": [Function],
-                "isSynapseLinkUpdating": [Function],
                 "isTabsContentExpanded": [Function],
-                "memoryUsageInfo": [Function],
-                "notebookBasePath": [Function],
-                "notebookServerInfo": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
                 "provideFeedbackEmail": [Function],
@@ -48,7 +40,6 @@ exports[`SettingsComponent renders 1`] = `
                   "container": [Circular],
                 },
                 "refreshNotebookList": [Function],
-                "resourceTokenCollection": [Function],
                 "resourceTree": ResourceTreeAdapter {
                   "container": [Circular],
                   "copyNotebook": [Function],
@@ -58,7 +49,6 @@ exports[`SettingsComponent renders 1`] = `
                   "container": [Circular],
                   "parameters": [Function],
                 },
-                "sparkClusterConnectionInfo": [Function],
                 "tabsManager": TabsManager {
                   "activeTab": [Function],
                   "openedTabs": [Function],
@@ -116,17 +106,9 @@ exports[`SettingsComponent renders 1`] = `
               "container": Explorer {
                 "_isInitializingNotebooks": false,
                 "_resetNotebookWorkspace": [Function],
-                "isAccountReady": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
-                "isNotebookEnabled": [Function],
-                "isNotebooksEnabledForAccount": [Function],
                 "isSchemaEnabled": [Function],
-                "isShellEnabled": [Function],
-                "isSynapseLinkUpdating": [Function],
                 "isTabsContentExpanded": [Function],
-                "memoryUsageInfo": [Function],
-                "notebookBasePath": [Function],
-                "notebookServerInfo": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
                 "provideFeedbackEmail": [Function],
@@ -134,7 +116,6 @@ exports[`SettingsComponent renders 1`] = `
                   "container": [Circular],
                 },
                 "refreshNotebookList": [Function],
-                "resourceTokenCollection": [Function],
                 "resourceTree": ResourceTreeAdapter {
                   "container": [Circular],
                   "copyNotebook": [Function],
@@ -144,7 +125,6 @@ exports[`SettingsComponent renders 1`] = `
                   "container": [Circular],
                   "parameters": [Function],
                 },
-                "sparkClusterConnectionInfo": [Function],
                 "tabsManager": TabsManager {
                   "activeTab": [Function],
                   "openedTabs": [Function],

src/Explorer/Controls/Tabs/TabComponent.tsx

@@ -58,7 +58,7 @@ export class TabComponent extends React.Component<TabComponentProps> {
             as="span"
             className={className}
             role="presentation"
-            onActivated={(e) => this.setActiveTab(index)}
+            onActivated={() => this.setActiveTab(index)}
             aria-label={`Select tab: ${tab.title}`}
           >
             {tab.title}

src/Explorer/Explorer.tsx

@@ -30,7 +30,6 @@ import {
   listConnectionInfo,
   start,
 } from "../Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces";
-import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
 import { stringToBlob } from "../Utils/BlobUtils";
 import { isCapabilityEnabled } from "../Utils/CapabilityUtils";
 import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
@@ -46,6 +45,7 @@ import { NotebookContentItem, NotebookContentItemType } from "./Notebook/Noteboo
 import type NotebookManager from "./Notebook/NotebookManager";
 import type { NotebookPaneContent } from "./Notebook/NotebookManager";
 import { NotebookUtil } from "./Notebook/NotebookUtil";
+import { useNotebook } from "./Notebook/useNotebook";
 import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
 import { AddDatabasePanel } from "./Panes/AddDatabasePanel/AddDatabasePanel";
 import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane/BrowseQueriesPane";
@@ -79,7 +79,6 @@ export interface ExplorerParams {
 
 export default class Explorer {
   public isFixedCollectionWithSharedThroughputSupported: ko.Computed<boolean>;
-  public isAccountReady: ko.Observable<boolean>;
   public queriesClient: QueriesClient;
   public tableDataClient: TableDataClient;
 
@@ -87,7 +86,6 @@ export default class Explorer {
   private resourceTree: ResourceTreeAdapter;
 
   // Resource Token
-  public resourceTokenCollection: ko.Observable<ViewModels.CollectionBase>;
   public resourceTreeForResourceToken: ResourceTreeAdapterForResourceToken;
 
   // Tabs
@@ -98,18 +96,9 @@ export default class Explorer {
   public isSchemaEnabled: ko.Computed<boolean>;
 
   // Notebooks
-  public isNotebookEnabled: ko.Observable<boolean>;
-  public isNotebooksEnabledForAccount: ko.Observable<boolean>;
-  public notebookServerInfo: ko.Observable<DataModels.NotebookWorkspaceConnectionInfo>;
-  public sparkClusterConnectionInfo: ko.Observable<DataModels.SparkClusterConnectionInfo>;
-  public isSynapseLinkUpdating: ko.Observable<boolean>;
-  public memoryUsageInfo: ko.Observable<DataModels.MemoryUsageInfo>;
   public notebookManager?: NotebookManager;
 
-  public isShellEnabled: ko.Observable<boolean>;
-
   private _isInitializingNotebooks: boolean;
-  private notebookBasePath: ko.Observable<string>;
   private notebookToImport: {
     name: string;
     content: string;
@@ -121,43 +110,13 @@ export default class Explorer {
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
-    this.isAccountReady = ko.observable<boolean>(false);
     this._isInitializingNotebooks = false;
-    this.isShellEnabled = ko.observable(false);
+    useNotebook.subscribe(
-    this.isNotebooksEnabledForAccount = ko.observable(false);
+      () => this.refreshCommandBarButtons(),
-    this.isNotebooksEnabledForAccount.subscribe((isEnabledForAccount: boolean) => this.refreshCommandBarButtons());
+      (state) => state.isNotebooksEnabledForAccount
-    this.isSynapseLinkUpdating = ko.observable<boolean>(false);
-    this.isAccountReady.subscribe(async (isAccountReady: boolean) => {
-      if (isAccountReady) {
-        userContext.authType === AuthType.ResourceToken
-          ? this.refreshDatabaseForResourceToken()
-          : this.refreshAllDatabases(true);
-        await this._refreshNotebooksEnabledStateForAccount();
-        this.isNotebookEnabled(
-          userContext.authType !== AuthType.ResourceToken &&
-            ((await this._containsDefaultNotebookWorkspace(userContext.databaseAccount)) ||
-              userContext.features.enableNotebooks)
     );
 
-        this.isShellEnabled(this.isNotebookEnabled() && isPublicInternetAccessAllowed());
-
-        TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
-          isNotebookEnabled: this.isNotebookEnabled(),
-          dataExplorerArea: Constants.Areas.Notebook,
-        });
-
-        if (this.isNotebookEnabled()) {
-          await this.initNotebooks(userContext.databaseAccount);
-        } else if (this.notebookToImport) {
-          // if notebooks is not enabled but the user is trying to do a quickstart setup with notebooks, open the SetupNotebooksPane
-          this._openSetupNotebooksPaneForQuickstart();
-        }
-      }
-    });
-    this.memoryUsageInfo = ko.observable<DataModels.MemoryUsageInfo>();
-
     this.queriesClient = new QueriesClient(this);
-    this.resourceTokenCollection = ko.observable<ViewModels.CollectionBase>();
     this.isSchemaEnabled = ko.computed<boolean>(() => userContext.features.enableSchema);
 
     useSelectedNode.subscribe(() => {
@@ -216,8 +175,8 @@ export default class Explorer {
       startKey
     );
 
-    this.isNotebookEnabled = ko.observable(false);
+    useNotebook.subscribe(
-    this.isNotebookEnabled.subscribe(async () => {
+      async () => {
         if (!this.notebookManager) {
           const NotebookManager = await (
             await import(/* webpackChunkName: "NotebookManager" */ "./Notebook/NotebookManager")
@@ -225,7 +184,6 @@ export default class Explorer {
           this.notebookManager = new NotebookManager();
           this.notebookManager.initialize({
             container: this,
-          notebookBasePath: this.notebookBasePath,
             resourceTree: this.resourceTree,
             refreshCommandBarButtons: () => this.refreshCommandBarButtons(),
             refreshNotebookList: () => this.refreshNotebookList(),
@@ -234,35 +192,27 @@ export default class Explorer {
 
         this.refreshCommandBarButtons();
         this.refreshNotebookList();
-    });
+      },
+      (state) => state.isNotebookEnabled
+    );
 
     this.resourceTree = new ResourceTreeAdapter(this);
     this.resourceTreeForResourceToken = new ResourceTreeAdapterForResourceToken(this);
-    this.notebookServerInfo = ko.observable<DataModels.NotebookWorkspaceConnectionInfo>({
-      notebookServerEndpoint: undefined,
-      authToken: undefined,
-    });
-    this.notebookBasePath = ko.observable(Constants.Notebook.defaultBasePath);
-    this.sparkClusterConnectionInfo = ko.observable<DataModels.SparkClusterConnectionInfo>({
-      userName: undefined,
-      password: undefined,
-      endpoints: [],
-    });
 
     // Override notebook server parameters from URL parameters
     if (userContext.features.notebookServerUrl && userContext.features.notebookServerToken) {
-      this.notebookServerInfo({
+      useNotebook.getState().setNotebookServerInfo({
         notebookServerEndpoint: userContext.features.notebookServerUrl,
         authToken: userContext.features.notebookServerToken,
       });
     }
 
     if (userContext.features.notebookBasePath) {
-      this.notebookBasePath(userContext.features.notebookBasePath);
+      useNotebook.getState().setNotebookBasePath(userContext.features.notebookBasePath);
     }
 
     if (userContext.features.livyEndpoint) {
-      this.sparkClusterConnectionInfo({
+      useNotebook.getState().setSparkClusterConnectionInfo({
         userName: undefined,
         password: undefined,
         endpoints: [
@@ -277,7 +227,8 @@ export default class Explorer {
     if (configContext.enableSchemaAnalyzer) {
       userContext.features.enableSchemaAnalyzer = true;
     }
-    this.isAccountReady(true);
+
+    this.refreshExplorer();
   }
 
   public openEnableSynapseLinkDialog(): void {
@@ -298,7 +249,7 @@ export default class Explorer {
         const clearInProgressMessage = logConsoleProgress(
           "Enabling Azure Synapse Link for this account. This may take a few minutes before you can enable analytical store for this account."
         );
-        this.isSynapseLinkUpdating(true);
+        useNotebook.getState().setIsSynapseLinkUpdating(true);
         useDialog.getState().closeDialog();
 
         try {
@@ -317,7 +268,7 @@ export default class Explorer {
           logConsoleError(`Enabling Azure Synapse Link for this account failed. ${getErrorMessage(error)}`);
           TelemetryProcessor.traceFailure(Action.EnableAzureSynapseLink, {}, startTime);
         } finally {
-          this.isSynapseLinkUpdating(false);
+          useNotebook.getState().setIsSynapseLinkUpdating(false);
         }
       },
 
@@ -340,8 +291,9 @@ export default class Explorer {
     }
 
     return readCollection(databaseId, collectionId).then((collection: DataModels.Collection) => {
-      this.resourceTokenCollection(new ResourceTokenCollection(this, databaseId, collection));
+      const resourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection);
-      useSelectedNode.getState().setSelectedNode(this.resourceTokenCollection());
+      useDatabases.setState({ resourceTokenCollection });
+      useSelectedNode.getState().setSelectedNode(resourceTokenCollection);
     });
   }
 
@@ -465,18 +417,17 @@ export default class Explorer {
       "default"
     );
 
-    this.notebookServerInfo({
+    useNotebook.getState().setNotebookServerInfo({
       notebookServerEndpoint: userContext.features.notebookServerUrl || connectionInfo.notebookServerEndpoint,
       authToken: userContext.features.notebookServerToken || connectionInfo.authToken,
     });
-    this.notebookServerInfo.valueHasMutated();
     this.refreshNotebookList();
 
     this._isInitializingNotebooks = false;
   }
 
   public resetNotebookWorkspace() {
-    if (!this.isNotebookEnabled() || !this.notebookManager?.notebookClient) {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookClient) {
       handleError(
         "Attempt to reset notebook workspace, but notebook is not enabled",
         "Explorer/resetNotebookWorkspace"
@@ -660,7 +611,7 @@ export default class Explorer {
   }
 
   public uploadFile(name: string, content: string, parent: NotebookContentItem): Promise<NotebookContentItem> {
-    if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to upload notebook, but notebook is not enabled";
       handleError(error, "Explorer/uploadFile");
       throw new Error(error);
@@ -678,7 +629,7 @@ export default class Explorer {
     const item = NotebookUtil.createNotebookContentItem(name, path, "file");
     const parent = this.resourceTree.myNotebooksContentRoot;
 
-    if (parent && parent.children && this.isNotebookEnabled() && this.notebookManager?.notebookClient) {
+    if (parent && parent.children && useNotebook.getState().isNotebookEnabled && this.notebookManager?.notebookClient) {
       const existingItem = _.find(parent.children, (node) => node.name === name);
       if (existingItem) {
         return this.openNotebook(existingItem);
@@ -695,7 +646,7 @@ export default class Explorer {
   public async importAndOpenContent(name: string, content: string): Promise<boolean> {
     const parent = this.resourceTree.myNotebooksContentRoot;
 
-    if (parent && parent.children && this.isNotebookEnabled() && this.notebookManager?.notebookClient) {
+    if (parent && parent.children && useNotebook.getState().isNotebookEnabled && this.notebookManager?.notebookClient) {
       if (this.notebookToImport && this.notebookToImport.name === name && this.notebookToImport.content === content) {
         this.notebookToImport = undefined; // we don't want to try opening this notebook again
       }
@@ -838,7 +789,7 @@ export default class Explorer {
   }
 
   public renameNotebook(notebookFile: NotebookContentItem): void {
-    if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to rename notebook, but notebook is not enabled";
       handleError(error, "Explorer/renameNotebook");
       throw new Error(error);
@@ -879,7 +830,7 @@ export default class Explorer {
   }
 
   public onCreateDirectory(parent: NotebookContentItem): void {
-    if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to create notebook directory, but notebook is not enabled";
       handleError(error, "Explorer/onCreateDirectory");
       throw new Error(error);
@@ -909,7 +860,7 @@ export default class Explorer {
   }
 
   public readFile(notebookFile: NotebookContentItem): Promise<string> {
-    if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to read file, but notebook is not enabled";
       handleError(error, "Explorer/downloadFile");
       throw new Error(error);
@@ -919,7 +870,7 @@ export default class Explorer {
   }
 
   public downloadFile(notebookFile: NotebookContentItem): Promise<void> {
-    if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to download file, but notebook is not enabled";
       handleError(error, "Explorer/downloadFile");
       throw new Error(error);
@@ -956,56 +907,8 @@ export default class Explorer {
     );
   }
 
-  private async _refreshNotebooksEnabledStateForAccount(): Promise<void> {
-    const { databaseAccount, authType } = userContext;
-    if (
-      authType === AuthType.EncryptedToken ||
-      authType === AuthType.ResourceToken ||
-      authType === AuthType.MasterKey
-    ) {
-      this.isNotebooksEnabledForAccount(false);
-      return;
-    }
-
-    const firstWriteLocation =
-      databaseAccount?.properties?.writeLocations &&
-      databaseAccount?.properties?.writeLocations[0]?.locationName.toLowerCase();
-    const disallowedLocationsUri = `${configContext.BACKEND_ENDPOINT}/api/disallowedLocations`;
-    const authorizationHeader = getAuthorizationHeader();
-    try {
-      const response = await fetch(disallowedLocationsUri, {
-        method: "POST",
-        body: JSON.stringify({
-          resourceTypes: [Constants.ArmResourceTypes.notebookWorkspaces],
-        }),
-        headers: {
-          [authorizationHeader.header]: authorizationHeader.token,
-          [Constants.HttpHeaders.contentType]: "application/json",
-        },
-      });
-
-      if (!response.ok) {
-        throw new Error("Failed to fetch disallowed locations");
-      }
-
-      const disallowedLocations: string[] = await response.json();
-      if (!disallowedLocations) {
-        Logger.logInfo("No disallowed locations found", "Explorer/isNotebooksEnabledForAccount");
-        this.isNotebooksEnabledForAccount(true);
-        return;
-      }
-
-      // firstWriteLocation should not be disallowed
-      const isAccountInAllowedLocation = firstWriteLocation && disallowedLocations.indexOf(firstWriteLocation) === -1;
-      this.isNotebooksEnabledForAccount(isAccountInAllowedLocation);
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "Explorer/isNotebooksEnabledForAccount");
-      this.isNotebooksEnabledForAccount(false);
-    }
-  }
-
   private refreshNotebookList = async (): Promise<void> => {
-    if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       return;
     }
 
@@ -1017,7 +920,7 @@ export default class Explorer {
   };
 
   public deleteNotebookFile(item: NotebookContentItem): Promise<void> {
-    if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to delete notebook file, but notebook is not enabled";
       handleError(error, "Explorer/deleteNotebookFile");
       throw new Error(error);
@@ -1058,7 +961,7 @@ export default class Explorer {
    * This creates a new notebook file, then opens the notebook
    */
   public onNewNotebookClicked(parent?: NotebookContentItem): void {
-    if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to create new notebook, but notebook is not enabled";
       handleError(error, "Explorer/onNewNotebookClicked");
       throw new Error(error);
@@ -1102,7 +1005,7 @@ export default class Explorer {
   }
 
   public refreshContentItem(item: NotebookContentItem): Promise<void> {
-    if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to refresh notebook list, but notebook is not enabled";
       handleError(error, "Explorer/refreshContentItem");
       return Promise.reject(new Error(error));
@@ -1111,10 +1014,6 @@ export default class Explorer {
     return this.notebookManager?.notebookContentClient.updateItemChildren(item);
   }
 
-  public getNotebookBasePath(): string {
-    return this.notebookBasePath();
-  }
-
   public openNotebookTerminal(kind: ViewModels.TerminalKind) {
     let title: string;
 
@@ -1234,7 +1133,7 @@ export default class Explorer {
   }
 
   public async handleOpenFileAction(path: string): Promise<void> {
-    if (this.isAccountReady() && !(await this._containsDefaultNotebookWorkspace(userContext.databaseAccount))) {
+    if (!(await this._containsDefaultNotebookWorkspace(userContext.databaseAccount))) {
       this._openSetupNotebooksPaneForQuickstart();
     }
 
@@ -1305,4 +1204,29 @@ export default class Explorer {
       .getState()
       .openSidePanel(title, <SetupNoteBooksPanel explorer={this} panelTitle={title} panelDescription={description} />);
   }
+
+  public async refreshExplorer(): Promise<void> {
+    userContext.authType === AuthType.ResourceToken
+      ? this.refreshDatabaseForResourceToken()
+      : this.refreshAllDatabases(true);
+    await useNotebook.getState().refreshNotebooksEnabledStateForAccount();
+    const isNotebookEnabled: boolean =
+      userContext.authType !== AuthType.ResourceToken &&
+      ((await this._containsDefaultNotebookWorkspace(userContext.databaseAccount)) ||
+        userContext.features.enableNotebooks);
+    useNotebook.getState().setIsNotebookEnabled(isNotebookEnabled);
+    useNotebook.getState().setIsShellEnabled(isNotebookEnabled && isPublicInternetAccessAllowed());
+
+    TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
+      isNotebookEnabled,
+      dataExplorerArea: Constants.Areas.Notebook,
+    });
+
+    if (isNotebookEnabled) {
+      await this.initNotebooks(userContext.databaseAccount);
+    } else if (this.notebookToImport) {
+      // if notebooks is not enabled but the user is trying to do a quickstart setup with notebooks, open the SetupNotebooksPane
+      this._openSetupNotebooksPaneForQuickstart();
+    }
+  }
 }

src/Explorer/Graph/GraphExplorerComponent/EditorNeighborsComponent.tsx

@@ -4,12 +4,12 @@
  */
 
 import * as React from "react";
-import { NeighborVertexBasicInfo, EditedEdges, GraphNewEdgeData, PossibleVertex } from "./GraphExplorer";
-import * as GraphUtil from "./GraphUtil";
-import * as InputTypeaheadComponent from "../../Controls/InputTypeahead/InputTypeaheadComponent";
-import DeleteIcon from "../../../../images/delete.svg";
 import AddPropertyIcon from "../../../../images/Add-property.svg";
+import DeleteIcon from "../../../../images/delete.svg";
 import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
+import * as InputTypeaheadComponent from "../../Controls/InputTypeahead/InputTypeaheadComponent";
+import { EditedEdges, GraphNewEdgeData, NeighborVertexBasicInfo, PossibleVertex } from "./GraphExplorer";
+import * as GraphUtil from "./GraphUtil";
 
 export interface EditorNeighborsComponentProps {
   isSource: boolean;
@@ -83,11 +83,11 @@ export class EditorNeighborsComponent extends React.Component<EditorNeighborsCom
   }
 
   private removeCurrentNeighborEdge(index: number): void {
-    let sources = this.props.editedNeighbors.currentNeighbors;
+    const sources = this.props.editedNeighbors.currentNeighbors;
-    let id = sources[index].edgeId;
+    const id = sources[index].edgeId;
     sources.splice(index, 1);
 
-    let droppedIds = this.props.editedNeighbors.droppedIds;
+    const droppedIds = this.props.editedNeighbors.droppedIds;
     droppedIds.push(id);
     this.onUpdateEdges();
   }
@@ -215,7 +215,7 @@ export class EditorNeighborsComponent extends React.Component<EditorNeighborsCom
             </td>
             <td className="actionCol">
               <span className="rightPaneTrashIcon rightPaneBtns">
-                <img src={DeleteIcon} alt="Delete" onClick={(e) => this.removeAddedEdgeToNeighbor(index)} />
+                <img src={DeleteIcon} alt="Delete" onClick={() => this.removeAddedEdgeToNeighbor(index)} />
               </span>
             </td>
           </tr>

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -54,7 +54,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
 
   if (container.tabsManager.activeTab()?.tabKind === ViewModels.CollectionTabKind.NotebookV2) {
-    uiFabricControlButtons.unshift(CommandBarUtil.createMemoryTracker("memoryTracker", container.memoryUsageInfo));
+    uiFabricControlButtons.unshift(CommandBarUtil.createMemoryTracker("memoryTracker"));
   }
 
   return (

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts

@@ -6,6 +6,8 @@ import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
 import { updateUserContext } from "../../../UserContext";
 import Explorer from "../../Explorer";
 import NotebookManager from "../../Notebook/NotebookManager";
+import { useNotebook } from "../../Notebook/useNotebook";
+import { useDatabases } from "../../useDatabases";
 import { useSelectedNode } from "../../useSelectedNode";
 import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
 
@@ -27,9 +29,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
           },
         } as DatabaseAccount,
       });
-      mockExplorer.isSynapseLinkUpdating = ko.observable(false);
-      mockExplorer.isNotebookEnabled = ko.observable(false);
-      mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
     });
 
     it("Account is not serverless - button should be visible", () => {
@@ -70,18 +69,19 @@ describe("CommandBarComponentButtonFactory tests", () => {
           },
         } as DatabaseAccount,
       });
-      mockExplorer.isSynapseLinkUpdating = ko.observable(false);
     });
 
     afterEach(() => {
       updateUserContext({
         portalEnv: "prod",
       });
+      useNotebook.getState().setIsNotebookEnabled(false);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(false);
     });
 
     it("Notebooks is already enabled - button should be hidden", () => {
-      mockExplorer.isNotebookEnabled = ko.observable(true);
+      useNotebook.getState().setIsNotebookEnabled(true);
-      mockExplorer.isNotebooksEnabledForAccount = ko.observable(true);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
@@ -89,8 +89,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
     });
 
     it("Account is running on one of the national clouds - button should be hidden", () => {
-      mockExplorer.isNotebookEnabled = ko.observable(false);
-      mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
       updateUserContext({
         portalEnv: "mooncake",
       });
@@ -101,8 +99,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
     });
 
     it("Notebooks is not enabled but is available - button should be shown and enabled", () => {
-      mockExplorer.isNotebookEnabled = ko.observable(false);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
-      mockExplorer.isNotebooksEnabledForAccount = ko.observable(true);
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
@@ -112,9 +109,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
     });
 
     it("Notebooks is not enabled and is unavailable - button should be shown and disabled", () => {
-      mockExplorer.isNotebookEnabled = ko.observable(false);
-      mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
-
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
       expect(enableNotebookBtn).toBeDefined();
@@ -138,24 +132,25 @@ describe("CommandBarComponentButtonFactory tests", () => {
           },
         } as DatabaseAccount,
       });
-      mockExplorer.isSynapseLinkUpdating = ko.observable(false);
-      mockExplorer.isShellEnabled = ko.observable(true);
     });
 
     afterAll(() => {
       updateUserContext({
         apiType: "SQL",
       });
+      useNotebook.getState().setIsShellEnabled(false);
     });
 
     beforeEach(() => {
       updateUserContext({
         apiType: "Mongo",
       });
-      mockExplorer.isNotebookEnabled = ko.observable(false);
+      useNotebook.getState().setIsShellEnabled(true);
-      mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
+    });
 
-      mockExplorer.isShellEnabled = ko.observable(true);
+    afterEach(() => {
+      useNotebook.getState().setIsNotebookEnabled(false);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(false);
     });
 
     it("Mongo Api not available - button should be hidden", () => {
@@ -184,7 +179,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
     });
 
     it("Notebooks is not enabled and is available - button should be hidden", () => {
-      mockExplorer.isNotebooksEnabledForAccount = ko.observable(true);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
@@ -192,7 +187,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
     });
 
     it("Notebooks is enabled and is unavailable - button should be shown and enabled", () => {
-      mockExplorer.isNotebookEnabled = ko.observable(true);
+      useNotebook.getState().setIsNotebookEnabled(true);
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
@@ -202,8 +197,8 @@ describe("CommandBarComponentButtonFactory tests", () => {
     });
 
     it("Notebooks is enabled and is available - button should be shown and enabled", () => {
-      mockExplorer.isNotebookEnabled = ko.observable(true);
+      useNotebook.getState().setIsNotebookEnabled(true);
-      mockExplorer.isNotebooksEnabledForAccount = ko.observable(true);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
@@ -213,9 +208,9 @@ describe("CommandBarComponentButtonFactory tests", () => {
     });
 
     it("Notebooks is enabled and is available, terminal is unavailable due to ipRules - button should be hidden", () => {
-      mockExplorer.isNotebookEnabled = ko.observable(true);
+      useNotebook.getState().setIsNotebookEnabled(true);
-      mockExplorer.isNotebooksEnabledForAccount = ko.observable(true);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
-      mockExplorer.isShellEnabled = ko.observable(false);
+      useNotebook.getState().setIsShellEnabled(false);
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
@@ -236,7 +231,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
           },
         } as DatabaseAccount,
       });
-      mockExplorer.isSynapseLinkUpdating = ko.observable(false);
     });
 
     beforeEach(() => {
@@ -247,8 +241,11 @@ describe("CommandBarComponentButtonFactory tests", () => {
           },
         } as DatabaseAccount,
       });
-      mockExplorer.isNotebookEnabled = ko.observable(false);
+    });
-      mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
+
+    afterEach(() => {
+      useNotebook.getState().setIsNotebookEnabled(false);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(false);
     });
 
     it("Cassandra Api not available - button should be hidden", () => {
@@ -282,7 +279,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
     });
 
     it("Notebooks is not enabled and is available - button should be shown and enabled", () => {
-      mockExplorer.isNotebooksEnabledForAccount = ko.observable(true);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
@@ -290,7 +287,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
     });
 
     it("Notebooks is enabled and is unavailable - button should be shown and enabled", () => {
-      mockExplorer.isNotebookEnabled = ko.observable(true);
+      useNotebook.getState().setIsNotebookEnabled(true);
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
@@ -300,8 +297,8 @@ describe("CommandBarComponentButtonFactory tests", () => {
     });
 
     it("Notebooks is enabled and is available - button should be shown and enabled", () => {
-      mockExplorer.isNotebookEnabled = ko.observable(true);
+      useNotebook.getState().setIsNotebookEnabled(true);
-      mockExplorer.isNotebooksEnabledForAccount = ko.observable(true);
+      useNotebook.getState().setIsNotebooksEnabledForAccount(true);
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
@@ -326,23 +323,17 @@ describe("CommandBarComponentButtonFactory tests", () => {
         } as DatabaseAccount,
       });
 
-      mockExplorer.isSynapseLinkUpdating = ko.observable(false);
-      mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
-
       mockExplorer.notebookManager = new NotebookManager();
       mockExplorer.notebookManager.gitHubOAuthService = new GitHubOAuthService(undefined);
     });
 
-    beforeEach(() => {
-      mockExplorer.isNotebookEnabled = ko.observable(false);
-    });
-
     afterEach(() => {
       jest.resetAllMocks();
+      useNotebook.getState().setIsNotebookEnabled(false);
     });
 
     it("Notebooks is enabled and GitHubOAuthService is not logged in - connect to github button should be visible", () => {
-      mockExplorer.isNotebookEnabled = ko.observable(true);
+      useNotebook.getState().setIsNotebookEnabled(true);
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const connectToGitHubBtn = buttons.find((button) => button.commandButtonLabel === connectToGitHubBtnLabel);
@@ -350,7 +341,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
     });
 
     it("Notebooks is enabled and GitHubOAuthService is logged in - manage github settings button should be visible", () => {
-      mockExplorer.isNotebookEnabled = ko.observable(true);
+      useNotebook.getState().setIsNotebookEnabled(true);
       mockExplorer.notebookManager.gitHubOAuthService.isLoggedIn = jest.fn().mockReturnValue(true);
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
@@ -376,10 +367,11 @@ describe("CommandBarComponentButtonFactory tests", () => {
   describe("Resource token", () => {
     const mockCollection = { id: ko.observable("test") } as CollectionBase;
     useSelectedNode.getState().setSelectedNode(mockCollection);
+    useDatabases.setState({ resourceTokenCollection: mockCollection });
     const selectedNodeState = useSelectedNode.getState();
+
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.resourceTokenCollection = ko.observable(mockCollection);
 
       updateUserContext({
         authType: AuthType.ResourceToken,

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -28,9 +28,11 @@ import { isServerlessAccount } from "../../../Utils/CapabilityUtils";
 import { isRunningOnNationalCloud } from "../../../Utils/CloudUtils";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
+import { useNotebook } from "../../Notebook/useNotebook";
 import { OpenFullScreen } from "../../OpenFullScreen";
 import { LoadQueryPane } from "../../Panes/LoadQueryPane/LoadQueryPane";
 import { SettingsPane } from "../../Panes/SettingsPane/SettingsPane";
+import { useDatabases } from "../../useDatabases";
 import { SelectedNodeState } from "../../useSelectedNode";
 
 let counter = 0;
@@ -62,7 +64,7 @@ export function createStaticCommandBarButtons(
 
   buttons.push(createDivider());
 
-  if (container.isNotebookEnabled()) {
+  if (useNotebook.getState().isNotebookEnabled) {
     const newNotebookButton = createNewNotebookButton(container);
     newNotebookButton.children = [createNewNotebookButton(container), createuploadNotebookButton(container)];
     buttons.push(newNotebookButton);
@@ -76,7 +78,7 @@ export function createStaticCommandBarButtons(
     buttons.push(createNotebookWorkspaceResetButton(container));
     if (
       (userContext.apiType === "Mongo" &&
-        container.isShellEnabled() &&
+        useNotebook.getState().isShellEnabled &&
         selectedNodeState.isDatabaseNodeOrNoneSelected()) ||
       userContext.apiType === "Cassandra"
     ) {
@@ -138,13 +140,13 @@ export function createContextCommandBarButtons(
   const buttons: CommandButtonComponentProps[] = [];
 
   if (!selectedNodeState.isDatabaseNodeOrNoneSelected() && userContext.apiType === "Mongo") {
-    const label = container.isShellEnabled() ? "Open Mongo Shell" : "New Shell";
+    const label = useNotebook.getState().isShellEnabled ? "Open Mongo Shell" : "New Shell";
     const newMongoShellBtn: CommandButtonComponentProps = {
       iconSrc: HostedTerminalIcon,
       iconAlt: label,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
-        if (container.isShellEnabled()) {
+        if (useNotebook.getState().isShellEnabled) {
           container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
         } else {
           selectedCollection && selectedCollection.onNewMongoShellClick();
@@ -269,7 +271,7 @@ function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonCo
     onCommandClick: () => container.openEnableSynapseLinkDialog(),
     commandButtonLabel: label,
     hasPopup: false,
-    disabled: container.isSynapseLinkUpdating(),
+    disabled: useNotebook.getState().isSynapseLinkUpdating,
     ariaLabel: label,
   };
 }
@@ -449,9 +451,9 @@ function createEnableNotebooksButton(container: Explorer): CommandButtonComponen
     onCommandClick: () => container.openSetupNotebooksPanel(label, description),
     commandButtonLabel: label,
     hasPopup: false,
-    disabled: !container.isNotebooksEnabledForAccount(),
+    disabled: !useNotebook.getState().isNotebooksEnabledForAccount,
     ariaLabel: label,
-    tooltipText: container.isNotebooksEnabledForAccount() ? "" : tooltip,
+    tooltipText: useNotebook.getState().isNotebooksEnabledForAccount ? "" : tooltip,
   };
 }
 
@@ -475,12 +477,13 @@ function createOpenMongoTerminalButton(container: Explorer): CommandButtonCompon
   const title = "Set up workspace";
   const description =
     "Looks like you have not created a workspace for this account. To proceed and start using features including mongo shell and notebook, we will need to create a default workspace in this account.";
-  const disableButton = !container.isNotebooksEnabledForAccount() && !container.isNotebookEnabled();
+  const disableButton =
+    !useNotebook.getState().isNotebooksEnabledForAccount && !useNotebook.getState().isNotebookEnabled;
   return {
     iconSrc: HostedTerminalIcon,
     iconAlt: label,
     onCommandClick: () => {
-      if (container.isNotebookEnabled()) {
+      if (useNotebook.getState().isNotebookEnabled) {
         container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
       } else {
         container.openSetupNotebooksPanel(title, description);
@@ -501,12 +504,13 @@ function createOpenCassandraTerminalButton(container: Explorer): CommandButtonCo
   const title = "Set up workspace";
   const description =
     "Looks like you have not created a workspace for this account. To proceed and start using features including cassandra shell and notebook, we will need to create a default workspace in this account.";
-  const disableButton = !container.isNotebooksEnabledForAccount() && !container.isNotebookEnabled();
+  const disableButton =
+    !useNotebook.getState().isNotebooksEnabledForAccount && !useNotebook.getState().isNotebookEnabled;
   return {
     iconSrc: HostedTerminalIcon,
     iconAlt: label,
     onCommandClick: () => {
-      if (container.isNotebookEnabled()) {
+      if (useNotebook.getState().isNotebookEnabled) {
         container.openNotebookTerminal(ViewModels.TerminalKind.Cassandra);
       } else {
         container.openSetupNotebooksPanel(title, description);
@@ -554,12 +558,12 @@ function createStaticCommandBarButtonsForResourceToken(
   const newSqlQueryBtn = createNewSQLQueryButton(selectedNodeState);
   const openQueryBtn = createOpenQueryButton(container);
 
+  const resourceTokenCollection: ViewModels.CollectionBase = useDatabases.getState().resourceTokenCollection;
   const isResourceTokenCollectionNodeSelected: boolean =
-    container.resourceTokenCollection() &&
+    resourceTokenCollection?.id() === selectedNodeState.selectedNode?.id();
-    container.resourceTokenCollection().id() === selectedNodeState.selectedNode?.id();
   newSqlQueryBtn.disabled = !isResourceTokenCollectionNodeSelected;
   newSqlQueryBtn.onCommandClick = () => {
-    const resourceTokenCollection: ViewModels.CollectionBase = container.resourceTokenCollection();
+    const resourceTokenCollection: ViewModels.CollectionBase = useDatabases.getState().resourceTokenCollection;
     resourceTokenCollection && resourceTokenCollection.onNewQueryClick(resourceTokenCollection, undefined);
   };
 

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -6,16 +6,14 @@ import {
   IDropdownOption,
   IDropdownStyles,
 } from "@fluentui/react";
-import { Observable } from "knockout";
 import * as React from "react";
 import _ from "underscore";
 import ChevronDownIcon from "../../../../images/Chevron_down.svg";
 import { StyleConstants } from "../../../Common/Constants";
-import { MemoryUsageInfo } from "../../../Contracts/DataModels";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-import { MemoryTrackerComponent } from "./MemoryTrackerComponent";
+import { MemoryTracker } from "./MemoryTrackerComponent";
 
 /**
  * Convert our NavbarButtonConfig to UI Fabric buttons
@@ -185,12 +183,9 @@ export const createDivider = (key: string): ICommandBarItemProps => {
   };
 };
 
-export const createMemoryTracker = (
+export const createMemoryTracker = (key: string): ICommandBarItemProps => {
-  key: string,
-  memoryUsageInfo: Observable<MemoryUsageInfo>
-): ICommandBarItemProps => {
   return {
     key,
-    onRender: () => <MemoryTrackerComponent memoryUsageInfo={memoryUsageInfo} />,
+    onRender: () => <MemoryTracker />,
   };
 };

src/Explorer/Menus/CommandBar/MemoryTrackerComponent.tsx

@@ -1,27 +1,9 @@
 import { ProgressIndicator, Spinner, SpinnerSize, Stack } from "@fluentui/react";
-import { Observable, Subscription } from "knockout";
 import * as React from "react";
-import { MemoryUsageInfo } from "../../../Contracts/DataModels";
+import { useNotebook } from "../../Notebook/useNotebook";
 
-interface MemoryTrackerProps {
+export const MemoryTracker: React.FC = (): JSX.Element => {
-  memoryUsageInfo: Observable<MemoryUsageInfo>;
+  const memoryUsageInfo = useNotebook((state) => state.memoryUsageInfo);
-}
-
-export class MemoryTrackerComponent extends React.Component<MemoryTrackerProps> {
-  private memoryUsageInfoSubscription: Subscription;
-
-  public componentDidMount(): void {
-    this.memoryUsageInfoSubscription = this.props.memoryUsageInfo.subscribe(() => {
-      this.forceUpdate();
-    });
-  }
-
-  public componentWillUnmount(): void {
-    this.memoryUsageInfoSubscription && this.memoryUsageInfoSubscription.dispose();
-  }
-
-  public render(): JSX.Element {
-    const memoryUsageInfo: MemoryUsageInfo = this.props.memoryUsageInfo();
   if (!memoryUsageInfo) {
     return (
       <Stack className="memoryTrackerContainer" horizontal>
@@ -44,5 +26,4 @@ export class MemoryTrackerComponent extends React.Component<MemoryTrackerProps>
       />
     </Stack>
   );
-  }
+};
-}

src/Explorer/Notebook/NotebookContainerClient.ts

@@ -8,25 +8,26 @@ import * as DataModels from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
 import { createOrUpdate, destroy } from "../../Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { useNotebook } from "./useNotebook";
 
 export class NotebookContainerClient {
   private clearReconnectionAttemptMessage? = () => {};
   private isResettingWorkspace: boolean;
 
-  constructor(
+  constructor(private onConnectionLost: () => void) {
-    private notebookServerInfo: ko.Observable<DataModels.NotebookWorkspaceConnectionInfo>,
+    const notebookServerInfo = useNotebook.getState().notebookServerInfo;
-    private onConnectionLost: () => void,
+    if (notebookServerInfo?.notebookServerEndpoint) {
-    private onMemoryUsageInfoUpdate: (update: DataModels.MemoryUsageInfo) => void
-  ) {
-    if (notebookServerInfo() && notebookServerInfo().notebookServerEndpoint) {
       this.scheduleHeartbeat(Constants.Notebook.heartbeatDelayMs);
     } else {
-      const subscription = notebookServerInfo.subscribe((newServerInfo: DataModels.NotebookWorkspaceConnectionInfo) => {
+      const unsub = useNotebook.subscribe(
-        if (newServerInfo && newServerInfo.notebookServerEndpoint) {
+        (newServerInfo: DataModels.NotebookWorkspaceConnectionInfo) => {
+          if (newServerInfo?.notebookServerEndpoint) {
             this.scheduleHeartbeat(Constants.Notebook.heartbeatDelayMs);
           }
-        subscription.dispose();
+          unsub();
-      });
+        },
+        (state) => state.notebookServerInfo
+      );
     }
   }
 
@@ -36,13 +37,14 @@ export class NotebookContainerClient {
   private scheduleHeartbeat(delayMs: number): void {
     setTimeout(() => {
       this.getMemoryUsage()
-        .then((memoryUsageInfo) => this.onMemoryUsageInfoUpdate(memoryUsageInfo))
+        .then((memoryUsageInfo) => useNotebook.getState().setMemoryUsageInfo(memoryUsageInfo))
         .finally(() => this.scheduleHeartbeat(Constants.Notebook.heartbeatDelayMs));
     }, delayMs);
   }
 
   private async getMemoryUsage(): Promise<DataModels.MemoryUsageInfo> {
-    if (!this.notebookServerInfo() || !this.notebookServerInfo().notebookServerEndpoint) {
+    const notebookServerInfo = useNotebook.getState().notebookServerInfo;
+    if (!notebookServerInfo || !notebookServerInfo.notebookServerEndpoint) {
       const error = "No server endpoint detected";
       Logger.logError(error, "NotebookContainerClient/getMemoryUsage");
       return Promise.reject(error);
@@ -98,7 +100,8 @@ export class NotebookContainerClient {
   }
 
   private async _resetWorkspace(): Promise<void> {
-    if (!this.notebookServerInfo() || !this.notebookServerInfo().notebookServerEndpoint) {
+    const notebookServerInfo = useNotebook.getState().notebookServerInfo;
+    if (!notebookServerInfo || !notebookServerInfo.notebookServerEndpoint) {
       const error = "No server endpoint detected";
       Logger.logError(error, "NotebookContainerClient/resetWorkspace");
       return Promise.reject(error);
@@ -117,15 +120,11 @@ export class NotebookContainerClient {
   }
 
   private getNotebookServerConfig(): { notebookServerEndpoint: string; authToken: string } {
-    let authToken: string,
+    const notebookServerInfo = useNotebook.getState().notebookServerInfo;
-      notebookServerEndpoint = this.notebookServerInfo().notebookServerEndpoint,
+    const authToken: string = notebookServerInfo.authToken ? `Token ${notebookServerInfo.authToken}` : undefined;
-      token = this.notebookServerInfo().authToken;
-    if (token) {
-      authToken = `Token ${token}`;
-    }
 
     return {
-      notebookServerEndpoint,
+      notebookServerEndpoint: notebookServerInfo.notebookServerEndpoint,
       authToken,
     };
   }

src/Explorer/Notebook/NotebookContentClient.ts

@@ -1,18 +1,14 @@
 import { stringifyNotebook } from "@nteract/commutable";
 import { FileType, IContent, IContentProvider, IEmptyContent, ServerConfig } from "@nteract/core";
 import { AjaxResponse } from "rxjs/ajax";
-import * as DataModels from "../../Contracts/DataModels";
 import * as StringUtils from "../../Utils/StringUtils";
 import * as FileSystemUtil from "./FileSystemUtil";
 import { NotebookContentItem, NotebookContentItemType } from "./NotebookContentItem";
 import { NotebookUtil } from "./NotebookUtil";
+import { useNotebook } from "./useNotebook";
 
 export class NotebookContentClient {
-  constructor(
+  constructor(private contentProvider: IContentProvider) {}
-    private notebookServerInfo: ko.Observable<DataModels.NotebookWorkspaceConnectionInfo>,
-    public notebookBasePath: ko.Observable<string>,
-    private contentProvider: IContentProvider
-  ) {}
 
   /**
    * This updates the item and points all the children's parent to this item
@@ -271,9 +267,10 @@ export class NotebookContentClient {
   }
 
   private getServerConfig(): ServerConfig {
+    const notebookServerInfo = useNotebook.getState().notebookServerInfo;
     return {
-      endpoint: this.notebookServerInfo().notebookServerEndpoint,
+      endpoint: notebookServerInfo.notebookServerEndpoint,
-      token: this.notebookServerInfo().authToken,
+      token: notebookServerInfo.authToken,
       crossDomain: true,
     };
   }

src/Explorer/Notebook/NotebookManager.tsx

@@ -4,13 +4,11 @@
 
 import { ImmutableNotebook } from "@nteract/commutable";
 import type { IContentProvider } from "@nteract/core";
-import ko from "knockout";
 import React from "react";
 import { contents } from "rx-jupyter";
 import { Areas, HttpStatusCodes } from "../../Common/Constants";
 import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
 import * as Logger from "../../Common/Logger";
-import { MemoryUsageInfo } from "../../Contracts/DataModels";
 import { GitHubClient } from "../../GitHub/GitHubClient";
 import { GitHubContentProvider } from "../../GitHub/GitHubContentProvider";
 import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
@@ -37,7 +35,6 @@ export type { NotebookPaneContent };
 
 export interface NotebookManagerOptions {
   container: Explorer;
-  notebookBasePath: ko.Observable<string>;
   resourceTree: ResourceTreeAdapter;
   refreshCommandBarButtons: () => void;
   refreshNotebookList: () => void;
@@ -81,17 +78,11 @@ export default class NotebookManager {
       contents.JupyterContentProvider
     );
 
-    this.notebookClient = new NotebookContainerClient(
+    this.notebookClient = new NotebookContainerClient(() =>
-      this.params.container.notebookServerInfo,
+      this.params.container.initNotebooks(userContext?.databaseAccount)
-      () => this.params.container.initNotebooks(userContext?.databaseAccount),
-      (update: MemoryUsageInfo) => this.params.container.memoryUsageInfo(update)
     );
 
-    this.notebookContentClient = new NotebookContentClient(
+    this.notebookContentClient = new NotebookContentClient(this.notebookContentProvider);
-      this.params.container.notebookServerInfo,
-      this.params.notebookBasePath,
-      this.notebookContentProvider
-    );
 
     this.gitHubOAuthService.getTokenObservable().subscribe((token) => {
       this.gitHubClient.setToken(token?.access_token);

src/Explorer/Notebook/useNotebook.ts

@@ -0,0 +1,106 @@
+import create, { UseStore } from "zustand";
+import { AuthType } from "../../AuthType";
+import * as Constants from "../../Common/Constants";
+import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
+import * as Logger from "../../Common/Logger";
+import { configContext } from "../../ConfigContext";
+import * as DataModels from "../../Contracts/DataModels";
+import { userContext } from "../../UserContext";
+import { getAuthorizationHeader } from "../../Utils/AuthorizationUtils";
+
+interface NotebookState {
+  isNotebookEnabled: boolean;
+  isNotebooksEnabledForAccount: boolean;
+  notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo;
+  sparkClusterConnectionInfo: DataModels.SparkClusterConnectionInfo;
+  isSynapseLinkUpdating: boolean;
+  memoryUsageInfo: DataModels.MemoryUsageInfo;
+  isShellEnabled: boolean;
+  notebookBasePath: string;
+  isInitializingNotebooks: boolean;
+  setIsNotebookEnabled: (isNotebookEnabled: boolean) => void;
+  setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => void;
+  setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) => void;
+  setSparkClusterConnectionInfo: (sparkClusterConnectionInfo: DataModels.SparkClusterConnectionInfo) => void;
+  setIsSynapseLinkUpdating: (isSynapseLinkUpdating: boolean) => void;
+  setMemoryUsageInfo: (memoryUsageInfo: DataModels.MemoryUsageInfo) => void;
+  setIsShellEnabled: (isShellEnabled: boolean) => void;
+  setNotebookBasePath: (notebookBasePath: string) => void;
+  refreshNotebooksEnabledStateForAccount: () => Promise<void>;
+}
+
+export const useNotebook: UseStore<NotebookState> = create((set) => ({
+  isNotebookEnabled: false,
+  isNotebooksEnabledForAccount: false,
+  notebookServerInfo: {
+    notebookServerEndpoint: undefined,
+    authToken: undefined,
+  },
+  sparkClusterConnectionInfo: {
+    userName: undefined,
+    password: undefined,
+    endpoints: [],
+  },
+  isSynapseLinkUpdating: false,
+  memoryUsageInfo: undefined,
+  isShellEnabled: false,
+  notebookBasePath: Constants.Notebook.defaultBasePath,
+  isInitializingNotebooks: false,
+  setIsNotebookEnabled: (isNotebookEnabled: boolean) => set({ isNotebookEnabled }),
+  setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => set({ isNotebooksEnabledForAccount }),
+  setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) =>
+    set({ notebookServerInfo }),
+  setSparkClusterConnectionInfo: (sparkClusterConnectionInfo: DataModels.SparkClusterConnectionInfo) =>
+    set({ sparkClusterConnectionInfo }),
+  setIsSynapseLinkUpdating: (isSynapseLinkUpdating: boolean) => set({ isSynapseLinkUpdating }),
+  setMemoryUsageInfo: (memoryUsageInfo: DataModels.MemoryUsageInfo) => set({ memoryUsageInfo }),
+  setIsShellEnabled: (isShellEnabled: boolean) => set({ isShellEnabled }),
+  setNotebookBasePath: (notebookBasePath: string) => set({ notebookBasePath }),
+  refreshNotebooksEnabledStateForAccount: async (): Promise<void> => {
+    const { databaseAccount, authType } = userContext;
+    if (
+      authType === AuthType.EncryptedToken ||
+      authType === AuthType.ResourceToken ||
+      authType === AuthType.MasterKey
+    ) {
+      set({ isNotebooksEnabledForAccount: false });
+      return;
+    }
+
+    const firstWriteLocation =
+      databaseAccount?.properties?.writeLocations &&
+      databaseAccount?.properties?.writeLocations[0]?.locationName.toLowerCase();
+    const disallowedLocationsUri = `${configContext.BACKEND_ENDPOINT}/api/disallowedLocations`;
+    const authorizationHeader = getAuthorizationHeader();
+    try {
+      const response = await fetch(disallowedLocationsUri, {
+        method: "POST",
+        body: JSON.stringify({
+          resourceTypes: [Constants.ArmResourceTypes.notebookWorkspaces],
+        }),
+        headers: {
+          [authorizationHeader.header]: authorizationHeader.token,
+          [Constants.HttpHeaders.contentType]: "application/json",
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch disallowed locations");
+      }
+
+      const disallowedLocations: string[] = await response.json();
+      if (!disallowedLocations) {
+        Logger.logInfo("No disallowed locations found", "Explorer/isNotebooksEnabledForAccount");
+        set({ isNotebooksEnabledForAccount: true });
+        return;
+      }
+
+      // firstWriteLocation should not be disallowed
+      const isAccountInAllowedLocation = firstWriteLocation && disallowedLocations.indexOf(firstWriteLocation) === -1;
+      set({ isNotebooksEnabledForAccount: isAccountInAllowedLocation });
+    } catch (error) {
+      Logger.logError(getErrorMessage(error), "Explorer/isNotebooksEnabledForAccount");
+      set({ isNotebooksEnabledForAccount: false });
+    }
+  },
+}));

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx

@@ -9,6 +9,7 @@ import * as GitHubUtils from "../../../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
 import { NotebookContentItem, NotebookContentItemType } from "../../Notebook/NotebookContentItem";
+import { useNotebook } from "../../Notebook/useNotebook";
 import { ResourceTreeAdapter } from "../../Tree/ResourceTreeAdapter";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPaneComponent";
@@ -101,7 +102,7 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
       case "MyNotebooks":
         parent = {
           name: ResourceTreeAdapter.MyNotebooksTitle,
-          path: container.getNotebookBasePath(),
+          path: useNotebook.getState().notebookBasePath,
           type: NotebookContentItemType.Directory,
         };
         break;

src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap

@@ -19,17 +19,9 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
           "container": Explorer {
             "_isInitializingNotebooks": false,
             "_resetNotebookWorkspace": [Function],
-            "isAccountReady": [Function],
             "isFixedCollectionWithSharedThroughputSupported": [Function],
-            "isNotebookEnabled": [Function],
-            "isNotebooksEnabledForAccount": [Function],
             "isSchemaEnabled": [Function],
-            "isShellEnabled": [Function],
-            "isSynapseLinkUpdating": [Function],
             "isTabsContentExpanded": [Function],
-            "memoryUsageInfo": [Function],
-            "notebookBasePath": [Function],
-            "notebookServerInfo": [Function],
             "onRefreshDatabasesKeyPress": [Function],
             "onRefreshResourcesClick": [Function],
             "provideFeedbackEmail": [Function],
@@ -37,7 +29,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
               "container": [Circular],
             },
             "refreshNotebookList": [Function],
-            "resourceTokenCollection": [Function],
             "resourceTree": ResourceTreeAdapter {
               "container": [Circular],
               "copyNotebook": [Function],
@@ -47,7 +38,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
               "container": [Circular],
               "parameters": [Function],
             },
-            "sparkClusterConnectionInfo": [Function],
             "tabsManager": TabsManager {
               "activeTab": [Function],
               "openedTabs": [Function],

src/Explorer/Panes/SetupNotebooksPanel/SetupNotebooksPanel.tsx

@@ -63,7 +63,7 @@ export const SetupNoteBooksPanel: FunctionComponent<SetupNoteBooksPanelProps> =
         userContext.databaseAccount.name,
         "default"
       );
-      explorer.isAccountReady.valueHasMutated(); // re-trigger init notebooks
+      explorer.refreshExplorer();
 
       closeSidePanel();
 

src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap

@@ -9,17 +9,9 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
     Explorer {
       "_isInitializingNotebooks": false,
       "_resetNotebookWorkspace": [Function],
-      "isAccountReady": [Function],
       "isFixedCollectionWithSharedThroughputSupported": [Function],
-      "isNotebookEnabled": [Function],
-      "isNotebooksEnabledForAccount": [Function],
       "isSchemaEnabled": [Function],
-      "isShellEnabled": [Function],
-      "isSynapseLinkUpdating": [Function],
       "isTabsContentExpanded": [Function],
-      "memoryUsageInfo": [Function],
-      "notebookBasePath": [Function],
-      "notebookServerInfo": [Function],
       "onRefreshDatabasesKeyPress": [Function],
       "onRefreshResourcesClick": [Function],
       "provideFeedbackEmail": [Function],
@@ -27,7 +19,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
         "container": [Circular],
       },
       "refreshNotebookList": [Function],
-      "resourceTokenCollection": [Function],
       "resourceTree": ResourceTreeAdapter {
         "container": [Circular],
         "copyNotebook": [Function],
@@ -37,7 +28,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
         "container": [Circular],
         "parameters": [Function],
       },
-      "sparkClusterConnectionInfo": [Function],
       "tabsManager": TabsManager {
         "activeTab": [Function],
         "openedTabs": [Function],

src/Explorer/SplashScreen/SplashScreen.test.ts

@@ -1,4 +1,3 @@
-import * as ko from "knockout";
 import { DataSamplesUtil } from "../DataSamples/DataSamplesUtil";
 import Explorer from "../Explorer";
 import { TabsManager } from "../Tabs/TabsManager";
@@ -7,7 +6,6 @@ jest.mock("../Explorer");
 
 const createExplorer = () => {
   const mock = new Explorer();
-  mock.isNotebookEnabled = ko.observable(false);
   mock.tabsManager = new TabsManager();
   return mock as jest.Mocked<Explorer>;
 };

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -22,6 +22,7 @@ import { FeaturePanelLauncher } from "../Controls/FeaturePanel/FeaturePanelLaunc
 import { DataSamplesUtil } from "../DataSamples/DataSamplesUtil";
 import Explorer from "../Explorer";
 import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
+import { useNotebook } from "../Notebook/useNotebook";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
 
@@ -61,8 +62,13 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
 
   public componentDidMount() {
     this.subscriptions.push(
-      { dispose: useSelectedNode.subscribe(() => this.setState({})) },
+      {
-      this.container.isNotebookEnabled.subscribe(() => this.setState({}))
+        dispose: useNotebook.subscribe(
+          () => this.setState({}),
+          (state) => state.isNotebookEnabled
+        ),
+      },
+      { dispose: useSelectedNode.subscribe(() => this.setState({})) }
     );
   }
 
@@ -210,7 +216,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
       });
     }
 
-    if (this.container.isNotebookEnabled()) {
+    if (useNotebook.getState().isNotebookEnabled) {
       heroes.push({
         iconSrc: NewNotebookIcon,
         title: "New Notebook",

src/Explorer/Tabs/NotebookTabBase.ts

@@ -6,6 +6,7 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import Explorer from "../Explorer";
 import { NotebookClientV2 } from "../Notebook/NotebookClientV2";
+import { useNotebook } from "../Notebook/useNotebook";
 import TabsBase from "./TabsBase";
 
 export interface NotebookTabBaseOptions extends ViewModels.TabOptions {
@@ -28,7 +29,7 @@ export default class NotebookTabBase extends TabsBase {
 
     if (!NotebookTabBase.clientManager) {
       NotebookTabBase.clientManager = new NotebookClientV2({
-        connectionInfo: this.container.notebookServerInfo(),
+        connectionInfo: useNotebook.getState().notebookServerInfo,
         databaseAccountName: userContext?.databaseAccount?.name,
         defaultExperience: userContext.apiType,
         contentProvider: this.container.notebookManager?.notebookContentProvider,

src/Explorer/Tabs/NotebookV2Tab.ts

@@ -23,6 +23,7 @@ import * as CdbActions from "../Notebook/NotebookComponent/actions";
 import { NotebookComponentAdapter } from "../Notebook/NotebookComponent/NotebookComponentAdapter";
 import { CdbAppState, SnapshotRequest } from "../Notebook/NotebookComponent/types";
 import { NotebookContentItem } from "../Notebook/NotebookContentItem";
+import { useNotebook } from "../Notebook/useNotebook";
 import NotebookTabBase, { NotebookTabBaseOptions } from "./NotebookTabBase";
 
 export interface NotebookTabOptions extends NotebookTabBaseOptions {
@@ -39,10 +40,13 @@ export default class NotebookTabV2 extends NotebookTabBase {
 
     this.container = options.container;
     this.notebookPath = ko.observable(options.notebookContentItem.path);
-    this.container.notebookServerInfo.subscribe(() => logConsoleInfo("New notebook server info received."));
+    useNotebook.subscribe(
+      () => logConsoleInfo("New notebook server info received."),
+      (state) => state.notebookServerInfo
+    );
     this.notebookComponentAdapter = new NotebookComponentAdapter({
       contentItem: options.notebookContentItem,
-      notebooksBasePath: this.container.getNotebookBasePath(),
+      notebooksBasePath: useNotebook.getState().notebookBasePath,
       notebookClient: NotebookTabBase.clientManager,
       onUpdateKernelInfo: this.onKernelUpdate,
     });
@@ -359,8 +363,8 @@ export default class NotebookTabV2 extends NotebookTabBase {
   };
 
   private async configureServiceEndpoints(kernelName: string) {
-    const notebookConnectionInfo = this.container && this.container.notebookServerInfo();
+    const notebookConnectionInfo = useNotebook.getState().notebookServerInfo;
-    const sparkClusterConnectionInfo = this.container && this.container.sparkClusterConnectionInfo();
+    const sparkClusterConnectionInfo = useNotebook.getState().sparkClusterConnectionInfo;
     await NotebookConfigurationUtils.configureServiceEndpoints(
       this.notebookPath(),
       notebookConnectionInfo,

src/Explorer/Tabs/TerminalTab.tsx

@@ -8,6 +8,7 @@ import { userContext } from "../../UserContext";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import { NotebookTerminalComponent } from "../Controls/Notebook/NotebookTerminalComponent";
 import Explorer from "../Explorer";
+import { useNotebook } from "../Notebook/useNotebook";
 import TabsBase from "./TabsBase";
 
 export interface TerminalTabOptions extends ViewModels.TabOptions {
@@ -54,8 +55,8 @@ export default class TerminalTab extends TabsBase {
     this.notebookTerminalComponentAdapter.parameters = ko.computed<boolean>(() => {
       if (
         this.isTemplateReady() &&
-        this.container.isNotebookEnabled() &&
+        useNotebook.getState().isNotebookEnabled &&
-        this.container.notebookServerInfo().notebookServerEndpoint
+        useNotebook.getState().notebookServerInfo?.notebookServerEndpoint
       ) {
         return true;
       }
@@ -95,7 +96,7 @@ export default class TerminalTab extends TabsBase {
         throw new Error(`Terminal kind: ${options.kind} not supported`);
     }
 
-    const info: DataModels.NotebookWorkspaceConnectionInfo = options.container.notebookServerInfo();
+    const info: DataModels.NotebookWorkspaceConnectionInfo = useNotebook.getState().notebookServerInfo;
     return {
       authToken: info.authToken,
       notebookServerEndpoint: `${info.notebookServerEndpoint.replace(/\/+$/, "")}/${endpointSuffix}`,

src/Explorer/Tree/Collection.ts

@@ -558,6 +558,7 @@ export default class Collection implements ViewModels.Collection {
   };
 
   public onSettingsClick = async (): Promise<void> => {
+    await this.loadOffer();
     useSelectedNode.getState().setSelectedNode(this);
     this.selectedSubnodeKind(ViewModels.CollectionTabKind.Settings);
     TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -31,6 +31,7 @@ import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
 import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
 import { NotebookUtil } from "../Notebook/NotebookUtil";
+import { useNotebook } from "../Notebook/useNotebook";
 import TabsBase from "../Tabs/TabsBase";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
@@ -57,7 +58,10 @@ export class ResourceTreeAdapter implements ReactAdapter {
 
     useSelectedNode.subscribe(() => this.triggerRender());
     this.container.tabsManager.activeTab.subscribe((newValue: TabsBase) => this.triggerRender());
-    this.container.isNotebookEnabled.subscribe((newValue) => this.triggerRender());
+    useNotebook.subscribe(
+      () => this.triggerRender(),
+      (state) => state.isNotebookEnabled
+    );
 
     useDatabases.subscribe(() => this.triggerRender());
     this.triggerRender();
@@ -91,7 +95,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
     const dataRootNode = this.buildDataTree();
     const notebooksRootNode = this.buildNotebooksTrees();
 
-    if (this.container.isNotebookEnabled()) {
+    if (useNotebook.getState().isNotebookEnabled) {
       return (
         <>
           <AccordionComponent>
@@ -122,12 +126,12 @@ export class ResourceTreeAdapter implements ReactAdapter {
 
     this.myNotebooksContentRoot = {
       name: ResourceTreeAdapter.MyNotebooksTitle,
-      path: this.container.getNotebookBasePath(),
+      path: useNotebook.getState().notebookBasePath,
       type: NotebookContentItemType.Directory,
     };
 
     // Only if notebook server is available we can refresh
-    if (this.container.notebookServerInfo().notebookServerEndpoint) {
+    if (useNotebook.getState().notebookServerInfo?.notebookServerEndpoint) {
       refreshTasks.push(
         this.container.refreshContentItem(this.myNotebooksContentRoot).then(() => {
           this.triggerRender();
@@ -268,7 +272,11 @@ export class ResourceTreeAdapter implements ReactAdapter {
       contextMenu: ResourceTreeContextMenuButtonFactory.createCollectionContextMenuButton(this.container, collection),
     });
 
-    if (this.container.isNotebookEnabled() && userContext.apiType === "Mongo" && isPublicInternetAccessAllowed()) {
+    if (
+      useNotebook.getState().isNotebookEnabled &&
+      userContext.apiType === "Mongo" &&
+      isPublicInternetAccessAllowed()
+    ) {
       children.push({
         label: "Schema (Preview)",
         onClick: collection.onSchemaAnalyzerClick.bind(collection),

src/Explorer/Tree/ResourceTreeAdapterForResourceToken.test.tsx

@@ -1,37 +1,27 @@
 import { shallow } from "enzyme";
-import * as ko from "knockout";
 import React from "react";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { TreeComponent, TreeComponentProps, TreeNode } from "../Controls/TreeComponent/TreeComponent";
 import Explorer from "../Explorer";
+import { useDatabases } from "../useDatabases";
 import ResourceTokenCollection from "./ResourceTokenCollection";
 import { ResourceTreeAdapterForResourceToken } from "./ResourceTreeAdapterForResourceToken";
 
-const createMockContainer = (): Explorer => {
+describe("Resource tree for resource token", () => {
-  let mockContainer = {} as Explorer;
+  const mockContainer = {} as Explorer;
-  mockContainer.resourceTokenCollection = createMockCollection(mockContainer);
+  const resourceTree = new ResourceTreeAdapterForResourceToken(mockContainer);
-
+  const mockCollection = {
-  return mockContainer;
+    _rid: "fakeRid",
-};
+    _self: "fakeSelf",
-
+    id: "fakeId",
-const createMockCollection = (container: Explorer): ko.Observable<ViewModels.CollectionBase> => {
+  } as DataModels.Collection;
-  let mockCollection = {} as DataModels.Collection;
-  mockCollection._rid = "fakeRid";
-  mockCollection._self = "fakeSelf";
-  mockCollection.id = "fakeId";
-
   const mockResourceTokenCollection: ViewModels.CollectionBase = new ResourceTokenCollection(
-    container,
+    mockContainer,
     "fakeDatabaseId",
     mockCollection
   );
-  return ko.observable<ViewModels.CollectionBase>(mockResourceTokenCollection);
+  useDatabases.setState({ resourceTokenCollection: mockResourceTokenCollection });
-};
-
-describe("Resource tree for resource token", () => {
-  const mockContainer: Explorer = createMockContainer();
-  const resourceTree = new ResourceTreeAdapterForResourceToken(mockContainer);
 
   it("should render", () => {
     const rootNode: TreeNode = resourceTree.buildCollectionNode();

src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx

@@ -9,6 +9,7 @@ import Explorer from "../Explorer";
 import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
 import { NotebookContentItem } from "../Notebook/NotebookContentItem";
+import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
 
 export class ResourceTreeAdapterForResourceToken implements ReactAdapter {
@@ -18,7 +19,10 @@ export class ResourceTreeAdapterForResourceToken implements ReactAdapter {
   public constructor(private container: Explorer) {
     this.parameters = ko.observable(Date.now());
 
-    this.container.resourceTokenCollection.subscribe(() => this.triggerRender());
+    useDatabases.subscribe(
+      () => this.triggerRender(),
+      (state) => state.resourceTokenCollection
+    );
     useSelectedNode.subscribe(() => this.triggerRender());
     this.container.tabsManager && this.container.tabsManager.activeTab.subscribe(() => this.triggerRender());
 
@@ -31,7 +35,7 @@ export class ResourceTreeAdapterForResourceToken implements ReactAdapter {
   }
 
   public buildCollectionNode(): TreeNode {
-    const collection: ViewModels.CollectionBase = this.container.resourceTokenCollection();
+    const collection: ViewModels.CollectionBase = useDatabases.getState().resourceTokenCollection;
     if (!collection) {
       return {
         label: undefined,

src/Explorer/useDatabases.ts

@@ -5,6 +5,7 @@ import * as ViewModels from "../Contracts/ViewModels";
 
 interface DatabasesState {
   databases: ViewModels.Database[];
+  resourceTokenCollection: ViewModels.CollectionBase;
   updateDatabase: (database: ViewModels.Database) => void;
   addDatabases: (databases: ViewModels.Database[]) => void;
   deleteDatabase: (database: ViewModels.Database) => void;
@@ -20,6 +21,7 @@ interface DatabasesState {
 
 export const useDatabases: UseStore<DatabasesState> = create((set, get) => ({
   databases: [],
+  resourceTokenCollection: undefined,
   updateDatabase: (updatedDatabase: ViewModels.Database) =>
     set((state) => {
       const updatedDatabases = state.databases.map((database: ViewModels.Database) => {

src/hooks/useKnockoutExplorer.ts

@@ -195,7 +195,6 @@ function configureEmulator(explorerParams: ExplorerParams): Explorer {
     authType: AuthType.MasterKey,
   });
   const explorer = new Explorer(explorerParams);
-  explorer.isAccountReady(true);
   return explorer;
 }
 

tsconfig.strict.json

@@ -54,7 +54,6 @@
     "./src/Explorer/Notebook/NotebookComponent/loadTransform.ts",
     "./src/Explorer/Notebook/NotebookComponent/reducers.ts",
     "./src/Explorer/Notebook/NotebookComponent/types.ts",
-    "./src/Explorer/Notebook/NotebookContentClient.ts",
     "./src/Explorer/Notebook/NotebookContentItem.ts",
     "./src/Explorer/Notebook/NotebookRenderer/AzureTheme.tsx",
     "./src/Explorer/Notebook/NotebookRenderer/Prompt.tsx",