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

.eslintignore

@@ -42,6 +42,8 @@ src/Explorer/Controls/Editor/EditorComponent.ts
 src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts
 src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
 src/Explorer/DataSamples/ContainerSampleGenerator.ts
+src/Explorer/DataSamples/DataSamplesUtil.test.ts
+src/Explorer/DataSamples/DataSamplesUtil.ts
 src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.test.ts
 src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.ts
 src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.test.ts
@@ -52,6 +54,8 @@ src/Explorer/Graph/GraphExplorerComponent/GraphData.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinClient.test.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinClient.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.test.ts
+src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts
+src/Explorer/Menus/ContextMenu.ts
 src/Explorer/MostRecentActivity/MostRecentActivity.ts
 src/Explorer/Notebook/NotebookClientV2.ts
 src/Explorer/Notebook/NotebookComponent/NotebookContentProvider.ts
@@ -60,8 +64,11 @@ src/Explorer/Notebook/NotebookComponent/actions.ts
 src/Explorer/Notebook/NotebookComponent/epics.test.ts
 src/Explorer/Notebook/NotebookComponent/epics.ts
 src/Explorer/Notebook/NotebookComponent/loadTransform.ts
+src/Explorer/Notebook/NotebookComponent/reducers.ts
 src/Explorer/Notebook/NotebookComponent/store.ts
+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/OpenActionsStubs.ts
@@ -86,11 +93,7 @@ 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/DataSamples/DataSamplesUtil.test.ts

@@ -19,7 +19,7 @@ describe("DataSampleUtils", () => {
     const explorer = {} as Explorer;
     useDatabases.getState().addDatabases([database]);
     const dataSamplesUtil = new DataSamplesUtil(explorer);
-    //eslint-disable-next-line
+
     const fakeGenerator = sinon.createStubInstance<ContainerSampleGenerator>(ContainerSampleGenerator as any);
     fakeGenerator.getCollectionId.returns(sampleCollectionId);
     fakeGenerator.getDatabaseId.returns(sampleDatabaseId);

src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts

@@ -18,7 +18,6 @@ export interface GremlinSimpleClientParameters {
 
 export interface Result {
   requestId: string; // Can be null
-  //eslint-disable-next-line
   data: any;
   requestCharge: number; // RU cost
 }
@@ -31,7 +30,6 @@ export interface GremlinRequestMessage {
   args:
     | {
         gremlin: string;
-        //eslint-disable-next-line
         bindings: {};
         language: string;
       }
@@ -56,7 +54,6 @@ export interface GremlinResponseMessage {
     message: string;
   };
   result: {
-    //eslint-disable-next-line
     data: any;
   };
 }
@@ -77,7 +74,7 @@ export class GremlinSimpleClient {
     this.requestsToSend = {};
   }
 
-  public connect(): void {
+  public connect() {
     if (this.ws) {
       if (this.ws.readyState === WebSocket.CONNECTING) {
         // Wait until it connects to execute all requests
@@ -109,10 +106,9 @@ export class GremlinSimpleClient {
     return new WebSocket(endpoint);
   }
 
-  public close(): void {
+  public close() {
     if (this.ws && this.ws.readyState !== WebSocket.CLOSING && this.ws.readyState !== WebSocket.CLOSED) {
       const msg = `Disconnecting from ${this.params.endpoint} as ${this.params.user}`;
-      //eslint-disable-next-line
       console.log(msg);
       if (this.params.infoCallback) {
         this.params.infoCallback(msg);
@@ -147,7 +143,7 @@ export class GremlinSimpleClient {
     }
   }
 
-  public onMessage(msg: MessageEvent): void {
+  public onMessage(msg: MessageEvent) {
     if (!msg) {
       if (this.params.failureCallback) {
         this.params.failureCallback(null, "onMessage called with no message");
@@ -198,10 +194,8 @@ export class GremlinSimpleClient {
         }
         break;
       case 407: // Request authentication
-        {
-          const challengeResponse = this.buildChallengeResponse(this.pendingRequests[requestId]);
-          this.sendGremlinMessage(challengeResponse);
-        }
+        const challengeResponse = this.buildChallengeResponse(this.pendingRequests[requestId]);
+        this.sendGremlinMessage(challengeResponse);
         break;
       case 401: // Unauthorized
         delete this.pendingRequests[requestId];
@@ -273,7 +267,7 @@ export class GremlinSimpleClient {
   }
 
   public buildChallengeResponse(request: GremlinRequestMessage): GremlinRequestMessage {
-    const args = {
+    var args = {
       SASL: GremlinSimpleClient.utf8ToB64("\0" + this.params.user + "\0" + this.params.password),
     };
     return {
@@ -284,9 +278,9 @@ export class GremlinSimpleClient {
     };
   }
 
-  public static utf8ToB64(utf8Str: string): string {
+  public static utf8ToB64(utf8Str: string) {
     return btoa(
-      encodeURIComponent(utf8Str).replace(/%([0-9A-F]{2})/g, (match, p1) => {
+      encodeURIComponent(utf8Str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
         return String.fromCharCode(parseInt(p1, 16));
       })
     );
@@ -297,13 +291,12 @@ export class GremlinSimpleClient {
    * mimeLength + mimeType + serialized message
    * @param requestMessage
    */
-  //eslint-disable-next-line
   public static buildGremlinMessage(requestMessage: {}): Uint8Array {
     const mimeType = "application/json";
-    const serializedMessage = mimeType + JSON.stringify(requestMessage);
+    let serializedMessage = mimeType + JSON.stringify(requestMessage);
     const encodedMessage = new TextEncoder().encode(serializedMessage);
 
-    const binaryMessage = new Uint8Array(1 + encodedMessage.length);
+    let binaryMessage = new Uint8Array(1 + encodedMessage.length);
     binaryMessage[0] = mimeType.length;
 
     for (let i = 0; i < encodedMessage.length; i++) {
@@ -312,19 +305,19 @@ export class GremlinSimpleClient {
     return binaryMessage;
   }
 
-  private onOpen() {
+  private onOpen(event: any) {
     this.executeRequestsToSend();
   }
 
   private executeRequestsToSend() {
-    for (const requestId in this.requestsToSend) {
+    for (let requestId in this.requestsToSend) {
       const request = this.requestsToSend[requestId];
       this.sendGremlinMessage(request);
       this.pendingRequests[request.requestId] = request;
       delete this.requestsToSend[request.requestId];
     }
   }
-  //eslint-disable-next-line
+
   private onError(err: any) {
     if (this.params.failureCallback) {
       this.params.failureCallback(null, err);
@@ -346,9 +339,9 @@ export class GremlinSimpleClient {
    * RFC4122 version 4 compliant UUID
    */
   private static uuidv4() {
-    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-      const r = (Math.random() * 16) | 0,
-        v = c === "x" ? r : (r & 0x3) | 0x8;
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+      var r = (Math.random() * 16) | 0,
+        v = c == "x" ? r : (r & 0x3) | 0x8;
       return v.toString(16);
     });
   }

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/reducers.ts

@@ -50,7 +50,6 @@ export const coreReducer = (state: CoreRecord, action: Action) => {
         .setIn(path.concat("language"), kernelspecs.language);
     }
     default:
-      //eslint-disable-next-line
       return nteractReducers.core(state as any, action as any);
   }
 };

src/Explorer/Notebook/NotebookContentClient.ts

@@ -228,12 +228,11 @@ export class NotebookContentClient {
 
   public async readFileContent(filePath: string): Promise<string> {
     const xhr = await this.contentProvider.get(this.getServerConfig(), filePath, { content: 1 }).toPromise();
-    //eslint-disable-next-line
     const content = (xhr.response as any).content;
     if (!content) {
       throw new Error("No content read");
     }
-    //eslint-disable-next-line
+
     const format = (xhr.response as any).format;
     switch (format) {
       case "text":

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: () =>
-          useSidePanel
-            .getState()
-            .openSidePanel("New " + getDatabaseName(), <AddDatabasePanel explorer={this.container} />),
+        onClick: () => this.openAddDatabasePanel(),
       });
     }
 
     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].$)
-            ? `${property} = '${newEntity[property]._}',`
-            : `${property} = ${newEntity[property]._},`;
-          // Only add the "SET" keyword once
-          if (isFirstPropertyToUpdate) {
-            propertyQuerySegment = " SET " + propertyQuerySegment;
-            isFirstPropertyToUpdate = false;
-          }
-          updateQuery += propertyQuerySegment;
+          updateQuery += this.isStringType(newEntity[property].$)
+            ? ` SET ${property} = '${newEntity[property]._}',`
+            : ` SET ${property} = ${newEntity[property]._},`;
           isPropertyUpdated = true;
         }
       }

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());
   }