refactor(AnalyticalTable): remove selectedFlatRows & add rowsById to onRowSelect (#6255)

BREAKING CHANGE: `selectedFlatRows` has been removed from the `detail`
object of `onRowSelect`.

Author: Lukas742

docs/MigrationGuide.mdx

@@ -540,6 +540,23 @@ function MyComponent() {
 
 - `portalContainer` has been removed as it's no longer needed due to the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) used in the `Popover` ui5 web component.
 
+**Changed Events:**
+
+- `onRowSelect`: Since calculating `selectedFlatRows` was very costly, it has been removed from the `detail` event object. If you still want to use it, you can calculate it yourself:
+
+```js
+const handleOnRowSelect = (event) => {
+  const { selectedRowIds, rowsById } = event.detail;
+  const selectedRowIdsArrayMapped = Object.keys(selectedRowIds).reduce((acc, key) => {
+    if (selectedRowIds[key]) {
+      acc.push(rowsById[key]);
+    }
+    return acc;
+  }, []);
+  console.log(selectedRowIdsArrayMapped);
+};
+```
+
 **Renamed Enums:**
 
 Names of the following enums have changed:

packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

@@ -470,12 +470,18 @@ describe('AnalyticalTable', () => {
             filterable
             columns={columns}
             onRowSelect={(e) => {
-              const { allRowsSelected, isSelected, row, selectedFlatRows, selectedRowIds } = e.detail;
+              const { allRowsSelected, isSelected, row, rowsById, selectedRowIds } = e.detail;
+              const selectedRowIdsArrayMapped = Object.keys(selectedRowIds).reduce((acc, key) => {
+                if (selectedRowIds[key]) {
+                  acc.push(rowsById[key]);
+                }
+                return acc;
+              }, []);
               setRelevantPayload({
                 allRowsSelected,
                 isSelected,
                 row: row.id,
-                selectedFlatRows: selectedFlatRows.map((item) => ({
+                selectedFlatRows: selectedRowIdsArrayMapped.map((item) => ({
                   id: item?.id
                 })),
                 selectedRowIds
@@ -582,7 +588,14 @@ describe('AnalyticalTable', () => {
             columns={columns}
             globalFilterValue={globalFilterVal}
             onRowSelect={(e) => {
-              setSelectedFlatRows(e.detail.selectedFlatRows.map((item) => item.id));
+              const { selectedRowIds: _selectedRowIds, rowsById } = e.detail;
+              const selectedRowIdsArrayMapped = Object.keys(_selectedRowIds).reduce((acc, key) => {
+                if (_selectedRowIds[key]) {
+                  acc.push(rowsById[key]);
+                }
+                return acc;
+              }, []);
+              setSelectedFlatRows(selectedRowIdsArrayMapped.map((item) => item.id));
               setSelectedRowIdsCb(e.detail.selectedRowIds);
               setAllRowsSelected(e.detail.allRowsSelected);
               onRowSelect(e);
@@ -591,7 +604,8 @@ describe('AnalyticalTable', () => {
             selectedRowIds={selectedRowIds}
           />
           <p>
-            "event.detail.selectedFlatRows:"<span data-testid="payload">{JSON.stringify(selectedFlatRows)}</span>
+            "selectedFlatRows (state - not part of event):"
+            <span data-testid="payload">{JSON.stringify(selectedFlatRows)}</span>
           </p>
           <p>
             "e.detail.selectedRowIds:"<span data-testid="payloadRowsById">{JSON.stringify(selectedRowIdsCb)}</span>
@@ -610,6 +624,7 @@ describe('AnalyticalTable', () => {
     cy.findByText('Name-1').click();
     cy.findByText('Name-5').click();
     cy.findByText('Name-5').click();
+
     cy.findByTestId('payload').should('have.text', '["0","1"]');
     cy.findByTestId('payloadRowsById').should('have.text', '{"0":true,"1":true}');
     cy.findByTestId('payloadAllRowsSelected').should('have.text', 'false');
@@ -806,12 +821,18 @@ describe('AnalyticalTable', () => {
             columns={columns}
             tableInstance={tableInstance}
             onRowSelect={(e) => {
-              const { allRowsSelected, isSelected, row, selectedFlatRows, selectedRowIds } = e.detail;
+              const { allRowsSelected, isSelected, row, rowsById, selectedRowIds } = e.detail;
+              const selectedRowIdsArrayMapped = Object.keys(selectedRowIds).reduce((acc, key) => {
+                if (selectedRowIds[key]) {
+                  acc.push(rowsById[key]);
+                }
+                return acc;
+              }, []);
               setRelevantPayload({
                 allRowsSelected,
                 isSelected,
                 row: row.id,
-                selectedFlatRows: selectedFlatRows.map((item) => ({
+                selectedFlatRows: selectedRowIdsArrayMapped.map((item) => ({
                   id: item?.id
                 })),
                 selectedRowIds
@@ -2398,11 +2419,19 @@ describe('AnalyticalTable', () => {
     const TestComp = () => {
       const [stringifiedPl, setStringifiedPl] = useState('');
       const handleSelect = (e) => {
-        const { allRowsSelected, selectedFlatRows, selectedRowIds } = e.detail;
+        const { allRowsSelected, rowsById, selectedRowIds } = e.detail;
+
+        const selectedRowIdsArrayMapped = Object.keys(selectedRowIds).reduce((acc, key) => {
+          if (selectedRowIds[key]) {
+            acc.push(rowsById[key]);
+          }
+          return acc;
+        }, []);
+
         setStringifiedPl(
           JSON.stringify({
             selectedRowIds,
-            selectedFlatRows: selectedFlatRows.map((item) => ({
+            selectedFlatRows: selectedRowIdsArrayMapped.map((item) => ({
               id: item?.id
             })),
             allRowsSelected

packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx

@@ -61,7 +61,6 @@ function getNextSelectedRowIds(rowsById) {
 
 const headerProps = (props, { instance }) => {
   const {
-    flatRows,
     webComponentsReactProperties: {
       onRowSelect,
       selectionMode,
@@ -70,10 +69,13 @@ const headerProps = (props, { instance }) => {
     toggleAllRowsSelected,
     isAllRowsSelected,
     rowsById,
+    preFilteredRowsById,
     dispatch,
     state: { filters, globalFilter }
   } = instance;
   const style = { ...props.style, cursor: 'pointer', display: 'flex', justifyContent: 'center' };
+  const isFiltered = filters?.length > 0 || !!globalFilter;
+  const _rowsById = isFiltered ? preFilteredRowsById : rowsById;
   if (
     props.key === 'header___ui5wcr__internal_selection_column' &&
     selectionMode === AnalyticalTableSelectionMode.Multiple
@@ -83,16 +85,15 @@ const headerProps = (props, { instance }) => {
         props.onClick(e);
       }
       toggleAllRowsSelected(!isAllRowsSelected);
-      const isFiltered = filters?.length > 0 || !!globalFilter;
       if (typeof onRowSelect === 'function') {
         if (isFiltered) {
           dispatch({ type: 'SELECT_ROW_CB', payload: { event: e, row: undefined, selectAll: true, fired: true } });
         } else {
           onRowSelect(
             // cannot use instance.selectedFlatRows here as it only returns all rows on the first level
             enrichEventWithDetails(e, {
+              rowsById: _rowsById,
               allRowsSelected: !isAllRowsSelected,
-              selectedFlatRows: !isAllRowsSelected ? flatRows : [],
               selectedRowIds: !isAllRowsSelected ? getNextSelectedRowIds(rowsById) : {}
             })
           );

packages/main/src/components/AnalyticalTable/hooks/useSelectionChangeCallback.ts

@@ -14,35 +14,28 @@ export const useSelectionChangeCallback = (hooks: ReactTableHooks) => {
       if (selectedRowPayload?.fired) {
         const { event: e, row: selRow, selectAll } = selectedRowPayload;
         const row = rowsById[selRow?.id];
+        // when selecting a row on a filtered table, `preFilteredRowsById` has to be used, otherwise filtered out rows are undefined
+        const _rowsById = isFiltered ? preFilteredRowsById : rowsById;
 
         if (row || selectAll) {
           const payload = {
             row: row,
+            rowsById: _rowsById,
             isSelected: row?.isSelected,
-            selectedFlatRows: row?.isSelected ? [row] : [],
             allRowsSelected: false,
             selectedRowIds
           };
 
           if (webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.Multiple) {
-            // when selecting a row on a filtered table, `preFilteredRowsById` has to be used, otherwise filtered out rows are undefined
-            const tempRowsById = isFiltered ? preFilteredRowsById : rowsById;
-            const selectedRowIdsArrayMapped = Object.keys(selectedRowIds).reduce((acc, key) => {
-              if (selectedRowIds[key]) {
-                acc.push(tempRowsById[key]);
-              }
-              return acc;
-            }, []);
-
-            payload.selectedFlatRows = selectedRowIdsArrayMapped;
-            if (selectedRowIdsArrayMapped.length === Object.keys(tempRowsById).length) {
+            if (Object.keys(selectedRowIds).length === Object.keys(_rowsById).length) {
               payload.allRowsSelected = true;
             }
+
             if (selectAll) {
               dispatch({ type: 'SELECT_ROW_CB', payload: { event: e, row, selectAll: false, fired: false } });
               webComponentsReactProperties?.onRowSelect(
                 enrichEventWithDetails(e, {
-                  selectedFlatRows: payload.selectedFlatRows,
+                  rowsById: payload.rowsById,
                   allRowsSelected: payload.allRowsSelected,
                   selectedRowIds: payload.selectedRowIds
                 })