Merge branch 'master' of https://github.com/Azure/cosmos-explorer into eslint/NotebookV2Tab-ScriptTabBase-TabComponents

.eslintignore

@@ -87,16 +87,13 @@ src/Explorer/Tables/QueryBuilder/CustomTimestampHelper.ts
 src/Explorer/Tables/TableDataClient.ts
 src/Explorer/Tables/TableEntityProcessor.ts
 src/Explorer/Tables/Utilities.ts
+src/Explorer/Tabs/ConflictsTab.ts
 src/Explorer/Tabs/DatabaseSettingsTab.ts
 src/Explorer/Tabs/DocumentsTab.test.ts
 src/Explorer/Tabs/DocumentsTab.ts
 src/Explorer/Tabs/GraphTab.ts
 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/TriggerTab.ts
 src/Explorer/Tabs/UserDefinedFunctionTab.ts
 src/Explorer/Tree/AccessibleVerticalList.ts
 src/Explorer/Tree/Collection.ts

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/Panes/AddDatabasePanel/AddDatabasePanel.tsx

@@ -23,10 +23,12 @@ import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneFor
 
 export interface AddDatabasePaneProps {
   explorer: Explorer;
+  buttonElement?: HTMLElement;
 }
 
 export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
   explorer: container,
+  buttonElement,
 }: AddDatabasePaneProps) => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   let throughput: number;
@@ -77,6 +79,7 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
       dataExplorerArea: Constants.Areas.ContextualPane,
     };
     TelemetryProcessor.trace(Action.CreateDatabase, ActionModifiers.Open, addDatabasePaneOpenMessage);
+    buttonElement.focus();
   }, []);
 
   const onSubmit = () => {

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -307,16 +307,23 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         iconSrc: AddDatabaseIcon,
         title: "New " + getDatabaseName(),
         description: undefined,
-        onClick: () =>
+        onClick: () => this.openAddDatabasePanel(),
-          useSidePanel
-            .getState()
-            .openSidePanel("New " + getDatabaseName(), <AddDatabasePanel explorer={this.container} />),
       });
     }
 
     return items;
   }
 
+  private openAddDatabasePanel() {
+    const newDatabaseButton = document.activeElement as HTMLElement;
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "New " + getDatabaseName(),
+        <AddDatabasePanel explorer={this.container} buttonElement={newDatabaseButton} />
+      );
+  }
+
   private decorateOpenCollectionActivity({ databaseId, collectionId }: MostRecentActivity.OpenCollectionItem) {
     return {
       iconSrc: NotebookIcon,

src/Explorer/Tables/TableDataClient.ts

@@ -202,21 +202,14 @@ export class CassandraAPIDataClient extends TableDataClient {
 
       let updateQuery = `UPDATE ${collection.databaseId}.${collection.id()}`;
       let isPropertyUpdated = false;
-      let isFirstPropertyToUpdate = true;
       for (let property in newEntity) {
         if (
           !originalDocument[property] ||
           newEntity[property]._.toString() !== originalDocument[property]._.toString()
         ) {
-          let propertyQuerySegment = this.isStringType(newEntity[property].$)
+          updateQuery += this.isStringType(newEntity[property].$)
-            ? `${property} = '${newEntity[property]._}',`
+            ? ` SET ${property} = '${newEntity[property]._}',`
-            : `${property} = ${newEntity[property]._},`;
+            : ` SET ${property} = ${newEntity[property]._},`;
-          // Only add the "SET" keyword once
-          if (isFirstPropertyToUpdate) {
-            propertyQuerySegment = " SET " + propertyQuerySegment;
-            isFirstPropertyToUpdate = false;
-          }
-          updateQuery += propertyQuerySegment;
           isPropertyUpdated = true;
         }
       }

src/Explorer/Tabs/ConflictsTab.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/switch-exhaustiveness-check */
 import { ConflictDefinition, FeedOptions, QueryIterator, Resource } from "@azure/cosmos";
 import * as ko from "knockout";
 import Q from "q";
@@ -71,13 +69,13 @@ export default class ConflictsTab extends TabsBase {
       ViewModels.DocumentExplorerState.noDocumentSelected
     );
     this.selectedConflictId = ko.observable<ConflictId>();
-    this.selectedConflictContent = editable.observable<string>("");
+    this.selectedConflictContent = editable.observable<any>("");
-    this.selectedConflictCurrent = editable.observable<string>("");
+    this.selectedConflictCurrent = editable.observable<any>("");
     this.partitionKey = options.partitionKey || (this.collection && this.collection.partitionKey);
     this.conflictIds = options.conflictIds;
     this.partitionKeyPropertyHeader =
       (this.collection && this.collection.partitionKeyPropertyHeader) || this._getPartitionKeyPropertyHeader();
-    this.partitionKeyProperty = this.partitionKeyPropertyHeader
+    this.partitionKeyProperty = !!this.partitionKeyPropertyHeader
       ? this.partitionKeyPropertyHeader.replace(/[/]+/g, ".").substr(1).replace(/[']+/g, "")
       : null;
 
@@ -189,7 +187,7 @@ export default class ConflictsTab extends TabsBase {
     this.buildCommandBarOptions();
     this.shouldShowDiffEditor = ko.pureComputed<boolean>(() => {
       const documentHasContent: boolean =
-        this.selectedConflictContent() !== null && this.selectedConflictContent().length > 0;
+        this.selectedConflictContent() != null && this.selectedConflictContent().length > 0;
       const operationIsReplace: boolean = this.conflictOperation() === Constants.ConflictOperationType.Replace;
       const isLoadingData: boolean = this.loadingConflictData();
       return documentHasContent && operationIsReplace && !isLoadingData;
@@ -197,7 +195,7 @@ export default class ConflictsTab extends TabsBase {
 
     this.shouldShowEditor = ko.pureComputed<boolean>(() => {
       const documentHasContent: boolean =
-        this.selectedConflictContent() !== null && this.selectedConflictContent().length > 0;
+        this.selectedConflictContent() != null && this.selectedConflictContent().length > 0;
       const operationIsInsert: boolean = this.conflictOperation() === Constants.ConflictOperationType.Create;
       const operationIsDelete: boolean = this.conflictOperation() === Constants.ConflictOperationType.Delete;
       const isLoadingData: boolean = this.loadingConflictData();
@@ -244,7 +242,7 @@ export default class ConflictsTab extends TabsBase {
     return true;
   };
 
-  public onConflictIdClick(): Q.Promise<unknown> {
+  public onConflictIdClick(clickedDocumentId: ConflictId): Q.Promise<any> {
     if (this.editorState() !== ViewModels.DocumentExplorerState.noDocumentSelected) {
       return Q();
     }
@@ -407,19 +405,19 @@ export default class ConflictsTab extends TabsBase {
     }
   };
 
-  public onDiscardClick = (): Q.Promise<unknown> => {
+  public onDiscardClick = (): Q.Promise<any> => {
     this.selectedConflictContent(this.selectedConflictContent.getEditableOriginalValue());
     this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
 
     return Q();
   };
 
-  public onValidDocumentEdit(): Q.Promise<unknown> {
+  public onValidDocumentEdit(): Q.Promise<any> {
     this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid);
     return Q();
   }
 
-  public onInvalidDocumentEdit(): Q.Promise<unknown> {
+  public onInvalidDocumentEdit(): Q.Promise<any> {
     if (
       this.editorState() === ViewModels.DocumentExplorerState.exisitingDocumentNoEdits ||
       this.editorState() === ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid
@@ -444,7 +442,7 @@ export default class ConflictsTab extends TabsBase {
         this._documentsIterator = await this.createIterator();
         await this.loadNextPage();
       } catch (error) {
-        if (this.onLoadStartKey !== null && this.onLoadStartKey !== undefined) {
+        if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
           TelemetryProcessor.traceFailure(
             Action.Tab,
             {
@@ -473,7 +471,7 @@ export default class ConflictsTab extends TabsBase {
     return queryConflicts(this.collection.databaseId, this.collection.id(), query, options as FeedOptions);
   }
 
-  public loadNextPage(): Q.Promise<unknown> {
+  public loadNextPage(): Q.Promise<any> {
     this.isExecuting(true);
     this.isExecutionError(false);
     return this._loadNextPageInternal()
@@ -493,7 +491,7 @@ export default class ConflictsTab extends TabsBase {
 
           const merged = currentConflicts.concat(nextConflictIds);
           this.conflictIds(merged);
-          if (this.onLoadStartKey !== null && this.onLoadStartKey !== undefined) {
+          if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
             TelemetryProcessor.traceSuccess(
               Action.Tab,
               {
@@ -510,7 +508,7 @@ export default class ConflictsTab extends TabsBase {
         },
         (error) => {
           this.isExecutionError(true);
-          if (this.onLoadStartKey !== null && this.onLoadStartKey !== undefined) {
+          if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
             TelemetryProcessor.traceFailure(
               Action.Tab,
               {
@@ -543,18 +541,18 @@ export default class ConflictsTab extends TabsBase {
     return Q(this._documentsIterator.fetchNext().then((response) => response.resources));
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  protected _onEditorContentChange(newContent: string) {
-  protected _onEditorContentChange(_newContent: string) {
     try {
+      const parsed: any = JSON.parse(newContent);
       this.onValidDocumentEdit();
     } catch (e) {
       this.onInvalidDocumentEdit();
     }
   }
 
-  public initDocumentEditorForCreate(documentId: ConflictId, documentToInsert: any): Q.Promise<unknown> {
+  public initDocumentEditorForCreate(documentId: ConflictId, documentToInsert: any): Q.Promise<any> {
     if (documentId) {
-      const parsedConflictContent: any = JSON.parse(documentToInsert);
+      let parsedConflictContent: any = JSON.parse(documentToInsert);
       const renderedConflictContent: string = this.renderObjectForEditor(parsedConflictContent, null, 4);
       this.selectedConflictContent.setBaseline(renderedConflictContent);
       this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
@@ -567,7 +565,7 @@ export default class ConflictsTab extends TabsBase {
     documentId: ConflictId,
     conflictContent: any,
     currentContent: any
-  ): Q.Promise<unknown> {
+  ): Q.Promise<any> {
     if (documentId) {
       currentContent = ConflictsTab.removeSystemProperties(currentContent);
       const renderedCurrentContent: string = this.renderObjectForEditor(currentContent, null, 4);
@@ -584,7 +582,7 @@ export default class ConflictsTab extends TabsBase {
     return Q();
   }
 
-  public initDocumentEditorForDelete(documentId: ConflictId, documentToDelete: any): Q.Promise<unknown> {
+  public initDocumentEditorForDelete(documentId: ConflictId, documentToDelete: any): Q.Promise<any> {
     if (documentId) {
       let parsedDocumentToDelete: any = JSON.parse(documentToDelete);
       parsedDocumentToDelete = ConflictsTab.removeSystemProperties(parsedDocumentToDelete);
@@ -596,8 +594,7 @@ export default class ConflictsTab extends TabsBase {
     return Q();
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public initDocumentEditorForNoOp(documentId: ConflictId): Q.Promise<any> {
-  public initDocumentEditorForNoOp(_documentId: ConflictId): Q.Promise<unknown> {
     this.selectedConflictContent(null);
     this.selectedConflictCurrent(null);
     this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);

src/Explorer/Tabs/NotebookV2Tab.ts

@@ -54,7 +54,7 @@ export default class NotebookTabV2 extends NotebookTabBase {
     });
   }
 
-  public onCloseTabButtonClick(): Q.Promise<any> {
+  public onCloseTabButtonClick(): Q.Promise<void> {
     const cleanup = () => {
       this.notebookComponentAdapter.notebookShutdown();
       super.onCloseTabButtonClick();
@@ -78,7 +78,7 @@ export default class NotebookTabV2 extends NotebookTabBase {
     }
   }
 
-  public async reconfigureServiceEndpoints() {
+  public async reconfigureServiceEndpoints(): Promise<void> {
     if (!this.notebookComponentAdapter) {
       return;
     }
@@ -136,7 +136,7 @@ export default class NotebookTabV2 extends NotebookTabBase {
       ariaLabel: publishLabel,
     });
 
-    let buttons: CommandButtonComponentProps[] = [
+    const buttons: CommandButtonComponentProps[] = [
       {
         iconSrc: SaveIcon,
         iconAlt: saveLabel,
@@ -160,7 +160,7 @@ export default class NotebookTabV2 extends NotebookTabBase {
       {
         iconSrc: null,
         iconAlt: kernelLabel,
-        onCommandClick: () => {},
+        onCommandClick: () => undefined,
         commandButtonLabel: null,
         hasPopup: false,
         disabled: availableKernels.length < 1,
@@ -271,7 +271,7 @@ export default class NotebookTabV2 extends NotebookTabBase {
       {
         iconSrc: null,
         iconAlt: null,
-        onCommandClick: () => {},
+        onCommandClick: () => undefined,
         commandButtonLabel: null,
         ariaLabel: cellTypeLabel,
         hasPopup: false,
@@ -361,7 +361,7 @@ export default class NotebookTabV2 extends NotebookTabBase {
   }
 
   private onKernelUpdate = async () => {
-    await this.configureServiceEndpoints(this.notebookComponentAdapter.getCurrentKernelName()).catch((reason) => {
+    await this.configureServiceEndpoints(this.notebookComponentAdapter.getCurrentKernelName()).catch(() => {
       /* Erroring is ok here */
     });
     this.updateNavbarWithTabsButtons();

src/Explorer/Tabs/ScriptTabBase.ts

@@ -25,11 +25,12 @@ export default abstract class ScriptTabBase extends TabsBase implements ViewMode
   public errors: ko.ObservableArray<ViewModels.QueryError>;
   public statusMessge: ko.Observable<string>;
   public statusIcon: ko.Observable<string>;
-  public formFields: ko.ObservableArray<ViewModels.Editable<any>>;
+  public formFields: ko.ObservableArray<ViewModels.Editable<unknown>>;
   public formIsValid: ko.Computed<boolean>;
   public formIsDirty: ko.Computed<boolean>;
   public isNew: ko.Observable<boolean>;
   // TODO: Remove any. The SDK types for all the script.body are slightly incorrect which makes this REALLY hard to type correct.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public resource: ko.Observable<any>;
   public isTemplateReady: ko.Observable<boolean>;
   protected _partitionKey: DataModels.PartitionKey;
@@ -85,7 +86,6 @@ export default abstract class ScriptTabBase extends TabsBase implements ViewMode
             this.editorState(ViewModels.ScriptEditorState.exisitingDirtyInvalid);
           }
           break;
-        case ViewModels.ScriptEditorState.exisitingDirtyValid:
         default:
           break;
       }
@@ -182,7 +182,7 @@ export default abstract class ScriptTabBase extends TabsBase implements ViewMode
     this.editorContent.setBaseline(resource.body);
   }
 
-  public setBaselines() {
+  public setBaselines(): void {
     this._setBaselines();
   }
 
@@ -194,9 +194,9 @@ export default abstract class ScriptTabBase extends TabsBase implements ViewMode
   }
 
   public abstract onSaveClick: () => void;
-  public abstract onUpdateClick: () => Promise<any>;
+  public abstract onUpdateClick: () => Promise<void>;
 
-  public onDiscard = (): Q.Promise<any> => {
+  public onDiscard = (): Q.Promise<void> => {
     this.setBaselines();
     const original = this.editorContent.getEditableOriginalValue();
     const editorModel = this.editor() && this.editor().getModel();
@@ -289,7 +289,7 @@ export default abstract class ScriptTabBase extends TabsBase implements ViewMode
     return !!value;
   }
 
-  protected async _createBodyEditor() {
+  protected async _createBodyEditor(): Promise<void> {
     const id = this.editorId;
     const container = document.getElementById(id);
     const options = {
@@ -308,7 +308,7 @@ export default abstract class ScriptTabBase extends TabsBase implements ViewMode
     editorModel.onDidChangeContent(this._onBodyContentChange.bind(this));
   }
 
-  private _onBodyContentChange(e: monaco.editor.IModelContentChangedEvent) {
+  private _onBodyContentChange() {
     const editorModel = this.editor().getModel();
     this.editorContent(editorModel.getValue());
   }