Fix eslint issues for Tabsbase and JupyterLabAppFactory

* mock to instance

* Update jest.config.js

Co-authored-by: Jordi Bunster <jbunster@microsoft.com>

.eslintignore

@@ -18,7 +18,9 @@ src/Common/MessageHandler.test.ts
 src/Common/MessageHandler.ts
 src/Common/MongoProxyClient.test.ts
 src/Common/MongoUtility.ts
+src/Common/NotificationsClientBase.ts
 src/Common/QueriesClient.ts
+src/Common/Splitter.ts
 src/Controls/Heatmap/Heatmap.test.ts
 src/Controls/Heatmap/Heatmap.ts
 src/Definitions/datatables.d.ts
@@ -35,7 +37,8 @@ src/Definitions/svg.d.ts
 src/Explorer/ComponentRegisterer.test.ts
 src/Explorer/ComponentRegisterer.ts
 src/Explorer/Controls/DiffEditor/DiffEditorComponent.ts
-src/Explorer/Controls/DynamicList/DynamicList.test.ts
+
+src/Explorer/Controls/Editor/EditorComponent.ts
 src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts
 src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
 src/Explorer/DataSamples/ContainerSampleGenerator.ts
@@ -101,7 +104,7 @@ src/Explorer/Tabs/MongoDocumentsTab.ts
 src/Explorer/Tabs/NotebookV2Tab.ts
 src/Explorer/Tabs/ScriptTabBase.ts
 src/Explorer/Tabs/TabComponents.ts
-src/Explorer/Tabs/TabsBase.ts
+# src/Explorer/Tabs/TabsBase.ts
 src/Explorer/Tabs/TriggerTab.ts
 src/Explorer/Tabs/UserDefinedFunctionTab.ts
 src/Explorer/Tree/AccessibleVerticalList.ts
@@ -129,7 +132,7 @@ src/Shared/DefaultExperienceUtility.ts
 src/Shared/appInsights.ts
 src/SparkClusterManager/ArcadiaResourceManager.ts
 src/SparkClusterManager/SparkClusterManager.ts
-src/Terminal/JupyterLabAppFactory.ts
+# src/Terminal/JupyterLabAppFactory.ts
 src/Terminal/NotebookAppContracts.d.ts
 src/applyExplorerBindings.ts
 src/global.d.ts
@@ -149,11 +152,14 @@ src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.tsx
 src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
+src/Explorer/Notebook/NotebookComponent/NotebookComponentAdapter.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx
+src/Explorer/Notebook/NotebookComponent/VirtualCommandBarComponent.tsx
 src/Explorer/Notebook/NotebookComponent/contents/index.tsx
 src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx
 src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx
 src/Explorer/Notebook/NotebookRenderer/decorators/draggable/index.tsx
+src/Explorer/Notebook/NotebookRenderer/decorators/hijack-scroll/index.tsx
 src/Explorer/Notebook/NotebookRenderer/decorators/kbd-shortcuts/index.tsx
 src/Explorer/Notebook/temp/inputs/connected-editors/codemirror.tsx
 src/Explorer/Tree/ResourceTreeAdapter.tsx

jest.config.js

@@ -37,8 +37,8 @@ module.exports = {
     global: {
       branches: 25,
       functions: 25,
-      lines: 29.5,
-      statements: 29.5,
+      lines: 29,
+      statements: 29,
     },
   },
 

src/Common/Splitter.ts

@@ -35,11 +35,8 @@ export class Splitter {
     this.initialize();
   }
 
-  public initialize(): void {
-    if (
-      document.getElementById(this.splitterId) !== undefined &&
-      document.getElementById(this.leftSideId) !== undefined
-    ) {
+  public initialize() {
+    if (document.getElementById(this.splitterId) !== null && document.getElementById(this.leftSideId) != null) {
       this.splitter = <HTMLElement>document.getElementById(this.splitterId);
       this.leftSide = <HTMLElement>document.getElementById(this.leftSideId);
     }

src/Explorer/Controls/Editor/EditorComponent.ts

@@ -5,7 +5,6 @@ import template from "./editor-component.html";
 /**
  * Helper class for ko component registration
  */
-//eslint-disable-next-line
 export class EditorComponent {
   constructor() {
     return {
@@ -39,7 +38,7 @@ class EditorViewModel extends JsonEditorViewModel {
      * setTimeout is needed as creating the edtior manipulates the dom directly and expects
      * Knockout to have completed all of the initial bindings for the component
      */
-    this.params.content() !== undefined &&
+    this.params.content() != null &&
       setTimeout(() => {
         this.createEditor(this.params.content(), this.configureEditor.bind(this));
       });

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -307,11 +307,18 @@ function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonCo
 
 function createNewDatabase(container: Explorer): CommandButtonComponentProps {
   const label = "New " + getDatabaseName();
+  const newDatabaseButton = document.activeElement as HTMLElement;
+
   return {
     iconSrc: AddDatabaseIcon,
     iconAlt: label,
     onCommandClick: () =>
-      useSidePanel.getState().openSidePanel("New " + getDatabaseName(), <AddDatabasePanel explorer={container} />),
+      useSidePanel
+        .getState()
+        .openSidePanel(
+          "New " + getDatabaseName(),
+          <AddDatabasePanel explorer={container} buttonElement={newDatabaseButton} />
+        ),
     commandButtonLabel: label,
     ariaLabel: label,
     hasPopup: true,

src/Explorer/Notebook/NotebookComponent/NotebookComponentAdapter.tsx

@@ -16,7 +16,7 @@ export interface NotebookComponentAdapterOptions {
 
 export class NotebookComponentAdapter extends NotebookComponentBootstrapper implements ReactAdapter {
   private onUpdateKernelInfo: () => void;
-  public parameters: undefined;
+  public parameters: any;
 
   constructor(options: NotebookComponentAdapterOptions) {
     super({

src/Explorer/Notebook/NotebookComponent/VirtualCommandBarComponent.tsx

@@ -46,9 +46,7 @@ const makeMapStateToProps = (
   const { contentRef } = initialProps;
   const mapStateToProps = (state: AppState) => {
     const content = selectors.content(state, { contentRef });
-    let kernelStatus,
-      kernelSpecName,
-      currentCellType = "";
+    let kernelStatus, kernelSpecName, currentCellType;
 
     if (!content || content.type !== "notebook") {
       return {

src/Explorer/Notebook/NotebookRenderer/decorators/hijack-scroll/index.tsx

@@ -1,5 +1,5 @@
-// /* eslint jsx-a11y/no-static-element-interactions: 0 */
-// /* eslint jsx-a11y/click-events-have-key-events: 0 */
+/* eslint jsx-a11y/no-static-element-interactions: 0 */
+/* eslint jsx-a11y/click-events-have-key-events: 0 */
 
 import { actions, AppState, ContentRef, selectors } from "@nteract/core";
 import React from "react";
@@ -23,7 +23,7 @@ interface DispatchProps {
 type Props = ComponentProps & DispatchProps & StateProps;
 
 export class HijackScroll extends React.Component<Props> {
-  el: HTMLDivElement | null | undefined = undefined;
+  el: HTMLDivElement | null = null;
 
   scrollIntoViewIfNeeded(prevFocused?: boolean): void {
     // Check if the element is being hovered over.
@@ -38,7 +38,6 @@ export class HijackScroll extends React.Component<Props> {
     ) {
       if (this.el && "scrollIntoViewIfNeeded" in this.el) {
         // This is only valid in Chrome, WebKit
-        //eslint-disable-next-line
         (this.el as any).scrollIntoViewIfNeeded();
       } else if (this.el) {
         // Make a best guess effort for older platforms
@@ -47,7 +46,7 @@ export class HijackScroll extends React.Component<Props> {
     }
   }
 
-  componentDidUpdate(prevProps: Props): void {
+  componentDidUpdate(prevProps: Props) {
     this.scrollIntoViewIfNeeded(prevProps.focused);
   }
 
@@ -55,7 +54,7 @@ export class HijackScroll extends React.Component<Props> {
     this.scrollIntoViewIfNeeded();
   }
 
-  render(): JSX.Element {
+  render() {
     return (
       <div
         onClick={this.props.selectCell}

src/Explorer/Tabs/Tabs.tsx

@@ -44,7 +44,7 @@ function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
       onMouseOver={() => setHovering(true)}
       onMouseLeave={() => setHovering(false)}
       onClick={() => tab.onTabClick()}
-      onKeyPress={({ nativeEvent: e }) => tab.onKeyPressActivate(undefined, e)}
+      onKeyPress={({ nativeEvent: e }) => tab.onKeyPressActivate(e)}
       className={active ? "active tabList" : "tabList"}
       title={useObservable(tab.tabPath)}
       aria-selected={active}
@@ -83,7 +83,7 @@ const CloseButton = ({ tab, active, hovering }: { tab: Tab; active: boolean; hov
     className="cancelButton"
     onClick={() => tab.onCloseTabButtonClick()}
     tabIndex={active ? 0 : undefined}
-    onKeyPress={({ nativeEvent: e }) => tab.onKeyPressClose(undefined, e)}
+    onKeyPress={({ nativeEvent: e }) => tab.onKeyPressClose(e)}
   >
     <span className="tabIcon close-Icon">
       <img src={errorIcon} title="Close" alt="Close" />
@@ -98,8 +98,8 @@ const ErrorIcon = ({ tab, active }: { tab: Tab; active: boolean }) => (
     title="Click to view more details"
     tabIndex={active ? 0 : undefined}
     className={active ? "actionsEnabled errorIconContainer" : "errorIconContainer"}
-    onClick={({ nativeEvent: e }) => tab.onErrorDetailsClick(undefined, e)}
-    onKeyPress={({ nativeEvent: e }) => tab.onErrorDetailsKeyPress(undefined, e)}
+    onClick={() => tab.onErrorDetailsClick()}
+    onKeyPress={({ nativeEvent: e }) => tab.onErrorDetailsKeyPress(e)}
   >
     <span className="errorIcon" />
   </div>

src/Explorer/Tabs/TabsBase.ts

@@ -94,11 +94,11 @@ export default class TabsBase extends WaitsForTemplateViewModel {
     return true;
   }
 
-  public onKeyPressActivate = (source: any, event: KeyboardEvent): boolean => {
+  public onKeyPressActivate = (event: KeyboardEvent): boolean => {
     return this.onSpaceOrEnterKeyPress(event, () => this.onTabClick());
   };
 
-  public onKeyPressClose = (source: any, event: KeyboardEvent): boolean => {
+  public onKeyPressClose = (event: KeyboardEvent): boolean => {
     return this.onSpaceOrEnterKeyPress(event, () => this.onCloseTabButtonClick());
   };
 
@@ -120,22 +120,22 @@ export default class TabsBase extends WaitsForTemplateViewModel {
     });
   }
 
-  public onErrorDetailsClick = (src: any, event: MouseEvent): boolean => {
+  public onErrorDetailsClick = (): boolean => {
     useNotificationConsole.getState().expandConsole();
     useNotificationConsole.getState().expandConsole();
     return false;
   };
 
-  public onErrorDetailsKeyPress = (src: any, event: KeyboardEvent): boolean => {
+  public onErrorDetailsKeyPress = (event: KeyboardEvent): boolean => {
     if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
-      this.onErrorDetailsClick(src, null);
+      this.onErrorDetailsClick();
       return false;
     }
 
     return true;
   };
 
-  public refresh() {
+  public refresh(): void {
     location.reload();
   }
 
@@ -144,6 +144,7 @@ export default class TabsBase extends WaitsForTemplateViewModel {
   }
 
   /** Renders a Javascript object to be displayed inside Monaco Editor */
+  //eslint-disable-next-line
   public renderObjectForEditor(value: any, replacer: any, space: string | number): string {
     return JSON.stringify(value, replacer, space);
   }

src/Terminal/JupyterLabAppFactory.ts

@@ -5,6 +5,7 @@ import { ServerConnection, TerminalManager } from "@jupyterlab/services";
 import { Terminal } from "@jupyterlab/terminal";
 import { Panel, Widget } from "@phosphor/widgets";
 
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
 export class JupyterLabAppFactory {
   public static async createTerminalApp(serverSettings: ServerConnection.ISettings) {
     const manager = new TerminalManager({
@@ -21,8 +22,8 @@ export class JupyterLabAppFactory {
     term.title.closable = false;
     term.addClass("terminalWidget");
 
-    let panel = new Panel();
-    panel.addWidget(term as any);
+    const panel = new Panel();
+    panel.addWidget((term as unknown) as Widget);
     panel.id = "main";
 
     // Attach the widget to the dom.

src/Utils/GalleryUtils.test.ts

@@ -30,7 +30,7 @@ describe("GalleryUtils", () => {
   });
 
   it("downloadItem shows dialog in data explorer", () => {
-    const container = {} as Explorer;
+    const container = new Explorer();
     GalleryUtils.downloadItem(container, undefined, galleryItem, undefined);
 
     expect(useDialog.getState().visible).toBe(true);

src/hooks/useTabs.ts

@@ -69,7 +69,11 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
     if (tab.tabId === activeTab.tabId && tabIndex !== -1) {
       const tabToTheRight = updatedTabs[tabIndex];
       const lastOpenTab = updatedTabs[updatedTabs.length - 1];
-      set({ activeTab: tabToTheRight || lastOpenTab });
+      const newActiveTab = tabToTheRight ?? lastOpenTab;
+      set({ activeTab: newActiveTab });
+      if (newActiveTab) {
+        newActiveTab.onActivate();
+      }
     }
 
     set({ openedTabs: updatedTabs });