babel version update

package.json

@@ -9,9 +9,9 @@
     "@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-class-properties": "7.13.0",
-    "@babel/plugin-proposal-decorators": "7.12.12",
+    "@babel/plugin-proposal-decorators": "7.14.2",
-    "@fluentui/react": "8.14.3",
+    "@fluentui/react": "8.14.7",
     "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.6.1",
@@ -46,7 +46,7 @@
     "clipboard-copy": "4.0.1",
     "crossroads": "0.12.2",
     "crypto-browserify": "3.12.0",
-    "css-element-queries": "1.1.1",
+    "css-element-queries": "1.2.3",
     "d3": "6.1.1",
     "datatables.net-colreorder-dt": "1.5.1",
     "datatables.net-dt": "1.10.19",
@@ -55,7 +55,7 @@
     "dom-to-image": "2.6.0",
     "dotenv": "8.2.0",
     "eslint-plugin-jest": "23.13.2",
-    "eslint-plugin-react": "7.20.0",
+    "eslint-plugin-react": "7.23.2",
     "hasher": "1.2.0",
     "html2canvas": "1.0.0-rc.7",
     "i18next": "20.2.2",
@@ -92,13 +92,13 @@
     "sanitize-html": "2.3.3",
     "styled-components": "5.3.0",
     "swr": "0.4.0",
-    "underscore": "1.9.1",
+    "underscore": "1.13.1",
     "utility-types": "3.10.0",
     "zustand": "3.5.0"
   },
   "devDependencies": {
-    "@babel/core": "7.14.0",
+    "@babel/core": "7.14.2",
-    "@babel/preset-env": "7.14.1",
+    "@babel/preset-env": "7.14.2",
     "@babel/preset-react": "7.13.13",
     "@babel/preset-typescript": "7.13.0",
     "@svgr/webpack": "5.5.0",
@@ -114,21 +114,21 @@
     "@types/jest": "26.0.23",
     "@types/memoize-one": "4.1.1",
     "@types/mkdirp": "1.0.1",
-    "@types/node": "12.11.1",
+    "@types/node": "15.0.3",
-    "@types/node-fetch": "2.5.7",
+    "@types/node-fetch": "2.5.10",
     "@types/post-robot": "10.0.1",
-    "@types/promise.prototype.finally": "2.0.3",
+    "@types/promise.prototype.finally": "2.0.4",
     "@types/q": "1.5.1",
-    "@types/react": "17.0.3",
+    "@types/react": "17.0.5",
-    "@types/react-dom": "17.0.3",
+    "@types/react-dom": "17.0.5",
     "@types/react-notification-system": "0.2.39",
     "@types/react-redux": "7.1.16",
-    "@types/sanitize-html": "1.27.2",
+    "@types/sanitize-html": "2.3.1",
     "@types/sinon": "2.3.3",
     "@types/styled-components": "5.1.9",
-    "@types/underscore": "1.7.36",
+    "@types/underscore": "1.11.2",
-    "@typescript-eslint/eslint-plugin": "4.22.1",
+    "@typescript-eslint/eslint-plugin": "4.23.0",
-    "@typescript-eslint/parser": "4.22.1",
+    "@typescript-eslint/parser": "4.23.0",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.1",
     "babel-jest": "26.6.3",
     "babel-loader": "8.2.2",
@@ -140,7 +140,7 @@
     "css-loader": "1.0.0",
     "enzyme": "3.11.0",
     "enzyme-to-json": "3.6.2",
-    "eslint": "7.25.0",
+    "eslint": "7.26.0",
     "eslint-cli": "1.1.1",
     "eslint-plugin-no-null": "1.0.2",
     "eslint-plugin-prefer-arrow": "1.2.3",
@@ -161,19 +161,19 @@
     "less": "4.1.1",
     "less-loader": "8.1.1",
     "less-vars-loader": "1.1.0",
-    "mini-css-extract-plugin": "1.5.0",
+    "mini-css-extract-plugin": "1.6.0",
     "monaco-editor-webpack-plugin": "1.7.0",
     "node-fetch": "2.6.1",
     "playwright": "1.10.0",
-    "prettier": "2.2.1",
+    "prettier": "2.3.0",
     "process": "0.11.10",
     "raw-loader": "4.0.2",
     "react-dev-utils": "11.0.4",
     "rimraf": "3.0.0",
     "sinon": "3.2.1",
     "style-loader": "2.0.0",
-    "terser-webpack-plugin": "5.1.1",
+    "terser-webpack-plugin": "5.1.2",
-    "ts-loader": "9.1.1",
+    "ts-loader": "9.1.2",
     "tslint": "5.20.1",
     "tslint-microsoft-contrib": "6.2.0",
     "typescript": "4.2.4",

src/Common/MongoProxyClient.test.ts

@@ -31,7 +31,7 @@ const collection = {
   },
 } as Collection;
 
-const documentId = ({
+const documentId = {
   partitionKeyHeader: () => "[]",
   self: "db/testDB/db/testCollection/docs/testId",
   partitionKeyProperty,
@@ -40,7 +40,7 @@ const documentId = ({
     kind: "Hash",
     version: 1,
   },
-} as unknown) as DocumentId;
+} as unknown as DocumentId;
 
 const databaseAccount = {
   id: "foo",

src/Common/MongoProxyClient.ts

@@ -314,7 +314,7 @@ export function createMongoCollectionWithProxy(
   return window
     .fetch(
       `${endpoint}/createCollection?${queryString.stringify(
-        (mongoParams as unknown) as queryString.ParsedUrlQueryInput
+        mongoParams as unknown as queryString.ParsedUrlQueryInput
       )}`,
       {
         method: "POST",

src/Common/dataAccess/updateOffer.ts

@@ -405,7 +405,7 @@ const updateOfferWithSDK = async (params: UpdateOfferParams): Promise<Offer> =>
   const sdkResponse = await client()
     .offer(params.currentOffer.id)
     // TODO Remove casting when SDK types are fixed (https://github.com/Azure/azure-sdk-for-js/issues/10660)
-    .replace((newOffer as unknown) as OfferDefinition, options);
+    .replace(newOffer as unknown as OfferDefinition, options);
 
   return parseSDKOfferResponse(sdkResponse);
 };

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -214,11 +214,9 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
           }}
         >
           <div className="commandDropdown">
-            {this.props.children.map(
+            {this.props.children.map((c: CommandButtonComponentProps, index: number): JSX.Element => {
-              (c: CommandButtonComponentProps, index: number): JSX.Element => {
+              return CommandButtonComponent.renderButton(c, `${index}`);
-                return CommandButtonComponent.renderButton(c, `${index}`);
+            })}
-              }
-            )}
           </div>
         </div>
       </div>

src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.tsx

@@ -21,14 +21,12 @@ export class DefaultDirectoryDropdownComponent extends React.Component<DefaultDi
       key: DefaultDirectoryDropdownComponent.lastVisitedKey,
       text: "Sign in to your last visited directory",
     };
-    const directoryOptions: Array<IDropdownOption> = this.props.directories.map(
+    const directoryOptions: Array<IDropdownOption> = this.props.directories.map((dirc): IDropdownOption => {
-      (dirc): IDropdownOption => {
+      return {
-        return {
+        key: dirc.tenantId,
-          key: dirc.tenantId,
+        text: `${dirc.displayName}(${dirc.tenantId})`,
-          text: `${dirc.displayName}(${dirc.tenantId})`,
+      };
-        };
+    });
-      }
-    );
     const dropDownOptions: Array<IDropdownOption> = [lastVisitedOption, ...directoryOptions];
     const dropDownProps: IDropdownProps = {
       label: "Set your default directory",

src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx

@@ -111,9 +111,7 @@ describe("NotebookTerminalComponent", () => {
     const terminal: NotebookTerminalComponent = createTerminal();
     const params: Map<string, string> = terminal.getTerminalParams();
 
-    expect(params).toEqual(
+    expect(params).toEqual(new Map<string, string>([["terminal", "true"]]));
-      new Map<string, string>([["terminal", "true"]])
-    );
   });
 
   it("getTerminalParams: Test for Mongo 3.2 terminal", () => {

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -44,7 +44,8 @@ interface NotebookViewerComponentState {
 
 export class NotebookViewerComponent
   extends React.Component<NotebookViewerComponentProps, NotebookViewerComponentState>
-  implements DialogHost {
+  implements DialogHost
+{
   private clientManager: NotebookClientV2;
   private notebookComponentBootstrapper: NotebookComponentBootstrapper;
 

src/Explorer/Controls/Settings/TestUtils.tsx

@@ -5,7 +5,7 @@ import ko from "knockout";
 
 export const container = new Explorer();
 
-export const collection = ({
+export const collection = {
   container: container,
   databaseId: "test",
   id: ko.observable<string>("test"),
@@ -43,4 +43,4 @@ export const collection = ({
   readSettings: () => {
     return;
   },
-} as unknown) as ViewModels.Collection;
+} as unknown as ViewModels.Collection;

src/Explorer/Explorer.tsx

@@ -1067,9 +1067,9 @@ export default class Explorer {
   }
 
   public findSelectedCollection(): ViewModels.Collection {
-    return (this.selectedNode().nodeKind === "Collection"
+    return (
-      ? this.selectedNode()
+      this.selectedNode().nodeKind === "Collection" ? this.selectedNode() : this.selectedNode().collection
-      : this.selectedNode().collection) as ViewModels.Collection;
+    ) as ViewModels.Collection;
   }
 
   public closeAllPanes(): void {
@@ -1165,9 +1165,10 @@ export default class Explorer {
     return true;
   }
 
-  private getDeltaDatabases(
+  private getDeltaDatabases(updatedDatabaseList: DataModels.Database[]): {
-    updatedDatabaseList: DataModels.Database[]
+    toAdd: ViewModels.Database[];
-  ): { toAdd: ViewModels.Database[]; toDelete: ViewModels.Database[] } {
+    toDelete: ViewModels.Database[];
+  } {
     const newDatabases: DataModels.Database[] = _.filter(updatedDatabaseList, (database: DataModels.Database) => {
       const databaseExists = _.some(
         this.databases(),

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx

@@ -206,11 +206,9 @@ describe("GraphExplorer", () => {
     const gVRU = 123.456;
 
     const disableMonacoEditor = (graphExplorer: GraphExplorer) => {
-      renderResultAsJsonStub = sinon.stub(graphExplorer, "renderResultAsJson").callsFake(
+      renderResultAsJsonStub = sinon.stub(graphExplorer, "renderResultAsJson").callsFake((): JSX.Element => {
-        (): JSX.Element => {
+        return <div>[Monaco Editor Stub]</div>;
-          return <div>[Monaco Editor Stub]</div>;
+      });
-        }
-      );
     };
 
     interface AjaxResponse {

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

@@ -637,40 +637,38 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       promise = Q.resolve(0);
     }
 
-    promise = promise.then(
+    promise = promise.then((outEPairsNb: number): Q.Promise<number> => {
-      (outEPairsNb: number): Q.Promise<number> => {
+      const inEdgesToFetch = totalEdgesToFetch - outEPairsNb;
-        const inEdgesToFetch = totalEdgesToFetch - outEPairsNb;
+      if (!vertex._inEAllLoaded && inEdgesToFetch > 0) {
-        if (!vertex._inEAllLoaded && inEdgesToFetch > 0) {
+        let start: number;
-          let start: number;
+        if (offsetIndex <= vertex._outEdgeIds.length) {
-          if (offsetIndex <= vertex._outEdgeIds.length) {
+          start = 0;
-            start = 0;
-          } else {
-            start = offsetIndex - vertex._outEdgeIds.length;
-          }
-
-          return this.fetchEdgeVertexPairs(false, vertex, start, inEdgesToFetch).then(
-            (pairs: EdgeVertexPair[]): number => {
-              vertex._inEAllLoaded = pairs.length < inEdgesToFetch;
-
-              const pairsToAdd = pairs.slice(0, GraphExplorer.LOAD_PAGE_SIZE - outEPairsNb);
-              pairsToAdd.forEach((p: EdgeVertexPair) => {
-                GraphData.GraphData.addInE(vertex, p.e.label, p.e);
-                GraphUtil.addRootChildToGraph(vertex, p.v, graphData);
-                graphData.addEdge(p.e);
-                vertex._inEdgeIds.push(p.e.id);
-
-                // Cache results (graphdata now contains a vertex with outE's filled in)
-                this.edgeInfoCache.addVertex(graphData.getVertexById(p.v.id));
-              });
-              addedEdgesNb += pairsToAdd.length;
-              return outEPairsNb + pairs.length;
-            }
-          );
         } else {
-          return Q.resolve(outEPairsNb);
+          start = offsetIndex - vertex._outEdgeIds.length;
         }
+
+        return this.fetchEdgeVertexPairs(false, vertex, start, inEdgesToFetch).then(
+          (pairs: EdgeVertexPair[]): number => {
+            vertex._inEAllLoaded = pairs.length < inEdgesToFetch;
+
+            const pairsToAdd = pairs.slice(0, GraphExplorer.LOAD_PAGE_SIZE - outEPairsNb);
+            pairsToAdd.forEach((p: EdgeVertexPair) => {
+              GraphData.GraphData.addInE(vertex, p.e.label, p.e);
+              GraphUtil.addRootChildToGraph(vertex, p.v, graphData);
+              graphData.addEdge(p.e);
+              vertex._inEdgeIds.push(p.e.id);
+
+              // Cache results (graphdata now contains a vertex with outE's filled in)
+              this.edgeInfoCache.addVertex(graphData.getVertexById(p.v.id));
+            });
+            addedEdgesNb += pairsToAdd.length;
+            return outEPairsNb + pairs.length;
+          }
+        );
+      } else {
+        return Q.resolve(outEPairsNb);
       }
-    );
+    });
 
     return promise.then((nbPairsFetched: number) => {
       if (offsetIndex >= GraphExplorer.LOAD_PAGE_SIZE || !vertex._outEAllLoaded || !vertex._inEAllLoaded) {
@@ -1210,16 +1208,13 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
 
   private getPossibleRootNodes(): LeftPane.CaptionId[] {
     const key = this.props.graphConfigUiData.nodeCaptionChoice();
-    return $.map(
+    return $.map(this.state.rootMap, (value: any, index: number): LeftPane.CaptionId => {
-      this.state.rootMap,
+      let result = GraphData.GraphData.getNodePropValue(value, key);
-      (value: any, index: number): LeftPane.CaptionId => {
+      return {
-        let result = GraphData.GraphData.getNodePropValue(value, key);
+        caption: result !== undefined ? result : value.id,
-        return {
+        id: value.id,
-          caption: result !== undefined ? result : value.id,
+      };
-          id: value.id,
+    });
-        };
-      }
-    );
   }
 
   /**

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

@@ -94,236 +94,16 @@ describe("Gremlin Simple Client", () => {
       result: { data: ["é"], meta: {} },
     };
     const expectedDecodedUint8ArrayValues = [
-      123,
+      123, 34, 114, 101, 113, 117, 101, 115, 116, 73, 100, 34, 58, 34, 100, 55, 55, 50, 102, 56, 57, 55, 45, 48, 100,
-      34,
+      52, 100, 45, 52, 99, 100, 49, 45, 98, 51, 54, 48, 45, 100, 100, 102, 54, 99, 56, 54, 98, 57, 51, 97, 51, 34, 44,
-      114,
+      34, 115, 116, 97, 116, 117, 115, 34, 58, 123, 34, 99, 111, 100, 101, 34, 58, 50, 48, 48, 44, 34, 97, 116, 116,
-      101,
+      114, 105, 98, 117, 116, 101, 115, 34, 58, 123, 34, 103, 114, 97, 112, 104, 69, 120, 101, 99, 117, 116, 105, 111,
-      113,
+      110, 83, 116, 97, 116, 117, 115, 34, 58, 50, 48, 48, 44, 34, 83, 116, 111, 114, 97, 103, 101, 82, 85, 34, 58, 50,
-      117,
+      46, 50, 57, 44, 34, 67, 111, 109, 112, 117, 116, 101, 82, 85, 34, 58, 49, 46, 48, 55, 44, 34, 80, 101, 114, 80,
-      101,
+      97, 114, 116, 105, 116, 105, 111, 110, 67, 111, 109, 112, 117, 116, 101, 67, 104, 97, 114, 103, 101, 115, 34, 58,
-      115,
+      123, 125, 125, 44, 34, 109, 101, 115, 115, 97, 103, 101, 34, 58, 34, 34, 125, 44, 34, 114, 101, 115, 117, 108,
-      116,
+      116, 34, 58, 123, 34, 100, 97, 116, 97, 34, 58, 91, 34, 195, 169, 34, 93, 44, 34, 109, 101, 116, 97, 34, 58, 123,
-      73,
+      125, 125, 125,
-      100,
-      34,
-      58,
-      34,
-      100,
-      55,
-      55,
-      50,
-      102,
-      56,
-      57,
-      55,
-      45,
-      48,
-      100,
-      52,
-      100,
-      45,
-      52,
-      99,
-      100,
-      49,
-      45,
-      98,
-      51,
-      54,
-      48,
-      45,
-      100,
-      100,
-      102,
-      54,
-      99,
-      56,
-      54,
-      98,
-      57,
-      51,
-      97,
-      51,
-      34,
-      44,
-      34,
-      115,
-      116,
-      97,
-      116,
-      117,
-      115,
-      34,
-      58,
-      123,
-      34,
-      99,
-      111,
-      100,
-      101,
-      34,
-      58,
-      50,
-      48,
-      48,
-      44,
-      34,
-      97,
-      116,
-      116,
-      114,
-      105,
-      98,
-      117,
-      116,
-      101,
-      115,
-      34,
-      58,
-      123,
-      34,
-      103,
-      114,
-      97,
-      112,
-      104,
-      69,
-      120,
-      101,
-      99,
-      117,
-      116,
-      105,
-      111,
-      110,
-      83,
-      116,
-      97,
-      116,
-      117,
-      115,
-      34,
-      58,
-      50,
-      48,
-      48,
-      44,
-      34,
-      83,
-      116,
-      111,
-      114,
-      97,
-      103,
-      101,
-      82,
-      85,
-      34,
-      58,
-      50,
-      46,
-      50,
-      57,
-      44,
-      34,
-      67,
-      111,
-      109,
-      112,
-      117,
-      116,
-      101,
-      82,
-      85,
-      34,
-      58,
-      49,
-      46,
-      48,
-      55,
-      44,
-      34,
-      80,
-      101,
-      114,
-      80,
-      97,
-      114,
-      116,
-      105,
-      116,
-      105,
-      111,
-      110,
-      67,
-      111,
-      109,
-      112,
-      117,
-      116,
-      101,
-      67,
-      104,
-      97,
-      114,
-      103,
-      101,
-      115,
-      34,
-      58,
-      123,
-      125,
-      125,
-      44,
-      34,
-      109,
-      101,
-      115,
-      115,
-      97,
-      103,
-      101,
-      34,
-      58,
-      34,
-      34,
-      125,
-      44,
-      34,
-      114,
-      101,
-      115,
-      117,
-      108,
-      116,
-      34,
-      58,
-      123,
-      34,
-      100,
-      97,
-      116,
-      97,
-      34,
-      58,
-      91,
-      34,
-      195,
-      169,
-      34,
-      93,
-      44,
-      34,
-      109,
-      101,
-      116,
-      97,
-      34,
-      58,
-      123,
-      125,
-      125,
-      125,
     ];
     // We do our best here to emulate what the server should return
     const gremlinResponseData = new Uint8Array(<any>expectedDecodedUint8ArrayValues).buffer;

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -27,154 +27,152 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
 
   return btns
     .filter((btn) => btn)
-    .map(
+    .map((btn: CommandButtonComponentProps, index: number): ICommandBarItemProps => {
-      (btn: CommandButtonComponentProps, index: number): ICommandBarItemProps => {
+      if (btn.isDivider) {
-        if (btn.isDivider) {
+        return createDivider(btn.commandButtonLabel);
-          return createDivider(btn.commandButtonLabel);
+      }
-        }
 
-        const isSplit = !!btn.children && btn.children.length > 0;
+      const isSplit = !!btn.children && btn.children.length > 0;
-        const label = btn.commandButtonLabel || btn.tooltipText;
+      const label = btn.commandButtonLabel || btn.tooltipText;
-        const result: ICommandBarItemProps = {
+      const result: ICommandBarItemProps = {
-          iconProps: {
+        iconProps: {
-            style: {
+          style: {
-              width: StyleConstants.CommandBarIconWidth, // 16
+            width: StyleConstants.CommandBarIconWidth, // 16
-              alignSelf: btn.iconName ? "baseline" : undefined,
+            alignSelf: btn.iconName ? "baseline" : undefined,
-            },
-            imageProps: btn.iconSrc ? { src: btn.iconSrc, alt: btn.iconAlt } : undefined,
-            iconName: btn.iconName,
           },
-          onClick: (ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => {
+          imageProps: btn.iconSrc ? { src: btn.iconSrc, alt: btn.iconAlt } : undefined,
-            btn.onCommandClick(ev);
+          iconName: btn.iconName,
-            TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label });
+        },
+        onClick: (ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => {
+          btn.onCommandClick(ev);
+          TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label });
+        },
+        key: `${btn.commandButtonLabel}${index}`,
+        text: label,
+        "data-test": label,
+        title: btn.tooltipText,
+        name: label,
+        disabled: btn.disabled,
+        ariaLabel: btn.ariaLabel,
+        buttonStyles: {
+          root: {
+            backgroundColor: backgroundColor,
+            height: buttonHeightPx,
+            paddingRight: 0,
+            paddingLeft: 0,
+            minWidth: 24,
+            marginLeft: isSplit ? 0 : 5,
+            marginRight: isSplit ? 0 : 5,
           },
-          key: `${btn.commandButtonLabel}${index}`,
+          rootDisabled: {
-          text: label,
+            backgroundColor: backgroundColor,
-          "data-test": label,
+            pointerEvents: "auto",
-          title: btn.tooltipText,
+          },
-          name: label,
+          splitButtonMenuButton: {
-          disabled: btn.disabled,
+            backgroundColor: backgroundColor,
-          ariaLabel: btn.ariaLabel,
+            selectors: {
-          buttonStyles: {
+              ":hover": { backgroundColor: StyleConstants.AccentLight },
-            root: {
-              backgroundColor: backgroundColor,
-              height: buttonHeightPx,
-              paddingRight: 0,
-              paddingLeft: 0,
-              minWidth: 24,
-              marginLeft: isSplit ? 0 : 5,
-              marginRight: isSplit ? 0 : 5,
             },
-            rootDisabled: {
+            width: 16,
-              backgroundColor: backgroundColor,
+          },
-              pointerEvents: "auto",
+          label: { fontSize: StyleConstants.mediumFontSize },
+          rootHovered: { backgroundColor: StyleConstants.AccentLight },
+          rootPressed: { backgroundColor: StyleConstants.AccentLight },
+          splitButtonMenuButtonExpanded: {
+            backgroundColor: StyleConstants.AccentExtra,
+            selectors: {
+              ":hover": { backgroundColor: StyleConstants.AccentLight },
             },
-            splitButtonMenuButton: {
+          },
-              backgroundColor: backgroundColor,
+          splitButtonDivider: {
+            display: "none",
+          },
+          icon: {
+            paddingLeft: 0,
+            paddingRight: 0,
+          },
+          splitButtonContainer: {
+            marginLeft: 5,
+            marginRight: 5,
+          },
+        },
+        className: btn.className,
+        id: btn.id,
+      };
+
+      if (isSplit) {
+        // It's a split button
+        result.split = true;
+
+        result.subMenuProps = {
+          items: convertButton(btn.children, backgroundColor),
+          styles: {
+            list: {
+              // TODO Figure out how to do it the proper way with subComponentStyles.
+              // TODO Remove all this crazy styling once we adopt Ui-Fabric Azure themes
               selectors: {
-                ":hover": { backgroundColor: StyleConstants.AccentLight },
+                ".ms-ContextualMenu-itemText": { fontSize: StyleConstants.mediumFontSize },
-              },
+                ".ms-ContextualMenu-link:hover": { backgroundColor: StyleConstants.AccentLight },
-              width: 16,
+                ".ms-ContextualMenu-icon": { width: 16, height: 16 },
-            },
-            label: { fontSize: StyleConstants.mediumFontSize },
-            rootHovered: { backgroundColor: StyleConstants.AccentLight },
-            rootPressed: { backgroundColor: StyleConstants.AccentLight },
-            splitButtonMenuButtonExpanded: {
-              backgroundColor: StyleConstants.AccentExtra,
-              selectors: {
-                ":hover": { backgroundColor: StyleConstants.AccentLight },
               },
             },
-            splitButtonDivider: {
-              display: "none",
-            },
-            icon: {
-              paddingLeft: 0,
-              paddingRight: 0,
-            },
-            splitButtonContainer: {
-              marginLeft: 5,
-              marginRight: 5,
-            },
           },
-          className: btn.className,
-          id: btn.id,
         };
 
-        if (isSplit) {
+        result.menuIconProps = {
-          // It's a split button
+          iconType: IconType.image,
-          result.split = true;
+          style: {
-
+            width: 12,
-          result.subMenuProps = {
+            paddingLeft: 1,
-            items: convertButton(btn.children, backgroundColor),
+            paddingTop: 6,
-            styles: {
+          },
-              list: {
+          imageProps: { src: ChevronDownIcon, alt: btn.iconAlt },
-                // TODO Figure out how to do it the proper way with subComponentStyles.
+        };
-                // TODO Remove all this crazy styling once we adopt Ui-Fabric Azure themes
-                selectors: {
-                  ".ms-ContextualMenu-itemText": { fontSize: StyleConstants.mediumFontSize },
-                  ".ms-ContextualMenu-link:hover": { backgroundColor: StyleConstants.AccentLight },
-                  ".ms-ContextualMenu-icon": { width: 16, height: 16 },
-                },
-              },
-            },
-          };
-
-          result.menuIconProps = {
-            iconType: IconType.image,
-            style: {
-              width: 12,
-              paddingLeft: 1,
-              paddingTop: 6,
-            },
-            imageProps: { src: ChevronDownIcon, alt: btn.iconAlt },
-          };
-        }
-
-        if (btn.isDropdown) {
-          const selectedChild = _.find(btn.children, (child) => child.dropdownItemKey === btn.dropdownSelectedKey);
-          result.name = selectedChild?.commandButtonLabel || btn.dropdownPlaceholder;
-
-          const dropdownStyles: Partial<IDropdownStyles> = {
-            root: { margin: 5 },
-            dropdown: { width: btn.dropdownWidth },
-            title: { fontSize: 12, height: 30, lineHeight: 28 },
-            dropdownItem: { fontSize: 12, lineHeight: 28, minHeight: 30 },
-            dropdownItemSelected: { fontSize: 12, lineHeight: 28, minHeight: 30 },
-          };
-
-          const onDropdownChange = (
-            event: React.FormEvent<HTMLDivElement>,
-            option?: IDropdownOption,
-            index?: number
-          ): void => {
-            btn.children[index].onCommandClick(event);
-            TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label: option.text });
-          };
-
-          result.commandBarButtonAs = (props: IComponentAsProps<ICommandBarItemProps>) => {
-            return (
-              <Dropdown
-                placeholder={btn.dropdownPlaceholder}
-                defaultSelectedKey={btn.dropdownSelectedKey}
-                onChange={onDropdownChange}
-                options={btn.children.map((child: CommandButtonComponentProps) => ({
-                  key: child.dropdownItemKey,
-                  text: child.commandButtonLabel,
-                }))}
-                styles={dropdownStyles}
-              />
-            );
-          };
-        }
-
-        if (btn.isArcadiaPicker && btn.arcadiaProps) {
-          result.commandBarButtonAs = () => <ArcadiaMenuPicker {...btn.arcadiaProps} />;
-        }
-
-        return result;
       }
-    );
+
+      if (btn.isDropdown) {
+        const selectedChild = _.find(btn.children, (child) => child.dropdownItemKey === btn.dropdownSelectedKey);
+        result.name = selectedChild?.commandButtonLabel || btn.dropdownPlaceholder;
+
+        const dropdownStyles: Partial<IDropdownStyles> = {
+          root: { margin: 5 },
+          dropdown: { width: btn.dropdownWidth },
+          title: { fontSize: 12, height: 30, lineHeight: 28 },
+          dropdownItem: { fontSize: 12, lineHeight: 28, minHeight: 30 },
+          dropdownItemSelected: { fontSize: 12, lineHeight: 28, minHeight: 30 },
+        };
+
+        const onDropdownChange = (
+          event: React.FormEvent<HTMLDivElement>,
+          option?: IDropdownOption,
+          index?: number
+        ): void => {
+          btn.children[index].onCommandClick(event);
+          TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label: option.text });
+        };
+
+        result.commandBarButtonAs = (props: IComponentAsProps<ICommandBarItemProps>) => {
+          return (
+            <Dropdown
+              placeholder={btn.dropdownPlaceholder}
+              defaultSelectedKey={btn.dropdownSelectedKey}
+              onChange={onDropdownChange}
+              options={btn.children.map((child: CommandButtonComponentProps) => ({
+                key: child.dropdownItemKey,
+                text: child.commandButtonLabel,
+              }))}
+              styles={dropdownStyles}
+            />
+          );
+        };
+      }
+
+      if (btn.isArcadiaPicker && btn.arcadiaProps) {
+        result.commandBarButtonAs = () => <ArcadiaMenuPicker {...btn.arcadiaProps} />;
+      }
+
+      return result;
+    });
 };
 
 export const createDivider = (key: string): ICommandBarItemProps => {

src/Explorer/Menus/NavBar/ControlBarComponent.tsx

@@ -14,13 +14,11 @@ export interface ControlBarComponentProps {
 
 export class ControlBarComponent extends React.Component<ControlBarComponentProps> {
   private static renderButtons(commandButtonOptions: CommandButtonComponentProps[]): JSX.Element[] {
-    return commandButtonOptions.map(
+    return commandButtonOptions.map((btn: CommandButtonComponentProps, index: number): JSX.Element => {
-      (btn: CommandButtonComponentProps, index: number): JSX.Element => {
+      // Remove label
-        // Remove label
+      btn.commandButtonLabel = undefined;
-        btn.commandButtonLabel = undefined;
+      return CommandButtonComponent.renderButton(btn, `${index}`);
-        return CommandButtonComponent.renderButton(btn, `${index}`);
+    });
-      }
-    );
   }
 
   public render(): JSX.Element {

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -106,10 +106,12 @@ export class NotificationConsoleComponent extends React.Component<
     const numInProgress = this.state.allConsoleData.filter(
       (data: ConsoleData) => data.type === ConsoleDataType.InProgress
     ).length;
-    const numErroredItems = this.state.allConsoleData.filter((data: ConsoleData) => data.type === ConsoleDataType.Error)
+    const numErroredItems = this.state.allConsoleData.filter(
-      .length;
+      (data: ConsoleData) => data.type === ConsoleDataType.Error
-    const numInfoItems = this.state.allConsoleData.filter((data: ConsoleData) => data.type === ConsoleDataType.Info)
+    ).length;
-      .length;
+    const numInfoItems = this.state.allConsoleData.filter(
+      (data: ConsoleData) => data.type === ConsoleDataType.Info
+    ).length;
 
     return (
       <div className="notificationConsoleContainer">

src/Explorer/Notebook/NotebookClientV2.ts

@@ -192,36 +192,36 @@ export class NotebookClientV2 {
      * is triggered for *any* state change).
      * TODO: Use react-redux connect() to subscribe to state changes?
      */
-    const cacheKernelSpecsMiddleware: Middleware = <D extends Dispatch<AnyAction>, S extends AppState>({
+    const cacheKernelSpecsMiddleware: Middleware =
-      dispatch,
+      <D extends Dispatch<AnyAction>, S extends AppState>({ dispatch, getState }: MiddlewareAPI<D, S>) =>
-      getState,
+      (next: Dispatch<AnyAction>) =>
-    }: MiddlewareAPI<D, S>) => (next: Dispatch<AnyAction>) => <A extends AnyAction>(action: A): A => {
+      <A extends AnyAction>(action: A): A => {
-      switch (action.type) {
+        switch (action.type) {
-        case actions.FETCH_KERNELSPECS_FULFILLED: {
+          case actions.FETCH_KERNELSPECS_FULFILLED: {
-          const payload = ((action as unknown) as actions.FetchKernelspecsFulfilled).payload;
+            const payload = (action as unknown as actions.FetchKernelspecsFulfilled).payload;
-          const defaultKernelName = payload.defaultKernelName;
+            const defaultKernelName = payload.defaultKernelName;
-          this.kernelSpecsForDisplay = Object.values(payload.kernelspecs)
+            this.kernelSpecsForDisplay = Object.values(payload.kernelspecs)
-            .filter((spec) => !spec.metadata?.hasOwnProperty("hidden"))
+              .filter((spec) => !spec.metadata?.hasOwnProperty("hidden"))
-            .map((spec) => ({
+              .map((spec) => ({
-              name: spec.name,
+                name: spec.name,
-              displayName: spec.displayName,
+                displayName: spec.displayName,
-            }))
+              }))
-            .sort((a: KernelSpecsDisplay, b: KernelSpecsDisplay) => {
+              .sort((a: KernelSpecsDisplay, b: KernelSpecsDisplay) => {
-              // Put default at the top, otherwise lexicographically compare
+                // Put default at the top, otherwise lexicographically compare
-              if (a.displayName === defaultKernelName) {
+                if (a.displayName === defaultKernelName) {
-                return -1;
+                  return -1;
-              } else if (b.name === defaultKernelName) {
+                } else if (b.name === defaultKernelName) {
-                return 1;
+                  return 1;
-              } else {
+                } else {
-                return a.displayName.localeCompare(b.displayName);
+                  return a.displayName.localeCompare(b.displayName);
-              }
+                }
-            });
+              });
-          break;
+            break;
+          }
         }
-      }
 
-      return next(action);
+        return next(action);
-    };
+      };
 
     const traceErrorFct = (title: string, message: string) => {
       TelemetryProcessor.traceFailure(Action.NotebookErrorNotification, {

src/Explorer/Notebook/NotebookComponent/store.ts

@@ -21,16 +21,16 @@ export default function configureStore(
   /**
    * Catches errors in reducers
    */
-  const catchErrorMiddleware: Middleware = <D extends Dispatch<AnyAction>, S extends AppState>({
+  const catchErrorMiddleware: Middleware =
-    dispatch,
+    <D extends Dispatch<AnyAction>, S extends AppState>({ dispatch, getState }: MiddlewareAPI<D, S>) =>
-    getState,
+    (next: Dispatch<AnyAction>) =>
-  }: MiddlewareAPI<D, S>) => (next: Dispatch<AnyAction>) => <A extends AnyAction>(action: A): any => {
+    <A extends AnyAction>(action: A): any => {
-    try {
+      try {
-      next(action);
+        next(action);
-    } catch (error) {
+      } catch (error) {
-      traceFailure("Reducer failure", error);
+        traceFailure("Reducer failure", error);
-    }
+      }
-  };
+    };
 
   const protect = (epic: Epic) => {
     return (action$: Observable<any>, state$: any, dependencies: any) =>

src/Explorer/Notebook/NotebookRenderer/decorators/kbd-shortcuts/index.tsx

@@ -52,15 +52,8 @@ export class KeyboardShortcuts extends React.Component<Props> {
       return;
     }
 
-    const {
+    const { executeFocusedCell, focusNextCell, focusNextCellEditor, contentRef, cellOrder, focusedCell, cellMap } =
-      executeFocusedCell,
+      this.props;
-      focusNextCell,
-      focusNextCellEditor,
-      contentRef,
-      cellOrder,
-      focusedCell,
-      cellMap,
-    } = this.props;
 
     let ctrlKeyPressed = e.ctrlKey;
     // Allow cmd + enter (macOS) to operate like ctrl + enter

src/Explorer/OpenFullScreen.test.tsx

@@ -1,6 +1,7 @@
 jest.mock("../hooks/useFullScreenURLs");
 import "@testing-library/jest-dom";
 import { render, screen } from "@testing-library/react";
+import React from "react";
 import { useFullScreenURLs } from "../hooks/useFullScreenURLs";
 import { OpenFullScreen } from "./OpenFullScreen";
 

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -471,44 +471,42 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 </TooltipHost>
               </Stack>
 
-              {this.state.uniqueKeys.map(
+              {this.state.uniqueKeys.map((uniqueKey: string, i: number): JSX.Element => {
-                (uniqueKey: string, i: number): JSX.Element => {
+                return (
-                  return (
+                  <Stack style={{ marginBottom: 8 }} key={`uniqueKey${i}`} horizontal>
-                    <Stack style={{ marginBottom: 8 }} key={`uniqueKey${i}`} horizontal>
+                    <input
-                      <input
+                      type="text"
-                        type="text"
+                      autoComplete="off"
-                        autoComplete="off"
+                      placeholder={
-                        placeholder={
+                        userContext.apiType === "Mongo"
-                          userContext.apiType === "Mongo"
+                          ? "Comma separated paths e.g. firstName,address.zipCode"
-                            ? "Comma separated paths e.g. firstName,address.zipCode"
+                          : "Comma separated paths e.g. /firstName,/address/zipCode"
-                            : "Comma separated paths e.g. /firstName,/address/zipCode"
+                      }
-                        }
+                      className="panelTextField"
-                        className="panelTextField"
+                      autoFocus
-                        autoFocus
+                      value={uniqueKey}
-                        value={uniqueKey}
+                      onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                        const uniqueKeys = this.state.uniqueKeys.map((uniqueKey: string, j: number) => {
-                          const uniqueKeys = this.state.uniqueKeys.map((uniqueKey: string, j: number) => {
+                          if (i === j) {
-                            if (i === j) {
+                            return event.target.value;
-                              return event.target.value;
+                          }
-                            }
+                          return uniqueKey;
-                            return uniqueKey;
+                        });
-                          });
+                        this.setState({ uniqueKeys });
-                          this.setState({ uniqueKeys });
+                      }}
-                        }}
+                    />
-                      />
 
-                      <IconButton
+                    <IconButton
-                        iconProps={{ iconName: "Delete" }}
+                      iconProps={{ iconName: "Delete" }}
-                        style={{ height: 27 }}
+                      style={{ height: 27 }}
-                        onClick={() => {
+                      onClick={() => {
-                          const uniqueKeys = this.state.uniqueKeys.filter((uniqueKey, j) => i !== j);
+                        const uniqueKeys = this.state.uniqueKeys.filter((uniqueKey, j) => i !== j);
-                          this.setState({ uniqueKeys });
+                        this.setState({ uniqueKeys });
-                        }}
+                      }}
-                      />
+                    />
-                    </Stack>
+                  </Stack>
-                  );
+                );
-                }
+              })}
-              )}
 
               <ActionButton
                 iconProps={{ iconName: "Add" }}

src/Explorer/Panes/Tables/AddTableEntityPanel.tsx

@@ -67,10 +67,8 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
   const [selectedRow, setSelectedRow] = useState<number>(0);
   const [entityAttributeValue, setEntityAttributeValue] = useState<string>("");
   const [entityAttributeProperty, setEntityAttributeProperty] = useState<string>("");
-  const [
+  const [isEntityValuePanelOpen, { setTrue: setIsEntityValuePanelTrue, setFalse: setIsEntityValuePanelFalse }] =
-    isEntityValuePanelOpen,
+    useBoolean(false);
-    { setTrue: setIsEntityValuePanelTrue, setFalse: setIsEntityValuePanelFalse },
-  ] = useBoolean(false);
 
   /* Get default and previous saved entity headers */
   useEffect(() => {

src/Explorer/Panes/Tables/EditTableEntityPanel.tsx

@@ -67,10 +67,8 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
   const [originalDocument, setOriginalDocument] = useState<Entities.ITableEntity>({});
   const [entityAttributeProperty, setEntityAttributeProperty] = useState<string>("");
 
-  const [
+  const [isEntityValuePanelOpen, { setTrue: setIsEntityValuePanelTrue, setFalse: setIsEntityValuePanelFalse }] =
-    isEntityValuePanelOpen,
+    useBoolean(false);
-    { setTrue: setIsEntityValuePanelTrue, setFalse: setIsEntityValuePanelFalse },
-  ] = useBoolean(false);
 
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -111,7 +109,7 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
             const nonEditableType: boolean =
               entityAttributeType === TableConstants.CassandraType.Blob ||
               entityAttributeType === TableConstants.CassandraType.Inet;
-            const isDisable = !_.contains<string>(cassandraKeys, key) && !nonEditableType;
+            const isDisable = !_.contains<string>(cassandraKeys[0], key) && !nonEditableType;
             const time =
               entityAttributeType === TableConstants.TableType.DateTime ? getFormattedTime(displayValue) : "";
             displayedAttributes.push({

src/Explorer/Panes/Tables/Validators/EntityTableHelper.tsx

@@ -19,21 +19,8 @@ export const options = [
   { key: Int64, text: Int64 },
 ];
 
-const {
+const { Text, Ascii, Bigint, Blob, Decimal, Float, Int, Uuid, Varchar, Varint, Inet, Smallint, Tinyint } =
-  Text,
+  TableConstants.CassandraType;
-  Ascii,
-  Bigint,
-  Blob,
-  Decimal,
-  Float,
-  Int,
-  Uuid,
-  Varchar,
-  Varint,
-  Inet,
-  Smallint,
-  Tinyint,
-} = TableConstants.CassandraType;
 export const cassandraOptions = [
   { key: Text, text: Text },
   { key: Ascii, text: Ascii },

src/Explorer/Tables/DataTable/DataTableBindingManager.ts

@@ -277,8 +277,9 @@ function updateTableScrollableRegionWidth(): void {
     }
 
     var bodyWidth = $(window).width();
-    var dataTablesScrollBodyPosLeft = $(tabElement).find(Constants.htmlSelectors.dataTableScrollBodySelector).offset()
+    var dataTablesScrollBodyPosLeft = $(tabElement)
-      .left;
+      .find(Constants.htmlSelectors.dataTableScrollBodySelector)
+      .offset().left;
     var scrollWidth = bodyWidth - dataTablesScrollBodyPosLeft;
 
     // jquery datatables automatically sets width:100% to both the header and the body when we use it's column autoWidth feature.

src/Explorer/Tables/QueryBuilder/QueryClauseViewModel.ts

@@ -172,8 +172,8 @@ export default class QueryClauseViewModel {
     } else {
       this.resetFromTimestamp();
       if (userContext.apiType === "Cassandra") {
-        const cassandraSchema = this._queryBuilderViewModel.tableEntityListViewModel.queryTablesTab.collection
+        const cassandraSchema =
-          .cassandraSchema;
+          this._queryBuilderViewModel.tableEntityListViewModel.queryTablesTab.collection.cassandraSchema;
         for (let i = 0, len = cassandraSchema.length; i < len; i++) {
           if (cassandraSchema[i].property === this.field()) {
             this.type(cassandraSchema[i].type);

src/Explorer/Tree/Database.ts

@@ -259,9 +259,10 @@ export default class Database implements ViewModels.Database {
     }
   }
 
-  private getDeltaCollections(
+  private getDeltaCollections(updatedCollectionsList: DataModels.Collection[]): {
-    updatedCollectionsList: DataModels.Collection[]
+    toAdd: DataModels.Collection[];
-  ): { toAdd: DataModels.Collection[]; toDelete: Collection[] } {
+    toDelete: Collection[];
+  } {
     const collectionsToAdd: DataModels.Collection[] = _.filter(
       updatedCollectionsList,
       (collection: DataModels.Collection) => {

src/Explorer/Tree/ResourceTreeAdapter.test.ts

@@ -6,7 +6,7 @@ import { ResourceTreeAdapter } from "./ResourceTreeAdapter";
 
 describe("ResourceTreeAdapter", () => {
   const mockContainer = (): Explorer =>
-    (({
+    ({
       selectedNode: ko.observable<ViewModels.TreeNode>({
         nodeKind: "nodeKind",
         rid: "rid",
@@ -19,7 +19,7 @@ describe("ResourceTreeAdapter", () => {
       },
       isNotebookEnabled: ko.observable<boolean>(true),
       databases: ko.observable<ViewModels.Database[]>([]),
-    } as unknown) as Explorer);
+    } as unknown as Explorer);
 
   // TODO isDataNodeSelected needs a better design and refactor, but for now, we protect some of the code paths
   describe("isDataNodeSelected", () => {
@@ -48,12 +48,12 @@ describe("ResourceTreeAdapter", () => {
     it("should select if correct database node regardless of subnodekinds", () => {
       const subNodeKind = ViewModels.CollectionTabKind.Documents;
       const explorer = mockContainer();
-      explorer.selectedNode(({
+      explorer.selectedNode({
         nodeKind: "Database",
         rid: "dbrid",
         id: ko.observable<string>("dbid"),
         selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind),
-      } as unknown) as ViewModels.TreeNode);
+      } as unknown as ViewModels.TreeNode);
       const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
       const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("dbid", undefined, [
         ViewModels.CollectionTabKind.Documents,
@@ -67,13 +67,13 @@ describe("ResourceTreeAdapter", () => {
       explorer.tabsManager.activeTab({
         tabKind: subNodeKind,
       } as TabsBase);
-      explorer.selectedNode(({
+      explorer.selectedNode({
         nodeKind: "Collection",
         rid: "collrid",
         databaseId: "dbid",
         id: ko.observable<string>("collid"),
         selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind),
-      } as unknown) as ViewModels.TreeNode);
+      } as unknown as ViewModels.TreeNode);
       const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
       let isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("dbid", "collid", [subNodeKind]);
       expect(isDataNodeSelected).toBeTruthy();
@@ -82,26 +82,26 @@ describe("ResourceTreeAdapter", () => {
       explorer.tabsManager.activeTab({
         tabKind: subNodeKind,
       } as TabsBase);
-      explorer.selectedNode(({
+      explorer.selectedNode({
         nodeKind: "Collection",
         rid: "collrid",
         databaseId: "dbid",
         id: ko.observable<string>("collid"),
         selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind),
-      } as unknown) as ViewModels.TreeNode);
+      } as unknown as ViewModels.TreeNode);
       isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("dbid", "collid", [subNodeKind]);
       expect(isDataNodeSelected).toBeTruthy();
     });
 
     it("should not select incorrect collection node (e.g. Settings)", () => {
       const explorer = mockContainer();
-      explorer.selectedNode(({
+      explorer.selectedNode({
         nodeKind: "Collection",
         rid: "collrid",
         databaseId: "dbid",
         id: ko.observable<string>("collid"),
         selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(ViewModels.CollectionTabKind.Documents),
-      } as unknown) as ViewModels.TreeNode);
+      } as unknown as ViewModels.TreeNode);
       explorer.tabsManager.activeTab({
         tabKind: ViewModels.CollectionTabKind.Documents,
       } as TabsBase);

src/Utils/GalleryUtils.ts

@@ -475,9 +475,7 @@ export function getTabTitle(tab: GalleryTab): string {
   }
 }
 
-export function filterPublishedNotebooks(
+export function filterPublishedNotebooks(items: IGalleryItem[]): {
-  items: IGalleryItem[]
-): {
   published: IGalleryItem[];
   underReview: IGalleryItem[];
   removed: IGalleryItem[];

src/Utils/arm/request.test.ts

@@ -7,7 +7,7 @@ interface Global {
   Headers: unknown;
 }
 
-((global as unknown) as Global).Headers = ((fetch as unknown) as Global).Headers;
+(global as unknown as Global).Headers = (fetch as unknown as Global).Headers;
 
 describe("ARM request", () => {
   updateUserContext({

src/hooks/useKnockoutExplorer.ts

@@ -65,7 +65,7 @@ export function useKnockoutExplorer(platform: Platform, explorerParams: Explorer
 }
 
 async function configureHosted(explorerParams: ExplorerParams): Promise<Explorer> {
-  const win = (window as unknown) as HostedExplorerChildFrame;
+  const win = window as unknown as HostedExplorerChildFrame;
   if (win.hostedConfig.authType === AuthType.EncryptedToken) {
     return configureHostedWithEncryptedToken(win.hostedConfig, explorerParams);
   } else if (win.hostedConfig.authType === AuthType.ResourceToken) {