Merge branch 'master' of https://github.com/Azure/cosmos-explorer into eslit/fixed-lint-notebook-utils

* fixed lint issue of DateTimeUtility

* remove commented code

* Do change request.

.eslintignore

@@ -11,13 +11,9 @@ src/Common/CosmosClient.test.ts
 src/Common/CosmosClient.ts
 src/Common/DataAccessUtilityBase.test.ts
 src/Common/DataAccessUtilityBase.ts
-src/Common/DeleteFeedback.ts
-src/Common/DocumentClientUtilityBase.ts
 src/Common/EditableUtility.ts
 src/Common/HashMap.test.ts
 src/Common/HashMap.ts
-src/Common/HeadersUtility.test.ts
-src/Common/HeadersUtility.ts
 src/Common/IteratorUtilities.test.ts
 src/Common/IteratorUtilities.ts
 src/Common/Logger.test.ts
@@ -30,7 +26,6 @@ src/Common/ObjectCache.test.ts
 src/Common/ObjectCache.ts
 src/Common/QueriesClient.ts
 src/Common/Splitter.ts
-src/Common/ThemeUtility.ts
 src/Common/UrlUtility.ts
 src/Config.ts
 src/Contracts/ActionContracts.ts
@@ -58,8 +53,6 @@ src/Explorer/ComponentRegisterer.test.ts
 src/Explorer/ComponentRegisterer.ts
 src/Explorer/ContextMenuButtonFactory.ts
 src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts
-src/Explorer/Controls/CommandButton/CommandButton.test.ts
-src/Explorer/Controls/CommandButton/CommandButton.ts
 src/Explorer/Controls/DiffEditor/DiffEditorComponent.ts
 src/Explorer/Controls/DynamicList/DynamicList.test.ts
 src/Explorer/Controls/DynamicList/DynamicListComponent.ts
@@ -95,8 +88,6 @@ src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts
 src/Explorer/Graph/GraphExplorerComponent/EdgeInfoCache.ts
 src/Explorer/Graph/GraphExplorerComponent/GraphData.test.ts
 src/Explorer/Graph/GraphExplorerComponent/GraphData.ts
-src/Explorer/Graph/GraphExplorerComponent/GraphUtil.test.ts
-src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinClient.test.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinClient.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.test.ts
@@ -124,7 +115,6 @@ src/Explorer/Notebook/NotebookComponent/types.ts
 src/Explorer/Notebook/NotebookContainerClient.ts
 src/Explorer/Notebook/NotebookContentClient.ts
 src/Explorer/Notebook/NotebookContentItem.ts
-src/Explorer/Notebook/NotebookUtil.ts
 src/Explorer/OpenActions.test.ts
 src/Explorer/OpenActions.ts
 src/Explorer/OpenActionsStubs.ts
@@ -170,7 +160,6 @@ src/Explorer/Tables/DataTable/DataTableBuilder.ts
 src/Explorer/Tables/DataTable/DataTableContextMenu.ts
 src/Explorer/Tables/DataTable/DataTableOperationManager.ts
 src/Explorer/Tables/DataTable/DataTableOperations.ts
-src/Explorer/Tables/DataTable/DataTableUtilities.ts
 src/Explorer/Tables/DataTable/DataTableViewModel.ts
 src/Explorer/Tables/DataTable/TableCommands.ts
 src/Explorer/Tables/DataTable/TableEntityCache.ts
@@ -179,8 +168,6 @@ src/Explorer/Tables/Entities.ts
 src/Explorer/Tables/QueryBuilder/ClauseGroup.ts
 src/Explorer/Tables/QueryBuilder/ClauseGroupViewModel.ts
 src/Explorer/Tables/QueryBuilder/CustomTimestampHelper.ts
-src/Explorer/Tables/QueryBuilder/DateTimeUtilities.test.ts
-src/Explorer/Tables/QueryBuilder/DateTimeUtilities.ts
 src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
 src/Explorer/Tables/QueryBuilder/QueryClauseViewModel.ts
 src/Explorer/Tables/QueryBuilder/QueryViewModel.ts
@@ -273,25 +260,15 @@ src/Terminal/NotebookAppContracts.d.ts
 src/Terminal/index.ts
 src/TokenProviders/PortalTokenProvider.ts
 src/TokenProviders/TokenProviderFactory.ts
-src/Utils/AuthorizationUtils.test.ts
-src/Utils/AuthorizationUtils.ts
-src/Utils/AutoPilotUtils.test.ts
-src/Utils/AutoPilotUtils.ts
 src/Utils/DatabaseAccountUtils.test.ts
 src/Utils/DatabaseAccountUtils.ts
-src/Utils/JunoUtils.ts
-src/Utils/MessageValidation.ts
 src/Utils/NotebookConfigurationUtils.ts
 src/Utils/PricingUtils.test.ts
 src/Utils/QueryUtils.test.ts
 src/Utils/QueryUtils.ts
-src/Utils/StringUtils.test.ts
-src/Utils/StringUtils.ts
 src/applyExplorerBindings.ts
 src/global.d.ts
-src/quickstart.ts
 src/setupTests.ts
-src/workers/upload/definitions.ts
 src/workers/upload/index.ts
 src/Explorer/Controls/AccessibleElement/AccessibleElement.tsx
 src/Explorer/Controls/Accordion/AccordionComponent.tsx

.github/workflows/ci.yml

@@ -143,48 +143,71 @@ jobs:
         env:
           NODE_TLS_REJECT_UNAUTHORIZED: 0
   endtoendhosted:
-    name: "End to End Hosted Tests"
-    needs: [lint, format, compile, unittest]
+    name: "End to End Tests"
+    needs: [cleanupaccounts]
     runs-on: ubuntu-latest
+    env:
+      NODE_TLS_REJECT_UNAUTHORIZED: 0
+      PORTAL_RUNNER_SUBSCRIPTION: ${{ secrets.PORTAL_RUNNER_SUBSCRIPTION }}
+      PORTAL_RUNNER_RESOURCE_GROUP: ${{ secrets.PORTAL_RUNNER_RESOURCE_GROUP }}
+      PORTAL_RUNNER_DATABASE_ACCOUNT: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT }}
+      PORTAL_RUNNER_DATABASE_ACCOUNT_KEY: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT_KEY }}
+      PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT: ${{ secrets.PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT }}
+      PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY: ${{ secrets.PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY }}
+      NOTEBOOKS_TEST_RUNNER_TENANT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_TENANT_ID }}
+      NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
+      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
+      PORTAL_RUNNER_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
+      MONGO_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
+      CASSANDRA_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_CASSANDRA }}
+      TABLES_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_TABLE }}
+      DATA_EXPLORER_ENDPOINT: "https://localhost:1234/hostedExplorer.html"
+    strategy:
+      matrix:
+        test-file:
+          - ./test/cassandra/container.spec.ts
+          - ./test/mongo/mongoIndexPolicy.spec.ts
+          - ./test/notebooks/uploadAndOpenNotebook.spec.ts
+          - ./test/selfServe/selfServeExample.spec.ts
+          - ./test/sql/container.spec.ts
+          - ./test/sql/resourceToken.spec.ts
+          - ./test/tables/container.spec.ts
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
-      - name: End to End Hosted Tests
-        run: |
-          npm ci
-          npm start &
-          node utils/cleanupDBs.js
-          npm run wait-for-server
-          npm run test:e2e
+          node-version: 14.x
+      - run: npm ci
+      - run: npm start &
+      - run: node utils/cleanupDBs.js
+      - run: npm run wait-for-server
+      - name: ${{ matrix['test-file'] }}
+        run: npx jest -c ./jest.config.e2e.js --detectOpenHandles ${{ matrix['test-file'] }}
         shell: bash
-        env:
-          NODE_TLS_REJECT_UNAUTHORIZED: 0
-          PORTAL_RUNNER_SUBSCRIPTION: ${{ secrets.PORTAL_RUNNER_SUBSCRIPTION }}
-          PORTAL_RUNNER_RESOURCE_GROUP: ${{ secrets.PORTAL_RUNNER_RESOURCE_GROUP }}
-          PORTAL_RUNNER_DATABASE_ACCOUNT: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT }}
-          PORTAL_RUNNER_DATABASE_ACCOUNT_KEY: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT_KEY }}
-          PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT: ${{ secrets.PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT }}
-          PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY: ${{ secrets.PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY }}
-          NOTEBOOKS_TEST_RUNNER_TENANT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_TENANT_ID }}
-          NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
-          NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
-          PORTAL_RUNNER_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
-          MONGO_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
-          CASSANDRA_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_CASSANDRA }}
-          TABLES_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_TABLE }}
-          DATA_EXPLORER_ENDPOINT: "https://localhost:1234/hostedExplorer.html"
       - uses: actions/upload-artifact@v2
         if: failure()
         with:
           name: screenshots
           path: failed-*
+  cleanupaccounts:
+    name: "Cleanup Test Database Accounts"
+    runs-on: ubuntu-latest
+    env:
+      NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
+      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+      - run: npm ci
+      - run: node utils/cleanupDBs.js
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
+    needs: [build]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -200,7 +223,7 @@ jobs:
       - run: cp ./configs/prod.json config.json
       - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "GitHub" -Password "$AZURE_DEVOPS_PAT"
       - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
-      - run: nuget push -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
+      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
       - uses: actions/upload-artifact@v2
         name: packages
         with:
@@ -208,7 +231,7 @@ jobs:
   nugetmpac:
     name: Publish Nuget MPAC
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
+    needs: [build]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -225,7 +248,7 @@ jobs:
       - run: sed -i 's/Azure.Cosmos.DB.Data.Explorer/Azure.Cosmos.DB.Data.Explorer.MPAC/g' DataExplorer.nuspec
       - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "GitHub" -Password "$AZURE_DEVOPS_PAT"
       - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
-      - run: nuget push -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
+      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
       - uses: actions/upload-artifact@v2
         name: packages
         with:

package.json

@@ -8,6 +8,7 @@
     "@azure/cosmos": "3.9.0",
     "@azure/cosmos-language-service": "0.0.5",
     "@azure/identity": "1.2.1",
+    "@azure/ms-rest-nodeauth": "3.0.7",
     "@babel/plugin-proposal-class-properties": "7.12.1",
     "@babel/plugin-proposal-decorators": "7.12.12",
     "@jupyterlab/services": "6.0.2",
@@ -76,6 +77,7 @@
     "knockout": "3.5.1",
     "mkdirp": "1.0.4",
     "monaco-editor": "0.18.1",
+    "ms": "2.1.3",
     "msal": "1.4.4",
     "object.entries": "1.1.0",
     "office-ui-fabric-react": "7.134.1",

src/Common/HeadersUtility.ts

@@ -1,28 +1,5 @@
-import * as Constants from "./Constants";
-
 import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
 
-// x-ms-resource-quota: databases = 100; collections = 5000; users = 500000; permissions = 2000000;
-export function getQuota(responseHeaders: any): any {
-  return responseHeaders && responseHeaders[Constants.HttpHeaders.resourceQuota]
-    ? parseStringIntoObject(responseHeaders[Constants.HttpHeaders.resourceQuota])
-    : null;
-}
-
 export function shouldEnableCrossPartitionKey(): boolean {
   return LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true";
 }
-
-function parseStringIntoObject(resourceString: string) {
-  var entityObject: any = {};
-
-  if (resourceString) {
-    var entitiesArray: string[] = resourceString.split(";");
-    for (var i: any = 0; i < entitiesArray.length; i++) {
-      var entity: string[] = entitiesArray[i].split("=");
-      entityObject[entity[0]] = entity[1];
-    }
-  }
-
-  return entityObject;
-}

src/Common/ThemeUtility.ts

@@ -2,18 +2,16 @@
  * Copyright (C) Microsoft Corporation. All rights reserved.
  *----------------------------------------------------------*/
 
-export default class ThemeUtility {
-  public static getMonacoTheme(theme: string): string {
-    switch (theme) {
-      case "default":
-      case "hc-white":
-        return "vs";
-      case "dark":
-        return "vs-dark";
-      case "hc-black":
-        return "hc-black";
-      default:
-        return "vs";
-    }
+export function getMonacoTheme(theme: string): string {
+  switch (theme) {
+    case "default":
+    case "hc-white":
+      return "vs";
+    case "dark":
+      return "vs-dark";
+    case "hc-black":
+      return "hc-black";
+    default:
+      return "vs";
   }
 }

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -1,4 +1,4 @@
-import { StringUtils } from "../../../Utils/StringUtils";
+import * as StringUtils from "../../../Utils/StringUtils";
 import { KeyCodes } from "../../../Common/Constants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";

src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx

@@ -4,7 +4,7 @@
 
 import * as React from "react";
 import * as DataModels from "../../../Contracts/DataModels";
-import { StringUtils } from "../../../Utils/StringUtils";
+import * as StringUtils from "../../../Utils/StringUtils";
 import { userContext } from "../../../UserContext";
 import { TerminalQueryParams } from "../../../Common/Constants";
 import { handleError } from "../../../Common/ErrorHandlingUtils";

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -47,8 +47,8 @@ export interface GalleryViewerComponentProps {
 }
 
 export enum GalleryTab {
-  OfficialSamples,
   PublicGallery,
+  OfficialSamples,
   Favorites,
   Published,
 }
@@ -151,15 +151,14 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   public render(): JSX.Element {
     this.traceViewGallery();
 
-    const tabs: GalleryTabInfo[] = [this.createSamplesTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks)];
-
-    tabs.push(
+    const tabs: GalleryTabInfo[] = [
       this.createPublicGalleryTab(
         GalleryTab.PublicGallery,
         this.state.publicNotebooks,
         this.state.isCodeOfConductAccepted
-      )
-    );
+      ),
+      this.createSamplesTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks),
+    ];
 
     if (this.props.container) {
       tabs.push(this.createFavoritesTab(GalleryTab.Favorites, this.state.favoriteNotebooks));
@@ -201,13 +200,6 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     }
 
     switch (this.state.selectedTab) {
-      case GalleryTab.OfficialSamples:
-        if (!this.viewOfficialSamplesTraced) {
-          this.resetViewGalleryTabTracedFlags();
-          this.viewOfficialSamplesTraced = true;
-          trace(Action.NotebooksGalleryViewOfficialSamples);
-        }
-        break;
       case GalleryTab.PublicGallery:
         if (!this.viewPublicGalleryTraced) {
           this.resetViewGalleryTabTracedFlags();
@@ -215,6 +207,13 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
           trace(Action.NotebooksGalleryViewPublicGallery);
         }
         break;
+      case GalleryTab.OfficialSamples:
+        if (!this.viewOfficialSamplesTraced) {
+          this.resetViewGalleryTabTracedFlags();
+          this.viewOfficialSamplesTraced = true;
+          trace(Action.NotebooksGalleryViewOfficialSamples);
+        }
+        break;
       case GalleryTab.Favorites:
         if (!this.viewFavoritesTraced) {
           this.resetViewGalleryTabTracedFlags();
@@ -444,14 +443,14 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
 
   private loadTabContent(tab: GalleryTab, searchText: string, sortBy: SortBy, offline: boolean): void {
     switch (tab) {
-      case GalleryTab.OfficialSamples:
-        this.loadSampleNotebooks(searchText, sortBy, offline);
-        break;
-
       case GalleryTab.PublicGallery:
         this.loadPublicNotebooks(searchText, sortBy, offline);
         break;
 
+      case GalleryTab.OfficialSamples:
+        this.loadSampleNotebooks(searchText, sortBy, offline);
+        break;
+
       case GalleryTab.Favorites:
         this.loadFavoriteNotebooks(searchText, sortBy, offline);
         break;

src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap

@@ -8,90 +8,6 @@ exports[`GalleryViewerComponent renders 1`] = `
     onLinkClick={[Function]}
     selectedKey="OfficialSamples"
   >
-    <PivotItem
-      headerText="Official samples"
-      itemKey="OfficialSamples"
-      key="OfficialSamples"
-      style={
-        Object {
-          "marginTop": 20,
-        }
-      }
-    >
-      <Stack
-        tokens={
-          Object {
-            "childrenGap": 10,
-          }
-        }
-      >
-        <Stack
-          horizontal={true}
-          tokens={
-            Object {
-              "childrenGap": 20,
-              "padding": 10,
-            }
-          }
-        >
-          <StackItem
-            grow={true}
-          >
-            <StyledSearchBoxBase
-              onChange={[Function]}
-              placeholder="Search"
-            />
-          </StackItem>
-          <StackItem>
-            <StyledLabelBase>
-              Sort by
-            </StyledLabelBase>
-          </StackItem>
-          <StackItem
-            styles={
-              Object {
-                "root": Object {
-                  "minWidth": 200,
-                },
-              }
-            }
-          >
-            <StyledWithResponsiveMode
-              onChange={[Function]}
-              options={
-                Array [
-                  Object {
-                    "key": 0,
-                    "text": "Most viewed",
-                  },
-                  Object {
-                    "key": 1,
-                    "text": "Most downloaded",
-                  },
-                  Object {
-                    "key": 3,
-                    "text": "Most recent",
-                  },
-                  Object {
-                    "key": 2,
-                    "text": "Most favorited",
-                  },
-                ]
-              }
-              selectedKey={0}
-            />
-          </StackItem>
-          <StackItem>
-            <InfoComponent />
-          </StackItem>
-        </Stack>
-        <StackItem>
-          <StyledSpinnerBase
-            size={3}
-          />
-        </StackItem>
-      </Stack>
-    </PivotItem>
     <PivotItem
       headerText="Public gallery"
       itemKey="PublicGallery"
@@ -180,6 +96,90 @@ exports[`GalleryViewerComponent renders 1`] = `
         </Stack>
       </div>
     </PivotItem>
+    <PivotItem
+      headerText="Official samples"
+      itemKey="OfficialSamples"
+      key="OfficialSamples"
+      style={
+        Object {
+          "marginTop": 20,
+        }
+      }
+    >
+      <Stack
+        tokens={
+          Object {
+            "childrenGap": 10,
+          }
+        }
+      >
+        <Stack
+          horizontal={true}
+          tokens={
+            Object {
+              "childrenGap": 20,
+              "padding": 10,
+            }
+          }
+        >
+          <StackItem
+            grow={true}
+          >
+            <StyledSearchBoxBase
+              onChange={[Function]}
+              placeholder="Search"
+            />
+          </StackItem>
+          <StackItem>
+            <StyledLabelBase>
+              Sort by
+            </StyledLabelBase>
+          </StackItem>
+          <StackItem
+            styles={
+              Object {
+                "root": Object {
+                  "minWidth": 200,
+                },
+              }
+            }
+          >
+            <StyledWithResponsiveMode
+              onChange={[Function]}
+              options={
+                Array [
+                  Object {
+                    "key": 0,
+                    "text": "Most viewed",
+                  },
+                  Object {
+                    "key": 1,
+                    "text": "Most downloaded",
+                  },
+                  Object {
+                    "key": 3,
+                    "text": "Most recent",
+                  },
+                  Object {
+                    "key": 2,
+                    "text": "Most favorited",
+                  },
+                ]
+              }
+              selectedKey={0}
+            />
+          </StackItem>
+          <StackItem>
+            <InfoComponent />
+          </StackItem>
+        </Stack>
+        <StackItem>
+          <StyledSpinnerBase
+            size={3}
+          />
+        </StackItem>
+      </Stack>
+    </PivotItem>
   </StyledPivotBase>
 </div>
 `;

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -15,7 +15,6 @@ import { Dialog, DialogProps, TextFieldProps } from "../Dialog";
 import { NotebookMetadataComponent } from "./NotebookMetadataComponent";
 import "./NotebookViewerComponent.less";
 import Explorer from "../../Explorer";
-import { NotebookV4 } from "@nteract/commutable/lib/v4";
 import { SessionStorageUtility } from "../../../Shared/StorageUtility";
 import { DialogHost } from "../../../Utils/GalleryUtils";
 import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
@@ -103,7 +102,7 @@ export class NotebookViewerComponent
       );
 
       const notebook: Notebook = await response.json();
-      this.removeNotebookViewerLink(notebook, this.props.galleryItem?.newCellId);
+      GalleryUtils.removeNotebookViewerLink(notebook, this.props.galleryItem?.newCellId);
       this.notebookComponentBootstrapper.setContent("json", notebook);
       this.setState({ content: notebook, showProgressBar: false });
 
@@ -133,17 +132,6 @@ export class NotebookViewerComponent
     }
   }
 
-  private removeNotebookViewerLink = (notebook: Notebook, newCellId: string): void => {
-    if (!newCellId) {
-      return;
-    }
-    const notebookV4 = notebook as NotebookV4;
-    if (notebookV4 && notebookV4.cells[0].source[0].search(newCellId)) {
-      delete notebookV4.cells[0];
-      notebook = notebookV4;
-    }
-  };
-
   public render(): JSX.Element {
     return (
       <div className="notebookViewerContainer">

src/Explorer/Explorer.tsx

@@ -49,7 +49,7 @@ import { LoadQueryPane } from "./Panes/LoadQueryPane";
 import * as Logger from "../Common/Logger";
 import { sendMessage, sendCachedDataMessage } from "../Common/MessageHandler";
 import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
-import { NotebookUtil } from "./Notebook/NotebookUtil";
+import * as NotebookUtil from "./Notebook/NotebookUtil";
 import { NotebookWorkspaceManager } from "../NotebookWorkspaceManager/NotebookWorkspaceManager";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { QueriesClient } from "../Common/QueriesClient";
@@ -2327,7 +2327,7 @@ export default class Explorer {
       account: userContext.databaseAccount,
       container: this,
       junoClient: this.notebookManager?.junoClient,
-      selectedTab: selectedTab || GalleryTab.OfficialSamples,
+      selectedTab: selectedTab || GalleryTab.PublicGallery,
       notebookUrl,
       galleryItem,
       isFavorite,

src/Explorer/Graph/GraphExplorerComponent/EditorNeighborsComponent.tsx

@@ -5,7 +5,7 @@
 
 import * as React from "react";
 import { NeighborVertexBasicInfo, EditedEdges, GraphNewEdgeData, PossibleVertex } from "./GraphExplorer";
-import { GraphUtil } from "./GraphUtil";
+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";

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

@@ -9,7 +9,7 @@ import { GraphVizComponentProps } from "./GraphVizComponent";
 import * as GraphData from "./GraphData";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
-import { GraphUtil } from "./GraphUtil";
+import * as GraphUtil from "./GraphUtil";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import * as GremlinClient from "./GremlinClient";

src/Explorer/Graph/GraphExplorerComponent/GraphUtil.test.ts

@@ -1,4 +1,4 @@
-import { GraphUtil } from "./GraphUtil";
+import * as GraphUtil from "./GraphUtil";
 import { GraphData, GremlinVertex, GremlinEdge } from "./GraphData";
 import * as sinon from "sinon";
 import { GraphExplorer } from "./GraphExplorer";
@@ -69,7 +69,7 @@ describe("Process Gremlin vertex", () => {
 describe("getLimitedArrayString()", () => {
   const expectedEmptyResult = { result: "", consumedCount: 0 };
   it("should handle null array", () => {
-    expect(GraphUtil.getLimitedArrayString(null, 10)).toEqual(expectedEmptyResult);
+    expect(GraphUtil.getLimitedArrayString(undefined, 10)).toEqual(expectedEmptyResult);
   });
 
   it("should handle empty array", () => {

src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts

@@ -7,180 +7,184 @@ interface JoinArrayMaxCharOutput {
   consumedCount: number; // Number of items consumed
 }
 
-export class GraphUtil {
-  public static getNeighborTitle(neighbor: NeighborVertexBasicInfo): string {
-    return `edge id: ${neighbor.edgeId}, vertex id: ${neighbor.id}`;
-  }
+interface EdgePropertyType {
+  id: string;
+  outV?: string;
+  inV?: string;
+}
 
-  /**
-   * Collect all edges from this node
-   * @param vertex
-   * @param graphData
-   * @param newNodes (optional) object describing new nodes encountered
-   */
-  public static createEdgesfromNode(
-    vertex: GraphData.GremlinVertex,
-    graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>,
-    newNodes?: { [id: string]: boolean }
-  ): void {
-    if (vertex.hasOwnProperty("outE")) {
-      let outE = vertex.outE;
-      for (var label in outE) {
-        $.each(outE[label], (index: number, edge: any) => {
-          // We create our own edge. No need to fetch
-          let e = {
-            id: edge.id,
-            label: label,
-            inV: edge.inV,
-            outV: vertex.id,
-          };
+export function getNeighborTitle(neighbor: NeighborVertexBasicInfo): string {
+  return `edge id: ${neighbor.edgeId}, vertex id: ${neighbor.id}`;
+}
 
-          graphData.addEdge(e);
-          if (newNodes) {
-            newNodes[edge.inV] = true;
-          }
-        });
-      }
-    }
-    if (vertex.hasOwnProperty("inE")) {
-      let inE = vertex.inE;
-      for (var label in inE) {
-        $.each(inE[label], (index: number, edge: any) => {
-          // We create our own edge. No need to fetch
-          let e = {
-            id: edge.id,
-            label: label,
-            inV: vertex.id,
-            outV: edge.outV,
-          };
+/**
+ * Collect all edges from this node
+ * @param vertex
+ * @param graphData
+ * @param newNodes (optional) object describing new nodes encountered
+ */
+export function createEdgesfromNode(
+  vertex: GraphData.GremlinVertex,
+  graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>,
+  newNodes?: { [id: string]: boolean }
+): void {
+  if (Object.prototype.hasOwnProperty.call(vertex, "outE")) {
+    const outE = vertex.outE;
+    for (const label in outE) {
+      $.each(outE[label], (index: number, edge: EdgePropertyType) => {
+        // We create our own edge. No need to fetch
+        const e = {
+          id: edge.id,
+          label: label,
+          inV: edge.inV,
+          outV: vertex.id,
+        };
 
-          graphData.addEdge(e);
-          if (newNodes) {
-            newNodes[edge.outV] = true;
-          }
-        });
-      }
+        graphData.addEdge(e);
+        if (newNodes) {
+          newNodes[edge.inV] = true;
+        }
+      });
     }
   }
+  if (Object.prototype.hasOwnProperty.call(vertex, "inE")) {
+    const inE = vertex.inE;
+    for (const label in inE) {
+      $.each(inE[label], (index: number, edge: EdgePropertyType) => {
+        // We create our own edge. No need to fetch
+        const e = {
+          id: edge.id,
+          label: label,
+          inV: vertex.id,
+          outV: edge.outV,
+        };
 
-  /**
-   * From ['id1', 'id2', 'idn'] build the following string "'id1','id2','idn'".
-   * The string length cannot exceed maxSize.
-   *  @param array
-   * @param maxSize
-   * @return
-   */
-  public static getLimitedArrayString(array: string[], maxSize: number): JoinArrayMaxCharOutput {
-    if (!array || array.length === 0 || array[0].length + 2 > maxSize) {
-      return { result: "", consumedCount: 0 };
+        graphData.addEdge(e);
+        if (newNodes) {
+          newNodes[edge.outV] = true;
+        }
+      });
     }
-
-    const end = array.length - 1;
-    let output = `'${array[0]}'`;
-    let i = 0;
-    for (; i < end; i++) {
-      const candidate = `${output},'${array[i + 1]}'`;
-      if (candidate.length <= maxSize) {
-        output = candidate;
-      } else {
-        break;
-      }
-    }
-
-    return {
-      result: output,
-      consumedCount: i + 1,
-    };
-  }
-
-  public static createFetchEdgePairQuery(
-    outE: boolean,
-    pkid: string,
-    excludedEdgeIds: string[],
-    startIndex: number,
-    pageSize: number,
-    withoutStepArgMaxLenght: number
-  ): string {
-    let gremlinQuery: string;
-    if (excludedEdgeIds.length > 0) {
-      // build a string up to max char
-      const joined = GraphUtil.getLimitedArrayString(excludedEdgeIds, withoutStepArgMaxLenght);
-      const hasWithoutStep = !!joined.result ? `.has(id, without(${joined.result}))` : "";
-
-      if (joined.consumedCount === excludedEdgeIds.length) {
-        gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}()${hasWithoutStep}.limit(${pageSize}).as('e').${
-          outE ? "inV" : "outV"
-        }().as('v').select('e', 'v')`;
-      } else {
-        const start = startIndex - joined.consumedCount;
-        gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}()${hasWithoutStep}.range(${start},${
-          start + pageSize
-        }).as('e').${outE ? "inV" : "outV"}().as('v').select('e', 'v')`;
-      }
-    } else {
-      gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}().limit(${pageSize}).as('e').${
-        outE ? "inV" : "outV"
-      }().as('v').select('e', 'v')`;
-    }
-    return gremlinQuery;
-  }
-
-  /**
-   * Trim graph
-   */
-  public static trimGraph(
-    currentRoot: GraphData.GremlinVertex,
-    graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
-  ) {
-    const importantNodes = [currentRoot.id].concat(currentRoot._ancestorsId);
-    graphData.unloadAllVertices(importantNodes);
-
-    // Keep only ancestors node in fixed position
-    $.each(graphData.ids, (index: number, id: string) => {
-      graphData.getVertexById(id)._isFixedPosition = importantNodes.indexOf(id) !== -1;
-    });
-  }
-
-  public static addRootChildToGraph(
-    root: GraphData.GremlinVertex,
-    child: GraphData.GremlinVertex,
-    graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
-  ) {
-    child._ancestorsId = (root._ancestorsId || []).concat([root.id]);
-    graphData.addVertex(child);
-    GraphUtil.createEdgesfromNode(child, graphData);
-    graphData.addNeighborInfo(child);
-  }
-
-  /**
-   * TODO Perform minimal substitution to prevent breaking gremlin query and allow \"" for now.
-   * @param value
-   */
-  public static escapeDoubleQuotes(value: string): string {
-    return value == null ? value : value.replace(/"/g, '\\"');
-  }
-
-  /**
-   * Surround with double-quotes if val is a string.
-   * @param val
-   */
-  public static getQuotedPropValue(ip: ViewModels.InputPropertyValue): string {
-    switch (ip.type) {
-      case "number":
-      case "boolean":
-        return `${ip.value}`;
-      case "null":
-        return null;
-      default:
-        return `"${GraphUtil.escapeDoubleQuotes(ip.value as string)}"`;
-    }
-  }
-
-  /**
-   * TODO Perform minimal substitution to prevent breaking gremlin query and allow \' for now.
-   * @param value
-   */
-  public static escapeSingleQuotes(value: string): string {
-    return value == null ? value : value.replace(/'/g, "\\'");
   }
 }
+
+/**
+ * From ['id1', 'id2', 'idn'] build the following string "'id1','id2','idn'".
+ * The string length cannot exceed maxSize.
+ *  @param array
+ * @param maxSize
+ * @return
+ */
+export function getLimitedArrayString(array: string[], maxSize: number): JoinArrayMaxCharOutput {
+  if (!array || array.length === 0 || array[0].length + 2 > maxSize) {
+    return { result: "", consumedCount: 0 };
+  }
+
+  const end = array.length - 1;
+  let output = `'${array[0]}'`;
+  let i = 0;
+  for (; i < end; i++) {
+    const candidate = `${output},'${array[i + 1]}'`;
+    if (candidate.length <= maxSize) {
+      output = candidate;
+    } else {
+      break;
+    }
+  }
+
+  return {
+    result: output,
+    consumedCount: i + 1,
+  };
+}
+
+export function createFetchEdgePairQuery(
+  outE: boolean,
+  pkid: string,
+  excludedEdgeIds: string[],
+  startIndex: number,
+  pageSize: number,
+  withoutStepArgMaxLenght: number
+): string {
+  let gremlinQuery: string;
+  if (excludedEdgeIds.length > 0) {
+    // build a string up to max char
+    const joined = getLimitedArrayString(excludedEdgeIds, withoutStepArgMaxLenght);
+    const hasWithoutStep = joined.result ? `.has(id, without(${joined.result}))` : "";
+
+    if (joined.consumedCount === excludedEdgeIds.length) {
+      gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}()${hasWithoutStep}.limit(${pageSize}).as('e').${
+        outE ? "inV" : "outV"
+      }().as('v').select('e', 'v')`;
+    } else {
+      const start = startIndex - joined.consumedCount;
+      gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}()${hasWithoutStep}.range(${start},${
+        start + pageSize
+      }).as('e').${outE ? "inV" : "outV"}().as('v').select('e', 'v')`;
+    }
+  } else {
+    gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}().limit(${pageSize}).as('e').${
+      outE ? "inV" : "outV"
+    }().as('v').select('e', 'v')`;
+  }
+  return gremlinQuery;
+}
+
+/**
+ * Trim graph
+ */
+export function trimGraph(
+  currentRoot: GraphData.GremlinVertex,
+  graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
+) {
+  const importantNodes = [currentRoot.id].concat(currentRoot._ancestorsId);
+  graphData.unloadAllVertices(importantNodes);
+
+  // Keep only ancestors node in fixed position
+  $.each(graphData.ids, (index: number, id: string) => {
+    graphData.getVertexById(id)._isFixedPosition = importantNodes.indexOf(id) !== -1;
+  });
+}
+
+export function addRootChildToGraph(
+  root: GraphData.GremlinVertex,
+  child: GraphData.GremlinVertex,
+  graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
+) {
+  child._ancestorsId = (root._ancestorsId || []).concat([root.id]);
+  graphData.addVertex(child);
+  createEdgesfromNode(child, graphData);
+  graphData.addNeighborInfo(child);
+}
+
+/**
+ * TODO Perform minimal substitution to prevent breaking gremlin query and allow \"" for now.
+ * @param value
+ */
+export function escapeDoubleQuotes(value: string): string {
+  return value === undefined ? value : value.replace(/"/g, '\\"');
+}
+
+/**
+ * Surround with double-quotes if val is a string.
+ * @param val
+ */
+export function getQuotedPropValue(ip: ViewModels.InputPropertyValue): string {
+  switch (ip.type) {
+    case "number":
+    case "boolean":
+      return `${ip.value}`;
+    case "null":
+      return undefined;
+    default:
+      return `"${escapeDoubleQuotes(ip.value as string)}"`;
+  }
+}
+
+/**
+ * TODO Perform minimal substitution to prevent breaking gremlin query and allow \' for now.
+ * @param value
+ */
+export function escapeSingleQuotes(value: string): string {
+  return value === undefined ? value : value.replace(/'/g, "\\'");
+}

src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNeighborsComponent.tsx

@@ -5,7 +5,7 @@
 
 import * as React from "react";
 import { GraphHighlightedNodeData, NeighborVertexBasicInfo } from "./GraphExplorer";
-import { GraphUtil } from "./GraphUtil";
+import * as GraphUtil from "./GraphUtil";
 import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
 
 export interface ReadOnlyNeighborsComponentProps {

src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { NotebookComponent } from "./NotebookComponent";
 import { NotebookClientV2 } from "../NotebookClientV2";
-import { NotebookUtil } from "../NotebookUtil";
+import * as NotebookUtil from "../NotebookUtil";
 
 // Vendor modules
 import {

src/Explorer/Notebook/NotebookComponent/contents/file/text-file.tsx

@@ -1,4 +1,4 @@
-import { StringUtils } from "../../../../../Utils/StringUtils";
+import * as StringUtils from "../../../../../Utils/StringUtils";
 import { actions, AppState, ContentRef, selectors } from "@nteract/core";
 import { IMonacoProps as MonacoEditorProps } from "@nteract/monaco-editor";
 import * as React from "react";

src/Explorer/Notebook/NotebookComponent/epics.test.ts

@@ -8,7 +8,7 @@ import * as sinon from "sinon";
 
 import { CdbAppState, makeCdbRecord } from "./types";
 import { launchWebSocketKernelEpic } from "./epics";
-import { NotebookUtil } from "../NotebookUtil";
+import * as NotebookUtil from "../NotebookUtil";
 
 import { sessions } from "rx-jupyter";
 

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -43,7 +43,7 @@ import { Action as TelemetryAction, ActionModifiers } from "../../../Shared/Tele
 import { CdbAppState } from "./types";
 import { decryptJWTToken } from "../../../Utils/AuthorizationUtils";
 import * as TextFile from "./contents/file/text-file";
-import { NotebookUtil } from "../NotebookUtil";
+import * as NotebookUtil from "../NotebookUtil";
 import { FileSystemUtil } from "../FileSystemUtil";
 import * as cdbActions from "../NotebookComponent/actions";
 import { Areas } from "../../../Common/Constants";

src/Explorer/Notebook/NotebookContentClient.ts

@@ -1,8 +1,8 @@
 import * as DataModels from "../../Contracts/DataModels";
 import { NotebookContentItem, NotebookContentItemType } from "./NotebookContentItem";
-import { StringUtils } from "../../Utils/StringUtils";
+import * as StringUtils from "../../Utils/StringUtils";
 import { FileSystemUtil } from "./FileSystemUtil";
-import { NotebookUtil } from "./NotebookUtil";
+import * as NotebookUtil from "./NotebookUtil";
 
 import { ServerConfig, IContent, IContentProvider, FileType, IEmptyContent } from "@nteract/core";
 import { AjaxResponse } from "rxjs/ajax";

src/Explorer/Notebook/NotebookUtil.test.ts

@@ -1,4 +1,4 @@
-import { NotebookUtil } from "./NotebookUtil";
+import * as NotebookUtil from "./NotebookUtil";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
 import {
   ImmutableNotebook,

src/Explorer/Notebook/NotebookUtil.ts

@@ -1,163 +1,161 @@
 import path from "path";
 import { ImmutableNotebook, ImmutableCodeCell } from "@nteract/commutable";
 import { NotebookContentItem, NotebookContentItemType } from "./NotebookContentItem";
-import { StringUtils } from "../../Utils/StringUtils";
+import * as StringUtils from "../../Utils/StringUtils";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
 
 // Must match rx-jupyter' FileType
 export type FileType = "directory" | "file" | "notebook";
 // Utilities for notebooks
-export class NotebookUtil {
-  /**
-   * It's a notebook file if the filename ends with .ipynb.
-   */
-  public static isNotebookFile(notebookPath: string): boolean {
-    const fileName = NotebookUtil.getName(notebookPath);
-    return !!fileName && StringUtils.endsWith(fileName, ".ipynb");
-  }
+/**
+ * It's a notebook file if the filename ends with .ipynb.
+ */
+export function isNotebookFile(notebookPath: string): boolean {
+  const fileName = getName(notebookPath);
+  return !!fileName && StringUtils.endsWith(fileName, ".ipynb");
+}
 
-  /**
-   * Note: this does not connect the item to a parent in a tree.
-   * @param name
-   * @param path
-   */
-  public static createNotebookContentItem(name: string, path: string, type: FileType): NotebookContentItem {
-    return {
-      name,
-      path,
-      type: NotebookUtil.getType(type),
-      timestamp: NotebookUtil.getCurrentTimestamp(),
-    };
-  }
+/**
+ * Note: this does not connect the item to a parent in a tree.
+ * @param name
+ * @param path
+ */
+export function createNotebookContentItem(name: string, path: string, type: FileType): NotebookContentItem {
+  return {
+    name,
+    path,
+    type: getType(type),
+    timestamp: getCurrentTimestamp(),
+  };
+}
 
-  /**
-   * Convert rx-jupyter type to our type
-   * @param type
-   */
-  public static getType(type: FileType): NotebookContentItemType {
-    switch (type) {
-      case "directory":
-        return NotebookContentItemType.Directory;
-      case "notebook":
-        return NotebookContentItemType.Notebook;
-      case "file":
-        return NotebookContentItemType.File;
-      default:
-        throw new Error(`Unknown file type: ${type}`);
-    }
-  }
-
-  public static getCurrentTimestamp(): number {
-    return new Date().getTime();
-  }
-
-  /**
-   * Override from kernel-lifecycle.ts to improve kernel selection:
-   * Only return the kernel name persisted in the notebook
-   *
-   * @param filepath
-   * @param notebook
-   */
-  public static extractNewKernel(filepath: string | null, notebook: ImmutableNotebook) {
-    const cwd = (filepath && path.dirname(filepath)) || "/";
-
-    const kernelSpecName =
-      notebook.getIn(["metadata", "kernelspec", "name"]) || notebook.getIn(["metadata", "language_info", "name"]);
-
-    return {
-      cwd,
-      kernelSpecName,
-    };
-  }
-
-  public static getFilePath(path: string, fileName: string): string {
-    const contentInfo = GitHubUtils.fromContentUri(path);
-    if (contentInfo) {
-      let path = fileName;
-      if (contentInfo.path) {
-        path = `${contentInfo.path}/${path}`;
-      }
-      return GitHubUtils.toContentUri(contentInfo.owner, contentInfo.repo, contentInfo.branch, path);
-    }
-
-    return `${path}/${fileName}`;
-  }
-
-  public static getParentPath(filepath: string): undefined | string {
-    const basename = NotebookUtil.getName(filepath);
-    if (basename) {
-      const contentInfo = GitHubUtils.fromContentUri(filepath);
-      if (contentInfo) {
-        const parentPath = contentInfo.path.split(basename).shift();
-        if (parentPath === undefined) {
-          return undefined;
-        }
-
-        return GitHubUtils.toContentUri(
-          contentInfo.owner,
-          contentInfo.repo,
-          contentInfo.branch,
-          parentPath.replace(/\/$/, "") // no trailling slash
-        );
-      }
-
-      const parentPath = filepath.split(basename).shift();
-      if (parentPath) {
-        return parentPath.replace(/\/$/, ""); // no trailling slash
-      }
-    }
-
-    return undefined;
-  }
-
-  public static getName(path: string): undefined | string {
-    let relativePath: string = path;
-    const contentInfo = GitHubUtils.fromContentUri(path);
-    if (contentInfo) {
-      relativePath = contentInfo.path;
-    }
-
-    return relativePath.split("/").pop();
-  }
-
-  public static replaceName(path: string, newName: string): string {
-    const contentInfo = GitHubUtils.fromContentUri(path);
-    if (contentInfo) {
-      const contentName = contentInfo.path.split("/").pop();
-      if (!contentName) {
-        throw new Error(`Failed to extract name from github path ${contentInfo.path}`);
-      }
-
-      const basePath = contentInfo.path.split(contentName).shift();
-      return GitHubUtils.toContentUri(contentInfo.owner, contentInfo.repo, contentInfo.branch, `${basePath}${newName}`);
-    }
-
-    const contentName = path.split("/").pop();
-    if (!contentName) {
-      throw new Error(`Failed to extract name from path ${path}`);
-    }
-
-    const basePath = path.split(contentName).shift();
-    return `${basePath}${newName}`;
-  }
-
-  public static findFirstCodeCellWithDisplay(notebookObject: ImmutableNotebook): number {
-    let codeCellIndex = 0;
-    for (let i = 0; i < notebookObject.cellOrder.size; i++) {
-      const cellId = notebookObject.cellOrder.get(i);
-      if (cellId) {
-        const cell = notebookObject.cellMap.get(cellId);
-        if (cell?.cell_type === "code") {
-          const displayOutput = (cell as ImmutableCodeCell)?.outputs?.find(
-            (output) => output.output_type === "display_data" || output.output_type === "execute_result"
-          );
-          if (displayOutput) {
-            return codeCellIndex;
-          }
-          codeCellIndex++;
-        }
-      }
-    }
-    throw new Error("Output does not exist for any of the cells.");
+/**
+ * Convert rx-jupyter type to our type
+ * @param type
+ */
+export function getType(type: FileType): NotebookContentItemType {
+  switch (type) {
+    case "directory":
+      return NotebookContentItemType.Directory;
+    case "notebook":
+      return NotebookContentItemType.Notebook;
+    case "file":
+      return NotebookContentItemType.File;
+    default:
+      throw new Error(`Unknown file type: ${type}`);
   }
 }
+
+export function getCurrentTimestamp(): number {
+  return new Date().getTime();
+}
+
+/**
+ * Override from kernel-lifecycle.ts to improve kernel selection:
+ * Only return the kernel name persisted in the notebook
+ *
+ * @param filepath
+ * @param notebook
+ */
+export function extractNewKernel(filepath: string | null, notebook: ImmutableNotebook) {
+  const cwd = (filepath && path.dirname(filepath)) || "/";
+
+  const kernelSpecName =
+    notebook.getIn(["metadata", "kernelspec", "name"]) || notebook.getIn(["metadata", "language_info", "name"]);
+
+  return {
+    cwd,
+    kernelSpecName,
+  };
+}
+
+export function getFilePath(path: string, fileName: string): string {
+  const contentInfo = GitHubUtils.fromContentUri(path);
+  if (contentInfo) {
+    let path = fileName;
+    if (contentInfo.path) {
+      path = `${contentInfo.path}/${path}`;
+    }
+    return GitHubUtils.toContentUri(contentInfo.owner, contentInfo.repo, contentInfo.branch, path);
+  }
+
+  return `${path}/${fileName}`;
+}
+
+export function getParentPath(filepath: string): undefined | string {
+  const basename = getName(filepath);
+  if (basename) {
+    const contentInfo = GitHubUtils.fromContentUri(filepath);
+    if (contentInfo) {
+      const parentPath = contentInfo.path.split(basename).shift();
+      if (parentPath === undefined) {
+        return undefined;
+      }
+
+      return GitHubUtils.toContentUri(
+        contentInfo.owner,
+        contentInfo.repo,
+        contentInfo.branch,
+        parentPath.replace(/\/$/, "") // no trailling slash
+      );
+    }
+
+    const parentPath = filepath.split(basename).shift();
+    if (parentPath) {
+      return parentPath.replace(/\/$/, ""); // no trailling slash
+    }
+  }
+
+  return undefined;
+}
+
+export function getName(path: string): undefined | string {
+  let relativePath: string = path;
+  const contentInfo = GitHubUtils.fromContentUri(path);
+  if (contentInfo) {
+    relativePath = contentInfo.path;
+  }
+
+  return relativePath.split("/").pop();
+}
+
+export function replaceName(path: string, newName: string): string {
+  const contentInfo = GitHubUtils.fromContentUri(path);
+  if (contentInfo) {
+    const contentName = contentInfo.path.split("/").pop();
+    if (!contentName) {
+      throw new Error(`Failed to extract name from github path ${contentInfo.path}`);
+    }
+
+    const basePath = contentInfo.path.split(contentName).shift();
+    return GitHubUtils.toContentUri(contentInfo.owner, contentInfo.repo, contentInfo.branch, `${basePath}${newName}`);
+  }
+
+  const contentName = path.split("/").pop();
+  if (!contentName) {
+    throw new Error(`Failed to extract name from path ${path}`);
+  }
+
+  const basePath = path.split(contentName).shift();
+  return `${basePath}${newName}`;
+}
+
+export function findFirstCodeCellWithDisplay(notebookObject: ImmutableNotebook): number {
+  let codeCellIndex = 0;
+  for (let i = 0; i < notebookObject.cellOrder.size; i++) {
+    const cellId = notebookObject.cellOrder.get(i);
+    if (cellId) {
+      const cell = notebookObject.cellMap.get(cellId);
+      if (cell?.cell_type === "code") {
+        const displayOutput = (cell as ImmutableCodeCell)?.outputs?.find(
+          (output) => output.output_type === "display_data" || output.output_type === "execute_result"
+        );
+        if (displayOutput) {
+          return codeCellIndex;
+        }
+        codeCellIndex++;
+      }
+    }
+  }
+  throw new Error("Output does not exist for any of the cells.");
+}

src/Explorer/Panes/GitHubReposPane.ts

@@ -6,7 +6,7 @@ import { IPinnedRepo, JunoClient } from "../../Juno/JunoClient";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
-import { JunoUtils } from "../../Utils/JunoUtils";
+import * as JunoUtils from "../../Utils/JunoUtils";
 import { AuthorizeAccessComponent } from "../Controls/GitHub/AuthorizeAccessComponent";
 import { GitHubReposComponent, GitHubReposComponentProps, RepoListItem } from "../Controls/GitHub/GitHubReposComponent";
 import { GitHubReposComponentAdapter } from "../Controls/GitHub/GitHubReposComponentAdapter";

src/Explorer/Panes/PublishNotebookPaneComponent.tsx

@@ -5,7 +5,7 @@ import { FileSystemUtil } from "../Notebook/FileSystemUtil";
 import "./PublishNotebookPaneComponent.less";
 import Html2Canvas from "html2canvas";
 import { ImmutableNotebook } from "@nteract/commutable/src";
-import { NotebookUtil } from "../Notebook/NotebookUtil";
+import * as NotebookUtil from "../Notebook/NotebookUtil";
 
 export interface PublishNotebookPaneProps {
   notebookName: string;

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -41,19 +41,32 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
   private static readonly failoverUrl = "https://docs.microsoft.com/azure/cosmos-db/high-availability";
 
   private readonly container: Explorer;
+  private subscriptions: Array<{ dispose: () => void }>;
 
   constructor(props: SplashScreenProps) {
     super(props);
     this.container = props.explorer;
-    this.container.tabsManager.openedTabs.subscribe(() => this.setState({}));
-    this.container.selectedNode.subscribe(() => this.setState({}));
-    this.container.isNotebookEnabled.subscribe(() => this.setState({}));
+    this.subscriptions = [];
   }
 
   public shouldComponentUpdate() {
     return this.container.tabsManager.openedTabs.length === 0;
   }
 
+  public componentWillUnmount() {
+    while (this.subscriptions.length) {
+      this.subscriptions.pop().dispose();
+    }
+  }
+
+  public componentDidMount() {
+    this.subscriptions.push(
+      this.container.tabsManager.openedTabs.subscribe(() => this.setState({})),
+      this.container.selectedNode.subscribe(() => this.setState({})),
+      this.container.isNotebookEnabled.subscribe(() => this.setState({}))
+    );
+  }
+
   private clearMostRecent = (): void => {
     MostRecentActivity.mostRecentActivity.clear(userContext.databaseAccount?.id);
     this.setState({});

src/Explorer/Tables/DataTable/DataTableUtilities.ts

@@ -37,23 +37,6 @@ export function containItems<T>(items: T[]): boolean {
   return items && items.length > 0;
 }
 
-// export function setTargetIcon(idToIconHandlerMap: CloudHub.Common.IToolbarElementIdIconMap, $sourceElement: JQuery, toIconState: IconState): void {
-//     if (idToIconHandlerMap) {
-//         var iconId: string = $sourceElement.attr("id");
-//         var iconHandler = idToIconHandlerMap[iconId];
-//         switch (toIconState) {
-//             case IconState.default:
-//                 iconHandler.observable(iconHandler.default);
-//                 break;
-//             case IconState.hoverState:
-//                 iconHandler.observable(iconHandler.hoverState);
-//                 break;
-//             default:
-//                 window.console.log("error");
-//         }
-//     }
-// }
-
 export function addCssClass($sourceElement: JQuery, cssClassName: string): void {
   if (!$sourceElement.hasClass(cssClassName)) {
     $sourceElement.addClass(cssClassName);
@@ -78,8 +61,9 @@ export function getPropertyIntersectionFromTableEntities(
   entities: Entities.ITableEntity[],
   isCassandraApi: boolean
 ): string[] {
-  var headerUnion: string[] = [];
+  const headerUnion: string[] = [];
   entities &&
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     entities.forEach((row: any) => {
       const keys = Object.keys(row);
       keys &&

src/Explorer/Tables/QueryBuilder/DateTimeUtilities.ts

@@ -2,26 +2,26 @@ const epochTicks = 621355968000000000;
 const ticksPerMillisecond = 10000;
 
 export function getLocalDateTime(dateTime: string): string {
-  var dateTimeObject: Date = new Date(dateTime);
-  var year: number = dateTimeObject.getFullYear();
-  var month: string = ensureDoubleDigits(dateTimeObject.getMonth() + 1); // Month ranges from 0 to 11
-  var day: string = ensureDoubleDigits(dateTimeObject.getDate());
-  var hours: string = ensureDoubleDigits(dateTimeObject.getHours());
-  var minutes: string = ensureDoubleDigits(dateTimeObject.getMinutes());
-  var seconds: string = ensureDoubleDigits(dateTimeObject.getSeconds());
-  var milliseconds: string = ensureTripleDigits(dateTimeObject.getMilliseconds());
+  const dateTimeObject: Date = new Date(dateTime);
+  const year: number = dateTimeObject.getFullYear();
+  const month: string = ensureDoubleDigits(dateTimeObject.getMonth() + 1); // Month ranges from 0 to 11
+  const day: string = ensureDoubleDigits(dateTimeObject.getDate());
+  const hours: string = ensureDoubleDigits(dateTimeObject.getHours());
+  const minutes: string = ensureDoubleDigits(dateTimeObject.getMinutes());
+  const seconds: string = ensureDoubleDigits(dateTimeObject.getSeconds());
+  const milliseconds: string = ensureTripleDigits(dateTimeObject.getMilliseconds());
 
-  var localDateTime: string = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}.${milliseconds}`;
+  const localDateTime = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}.${milliseconds}`;
   return localDateTime;
 }
 
 export function getUTCDateTime(dateTime: string): string {
-  var dateTimeObject: Date = new Date(dateTime);
+  const dateTimeObject = new Date(dateTime);
   return dateTimeObject.toISOString();
 }
 
 export function ensureDoubleDigits(num: number): string {
-  var doubleDigitsString: string = num.toString();
+  let doubleDigitsString: string = num.toString();
   if (num < 10) {
     doubleDigitsString = `0${doubleDigitsString}`;
   } else if (num > 99) {
@@ -31,7 +31,7 @@ export function ensureDoubleDigits(num: number): string {
 }
 
 export function ensureTripleDigits(num: number): string {
-  var tripleDigitsString: string = num.toString();
+  let tripleDigitsString: string = num.toString();
   if (num < 10) {
     tripleDigitsString = `00${tripleDigitsString}`;
   } else if (num < 100) {
@@ -51,17 +51,17 @@ export function convertJSDateToUnix(dateTime: string): number {
 }
 
 export function convertTicksToJSDate(ticks: string): Date {
-  var ticksJSBased = Number(ticks) - epochTicks;
-  var timeInMillisecond = ticksJSBased / ticksPerMillisecond;
+  const ticksJSBased = Number(ticks) - epochTicks;
+  const timeInMillisecond = ticksJSBased / ticksPerMillisecond;
   return new Date(timeInMillisecond);
 }
 
 export function convertJSDateToTicksWithPadding(dateTime: string): string {
-  var ticks = epochTicks + new Date(dateTime).getTime() * ticksPerMillisecond;
+  const ticks = epochTicks + new Date(dateTime).getTime() * ticksPerMillisecond;
   return padDateTicksWithZeros(ticks.toString());
 }
 
 function padDateTicksWithZeros(value: string): string {
-  var s = "0000000000000000000" + value;
+  const s = "0000000000000000000" + value;
   return s.substr(s.length - 20);
 }

src/Explorer/Tabs/TabsBase.ts

@@ -7,7 +7,7 @@ import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstan
 import { RouteHandler } from "../../RouteHandlers/RouteHandler";
 import { WaitsForTemplateViewModel } from "../WaitsForTemplateViewModel";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import ThemeUtility from "../../Common/ThemeUtility";
+import * as ThemeUtility from "../../Common/ThemeUtility";
 import Explorer from "../Explorer";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -17,7 +17,7 @@ import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg";
 import FileIcon from "../../../images/notebook/file-cosmos.svg";
 import PublishIcon from "../../../images/notebook/publish_content.svg";
 import { ArrayHashMap } from "../../Common/ArrayHashMap";
-import { NotebookUtil } from "../Notebook/NotebookUtil";
+import * as NotebookUtil from "../Notebook/NotebookUtil";
 import _ from "underscore";
 import { IPinnedRepo } from "../../Juno/JunoClient";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";

src/GalleryViewer/GalleryViewer.tsx

@@ -26,7 +26,7 @@ const onInit = async () => {
 
   const props: GalleryAndNotebookViewerComponentProps = {
     junoClient: new JunoClient(),
-    selectedTab: galleryViewerProps.selectedTab || GalleryTab.OfficialSamples,
+    selectedTab: galleryViewerProps.selectedTab || GalleryTab.PublicGallery,
     sortBy: galleryViewerProps.sortBy || SortBy.MostViewed,
     searchText: galleryViewerProps.searchText,
   };

src/GitHub/GitHubClient.ts

@@ -2,7 +2,7 @@ import { Octokit } from "@octokit/rest";
 import { HttpStatusCodes } from "../Common/Constants";
 import * as Logger from "../Common/Logger";
 import UrlUtility from "../Common/UrlUtility";
-import { NotebookUtil } from "../Explorer/Notebook/NotebookUtil";
+import * as NotebookUtil from "../Explorer/Notebook/NotebookUtil";
 import { getErrorMessage } from "../Common/ErrorHandlingUtils";
 
 export interface IGitHubPageInfo {

src/GitHub/GitHubContentProvider.ts

@@ -5,7 +5,7 @@ import { AjaxResponse } from "rxjs/ajax";
 import * as Base64Utils from "../Utils/Base64Utils";
 import { HttpStatusCodes } from "../Common/Constants";
 import * as Logger from "../Common/Logger";
-import { NotebookUtil } from "../Explorer/Notebook/NotebookUtil";
+import * as NotebookUtil from "../Explorer/Notebook/NotebookUtil";
 import { GitHubClient, IGitHubFile, IGitHubResponse } from "./GitHubClient";
 import * as GitHubUtils from "../Utils/GitHubUtils";
 import UrlUtility from "../Common/UrlUtility";

src/Utils/AuthorizationUtils.test.ts

@@ -1,9 +1,7 @@
 import * as Constants from "../Common/Constants";
 import * as AuthorizationUtils from "./AuthorizationUtils";
 import { AuthType } from "../AuthType";
-import Explorer from "../Explorer/Explorer";
 import { updateUserContext } from "../UserContext";
-import { Platform, updateConfigContext } from "../ConfigContext";
 jest.mock("../Explorer/Explorer");
 
 describe("AuthorizationUtils", () => {
@@ -34,10 +32,6 @@ describe("AuthorizationUtils", () => {
       expect(() => AuthorizationUtils.decryptJWTToken(undefined)).toThrowError();
     });
 
-    it("should throw an error if token is null", () => {
-      expect(() => AuthorizationUtils.decryptJWTToken(null)).toThrowError();
-    });
-
     it("should throw an error if token is empty", () => {
       expect(() => AuthorizationUtils.decryptJWTToken("")).toThrowError();
     });

src/Utils/AuthorizationUtils.ts

@@ -1,7 +1,6 @@
 import { AuthType } from "../AuthType";
 import * as Constants from "../Common/Constants";
 import * as Logger from "../Common/Logger";
-import { configContext, Platform } from "../ConfigContext";
 import * as ViewModels from "../Contracts/ViewModels";
 import { userContext } from "../UserContext";
 

src/Utils/GalleryUtils.ts

@@ -13,6 +13,8 @@ import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHand
 import { HttpStatusCodes } from "../Common/Constants";
 import { trace, traceFailure, traceStart, traceSuccess } from "../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
+import { Notebook } from "@nteract/commutable";
+import { NotebookV4 } from "@nteract/commutable/lib/v4";
 
 const defaultSelectedAbuseCategory = "Other";
 const abuseCategories: IChoiceGroupOption[] = [
@@ -243,7 +245,10 @@ export function downloadItem(
           throw new Error(`Received HTTP ${response.status} when fetching ${data.name}`);
         }
 
-        await container.importAndOpenContent(data.name, response.data);
+        const notebook = JSON.parse(response.data) as Notebook;
+        removeNotebookViewerLink(notebook, data.newCellId);
+
+        await container.importAndOpenContent(data.name, JSON.stringify(notebook));
         NotificationConsoleUtils.logConsoleMessage(
           ConsoleDataType.Info,
           `Successfully downloaded ${name} to My Notebooks`
@@ -281,6 +286,17 @@ export function downloadItem(
   );
 }
 
+export const removeNotebookViewerLink = (notebook: Notebook, newCellId: string): void => {
+  if (!newCellId) {
+    return;
+  }
+  const notebookV4 = notebook as NotebookV4;
+  if (notebookV4?.cells[0]?.source[0]?.search(newCellId)) {
+    notebookV4.cells.splice(0, 1);
+    notebook = notebookV4;
+  }
+};
+
 export async function favoriteItem(
   container: Explorer,
   junoClient: JunoClient,
@@ -458,10 +474,10 @@ export function getNotebookViewerProps(search: string): NotebookViewerProps {
 
 export function getTabTitle(tab: GalleryTab): string {
   switch (tab) {
-    case GalleryTab.OfficialSamples:
-      return GalleryViewerComponent.OfficialSamplesTitle;
     case GalleryTab.PublicGallery:
       return GalleryViewerComponent.PublicGalleryTitle;
+    case GalleryTab.OfficialSamples:
+      return GalleryViewerComponent.OfficialSamplesTitle;
     case GalleryTab.Favorites:
       return GalleryViewerComponent.FavoritesTitle;
     case GalleryTab.Published:

src/Utils/JunoUtils.test.ts

@@ -1,6 +1,6 @@
 import { RepoListItem } from "../Explorer/Controls/GitHub/GitHubReposComponent";
 import { IPinnedRepo } from "../Juno/JunoClient";
-import { JunoUtils } from "./JunoUtils";
+import * as JunoUtils from "./JunoUtils";
 import { IGitHubRepo } from "../GitHub/GitHubClient";
 
 const gitHubRepo: IGitHubRepo = {

src/Utils/JunoUtils.ts

@@ -2,21 +2,19 @@ import { RepoListItem } from "../Explorer/Controls/GitHub/GitHubReposComponent";
 import { IGitHubRepo } from "../GitHub/GitHubClient";
 import { IPinnedRepo } from "../Juno/JunoClient";
 
-export class JunoUtils {
-  public static toPinnedRepo(item: RepoListItem): IPinnedRepo {
-    return {
-      owner: item.repo.owner,
-      name: item.repo.name,
-      private: item.repo.private,
-      branches: item.branches.map((element) => ({ name: element.name })),
-    };
-  }
-
-  public static toGitHubRepo(pinnedRepo: IPinnedRepo): IGitHubRepo {
-    return {
-      owner: pinnedRepo.owner,
-      name: pinnedRepo.name,
-      private: pinnedRepo.private,
-    };
-  }
+export function toPinnedRepo(item: RepoListItem): IPinnedRepo {
+  return {
+    owner: item.repo.owner,
+    name: item.repo.name,
+    private: item.repo.private,
+    branches: item.branches.map((element) => ({ name: element.name })),
+  };
+}
+
+export function toGitHubRepo(pinnedRepo: IPinnedRepo): IGitHubRepo {
+  return {
+    owner: pinnedRepo.owner,
+    name: pinnedRepo.name,
+    private: pinnedRepo.private,
+  };
 }

src/Utils/StringUtils.test.ts

@@ -1,4 +1,4 @@
-import { StringUtils } from "./StringUtils";
+import * as StringUtils from "./StringUtils";
 
 describe("StringUtils", () => {
   describe("stripSpacesFromString()", () => {
@@ -12,9 +12,9 @@ describe("StringUtils", () => {
       expect(transformedString).toBe("abc");
     });
 
-    it("should return null if input is null", () => {
-      const transformedString: string = StringUtils.stripSpacesFromString(null);
-      expect(transformedString).toBeNull();
+    it("should return undefined if input is undefined", () => {
+      const transformedString: string = StringUtils.stripSpacesFromString(undefined);
+      expect(transformedString).toBeUndefined();
     });
 
     it("should return undefined if input is undefiend", () => {

src/Utils/StringUtils.ts

@@ -1,21 +1,19 @@
-export class StringUtils {
-  public static stripSpacesFromString(inputString: string): string {
-    if (inputString == null || typeof inputString !== "string") {
-      return inputString;
-    }
-    return inputString.replace(/ /g, "");
-  }
-
-  /**
-   * Implementation of endsWith which works for IE
-   * @param stringToTest
-   * @param suffix
-   */
-  public static endsWith(stringToTest: string, suffix: string): boolean {
-    return stringToTest.indexOf(suffix, stringToTest.length - suffix.length) !== -1;
-  }
-
-  public static startsWith(stringToTest: string, prefix: string): boolean {
-    return stringToTest.indexOf(prefix) === 0;
+export function stripSpacesFromString(inputString: string): string {
+  if (inputString === undefined || typeof inputString !== "string") {
+    return inputString;
   }
+  return inputString.replace(/ /g, "");
+}
+
+/**
+ * Implementation of endsWith which works for IE
+ * @param stringToTest
+ * @param suffix
+ */
+export function endsWith(stringToTest: string, suffix: string): boolean {
+  return stringToTest.indexOf(suffix, stringToTest.length - suffix.length) !== -1;
+}
+
+export function startsWith(stringToTest: string, prefix: string): boolean {
+  return stringToTest.indexOf(prefix) === 0;
 }

test/mongo/container.spec.ts

@@ -1,6 +1,6 @@
 import "expect-puppeteer";
 import { Frame } from "puppeteer";
-import { generateUniqueName, login } from "../utils/shared";
+import { generateDatabaseName, generateUniqueName, login } from "../utils/shared";
 
 jest.setTimeout(300000);
 const LOADING_STATE_DELAY = 2500;
@@ -11,7 +11,7 @@ const RENDER_DELAY = 1000;
 describe("Collection Add and Delete Mongo spec", () => {
   it("creates a collection", async () => {
     try {
-      const dbId = generateUniqueName("db");
+      const dbId = generateDatabaseName();
       const collectionId = generateUniqueName("col");
       const sharedKey = `${generateUniqueName()}`;
       const frame = await login(process.env.MONGO_CONNECTION_STRING);

test/mongo/mongoIndexPolicy.spec.ts

@@ -4,8 +4,7 @@ import { createDatabase, onClickSaveButton } from "../utils/shared";
 import { generateUniqueName } from "../utils/shared";
 import { ApiKind } from "../../src/Contracts/DataModels";
 
-const LOADING_STATE_DELAY = 3000;
-const CREATE_DELAY = 5000;
+const LOADING_STATE_DELAY = 5000;
 jest.setTimeout(300000);
 
 describe("MongoDB Index policy tests", () => {
@@ -21,29 +20,21 @@ describe("MongoDB Index policy tests", () => {
       await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
       await frame.waitFor(LOADING_STATE_DELAY);
       await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
-      let databases = await frame.$$(`div[class="databaseHeader main1 nodeItem "] > div[class="treeNodeHeader "]`);
-      if (databases.length === 0) {
-        await createDatabase(frame);
-        databases = await frame.$$(`div[class="databaseHeader main1 nodeItem "] > div[class="treeNodeHeader "]`);
-      }
-
-      const selectedDbId = await frame.evaluate((element) => {
-        return element.attributes["data-test"].textContent;
-      }, databases[0]);
-
+      const dbId = await createDatabase(frame);
+      await frame.waitFor(25000);
       // click on database
-      await frame.waitFor(`div[data-test="${selectedDbId}"]`);
+      await frame.waitForSelector(`div[data-test="${dbId}"]`);
       await frame.waitFor(LOADING_STATE_DELAY);
-      await frame.click(`div[data-test="${selectedDbId}"]`);
+      await frame.click(`div[data-test="${dbId}"]`);
       await frame.waitFor(LOADING_STATE_DELAY);
 
       // click on scale & setting
       const containers = await frame.$$(
         `div[class="nodeChildren"] > div[class="collectionHeader main2 nodeItem "]> div[class="treeNodeHeader "]`
       );
-      const selectedContainer = await frame.evaluate((element) => {
-        return element.attributes["data-test"].textContent;
-      }, containers[0]);
+      const selectedContainer = (await frame.evaluate((element) => element.innerText, containers[0]))
+        .replace(/[\u{0080}-\u{FFFF}]/gu, "")
+        .trim();
       await frame.waitFor(`div[data-test="${selectedContainer}"]`), { visible: true };
       await frame.waitFor(LOADING_STATE_DELAY);
       await frame.click(`div[data-test="${selectedContainer}"]`);
@@ -83,6 +74,7 @@ describe("MongoDB Index policy tests", () => {
       let singleFieldIndexInserted = false,
         wildCardIndexInserted = false;
       await frame.waitFor("div[data-automationid='DetailsRowCell'] > span"), { visible: true };
+      await frame.waitFor(20000);
 
       const elements = await frame.$$("div[data-automationid='DetailsRowCell'] > span");
       for (let i = 0; i < elements.length; i++) {
@@ -94,7 +86,7 @@ describe("MongoDB Index policy tests", () => {
           singleFieldIndexInserted = true;
         }
       }
-      await frame.waitFor(LOADING_STATE_DELAY);
+      await frame.waitFor(20000);
       expect(wildCardIndexInserted).toBe(true);
       expect(singleFieldIndexInserted).toBe(true);
 
@@ -107,14 +99,14 @@ describe("MongoDB Index policy tests", () => {
       await onClickSaveButton(frame);
 
       //check for cleaning
-      await frame.waitFor(CREATE_DELAY);
+      await frame.waitFor(20000);
       await frame.waitFor("div[data-automationid='DetailsRowCell'] > span"), { visible: true };
       const isDeletionComplete = await frame.$$("div[data-automationid='DetailsRowCell'] > span");
       expect(isDeletionComplete).toHaveLength(2);
     } catch (error) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const testName = (expect as any).getState().currentTestName;
-      await page.screenshot({ path: `Test Failed ${testName}.jpg` });
+      await page.screenshot({ path: `failed-${testName}.jpg` });
       throw error;
     }
   });

test/mongo/openMongoAccount.spec.ts

@@ -1,21 +0,0 @@
-import { Frame } from "puppeteer";
-import { ApiKind } from "../../src/Contracts/DataModels";
-import { getTestExplorerFrame } from "../testExplorer/TestExplorerUtils";
-
-jest.setTimeout(300000);
-
-let frame: Frame;
-
-describe("Mongo", () => {
-  it("Account opens", async () => {
-    try {
-      frame = await getTestExplorerFrame(ApiKind.MongoDB);
-      await frame.waitForSelector(".accordion");
-    } catch (error) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const testName = (expect as any).getState().currentTestName;
-      await page.screenshot({ path: `Test Failed ${testName}.jpg` });
-      throw error;
-    }
-  });
-});

test/sql/container.spec.ts

@@ -1,6 +1,6 @@
 import "expect-puppeteer";
 import { Frame } from "puppeteer";
-import { generateUniqueName, login } from "../utils/shared";
+import { generateDatabaseName, generateUniqueName, login } from "../utils/shared";
 
 jest.setTimeout(300000);
 const LOADING_STATE_DELAY = 2500;
@@ -11,7 +11,7 @@ const RENDER_DELAY = 1000;
 describe("Collection Add and Delete SQL spec", () => {
   it("creates a collection", async () => {
     try {
-      const dbId = generateUniqueName("db");
+      const dbId = generateDatabaseName();
       const collectionId = generateUniqueName("col");
       const sharedKey = `/skey${generateUniqueName()}`;
       const frame = await login(process.env.PORTAL_RUNNER_CONNECTION_STRING);

test/sql/resourceToken.spec.ts

@@ -1,8 +1,16 @@
 /* eslint-disable jest/expect-expect */
 import "expect-puppeteer";
 import { Frame } from "puppeteer";
-import { generateUniqueName } from "../utils/shared";
+import { generateDatabaseName, generateUniqueName } from "../utils/shared";
 import { CosmosClient, PermissionMode } from "@azure/cosmos";
+import { CosmosDBManagementClient } from "@azure/arm-cosmosdb";
+import * as msRestNodeAuth from "@azure/ms-rest-nodeauth";
+
+const clientId = process.env["NOTEBOOKS_TEST_RUNNER_CLIENT_ID"];
+const secret = process.env["NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET"];
+const tenantId = "72f988bf-86f1-41af-91ab-2d7cd011db47";
+const subscriptionId = "69e02f2d-f059-4409-9eac-97e8a276ae2c";
+const resourceGroupName = "runners";
 
 jest.setTimeout(300000);
 const RETRY_DELAY = 5000;
@@ -10,11 +18,16 @@ const CREATE_DELAY = 10000;
 
 describe("Collection Add and Delete SQL spec", () => {
   it("creates a collection", async () => {
-    const dbId = generateUniqueName("db");
+    const credentials = await msRestNodeAuth.loginWithServicePrincipalSecret(clientId, secret, tenantId);
+    const armClient = new CosmosDBManagementClient(credentials, subscriptionId);
+    const account = await armClient.databaseAccounts.get(resourceGroupName, "portal-sql-runner");
+    const keys = await armClient.databaseAccounts.listKeys(resourceGroupName, "portal-sql-runner");
+    const dbId = generateDatabaseName();
     const collectionId = generateUniqueName("col");
-    const connectionString = process.env.PORTAL_RUNNER_CONNECTION_STRING;
-    const client = new CosmosClient(connectionString);
-    const endpoint = /AccountEndpoint=(.*);/.exec(connectionString)[1];
+    const client = new CosmosClient({
+      endpoint: account.documentEndpoint,
+      key: keys.primaryMasterKey,
+    });
     const { database } = await client.databases.createIfNotExists({ id: dbId });
     const { container } = await database.containers.createIfNotExists({ id: collectionId });
     const { user } = await database.users.upsert({ id: "testUser" });
@@ -23,7 +36,7 @@ describe("Collection Add and Delete SQL spec", () => {
       permissionMode: PermissionMode.All,
       resource: container.url,
     });
-    const resourceTokenConnectionString = `AccountEndpoint=${endpoint};DatabaseId=${database.id};CollectionId=${container.id};${containerPermission._token}`;
+    const resourceTokenConnectionString = `AccountEndpoint=${account.documentEndpoint};DatabaseId=${database.id};CollectionId=${container.id};${containerPermission._token}`;
     try {
       await page.goto(process.env.DATA_EXPLORER_ENDPOINT);
       await page.waitFor("div > p.switchConnectTypeText", { visible: true });

test/utils/shared.ts

@@ -26,10 +26,14 @@ export function generateUniqueName(baseName = "", length = 4): string {
   return `${baseName}${crypto.randomBytes(length).toString("hex")}`;
 }
 
-export async function createDatabase(frame: Frame) {
-  const dbId = generateUniqueName("db");
+export function generateDatabaseName(baseName = "db", length = 1): string {
+  return `${baseName}${crypto.randomBytes(length).toString("hex")}-${Date.now()}`;
+}
+
+export async function createDatabase(frame: Frame): Promise<string> {
+  const dbId = generateDatabaseName();
   const collectionId = generateUniqueName("col");
-  const shardKey = generateUniqueName();
+  const shardKey = "partitionKey";
   // create new collection
   await frame.waitFor('button[data-test="New Collection"]', { visible: true });
   await frame.click('button[data-test="New Collection"]');
@@ -63,9 +67,10 @@ export async function createDatabase(frame: Frame) {
   // click submit
   await frame.waitFor("#submitBtnAddCollection");
   await frame.click("#submitBtnAddCollection");
+  return dbId;
 }
 
-export async function onClickSaveButton(frame: Frame) {
+export async function onClickSaveButton(frame: Frame): Promise<void> {
   await frame.waitFor(`button[data-test="Save"]`), { visible: true };
   await frame.waitFor(LOADING_STATE_DELAY);
   await frame.click(`button[data-test="Save"]`);

utils/cleanupDBs.js

@@ -1,51 +1,55 @@
-const { CosmosClient } = require("@azure/cosmos");
+const msRestNodeAuth = require("@azure/ms-rest-nodeauth");
+const { CosmosDBManagementClient } = require("@azure/arm-cosmosdb");
+const ms = require("ms");
+const { time } = require("console");
 
-// TODO: Add support for other API connection strings
-const mongoRegex = RegExp("mongodb://.*:(.*)@(.*).mongo.cosmos.azure.com");
+const clientId = process.env["NOTEBOOKS_TEST_RUNNER_CLIENT_ID"];
+const secret = process.env["NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET"];
+const tenantId = "72f988bf-86f1-41af-91ab-2d7cd011db47";
+const subscriptionId = "69e02f2d-f059-4409-9eac-97e8a276ae2c";
+const resourceGroupName = "runners";
 
-const connectionString = process.env.PORTAL_RUNNER_CONNECTION_STRING;
+const sixtyMinutesAgo = new Date(Date.now() - 1000 * 60 * 60).getTime();
 
-async function cleanup() {
-  if (!connectionString) {
-    throw new Error("Connection string not provided");
-  }
-
-  let client;
-  switch (true) {
-    case connectionString.includes("mongodb://"): {
-      const [, key, accountName] = connectionString.match(mongoRegex);
-      client = new CosmosClient({
-        key,
-        endpoint: `https://${accountName}.documents.azure.com:443/`,
-      });
-      break;
-    }
-    // TODO: Add support for other API connection strings
-    default:
-      client = new CosmosClient(connectionString);
-      break;
-  }
-
-  const response = await client.databases.readAll().fetchAll();
-  return Promise.all(
-    response.resources.map(async (db) => {
-      const dbTimestamp = new Date(db._ts * 1000);
-      const twentyMinutesAgo = new Date(Date.now() - 1000 * 60 * 20);
-      if (dbTimestamp < twentyMinutesAgo) {
-        await client.database(db.id).delete();
-        console.log(`DELETED: ${db.id} | Timestamp: ${dbTimestamp}`);
-      } else {
-        console.log(`SKIPPED: ${db.id} | Timestamp: ${dbTimestamp}`);
+// Deletes all SQL and Mongo databases created more than 20 minutes ago in the test runner accounts
+async function main() {
+  const credentials = await msRestNodeAuth.loginWithServicePrincipalSecret(clientId, secret, tenantId);
+  const client = new CosmosDBManagementClient(credentials, subscriptionId);
+  const accounts = await client.databaseAccounts.list(resourceGroupName);
+  for (const account of accounts) {
+    if (account.kind === "MongoDB") {
+      const mongoDatabases = await client.mongoDBResources.listMongoDBDatabases(resourceGroupName, account.name);
+      for (const database of mongoDatabases) {
+        const timestamp = Number(database.name.split("-")[1]);
+        if (timestamp && timestamp < sixtyMinutesAgo) {
+          await client.mongoDBResources.deleteMongoDBDatabase(resourceGroupName, account.name, database.name);
+          console.log(`DELETED: ${account.name} | ${database.name} | Age: ${ms(Date.now() - timestamp)}`);
+        } else {
+          console.log(`SKIPPED: ${account.name} | ${database.name} | Age: ${ms(Date.now() - timestamp)}`);
+        }
       }
-    })
-  );
+    } else if (account.kind === "GlobalDocumentDB") {
+      const sqlDatabases = await client.sqlResources.listSqlDatabases(resourceGroupName, account.name);
+      for (const database of sqlDatabases) {
+        const timestamp = Number(database.name.split("-")[1]);
+        if (timestamp && timestamp < sixtyMinutesAgo) {
+          await client.sqlResources.deleteSqlDatabase(resourceGroupName, account.name, database.name);
+          console.log(`DELETED: ${account.name} | ${database.name} | Age: ${ms(Date.now() - timestamp)}`);
+        } else {
+          console.log(`SKIPPED: ${account.name} | ${database.name} | Age: ${ms(Date.now() - timestamp)}`);
+        }
+      }
+    }
+  }
 }
 
-cleanup()
+main()
   .then(() => {
+    console.log("Completed");
     process.exit(0);
   })
-  .catch((error) => {
-    console.error(error);
-    process.exit(1);
+  .catch((err) => {
+    console.log(err);
+    console.log("Cleanup failed! Exiting with success. Cleanup should always fail safe.");
+    process.exit(0);
   });