Merge branch 'release' of https://github.com/appsmithorg/appsmith into release

app/client/src/components/designSystems/appsmith/TableActionIcon.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Tooltip } from "@blueprintjs/core";
+import { IconWrapper } from "constants/IconConstants";
+import { Colors } from "constants/Colors";
+import { TableIconWrapper } from "components/designSystems/appsmith/TableStyledWrappers";
+
+interface TableActionIconProps {
+  tooltip: string;
+  selected: boolean;
+  selectMenu: (selected: boolean) => void;
+  className: string;
+  children: React.ReactNode;
+  icon?: React.ReactNode;
+}
+
+const TableActionIcon = (props: TableActionIconProps) => {
+  return (
+    <Tooltip
+      autoFocus={false}
+      hoverOpenDelay={1000}
+      content={props.tooltip}
+      position="top"
+      modifiers={{
+        preventOverflow: { enabled: false },
+        flip: { enabled: false },
+      }}
+    >
+      <TableIconWrapper
+        selected={props.selected}
+        onClick={e => {
+          props.selectMenu(!props.selected);
+          e.stopPropagation();
+        }}
+        className={props.className}
+      >
+        <IconWrapper
+          width={20}
+          height={20}
+          color={props.selected ? Colors.OXFORD_BLUE : Colors.CADET_BLUE}
+        >
+          {props.children}
+        </IconWrapper>
+        {props.icon ? props.icon : null}
+      </TableIconWrapper>
+    </Tooltip>
+  );
+};
+
+export default TableActionIcon;

app/client/src/components/designSystems/appsmith/TableColumnsVisibility.tsx

@@ -5,7 +5,6 @@ import {
   PopoverInteractionKind,
   Position,
   Icon,
-  Tooltip,
 } from "@blueprintjs/core";
 import { IconWrapper } from "constants/IconConstants";
 import styled from "styled-components";
@@ -14,6 +13,7 @@ import { ReactComponent as VisibleIcon } from "assets/icons/control/columns-visi
 import Button from "components/editorComponents/Button";
 import { ReactTableColumnProps } from "widgets/TableWidget";
 import { TableIconWrapper } from "components/designSystems/appsmith/TableStyledWrappers";
+import TableActionIcon from "components/designSystems/appsmith/TableActionIcon";
 
 const DropDownWrapper = styled.div`
   display: flex;
@@ -104,29 +104,18 @@ const TableColumnsVisibility = (props: TableColumnsVisibilityProps) => {
       onClose={() => {
         selectMenu(false);
       }}
+      isOpen={selected}
     >
-      <TableIconWrapper
+      <TableActionIcon
-        selected={selected}
+        tooltip="Hidden Fields"
-        onClick={e => {
-          selectMenu(true);
-        }}
         className="t--table-column-visibility-toggle-btn"
-      >
+        selected={selected}
-        <Tooltip
+        selectMenu={(selected: boolean) => {
-          autoFocus={false}
+          selectMenu(selected);
-          hoverOpenDelay={1000}
+        }}
-          content="Hidden Fields"
-          position="top"
-        >
-          <IconWrapper
-            width={20}
-            height={20}
-            color={selected ? Colors.OXFORD_BLUE : Colors.CADET_BLUE}
       >
         <VisibilityIcon />
-          </IconWrapper>
+      </TableActionIcon>
-        </Tooltip>
-      </TableIconWrapper>
       <DropDownWrapper>
         {columns.map((option: ReactTableColumnProps, index: number) => (
           <OptionWrapper

app/client/src/components/designSystems/appsmith/TableCompactMode.tsx

@@ -4,14 +4,12 @@ import {
   Classes,
   PopoverInteractionKind,
   Position,
-  Tooltip,
 } from "@blueprintjs/core";
-import { IconWrapper } from "constants/IconConstants";
 import styled from "styled-components";
 import { Colors } from "constants/Colors";
 import { ReactComponent as CompactIcon } from "assets/icons/control/compact.svg";
-import { TableIconWrapper } from "components/designSystems/appsmith/TableStyledWrappers";
 import { CompactMode, CompactModeTypes } from "widgets/TableWidget";
+import TableActionIcon from "components/designSystems/appsmith/TableActionIcon";
 
 const DropDownWrapper = styled.div`
   display: flex;
@@ -85,29 +83,18 @@ const TableCompactMode = (props: TableCompactModeProps) => {
       onClose={() => {
         selectMenu(false);
       }}
+      isOpen={selected}
     >
-      <TableIconWrapper
+      <TableActionIcon
+        tooltip="Row Height"
         selected={selected}
-        onClick={e => {
+        selectMenu={(selected: boolean) => {
-          selectMenu(!selected);
+          selectMenu(selected);
         }}
         className="t--table-compact-mode-toggle-btn"
-      >
-        <Tooltip
-          autoFocus={false}
-          hoverOpenDelay={1000}
-          content="Row Height"
-          position="top"
-        >
-          <IconWrapper
-            width={20}
-            height={20}
-            color={selected ? Colors.OXFORD_BLUE : Colors.CADET_BLUE}
       >
         <CompactIcon />
-          </IconWrapper>
+      </TableActionIcon>
-        </Tooltip>
-      </TableIconWrapper>
       <DropDownWrapper>
         {CompactModes.map((item: CompactModeItem, index: number) => {
           return (

app/client/src/components/designSystems/appsmith/TableDataDownload.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { IconWrapper } from "constants/IconConstants";
-import { Tooltip } from "@blueprintjs/core";
 import { Colors } from "constants/Colors";
 import { ReactComponent as DownloadIcon } from "assets/icons/control/download-table.svg";
 import { ReactTableColumnProps } from "widgets/TableWidget";
 import { TableIconWrapper } from "components/designSystems/appsmith/TableStyledWrappers";
+import TableActionIcon from "components/designSystems/appsmith/TableActionIcon";
 import { isString } from "lodash";
 
 interface TableDataDownloadProps {
@@ -83,27 +83,16 @@ const TableDataDownload = (props: TableDataDownloadProps) => {
     );
   }
   return (
-    <TableIconWrapper
+    <TableActionIcon
-      onClick={() => {
+      tooltip="Download"
+      selected={selected}
+      selectMenu={() => {
         downloadTableData();
       }}
       className="t--table-download-btn"
-    >
-      <Tooltip
-        autoFocus={false}
-        hoverOpenDelay={1000}
-        content="Download"
-        position="top"
-      >
-        <IconWrapper
-          width={20}
-          height={20}
-          color={selected ? Colors.OXFORD_BLUE : Colors.CADET_BLUE}
     >
       <DownloadIcon />
-        </IconWrapper>
+    </TableActionIcon>
-      </Tooltip>
-    </TableIconWrapper>
   );
 };
 

app/client/src/components/designSystems/appsmith/TableFilters.tsx

@@ -12,6 +12,7 @@ import { ReactComponent as FilterIcon } from "assets/icons/control/filter-icon.s
 import { TableIconWrapper } from "components/designSystems/appsmith/TableStyledWrappers";
 import Button from "components/editorComponents/Button";
 import CascadeFields from "components/designSystems/appsmith/CascadeFields";
+import TableActionIcon from "components/designSystems/appsmith/TableActionIcon";
 import {
   ReactTableColumnProps,
   Condition,
@@ -164,25 +165,21 @@ const TableFilters = (props: TableFilterProps) => {
       }}
       isOpen={selected}
     >
-      <TableIconWrapper
+      <TableActionIcon
+        tooltip="Filters"
         className="t--table-filter-toggle-btn"
         selected={selected}
-        onClick={e => {
+        icon={
-          selectMenu(true);
+          showAddFilter ? (
-          e.stopPropagation();
+            <SelectedFilterWrapper>{filters.length}</SelectedFilterWrapper>
+          ) : null
+        }
+        selectMenu={(selected: boolean) => {
+          selectMenu(selected);
         }}
-      >
-        <IconWrapper
-          width={20}
-          height={20}
-          color={selected ? Colors.OXFORD_BLUE : Colors.CADET_BLUE}
       >
         <FilterIcon />
-        </IconWrapper>
+      </TableActionIcon>
-        {showAddFilter ? (
-          <SelectedFilterWrapper>{filters.length}</SelectedFilterWrapper>
-        ) : null}
-      </TableIconWrapper>
       <TableFilterOuterWrapper>
         <TableFilerWrapper onClick={e => e.stopPropagation()}>
           {filters.map((filter: ReactTableFilter, index: number) => {

app/client/src/widgets/TableWidget.tsx

@@ -360,9 +360,11 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     );
   }
   componentDidUpdate(prevProps: TableWidgetProps) {
-    if (
+    const tableDataUpdated =
       JSON.stringify(this.props.tableData) !==
-        JSON.stringify(prevProps.tableData) ||
+      JSON.stringify(prevProps.tableData);
+    if (
+      tableDataUpdated ||
       JSON.stringify(this.props.filters) !==
         JSON.stringify(prevProps.filters) ||
       this.props.searchText !== prevProps.searchText ||
@@ -386,6 +388,11 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
         );
       }
     }
+    if (tableDataUpdated) {
+      super.updateWidgetMetaProperty("selectedRowIndices", []);
+      super.updateWidgetMetaProperty("selectedRows", []);
+      super.updateWidgetMetaProperty("selectedRowIndex", -1);
+    }
     if (this.props.multiRowSelection !== prevProps.multiRowSelection) {
       if (this.props.multiRowSelection) {
         const selectedRowIndices = this.props.selectedRowIndex