update test cases and snapshot

src/Common/TableEntity.tsx

@@ -124,12 +124,12 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
         />
         {!isEntityValueDisable && (
           <TooltipHost content="Edit property" id="editTooltip">
-            <Image {...imageProps} src={EditIcon} alt="editEntity" onClick={onEditEntity} />
+            <Image {...imageProps} src={EditIcon} alt="editEntity" id="editEntity" onClick={onEditEntity} />
           </TooltipHost>
         )}
         {isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (
           <TooltipHost content="Delete property" id="deleteTooltip">
-            <Image {...imageProps} src={DeleteIcon} alt="delete entity" onClick={onDeleteEntity} />
+            <Image {...imageProps} src={DeleteIcon} alt="delete entity" id="deleteEntity" onClick={onDeleteEntity} />
           </TooltipHost>
         )}
       </Stack>

src/Explorer/Panes/Tables/AddTableEntityPanel.test.tsx

@@ -19,6 +19,7 @@ describe("Excute Add Table Entity Pane", () => {
     tableEntityListViewModel: fakeTableEntityListViewModel,
     cassandraApiClient: fakeCassandraApiClient,
     reloadEntities: () => "{}",
+    headerItems: ["email"],
   };
 
   it("should render Default properly", () => {
@@ -28,13 +29,13 @@ describe("Excute Add Table Entity Pane", () => {
 
   it("initially display 4 input field, 2 properties and 2 entity values", () => {
     const wrapper = mount(<AddTableEntityPanel {...props} />);
-    expect(wrapper.find("input[type='text']")).toHaveLength(0);
+    expect(wrapper.find("input[type='text']")).toHaveLength(1);
   });
 
   it("add a new entity row", () => {
     const wrapper = mount(<AddTableEntityPanel {...props} />);
     wrapper.find(".addButtonEntiy").last().simulate("click");
-    expect(wrapper.find("input[type='text']")).toHaveLength(1);
+    expect(wrapper.find("input[type='text']")).toHaveLength(2);
   });
 
   it("remove a entity field", () => {
@@ -42,6 +43,6 @@ describe("Excute Add Table Entity Pane", () => {
     // Since default entity row doesn't have delete option, so added row then delete for test cases.
     wrapper.find(".addButtonEntiy").last().simulate("click");
     wrapper.find("#deleteEntity").last().simulate("click");
-    expect(wrapper.find("input[type='text']")).toHaveLength(0);
+    expect(wrapper.find("input[type='text']")).toHaveLength(1);
   });
 });

src/Explorer/Panes/Tables/AddTableEntityPanel.tsx

@@ -29,7 +29,7 @@ import {
   getDefaultEntities,
   getEntityValuePlaceholder,
   imageProps,
-  options
+  options,
 } from "./Validators/EntityTableHelper";
 
 interface AddTableEntityPanelProps {
@@ -39,7 +39,7 @@ interface AddTableEntityPanelProps {
   tableEntityListViewModel: TableEntityListViewModel;
   cassandraApiClient: CassandraAPIDataClient;
   reloadEntities: () => void;
-  headerItem: string[];
+  headerItems: string[];
 }
 
 interface EntityRowType {
@@ -60,7 +60,7 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
   tableEntityListViewModel,
   cassandraApiClient,
   reloadEntities,
-  headerItem,
+  headerItems,
 }: AddTableEntityPanelProps): JSX.Element => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   const [entities, setEntities] = useState<EntityRowType[]>([]);
@@ -80,7 +80,7 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
   }, []);
 
   const getDefaultEntitiesAttribute = async (): Promise<void> => {
-    let headers = tableEntityListViewModel.headers?.length > 1 ? tableEntityListViewModel.headers : headerItem;
+    let headers = tableEntityListViewModel.headers?.length > 1 ? tableEntityListViewModel.headers : headerItems;
     if (DataTableUtilities.checkForDefaultHeader(headers)) {
       headers = [];
       if (userContext.apiType === "Tables") {

src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx

@@ -70,6 +70,7 @@ export interface IQueryTablesTabComponentStates {
   currentStartIndex: number;
   fromDocument: number;
   toDocument: number;
+  selectedItem: number;
 }
 
 export interface IQueryTableRowsType {

src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx

@@ -10,7 +10,7 @@ import {
   SelectionMode,
   Spinner,
   SpinnerSize,
-  Text
+  Text,
 } from "@fluentui/react";
 import * as ko from "knockout";
 import React, { Component } from "react";
@@ -54,7 +54,7 @@ import {
   IDocument,
   IQueryTableRowsType,
   IQueryTablesTabComponentProps,
-  IQueryTablesTabComponentStates
+  IQueryTablesTabComponentStates,
 } from "./QueryTableTabUtils";
 
 export interface Button {
@@ -114,8 +114,8 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
       selectedQueryText:
         userContext.apiType === "Cassandra"
           ? `SELECT * FROM ${getQuotedCqlIdentifier(
-            this.props.queryTablesTab.collection.databaseId
-          )}.${getQuotedCqlIdentifier(this.props.queryTablesTab.collection.id())}`
+              this.props.queryTablesTab.collection.databaseId
+            )}.${getQuotedCqlIdentifier(this.props.queryTablesTab.collection.id())}`
           : "Select * from c",
       isHelperActive: true,
       executeQueryButton: {
@@ -172,6 +172,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
       currentStartIndex: PAGESIZE,
       fromDocument: 0,
       toDocument: PAGESIZE,
+      selectedItem: 0,
     };
 
     this.state.tableEntityListViewModel.queryTablesTab = this.props.queryTablesTab;
@@ -224,6 +225,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
     let selectedItems: Entities.ITableEntity[];
     const { selection } = this.state;
     isFirstItemSelected && selection.setIndexSelected(0, true, false);
+    this.setState({ selectedItem: selection.getSelectedIndices()?.[0] });
     if (selection.getSelection().length > 0) {
       Object.keys(this.state.selection.getSelection()[0]).map((key, index) => {
         if (key === documentKey) {
@@ -309,12 +311,15 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
       } else {
         const { collection } = this.props;
         documents = await this.getDocuments(collection, selectedQueryText);
-        headers = documents.Results?.length ? this.getFormattedHeaders(documents.Results) : ["RowKey", "PartitionKey", "Timestamp"];
+        headers = documents.Results?.length
+          ? this.getFormattedHeaders(documents.Results)
+          : ["RowKey", "PartitionKey", "Timestamp"];
         this.setupIntialEntities(documents.Results, headers, isInitialLoad);
       }
       this.setState({
         queryErrorMessage: "",
         hasQueryError: false,
+        isLoading: false,
       });
     } catch (error) {
       if (error.responseText) {
@@ -464,6 +469,9 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
     this.setState({
       isLoading: true,
     });
+
+    const { selection, selectedItem } = this.state;
+    selection.setIndexSelected(selectedItem, false, false);
     this.loadEntities(false);
   }
 
@@ -473,7 +481,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
       .openSidePanel(
         "Add Table Entity",
         <AddTableEntityPanel
-          headerItem={this.state.headers}
+          headerItems={this.state.headers}
           tableDataClient={this.tableDataClient}
           queryTablesTab={this.props.queryTablesTab}
           tableEntityListViewModel={this.state.tableEntityListViewModel}