Fix selected row issue in view mode (#3186)

* Fix selected row issue in view mode

* Remove un-select feature

app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx

@@ -37,10 +37,10 @@ interface TableProps {
   editMode: boolean;
   sortTableColumn: (columnIndex: number, asc: boolean) => void;
   handleResizeColumn: (columnSizeMap: { [key: string]: number }) => void;
-  selectTableRow: (
-    row: { original: Record<string, unknown>; index: number },
-    isSelected: boolean,
-  ) => void;
+  selectTableRow: (row: {
+    original: Record<string, unknown>;
+    index: number;
+  }) => void;
   pageNo: number;
   updatePageNo: (pageNo: number, event?: EventType) => void;
   nextPageClick: () => void;
@@ -235,11 +235,7 @@ export const Table = (props: TableProps) => {
                   }
                   onClick={(e) => {
                     row.toggleRowSelected();
-                    props.selectTableRow(
-                      row,
-                      row.index === selectedRowIndex ||
-                        selectedRowIndices.includes(row.index),
-                    );
+                    props.selectTableRow(row);
                     e.stopPropagation();
                   }}
                   key={rowIndex}

app/client/src/components/designSystems/appsmith/TableComponent/index.tsx

@@ -159,13 +159,11 @@ const ReactTableComponent = (props: ReactTableComponentProps) => {
     }
   };
 
-  const selectTableRow = (
-    row: { original: Record<string, unknown>; index: number },
-    isSelected: boolean,
-  ) => {
-    if (!isSelected || props.multiRowSelection || !props.multiRowSelection) {
-      props.onRowClick(row.original, row.index);
-    }
+  const selectTableRow = (row: {
+    original: Record<string, unknown>;
+    index: number;
+  }) => {
+    props.onRowClick(row.original, row.index);
   };
 
   return (

app/client/src/utils/WidgetRegistry.tsx

@@ -438,6 +438,7 @@ export default class WidgetBuilderRegistry {
       IconWidget.getTriggerPropertyMap(),
       IconWidget.getDefaultPropertiesMap(),
       IconWidget.getMetaPropertiesMap(),
+      IconWidget.getPropertyPaneConfig(),
     );
 
     WidgetFactory.registerWidgetBuilder(
@@ -452,6 +453,7 @@ export default class WidgetBuilderRegistry {
       SkeletonWidget.getTriggerPropertyMap(),
       SkeletonWidget.getDefaultPropertiesMap(),
       SkeletonWidget.getMetaPropertiesMap(),
+      SkeletonWidget.getPropertyPaneConfig(),
     );
 
     WidgetFactory.registerWidgetBuilder(

app/client/src/utils/migrations/TableWidget.ts

@@ -139,6 +139,7 @@ export const tableWidgetPropertyPaneMigrations = (
           key: `primaryColumns.${columnPrefix}${index + 1}.onClick`,
         });
         updatedDerivedColumns[column.id] = column;
+        child.primaryColumns[column.id] = column;
       });
 
       if (Object.keys(updatedDerivedColumns).length) {

app/client/src/widgets/IconWidget.tsx

@@ -14,6 +14,9 @@ const IconWrapper = styled.div`
   justify-content: flex-end;
 `;
 class IconWidget extends BaseWidget<IconWidgetProps, WidgetState> {
+  static getPropertyPaneConfig() {
+    return [];
+  }
   static getTriggerPropertyMap(): TriggerPropertiesMap {
     return {
       onClick: true,

app/client/src/widgets/SkeletonWidget.tsx

@@ -10,6 +10,9 @@ const SkeletonWrapper = styled.div`
 `;
 
 class SkeletonWidget extends BaseWidget<SkeletonWidgetProps, WidgetState> {
+  static getPropertyPaneConfig() {
+    return [];
+  }
   getPageView() {
     return <SkeletonWrapper className="bp3-skeleton" />;
   }

app/client/src/widgets/TableWidget/index.tsx

@@ -601,7 +601,6 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
           propertiesToAdd["migrated"] = true;
         }
 
-        super.batchUpdateWidgetProperty(propertiesToAdd);
         if (previousColumnIds.length > newColumnIds.length) {
           const columnsIdsToDelete = without(
             previousColumnIds,
@@ -610,13 +609,13 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
           columnsIdsToDelete.forEach((id: string) => {
             pathsToDelete.push(`primaryColumns.${id}`);
           });
-          // We need to wait for the above updates to finish
-          // Todo(abhinav): This is not correct. The platform should accept multiple types of updates
-          // That approach should be performant.
-          setTimeout(() => {
-            super.deleteWidgetProperty(pathsToDelete);
-          }, 1000);
+
+          super.deleteWidgetProperty(pathsToDelete);
         }
+
+        setTimeout(() => {
+          super.batchUpdateWidgetProperty(propertiesToAdd);
+        }, 1000);
       }
     }
   };
@@ -643,27 +642,15 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
 
   componentDidUpdate(prevProps: TableWidgetProps) {
     const { primaryColumns = {} } = this.props;
-
     // Check if data is modifed by comparing the stringified versions of the previous and next tableData
     const tableDataModified =
       JSON.stringify(this.props.tableData) !==
       JSON.stringify(prevProps.tableData);
 
-    // let hasPrimaryColumnsComputedValueChanged = false;
-    // const oldComputedValues = Object.values(
-    //   prevProps.primaryColumns || {},
-    // )?.map((column: ColumnProperties) => column.computedValue);
-    // const newComputedValues = Object.values(
-    //   this.props.primaryColumns || {},
-    // )?.map((column: ColumnProperties) => column.computedValue);
-    // if (!isEqual(oldComputedValues, newComputedValues)) {
-    //   hasPrimaryColumnsComputedValueChanged = true;
-    // }
-
     let hasPrimaryColumnsChanged = false;
     // If the user has changed the tableData OR
     // The binding has returned a new value
-    if (tableDataModified) {
+    if (tableDataModified && this.props.renderMode === RenderModes.CANVAS) {
       // Get columns keys from this.props.tableData
       const columnIds: string[] = getAllTableColumnKeys(this.props.tableData);
       // Get column keys from columns except for derivedColumns
@@ -694,21 +681,19 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
           JSON.stringify(prevProps.sortedColumn) ||
         JSON.stringify(this.props.primaryColumns) !==
           JSON.stringify(prevProps.primaryColumns) ||
-        this.props.filteredTableData === undefined)
+        this.props.filteredTableData === undefined ||
+        this.props.filteredTableData.length === 0)
     ) {
-      if (this.props.primaryColumns && Object.keys(primaryColumns).length > 0) {
-        const filteredTableData = this.filterTableData();
-
-        if (
-          JSON.stringify(filteredTableData) !==
-          JSON.stringify(this.props.filteredTableData)
-        ) {
-          // Update filteredTableData meta property
-          this.props.updateWidgetMetaProperty(
-            "filteredTableData",
-            filteredTableData,
-          );
-        }
+      const filteredTableData = this.filterTableData();
+      if (
+        JSON.stringify(filteredTableData) !==
+        JSON.stringify(this.props.filteredTableData)
+      ) {
+        // Update filteredTableData meta property
+        this.props.updateWidgetMetaProperty(
+          "filteredTableData",
+          filteredTableData,
+        );
       }
     }
 
@@ -941,33 +926,19 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
         "selectedRowIndices",
         selectedRowIndices,
       );
-      this.props.updateWidgetMetaProperty(
-        "selectedRows",
-        this.props.filteredTableData.filter(
-          (item: Record<string, unknown>, i: number) => {
-            return selectedRowIndices.includes(i);
-          },
-        ),
-      );
     } else {
       const selectedRowIndex = isNumber(this.props.selectedRowIndex)
         ? this.props.selectedRowIndex
         : -1;
-      if (selectedRowIndex === index) {
-        index = -1;
-      } else {
-        this.props.updateWidgetMetaProperty(
-          "selectedRow",
-          this.props.filteredTableData[index],
-          {
-            dynamicString: this.props.onRowSelected,
-            event: {
-              type: EventType.ON_ROW_SELECTED,
-            },
+
+      if (selectedRowIndex !== index) {
+        this.props.updateWidgetMetaProperty("selectedRowIndex", index, {
+          dynamicString: this.props.onRowSelected,
+          event: {
+            type: EventType.ON_ROW_SELECTED,
           },
-        );
+        });
       }
-      this.props.updateWidgetMetaProperty("selectedRowIndex", index);
     }
   };