fixed eslint of ConflictsTab

* Revert "Fix keyboard focus does not retain on 'New Database' button after closing the 'New Database' blade via ESC key (#1109)"

This reverts commit f7e7240010.

* Revert "Fix ally database panel open issue (#1120)"

This reverts commit ed1ffb692f.

.eslintignore

@@ -81,17 +81,12 @@ src/Explorer/Tables/DataTable/DataTableBindingManager.ts
 src/Explorer/Tables/DataTable/DataTableBuilder.ts
 src/Explorer/Tables/DataTable/DataTableContextMenu.ts
 src/Explorer/Tables/DataTable/DataTableOperationManager.ts
-# src/Explorer/Tables/DataTable/DataTableOperations.ts
 src/Explorer/Tables/DataTable/DataTableViewModel.ts
-# src/Explorer/Tables/DataTable/TableCommands.ts
-# src/Explorer/Tables/DataTable/TableEntityCache.ts
 src/Explorer/Tables/DataTable/TableEntityListViewModel.ts
-# src/Explorer/Tables/Entities.ts
 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
@@ -134,20 +129,13 @@ src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
 src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
 src/Explorer/Controls/TreeComponent/TreeComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx
-; src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx
-src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx
-src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx
-src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
-src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.test.tsx
 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/Graph/GraphExplorerComponent/LeftPaneComponent.tsx

@@ -58,7 +58,7 @@ export class LeftPaneComponent extends React.Component<LeftPaneComponentProps> {
         className={className}
         as="tr"
         aria-label={node.caption}
-        onActivated={(e) => this.props.onRootNodeSelected(node.id)}
+        onActivated={() => this.props.onRootNodeSelected(node.id)}
         key={node.id}
       >
         <td className="resultItem">

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

@@ -1,8 +1,8 @@
-import React from "react";
 import { mount, ReactWrapper } from "enzyme";
 import * as Q from "q";
-import { NodePropertiesComponent, NodePropertiesComponentProps, Mode } from "./NodePropertiesComponent";
+import React from "react";
-import { GraphHighlightedNodeData, EditedProperties, EditedEdges, PossibleVertex } from "./GraphExplorer";
+import { GraphHighlightedNodeData, PossibleVertex } from "./GraphExplorer";
+import { Mode, NodePropertiesComponent, NodePropertiesComponentProps } from "./NodePropertiesComponent";
 
 describe("Property pane", () => {
   const title = "My Title";
@@ -37,17 +37,18 @@ describe("Property pane", () => {
     return {
       expandedTitle: title,
       isCollapsed: false,
-      onCollapsedChanged: (newValue: boolean): void => {},
+      onCollapsedChanged: jest.fn(),
       node: highlightedNode,
-      getPkIdFromNodeData: (v: GraphHighlightedNodeData): string => null,
+      getPkIdFromNodeData: (): string => undefined,
-      collectionPartitionKeyProperty: null,
+      collectionPartitionKeyProperty: undefined,
-      updateVertexProperties: (editedProperties: EditedProperties): Q.Promise<void> => Q.resolve(),
+      updateVertexProperties: (): Q.Promise<void> => Q.resolve(),
-      selectNode: (id: string): void => {},
+      selectNode: jest.fn(),
-      updatePossibleVertices: (): Q.Promise<PossibleVertex[]> => Q.resolve(null),
+      updatePossibleVertices: (): Q.Promise<PossibleVertex[]> => Q.resolve(undefined),
-      possibleEdgeLabels: null,
+      possibleEdgeLabels: undefined,
-      editGraphEdges: (editedEdges: EditedEdges): Q.Promise<any> => Q.resolve(),
+      //eslint-disable-next-line
-      deleteHighlightedNode: (): void => {},
+      editGraphEdges: (): Q.Promise<any> => Q.resolve(),
-      onModeChanged: (newMode: Mode): void => {},
+      deleteHighlightedNode: jest.fn(),
+      onModeChanged: jest.fn(),
       viewMode: Mode.READONLY_PROP,
     };
   };

src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx

@@ -72,7 +72,7 @@ export class NodePropertiesComponent extends React.Component<
     super(props);
     this.state = {
       editedProperties: {
-        pkId: null,
+        pkId: undefined,
         readOnlyProperties: [],
         existingProperties: [],
         addedProperties: [],
@@ -98,15 +98,12 @@ export class NodePropertiesComponent extends React.Component<
     };
   }
 
-  public static getDerivedStateFromProps(
+  public static getDerivedStateFromProps(props: NodePropertiesComponentProps): Partial<NodePropertiesComponentState> {
-    props: NodePropertiesComponentProps,
-    state: NodePropertiesComponentState
-  ): Partial<NodePropertiesComponentState> {
     if (props.viewMode !== Mode.READONLY_PROP) {
       return { isDeleteConfirm: false };
     }
 
-    return null;
+    return undefined;
   }
 
   public render(): JSX.Element {
@@ -138,10 +135,10 @@ export class NodePropertiesComponent extends React.Component<
    * @param value
    */
   private static getTypeOption(value: any): ViewModels.InputPropertyValueTypeString {
-    if (value == null) {
+    if (value === undefined) {
       return "null";
     }
-    let type = typeof value;
+    const type = typeof value;
     switch (type) {
       case "number":
       case "boolean":
@@ -172,10 +169,9 @@ export class NodePropertiesComponent extends React.Component<
     ];
 
     const existingProps: ViewModels.InputProperty[] = [];
-
     if (this.props.node.hasOwnProperty("properties")) {
       const hProps = this.props.node["properties"];
-      for (let p in hProps) {
+      for (const p in hProps) {
         const propValues = hProps[p];
         (p === partitionKeyProperty ? readOnlyProps : existingProps).push({
           key: p,
@@ -437,7 +433,7 @@ export class NodePropertiesComponent extends React.Component<
         </div>
       );
     } else {
-      return null;
+      return undefined;
     }
   }
 

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -307,18 +307,11 @@ 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
+      useSidePanel.getState().openSidePanel("New " + getDatabaseName(), <AddDatabasePanel explorer={container} />),
-        .getState()
-        .openSidePanel(
-          "New " + getDatabaseName(),
-          <AddDatabasePanel explorer={container} buttonElement={newDatabaseButton} />
-        ),
     commandButtonLabel: label,
     ariaLabel: label,
     hasPopup: true,

src/Explorer/OpenFullScreen.tsx

@@ -4,6 +4,8 @@ import * as React from "react";
 import { useFullScreenURLs } from "../hooks/useFullScreenURLs";
 
 export const OpenFullScreen: React.FunctionComponent = () => {
+  const [isReadUrlCopy, setIsReadUrlCopy] = React.useState<boolean>(false);
+  const [isReadWriteUrlCopy, setIsReadWriteUrlCopy] = React.useState<boolean>(false);
   const result = useFullScreenURLs();
   if (!result) {
     return <Spinner label="Generating URLs..." ariaLive="assertive" labelPosition="right" />;
@@ -25,8 +27,9 @@ export const OpenFullScreen: React.FunctionComponent = () => {
           <DefaultButton
             onClick={() => {
               copyToClipboard(readWriteUrl);
+              setIsReadWriteUrlCopy(true);
             }}
-            text="Copy"
+            text={isReadWriteUrlCopy ? "Copied" : "Copy"}
             iconProps={{ iconName: "Copy" }}
           />
           <PrimaryButton
@@ -41,9 +44,10 @@ export const OpenFullScreen: React.FunctionComponent = () => {
         <Stack horizontal tokens={{ childrenGap: 10 }}>
           <DefaultButton
             onClick={() => {
+              setIsReadUrlCopy(true);
               copyToClipboard(readUrl);
             }}
-            text="Copy"
+            text={isReadUrlCopy ? "Copied" : "Copy"}
             iconProps={{ iconName: "Copy" }}
           />
           <PrimaryButton

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx

@@ -23,12 +23,10 @@ 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;
@@ -79,7 +77,6 @@ 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,23 +307,16 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         iconSrc: AddDatabaseIcon,
         title: "New " + getDatabaseName(),
         description: undefined,
-        onClick: () => this.openAddDatabasePanel(),
+        onClick: () =>
+          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,14 +202,21 @@ 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()
         ) {
-          updateQuery += this.isStringType(newEntity[property].$)
+          let propertyQuerySegment = this.isStringType(newEntity[property].$)
-            ? ` SET ${property} = '${newEntity[property]._}',`
+            ? `${property} = '${newEntity[property]._}',`
-            : ` SET ${property} = ${newEntity[property]._},`;
+            : `${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,3 +1,5 @@
+/* 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";
@@ -69,13 +71,13 @@ export default class ConflictsTab extends TabsBase {
       ViewModels.DocumentExplorerState.noDocumentSelected
     );
     this.selectedConflictId = ko.observable<ConflictId>();
-    this.selectedConflictContent = editable.observable<any>("");
+    this.selectedConflictContent = editable.observable<string>("");
-    this.selectedConflictCurrent = editable.observable<any>("");
+    this.selectedConflictCurrent = editable.observable<string>("");
     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;
 
@@ -187,7 +189,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;
@@ -195,7 +197,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();
@@ -242,7 +244,7 @@ export default class ConflictsTab extends TabsBase {
     return true;
   };
 
-  public onConflictIdClick(clickedDocumentId: ConflictId): Q.Promise<any> {
+  public onConflictIdClick(): Q.Promise<unknown> {
     if (this.editorState() !== ViewModels.DocumentExplorerState.noDocumentSelected) {
       return Q();
     }
@@ -405,19 +407,19 @@ export default class ConflictsTab extends TabsBase {
     }
   };
 
-  public onDiscardClick = (): Q.Promise<any> => {
+  public onDiscardClick = (): Q.Promise<unknown> => {
     this.selectedConflictContent(this.selectedConflictContent.getEditableOriginalValue());
     this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
 
     return Q();
   };
 
-  public onValidDocumentEdit(): Q.Promise<any> {
+  public onValidDocumentEdit(): Q.Promise<unknown> {
     this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid);
     return Q();
   }
 
-  public onInvalidDocumentEdit(): Q.Promise<any> {
+  public onInvalidDocumentEdit(): Q.Promise<unknown> {
     if (
       this.editorState() === ViewModels.DocumentExplorerState.exisitingDocumentNoEdits ||
       this.editorState() === ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid
@@ -442,7 +444,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,
             {
@@ -471,7 +473,7 @@ export default class ConflictsTab extends TabsBase {
     return queryConflicts(this.collection.databaseId, this.collection.id(), query, options as FeedOptions);
   }
 
-  public loadNextPage(): Q.Promise<any> {
+  public loadNextPage(): Q.Promise<unknown> {
     this.isExecuting(true);
     this.isExecutionError(false);
     return this._loadNextPageInternal()
@@ -491,7 +493,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,
               {
@@ -508,7 +510,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,
               {
@@ -541,18 +543,18 @@ export default class ConflictsTab extends TabsBase {
     return Q(this._documentsIterator.fetchNext().then((response) => response.resources));
   }
 
-  protected _onEditorContentChange(newContent: string) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  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<any> {
+  public initDocumentEditorForCreate(documentId: ConflictId, documentToInsert: any): Q.Promise<unknown> {
     if (documentId) {
-      let parsedConflictContent: any = JSON.parse(documentToInsert);
+      const parsedConflictContent: any = JSON.parse(documentToInsert);
       const renderedConflictContent: string = this.renderObjectForEditor(parsedConflictContent, null, 4);
       this.selectedConflictContent.setBaseline(renderedConflictContent);
       this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
@@ -565,7 +567,7 @@ export default class ConflictsTab extends TabsBase {
     documentId: ConflictId,
     conflictContent: any,
     currentContent: any
-  ): Q.Promise<any> {
+  ): Q.Promise<unknown> {
     if (documentId) {
       currentContent = ConflictsTab.removeSystemProperties(currentContent);
       const renderedCurrentContent: string = this.renderObjectForEditor(currentContent, null, 4);
@@ -582,7 +584,7 @@ export default class ConflictsTab extends TabsBase {
     return Q();
   }
 
-  public initDocumentEditorForDelete(documentId: ConflictId, documentToDelete: any): Q.Promise<any> {
+  public initDocumentEditorForDelete(documentId: ConflictId, documentToDelete: any): Q.Promise<unknown> {
     if (documentId) {
       let parsedDocumentToDelete: any = JSON.parse(documentToDelete);
       parsedDocumentToDelete = ConflictsTab.removeSystemProperties(parsedDocumentToDelete);
@@ -594,7 +596,8 @@ export default class ConflictsTab extends TabsBase {
     return Q();
   }
 
-  public initDocumentEditorForNoOp(documentId: ConflictId): Q.Promise<any> {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public initDocumentEditorForNoOp(_documentId: ConflictId): Q.Promise<unknown> {
     this.selectedConflictContent(null);
     this.selectedConflictCurrent(null);
     this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);

src/Explorer/Tabs/NotebookV2Tab.ts

@@ -118,7 +118,7 @@ export default class NotebookTabV2 extends NotebookTabBase {
     const saveButtonChildren = [];
     if (this.container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
       saveButtonChildren.push({
-        iconName: "Copy",
+        iconName: copyToLabel,
         onCommandClick: () => this.copyNotebook(),
         commandButtonLabel: copyToLabel,
         hasPopup: false,