Add min-height the panel main content

Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>

.eslintignore

@@ -154,7 +154,6 @@ src/Explorer/Tree/AccessibleVerticalList.ts
 src/Explorer/Tree/Collection.test.ts
 src/Explorer/Tree/Collection.ts
 src/Explorer/Tree/ConflictId.ts
-src/Explorer/Tree/Database.ts
 src/Explorer/Tree/DocumentId.ts
 src/Explorer/Tree/ObjectId.ts
 src/Explorer/Tree/ResourceTokenCollection.ts

src/Contracts/ViewModels.ts

@@ -3,7 +3,7 @@ import {
   Resource,
   StoredProcedureDefinition,
   TriggerDefinition,
-  UserDefinedFunctionDefinition
+  UserDefinedFunctionDefinition,
 } from "@azure/cosmos";
 import Explorer from "../Explorer/Explorer";
 import { ConsoleData } from "../Explorer/Menus/NotificationConsole/ConsoleData";
@@ -370,7 +370,6 @@ export enum TerminalKind {
   Default = 0,
   Mongo = 1,
   Cassandra = 2,
-  PostgreSQL = 3
 }
 
 export interface DataExplorerInputsFrame {

src/Explorer/Explorer.tsx

@@ -6,7 +6,6 @@ import _ from "underscore";
 import { AuthType } from "../AuthType";
 import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
 import * as Constants from "../Common/Constants";
-import { HttpHeaders } from "../Common/Constants";
 import { readCollection } from "../Common/dataAccess/readCollection";
 import { readDatabases } from "../Common/dataAccess/readDatabases";
 import { isPublicInternetAccessAllowed } from "../Common/DatabaseAccountUtility";
@@ -25,6 +24,12 @@ import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../UserContext";
 import { getCollectionName, getDatabaseName, getUploadName } from "../Utils/APITypeUtils";
 import { update } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
+import {
+  get as getWorkspace,
+  listByDatabaseAccount,
+  listConnectionInfo,
+  start,
+} from "../Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces";
 import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
 import { stringToBlob } from "../Utils/BlobUtils";
 import { isCapabilityEnabled } from "../Utils/CapabilityUtils";
@@ -64,8 +69,6 @@ import StoredProcedure from "./Tree/StoredProcedure";
 import { useDatabases } from "./useDatabases";
 import { useSelectedNode } from "./useSelectedNode";
 
-
-
 BindingHandlersRegisterer.registerBindingHandlers();
 // Hold a reference to ComponentRegisterer to prevent transpiler to ignore import
 var tmp = ComponentRegisterer;
@@ -132,8 +135,8 @@ export default class Explorer {
         await this._refreshNotebooksEnabledStateForAccount();
         this.isNotebookEnabled(
           userContext.authType !== AuthType.ResourceToken &&
-          ((await this._containsDefaultNotebookWorkspace(userContext.databaseAccount)) ||
-            userContext.features.enableNotebooks)
+            ((await this._containsDefaultNotebookWorkspace(userContext.databaseAccount)) ||
+              userContext.features.enableNotebooks)
         );
 
         this.isShellEnabled(this.isNotebookEnabled() && isPublicInternetAccessAllowed());
@@ -455,35 +458,16 @@ export default class Explorer {
     this._isInitializingNotebooks = true;
 
     await this.ensureNotebookWorkspaceRunning();
-    /*
     const connectionInfo = await listConnectionInfo(
       userContext.subscriptionId,
       userContext.resourceGroup,
       databaseAccount.name,
       "default"
     );
-    */
-
-    const provisionData = {
-      cosmosEndpoint: userContext.databaseAccount.properties.documentEndpoint,
-      resourceId: userContext.databaseAccount.id,
-      dbAccountName: userContext.databaseAccount.name,
-      aadToken: userContext.authorizationToken,
-      resourceGroup: userContext.resourceGroup,
-      subscriptionId: userContext.subscriptionId
-    }
-    const response = await window.fetch("http://localhost:443/api/containerpooling/provision", {
-      method: "POST",
-      headers: {
-        [HttpHeaders.contentType]: "application/json",
-      },
-      body: JSON.stringify(provisionData)
-    })
-    var notebookServerInfo = await response.json();
 
     this.notebookServerInfo({
-      notebookServerEndpoint: userContext.features.notebookServerUrl || notebookServerInfo.notebookServerUrl,
-      authToken: userContext.features.notebookServerToken || notebookServerInfo.notebookServerToken,
+      notebookServerEndpoint: userContext.features.notebookServerUrl || connectionInfo.notebookServerEndpoint,
+      authToken: userContext.features.notebookServerToken || connectionInfo.authToken,
     });
     this.notebookServerInfo.valueHasMutated();
     this.refreshNotebookList();
@@ -517,7 +501,6 @@ export default class Explorer {
       return false;
     }
 
-    /*
     try {
       const { value: workspaces } = await listByDatabaseAccount(
         userContext.subscriptionId,
@@ -529,8 +512,6 @@ export default class Explorer {
       Logger.logError(getErrorMessage(error), "Explorer/_containsDefaultNotebookWorkspace");
       return false;
     }
-    */
-    return true
   }
 
   private async ensureNotebookWorkspaceRunning() {
@@ -538,7 +519,6 @@ export default class Explorer {
       return;
     }
 
-    /*
     let clearMessage;
     try {
       const notebookWorkspace = await getWorkspace(
@@ -561,7 +541,6 @@ export default class Explorer {
     } finally {
       clearMessage && clearMessage();
     }
-    */
   }
 
   private _resetNotebookWorkspace = async () => {
@@ -1152,10 +1131,6 @@ export default class Explorer {
         title = "Cassandra Shell";
         break;
 
-      case ViewModels.TerminalKind.PostgreSQL:
-        title = "PostgreSQL Shell";
-        break;
-
       default:
         throw new Error("Terminal kind: ${kind} not supported");
     }
@@ -1225,7 +1200,7 @@ export default class Explorer {
     }
   }
 
-  public onNewCollectionClicked(databaseId?: string): void {
+  public async onNewCollectionClicked(databaseId?: string): Promise<void> {
     if (userContext.apiType === "Cassandra") {
       useSidePanel
         .getState()
@@ -1234,7 +1209,10 @@ export default class Explorer {
           <CassandraAddCollectionPane explorer={this} cassandraApiClient={new CassandraAPIDataClient()} />
         );
     } else {
-      this.openAddCollectionPanel(databaseId);
+      await useDatabases.getState().loadDatabaseOffers();
+      useSidePanel
+        .getState()
+        .openSidePanel("New " + getCollectionName(), <AddCollectionPanel explorer={this} databaseId={databaseId} />);
     }
   }
 
@@ -1287,12 +1265,6 @@ export default class Explorer {
       .openSidePanel("Input parameters", <ExecuteSprocParamsPane storedProcedure={storedProcedure} />);
   }
 
-  public async openAddCollectionPanel(databaseId?: string): Promise<void> {
-    await useDatabases.getState().loadDatabaseOffers();
-    useSidePanel
-      .getState()
-      .openSidePanel("New " + getCollectionName(), <AddCollectionPanel explorer={this} databaseId={databaseId} />);
-  }
   public openAddDatabasePane(): void {
     useSidePanel.getState().openSidePanel("New " + getDatabaseName(), <AddDatabasePanel explorer={this} />);
   }

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -74,17 +74,18 @@ export function createStaticCommandBarButtons(
     buttons.push(createOpenTerminalButton(container));
 
     buttons.push(createNotebookWorkspaceResetButton(container));
-
-    buttons.push(createDivider());
-    buttons.push(createOpenPostgreSQLTerminalButton(container));
-
-    if (userContext.apiType === "Mongo" &&
+    if (
+      (userContext.apiType === "Mongo" &&
         container.isShellEnabled() &&
-        selectedNodeState.isDatabaseNodeOrNoneSelected()){
+        selectedNodeState.isDatabaseNodeOrNoneSelected()) ||
+      userContext.apiType === "Cassandra"
+    ) {
+      buttons.push(createDivider());
+      if (userContext.apiType === "Cassandra") {
+        buttons.push(createOpenCassandraTerminalButton(container));
+      } else {
         buttons.push(createOpenMongoTerminalButton(container));
-    }
-    if (userContext.apiType === "Cassandra") {
-      buttons.push(createOpenCassandraTerminalButton(container));
+      }
     }
   } else {
     if (!isRunningOnNationalCloud()) {
@@ -467,19 +468,6 @@ function createOpenTerminalButton(container: Explorer): CommandButtonComponentPr
   };
 }
 
-function createOpenPostgreSQLTerminalButton(container: Explorer): CommandButtonComponentProps {
-  const label = "Open PostgreSQL Shell";
-  return {
-    iconSrc: HostedTerminalIcon,
-    iconAlt: label,
-    onCommandClick: () => container.openNotebookTerminal(ViewModels.TerminalKind.PostgreSQL),
-    commandButtonLabel: label,
-    hasPopup: false,
-    disabled: false,
-    ariaLabel: label,
-  };
-}
-
 function createOpenMongoTerminalButton(container: Explorer): CommandButtonComponentProps {
   const label = "Open Mongo Shell";
   const tooltip =

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -9,7 +9,7 @@ import {
   KernelRef,
   RemoteKernelProps,
   selectors,
-  ServerConfig as JupyterServerConfig
+  ServerConfig as JupyterServerConfig,
 } from "@nteract/core";
 import { Channels, childOf, createMessage, JupyterMessage, message, ofMessageType } from "@nteract/messaging";
 import { RecordOf } from "immutable";
@@ -29,7 +29,7 @@ import {
   switchMap,
   take,
   tap,
-  timeout
+  timeout,
 } from "rxjs/operators";
 import { webSocket } from "rxjs/webSocket";
 import * as Constants from "../../../Common/Constants";
@@ -107,7 +107,7 @@ const formWebSocketURL = (serverConfig: NotebookServiceConfig, kernelId: string,
   const q = params.toString();
   const suffix = q !== "" ? `?${q}` : "";
 
-  const url = (serverConfig.endpoint.slice(0, -1) || "") + `api/kernels/${kernelId}/channels${suffix}`;
+  const url = (serverConfig.endpoint || "") + `api/kernels/${kernelId}/channels${suffix}`;
 
   return url.replace(/^http(s)?/, "ws$1");
 };

src/Explorer/Notebook/NotebookContainerClient.ts

@@ -6,6 +6,7 @@ import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
 import * as Logger from "../../Common/Logger";
 import * as DataModels from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
+import { createOrUpdate, destroy } from "../../Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 
 export class NotebookContainerClient {
@@ -53,7 +54,7 @@ export class NotebookContainerClient {
 
     const { notebookServerEndpoint, authToken } = this.getNotebookServerConfig();
     try {
-      const response = await fetch(`${notebookServerEndpoint}api/metrics/memory`, {
+      const response = await fetch(`${notebookServerEndpoint}/api/metrics/memory`, {
         method: "GET",
         headers: {
           Authorization: authToken,
@@ -134,7 +135,6 @@ export class NotebookContainerClient {
     if (!databaseAccount?.id) {
       throw new Error("DataExplorer not initialized");
     }
-    /*
     try {
       await destroy(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name, "default");
       await createOrUpdate(
@@ -147,6 +147,5 @@ export class NotebookContainerClient {
       Logger.logError(getErrorMessage(error), "NotebookContainerClient/recreateNotebookWorkspaceAsync");
       return Promise.reject(error);
     }
-    */
   }
 }

src/Explorer/Notebook/NotebookContentClient.ts

@@ -12,7 +12,7 @@ export class NotebookContentClient {
     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
@@ -25,9 +25,6 @@ export class NotebookContentClient {
     });
   }
 
-  private sleep = (milliseconds: number) => {
-    return new Promise(resolve => setTimeout(resolve, milliseconds))
-  }
   /**
    *
    * @param parent parent folder
@@ -38,7 +35,6 @@ export class NotebookContentClient {
     }
 
     const type = "notebook";
-
     return this.contentProvider
       .create<"notebook">(this.getServerConfig(), parent.path, { type })
       .toPromise()

src/Explorer/Panes/PanelComponent.less

@@ -10,6 +10,7 @@
     padding: 0 34px;
     margin: 20px 0;
     overflow: auto;
+    min-height: 30px;
 
     & > :not(.collapsibleSection) {
       margin-bottom: @DefaultSpace;

src/Explorer/Tabs/NotebookV2Tab.ts

@@ -14,6 +14,7 @@ import SaveIcon from "../../../images/save-cosmos.svg";
 import { useNotebookSnapshotStore } from "../../hooks/useNotebookSnapshotStore";
 import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as NotebookConfigurationUtils from "../../Utils/NotebookConfigurationUtils";
 import { logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import * as CommandBarComponentButtonFactory from "../Menus/CommandBar/CommandBarComponentButtonFactory";
@@ -360,14 +361,12 @@ export default class NotebookTabV2 extends NotebookTabBase {
   private async configureServiceEndpoints(kernelName: string) {
     const notebookConnectionInfo = this.container && this.container.notebookServerInfo();
     const sparkClusterConnectionInfo = this.container && this.container.sparkClusterConnectionInfo();
-    /*
     await NotebookConfigurationUtils.configureServiceEndpoints(
       this.notebookPath(),
       notebookConnectionInfo,
       kernelName,
       sparkClusterConnectionInfo
     );
-    */
   }
 
   private publishToGallery = async () => {

src/Explorer/Tabs/TerminalTab.tsx

@@ -91,10 +91,6 @@ export default class TerminalTab extends TabsBase {
         endpointSuffix = "cassandra";
         break;
 
-      case ViewModels.TerminalKind.PostgreSQL:
-          endpointSuffix = "postgreSQL";
-          break;
-  
       default:
         throw new Error(`Terminal kind: ${options.kind} not supported`);
     }

src/Explorer/Tree/Database.test.tsx

@@ -31,9 +31,9 @@ updateUserContext({
 
 describe("Add Schema", () => {
   it("should not call requestSchema or getSchema if analyticalStorageTtl is undefined", () => {
-    const collection: DataModels.Collection = {} as DataModels.Collection;
+    const collection: DataModels.Collection = { id: "fakeId" } as DataModels.Collection;
     collection.analyticalStorageTtl = undefined;
-    const database = new Database(createMockContainer(), { id: "fakeId" });
+    const database = new Database(createMockContainer(), collection);
     database.container = createMockContainer();
     database.container.isSchemaEnabled = ko.computed<boolean>(() => false);
 
@@ -47,10 +47,10 @@ describe("Add Schema", () => {
   });
 
   it("should call requestSchema or getSchema if analyticalStorageTtl is not undefined", () => {
-    const collection: DataModels.Collection = { id: "fakeId" } as DataModels.Collection;
+    const collection: DataModels.Collection = {} as DataModels.Collection;
     collection.analyticalStorageTtl = 0;
 
-    const database = new Database(createMockContainer(), {});
+    const database = new Database(createMockContainer(), collection);
     database.container = createMockContainer();
     database.container.isSchemaEnabled = ko.computed<boolean>(() => true);
 

src/Explorer/Tree/Database.tsx

@@ -1,4 +1,5 @@
 import * as ko from "knockout";
+import React from "react";
 import * as _ from "underscore";
 import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
@@ -9,18 +10,20 @@ import * as Logger from "../../Common/Logger";
 import { fetchPortalNotifications } from "../../Common/PortalNotifications";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
+import { useSidePanel } from "../../hooks/useSidePanel";
 import { IJunoResponse, JunoClient } from "../../Juno/JunoClient";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
+import { getCollectionName } from "../../Utils/APITypeUtils";
 import { isServerlessAccount } from "../../Utils/CapabilityUtils";
 import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
+import { AddCollectionPanel } from "../Panes/AddCollectionPanel";
 import { DatabaseSettingsTabV2 } from "../Tabs/SettingsTabV2";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
 import Collection from "./Collection";
-
 export default class Database implements ViewModels.Database {
   public nodeKind: string;
   public container: Explorer;
@@ -35,7 +38,7 @@ export default class Database implements ViewModels.Database {
   public junoClient: JunoClient;
   private isOfferRead: boolean;
 
-  constructor(container: Explorer, data: any) {
+  constructor(container: Explorer, data: DataModels.Database) {
     this.nodeKind = "Database";
     this.container = container;
     this.self = data._self;
@@ -74,6 +77,7 @@ export default class Database implements ViewModels.Database {
         tabTitle: "Scale",
       });
       pendingNotificationsPromise.then(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (data: any) => {
           const pendingNotification: DataModels.Notification = data?.[0];
           const tabOptions: ViewModels.TabOptions = {
@@ -89,7 +93,7 @@ export default class Database implements ViewModels.Database {
           settingsTab.pendingNotification(pendingNotification);
           this.container.tabsManager.activateNewTab(settingsTab);
         },
-        (error: any) => {
+        (error) => {
           const errorMessage = getErrorMessage(error);
           TelemetryProcessor.traceFailure(
             Action.Tab,
@@ -114,7 +118,7 @@ export default class Database implements ViewModels.Database {
           settingsTab.pendingNotification(pendingNotification);
           this.container.tabsManager.activateTab(settingsTab);
         },
-        (error: any) => {
+        () => {
           settingsTab.pendingNotification(undefined);
           this.container.tabsManager.activateTab(settingsTab);
         }
@@ -190,8 +194,14 @@ export default class Database implements ViewModels.Database {
     this.deleteCollectionsFromList(deltaCollections.toDelete);
   }
 
-  public openAddCollection(database: Database) {
-    database.container.openAddCollectionPanel(database.id());
+  public async openAddCollection(database: Database): Promise<void> {
+    await useDatabases.getState().loadDatabaseOffers();
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "New " + getCollectionName(),
+        <AddCollectionPanel explorer={database.container} databaseId={database.id()} />
+      );
   }
 
   public findCollectionWithId(collectionId: string): ViewModels.Collection {
@@ -221,7 +231,7 @@ export default class Database implements ViewModels.Database {
       }
 
       return _.find(notifications, (notification: DataModels.Notification) => {
-        const throughputUpdateRegExp: RegExp = new RegExp("Throughput update (.*) in progress");
+        const throughputUpdateRegExp = new RegExp("Throughput update (.*) in progress");
         return (
           notification.kind === "message" &&
           !notification.collectionName &&
@@ -259,7 +269,7 @@ export default class Database implements ViewModels.Database {
       }
     );
 
-    let collectionsToDelete: Collection[] = [];
+    const collectionsToDelete: Collection[] = [];
     ko.utils.arrayForEach(this.collections(), (collection: Collection) => {
       const collectionPresentInUpdatedList = _.some(
         updatedCollectionsList,
@@ -299,7 +309,7 @@ export default class Database implements ViewModels.Database {
   }
 
   public addSchema(collection: DataModels.Collection, interval?: number): NodeJS.Timeout {
-    let checkForSchema: NodeJS.Timeout = null;
+    let checkForSchema: NodeJS.Timeout;
     interval = interval || 5000;
 
     if (collection.analyticalStorageTtl !== undefined && this.container.isSchemaEnabled()) {
@@ -325,7 +335,7 @@ export default class Database implements ViewModels.Database {
             clearInterval(checkForSchema);
           }
 
-          if (response.data !== null) {
+          if (response.data !== undefined) {
             clearInterval(checkForSchema);
             collection.schema = response.data;
           }