Mergedcode

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

@@ -42,6 +42,7 @@ interface AddTableEntityPanelProps {
   tableEntityListViewModel: TableEntityListViewModel;
   cassandraApiClient: CassandraAPIDataClient;
   reloadEntities: () => void;
+  headerItems: string[];
 }
 
 interface EntityRowType {
@@ -62,6 +63,7 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
   tableEntityListViewModel,
   cassandraApiClient,
   reloadEntities,
+  headerItems,
 }: AddTableEntityPanelProps): JSX.Element => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   const [entities, setEntities] = useState<EntityRowType[]>([]);
@@ -81,7 +83,7 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
   }, []);
 
   const getDefaultEntitiesAttribute = async (): Promise<void> => {
-    let headers = tableEntityListViewModel.headers;
+    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

@@ -166,6 +166,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
       currentStartIndex: PAGESIZE,
       fromDocument: 0,
       toDocument: PAGESIZE,
+      selectedItem: 0,
     };
 
     this.state.tableEntityListViewModel.queryTablesTab = this.props.queryTablesTab;
@@ -218,10 +219,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
     let selectedItems: Entities.ITableEntity[];
     const { selection } = this.state;
     isFirstItemSelected && selection.setIndexSelected(0, true, false);
-    console.log(
+    this.setState({ selectedItem: selection.getSelectedIndices()?.[0] });
-      "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 254 ~ QueryTablesTabComponent ~ selection.getSelection().length",
-      selection.getSelection().length
-    );
     if (selection.getSelection().length > 0) {
       Object.keys(this.state.selection.getSelection()[0]).map((key, index) => {
         if (key === documentKey) {
@@ -316,18 +314,22 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
         // }, 0);
         // const data = await tableEntityListViewModel.a();
         if (userContext.apiType === "Cassandra") {
-          console.log(
+          // console.log(
-            "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 311 ~ QueryTablesTabComponent ~ loadEntities ~ data",
+          //   "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 311 ~ QueryTablesTabComponent ~ loadEntities ~ data",
-            documents.Results
+          //   documents.Results
-          );
+          // );
-          headers = this.getFormattedHeaders(documents.Results);
+          headers = documents.Results?.length
+            ? this.getFormattedHeaders(documents.Results)
+            : ["userid", "name", "email"];
           this.setupIntialEntities(headers, documents.Results, isInitialLoad);
         } else {
-          console.log(
+          // console.log(
-            "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 311 ~ QueryTablesTabComponent ~ loadEntities ~ data",
+          //   "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 311 ~ QueryTablesTabComponent ~ loadEntities ~ data",
-            documents
+          //   documents
-          );
+          // );
-          headers = this.getFormattedHeaders(documents);
+          headers = documents.Results?.length
+            ? this.getFormattedHeaders(documents.Results)
+            : ["RowKey", "PartitionKey", "Timestamp"];
           this.setupIntialEntities(headers, documents, isInitialLoad);
         }
         // this.isEntitiesAvailable(isInitialLoad, data);
@@ -346,17 +348,22 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
             selectedQueryText,
             true
           );
-          headers = this.getFormattedHeaders(documents.Results);
+          headers = documents.Results?.length
+            ? this.getFormattedHeaders(documents.Results)
+            : ["userid", "name", "email"];
           this.setupIntialEntities(headers, documents.Results, isInitialLoad);
         } else {
           const { collection } = this.props;
           documents = await this.getDocuments(collection, selectedQueryText);
-          headers = this.getFormattedHeaders(documents.Results);
+          headers = documents.Results?.length
+            ? this.getFormattedHeaders(documents.Results)
+            : ["RowKey", "PartitionKey", "Timestamp"];
           this.setupIntialEntities(headers, documents.Results, isInitialLoad);
         }
         this.setState({
           queryErrorMessage: "",
           hasQueryError: false,
+          isLoading: false,
         });
       } catch (error) {
         this.setState({
@@ -378,6 +385,8 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
     let documentItems: IDocument[] = [];
     let filteredItems: IDocument[] = [];
     this.columns = [];
+    const { queryTableRows } = this.state;
+
     headers.map((header) => {
       switch (header) {
         case "PartitionKey":
@@ -415,6 +424,13 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
     documentItems = this.generateDetailsList(entities);
     filteredItems = documentItems.slice(0, PAGESIZE);
 
+    const queryTableRowsClone = [...queryTableRows];
+    const updatedQueryTableRows = queryTableRowsClone.map((queryTableRow) => {
+      const queryTableRowClone = { ...queryTableRow };
+      queryTableRowClone.fieldOptions = getformattedOptions(headers);
+      return queryTableRowClone;
+    });
+
     this.setState(
       {
         columns: this.columns,
@@ -428,6 +444,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
         fromDocument: 0,
         toDocument: PAGESIZE,
         currentStartIndex: PAGESIZE,
+        queryTableRows: updatedQueryTableRows,
       },
       () => {
         if (isInitialLoad && headers.length > 0) {
@@ -548,6 +565,9 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
     this.setState({
       isLoading: true,
     });
+
+    const { selection, selectedItem } = this.state;
+    selection.setIndexSelected(selectedItem, false, false);
     this.loadEntities(false, false);
   }
 
@@ -557,6 +577,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
       .openSidePanel(
         "Add Table Entity",
         <AddTableEntityPanel
+          headerItems={this.state.headers}
           tableDataClient={this.tableDataClient}
           queryTablesTab={this.props.queryTablesTab}
           tableEntityListViewModel={this.state.tableEntityListViewModel}
@@ -619,10 +640,10 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
       selectedQueryText: this.state.queryViewModel.runQuery(queryTableRows),
     });
     setTimeout(() => {
-      console.log(
+      // console.log(
-        "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 651 ~ QueryTablesTabComponent ~ runQuery ~ selectedQueryText",
+      //   "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 651 ~ QueryTablesTabComponent ~ runQuery ~ selectedQueryText",
-        this.state.selectedQueryText
+      //   this.state.selectedQueryText
-      );
+      // );
       this.loadEntities(false, queryTableRows.length > 0 ? true : false);
     }, 2000);
     this.setState({