Fix-Open image in new tab on clicking it in table widget. (#119)

* Added Button component in Table widget for actions

* Action button state loading added for Table widget

* Action button font-weight made as normal

* Created header for common functionalities in Table Widget

* Client side searching added in Table Widget. Action created for server side searching also.

* Columns visibility feature initial commit

* Column visibility list added in Table Widget

* Changed pagination designs in accordance with new layout. This enable user to jump page as well.

* Using colors values from constants

* Table widget pagination, numeric input page number clamped between 1 and total pages

* Adding tool tip to truncated values in table widget. Added AutoToolTipComponent that adds tooltip when text is truncated.

* Table data download changes. Added downlaod icon and button to table widget.

* Table data download changes

* Table button loading state fixed. Table code refactored, rendering from props instead of state in ReactTableComponent

* Table widget action button alignment fixed

* Handled actions column changes

* added proper keys to useMemo for react table widget

* Download table data as CSV implemented

* table data download, unused code removed

* Code refactors and added dependency map with meta props and table data for computing columns

* Table UI breakages on scroll and empty cells fixed

* Handled empty rows in table widget

* Fixed last row cut issue

* Code review changes

* Code review changes

* Added table widget component heights as enum

* code review changes

* Search component in Table widget updated with support for clearing data, renamed properties

* Opening image in new tab on clicking in table widget

* Fixed table craching due to empty data filtering

* Empty extra space on loading removed in table widget

* Removed stopping of event propagation on table widget action button click

* Table header UI overflow fixed

* Clearing selected row on searching data in table widget

* fix for cypress test

Co-authored-by: Arpit Mohan <me@arpitmohan.com>

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

@@ -33,6 +33,7 @@ const SearchComponent = (props: SearchProps) => {
   return (
     <SearchInputWrapper
       leftIcon="search"
+      type="search"
       onChange={handleSearch}
       placeholder={props.placeholder}
       value={value}

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

@@ -11,6 +11,7 @@ export const TableWrapper = styled.div<{ width: number; height: number }>`
   display: flex;
   justify-content: space-between;
   flex-direction: column;
+  overflow: hidden;
   .tableWrap {
     height: 100%;
     display: block;
@@ -22,7 +23,8 @@ export const TableWrapper = styled.div<{ width: number; height: number }>`
     color: ${Colors.BLUE_BAYOUX};
     position: relative;
     overflow-y: auto;
-    height: ${props => props.height - TABLE_SIZES.TABLE_HEADER_HEIGHT}px;
+    /* Subtracting 9px to handling widget padding */
+    height: ${props => props.height - TABLE_SIZES.TABLE_HEADER_HEIGHT - 9}px;
     .thead,
     .tbody {
       overflow: hidden;
@@ -255,6 +257,7 @@ export const TableHeaderWrapper = styled.div`
   align-items: center;
   width: 100%;
   border-bottom: 1px solid ${Colors.GEYSER_LIGHT};
+  min-width: 700px;
 `;
 
 export const CommonFunctionsMenuWrapper = styled.div`

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

@@ -334,11 +334,18 @@ export const renderCell = (
             .map((item: string, index: number) => {
               if (imageRegex.test(item)) {
                 return (
-                  <div
+                  <a
-                    key={index}
+                    onClick={e => e.stopPropagation()}
-                    className="image-cell"
+                    target="_blank"
-                    style={{ backgroundImage: `url("${item}")` }}
+                    rel="noopener noreferrer"
-                  />
+                    href={item}
+                  >
+                    <div
+                      key={index}
+                      className="image-cell"
+                      style={{ backgroundImage: `url("${item}")` }}
+                    />
+                  </a>
                 );
               } else {
                 return <div>Invalid Image</div>;
@@ -401,11 +408,7 @@ const TableAction = (props: {
     setLoading(false);
   };
   return (
-    <ActionWrapper
+    <ActionWrapper>
-      onClick={e => {
-        e.stopPropagation();
-      }}
-    >
       <Button
         loading={loading}
         onClick={() => {

app/client/src/components/propertyControls/StyledControls.tsx

@@ -88,6 +88,7 @@ export const StyledDropDownContainer = styled.div`
         word-break: break-word;
         display: block;
         overflow: auto;
+        overflow-y: hidden;
       }
     }
   }

app/client/src/widgets/TableWidget.tsx

@@ -14,7 +14,7 @@ import {
 } from "components/designSystems/appsmith/TableUtilities";
 import { TABLE_SIZES } from "components/designSystems/appsmith/Table";
 import { VALIDATION_TYPES } from "constants/WidgetValidation";
-import { RenderMode, RenderModes } from "constants/WidgetConstants";
+import { RenderModes } from "constants/WidgetConstants";
 import {
   WidgetPropertyValidationType,
   BASE_WIDGET_VALIDATION,
@@ -33,7 +33,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
       prevPageKey: VALIDATION_TYPES.TEXT,
       label: VALIDATION_TYPES.TEXT,
       selectedRowIndex: VALIDATION_TYPES.NUMBER,
-      searchKey: VALIDATION_TYPES.TEXT,
+      searchKeyword: VALIDATION_TYPES.TEXT,
       // columnActions: VALIDATION_TYPES.ARRAY_ACTION_SELECTOR,
       // onRowSelected: VALIDATION_TYPES.ACTION_SELECTOR,
       // onPageChange: VALIDATION_TYPES.ACTION_SELECTOR,
@@ -50,7 +50,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
       pageNo: 1,
       pageSize: undefined,
       selectedRowIndex: -1,
-      searchKey: "",
+      searchKeyword: "",
     };
   }
 
@@ -58,7 +58,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     return {
       onRowSelected: true,
       onPageChange: true,
-      onSearch: true,
+      onSearchTextChanged: true,
     };
   }
 
@@ -198,9 +198,12 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
   };
 
   searchTableData = (tableData: object[]) => {
+    if (!tableData || !tableData.length) {
+      return [];
+    }
     const searchKey =
-      this.props.searchKey !== undefined
+      this.props.searchKeyword !== undefined
-        ? this.props.searchKey.toString().toUpperCase()
+        ? this.props.searchKeyword.toString().toUpperCase()
         : "";
     return tableData.filter((item: object) => {
       return Object.values(item)
@@ -246,7 +249,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
           isLoading={this.props.isLoading}
           widgetId={this.props.widgetId}
           widgetName={this.props.widgetName}
-          searchKey={this.props.searchKey}
+          searchKey={this.props.searchKeyword}
           renderMode={this.props.renderMode}
           hiddenColumns={hiddenColumns}
           columnActions={this.props.columnActions}
@@ -297,11 +300,12 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
   }
 
   handleSearchTable = (searchKey: any) => {
-    const { onSearch } = this.props;
+    const { onSearchTextChanged } = this.props;
-    super.updateWidgetMetaProperty("searchKey", searchKey);
+    this.resetSelectedRowIndex();
-    if (onSearch) {
+    super.updateWidgetMetaProperty("searchKeyword", searchKey);
+    if (onSearchTextChanged) {
       super.executeAction({
-        dynamicString: onSearch,
+        dynamicString: onSearchTextChanged,
         event: {
           type: EventType.ON_SEARCH,
         },
@@ -381,12 +385,12 @@ export interface TableWidgetProps extends WidgetProps {
   nextPageKey?: string;
   prevPageKey?: string;
   label: string;
-  searchKey: string;
+  searchKeyword: string;
   tableData: object[];
   onPageChange?: string;
   pageSize: number;
   onRowSelected?: string;
-  onSearch: string;
+  onSearchTextChanged: string;
   selectedRowIndex?: number;
   columnActions?: ColumnAction[];
   serverSidePaginationEnabled?: boolean;