Make Data Explorer work on node v18 (#1654)

* Upgrade packages to enable npm i with node 18

* Fix crypto and querystring issue

* Fix webpack errors during npm start

* Upgrade monaco editor. Fix alias in webconfig

* Remove deprecated file-loader. Upgrade webpack to latest.

* Fix format

* Upgrade webpack, eslint and typescript

* Update p-retry and fluentui packages

* Revert monaco package upgrade

* Fix notebook compile errors

* Fix lint errors

* Update jest snapshots

* Fix unit tests

* Update node version to 18

* Fix compile error

* Fix compile error

* Fix format

* Turn off warning overlay for webpack devServer

* Fix format

* Re-add monaco webpack plugin and upgrade monaco-editor

* Update package-lock.json

* Fix build issue

* Move MonacoWebpackPlugin to previous place in webpack.config.js

* update package-lock.json

* Fix package-lock.json

* Update package-lock.json

* Fix export ChoiceItem not found warning for self serve. Remove warning turn off in webpack config.

* Update checkout and setup actions in for ci tests

* Disable Gallery callout

* Fix disable gallery header

* Totally disable New gallery callout

* Upgrade all github actions to latest

src/Explorer/Tree/Database.test.tsx

@@ -42,7 +42,7 @@ describe("Add Schema", () => {
 
     database.addSchema(collection);
 
-    expect(database.junoClient.requestSchema).toBeCalledTimes(0);
+    expect(database.junoClient.requestSchema).toHaveBeenCalledTimes(0);
   });
 
   it("should call requestSchema or getSchema if analyticalStorageTtl is not undefined", () => {
@@ -66,7 +66,7 @@ describe("Add Schema", () => {
     const checkForSchema: NodeJS.Timeout = database.addSchema(collection, interval);
     jest.advanceTimersByTime(interval + 1000);
 
-    expect(database.junoClient.requestSchema).toBeCalledWith({
+    expect(database.junoClient.requestSchema).toHaveBeenCalledWith({
       id: undefined,
       subscriptionId: userContext.subscriptionId,
       resourceGroup: userContext.resourceGroup,
@@ -75,7 +75,7 @@ describe("Add Schema", () => {
       status: "new",
     });
     expect(checkForSchema).not.toBeNull();
-    expect(database.junoClient.getSchema).toBeCalledWith(
+    expect(database.junoClient.getSchema).toHaveBeenCalledWith(
       userContext.subscriptionId,
       userContext.resourceGroup,
       userContext.databaseAccount.name,

src/Explorer/Tree/ResourceTree.tsx

@@ -788,7 +788,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
             </AccordionItemComponent>
           </AccordionComponent>
 
-          {buildGalleryCallout()}
+          {/* {buildGalleryCallout()} */}
         </>
       )}
       {!isNotebookEnabled && isSampleDataEnabled && (
@@ -802,7 +802,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
             </AccordionItemComponent>
           </AccordionComponent>
 
-          {buildGalleryCallout()}
+          {/* {buildGalleryCallout()} */}
         </>
       )}
       {isNotebookEnabled && isSampleDataEnabled && (
@@ -819,7 +819,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
             </AccordionItemComponent>
           </AccordionComponent>
 
-          {buildGalleryCallout()}
+          {/* {buildGalleryCallout()} */}
         </>
       )}
     </>

src/Explorer/Tree/ResourceTreeAdapter.test.ts

@@ -15,13 +15,13 @@ describe("useSelectedNode", () => {
       useSelectedNode.getState().setSelectedNode(undefined);
       useTabs.setState({ activeTab: undefined });
     });
-    it("it should not select if no selected node", () => {
+    it("should not select if no selected node", () => {
       useTabs.setState({ activeTab: mockTab });
       const isDataNodeSelected = useSelectedNode.getState().isDataNodeSelected("foo", "bar", undefined);
       expect(isDataNodeSelected).toBeFalsy();
     });
 
-    it("it should not select incorrect subnodekinds", () => {
+    it("should not select incorrect subnodekinds", () => {
       useTabs.setState({ activeTab: mockTab });
       useSelectedNode.getState().setSelectedNode({
         nodeKind: "nodeKind",
@@ -32,7 +32,7 @@ describe("useSelectedNode", () => {
       expect(isDataNodeSelected).toBeFalsy();
     });
 
-    it("it should not select if no active tab", () => {
+    it("should not select if no active tab", () => {
       useSelectedNode.getState().setSelectedNode({
         nodeKind: "nodeKind",
         rid: "rid",

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -1,14 +1,14 @@
 import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
+import { getItemName } from "Utils/APITypeUtils";
 import * as ko from "knockout";
 import * as React from "react";
-import { getItemName } from "Utils/APITypeUtils";
 import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
-import DeleteIcon from "../../../images/delete.svg";
 import GalleryIcon from "../../../images/GalleryIcon.svg";
-import FileIcon from "../../../images/notebook/file-cosmos.svg";
+import DeleteIcon from "../../../images/delete.svg";
 import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
 import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg";
 import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
+import FileIcon from "../../../images/notebook/file-cosmos.svg";
 import PublishIcon from "../../../images/notebook/publish_content.svg";
 import RefreshIcon from "../../../images/refresh-cosmos.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
@@ -17,8 +17,6 @@ import { Areas } from "../../Common/Constants";
 import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { useSidePanel } from "../../hooks/useSidePanel";
-import { useTabs } from "../../hooks/useTabs";
 import { IPinnedRepo } from "../../Juno/JunoClient";
 import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
 import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
@@ -26,6 +24,8 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { isServerlessAccount } from "../../Utils/CapabilityUtils";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
+import { useSidePanel } from "../../hooks/useSidePanel";
+import { useTabs } from "../../hooks/useTabs";
 import * as ResourceTreeContextMenuButtonFactory from "../ContextMenuButtonFactory";
 import { AccordionComponent, AccordionItemComponent } from "../Controls/Accordion/AccordionComponent";
 import { useDialog } from "../Controls/Dialog";
@@ -116,7 +116,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
             </AccordionItemComponent>
           </AccordionComponent>
 
-          {this.galleryContentRoot && this.buildGalleryCallout()}
+          {/* {this.galleryContentRoot && this.buildGalleryCallout()} */}
         </>
       );
     } else {