From c5979138a677188b6a72aad44992d94e621a5dab Mon Sep 17 00:00:00 2001
From: Georgy Karataev <gkaratae@redhat.com>
Date: Mon, 15 Aug 2022 13:47:48 +0200
Subject: [PATCH] fix(Tables): reduce re-renders; fix the incorrect
 data-ouia-safe attribute (#389)

---
 .../AffectedClustersTable.js                  | 21 ++++++++++++-------
 src/Components/ClusterRules/ClusterRules.js   | 14 ++-----------
 .../ClustersListTable/ClustersListTable.js    | 13 ++++++++----
 src/Components/RecsListTable/RecsListTable.js | 15 +++++++++----
 4 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/src/Components/AffectedClustersTable/AffectedClustersTable.js b/src/Components/AffectedClustersTable/AffectedClustersTable.js
index 7b87a002..59054bd6 100644
--- a/src/Components/AffectedClustersTable/AffectedClustersTable.js
+++ b/src/Components/AffectedClustersTable/AffectedClustersTable.js
@@ -274,14 +274,19 @@ const AffectedClustersTable = ({ query, rule, afterDisableFn }) => {
   };
 
   useEffect(() => {
-    const newFilteredRows = buildFilteredRows(rows, filters);
-    const newDisplayedRows = buildDisplayedRows(newFilteredRows);
-    setFilteredRows(newFilteredRows);
-    setDisplayedRows(newDisplayedRows);
-    if (isSuccess || isError) {
-      setRowsFiltered(true);
-    }
-  }, [query, filters]);
+    setFilteredRows(buildFilteredRows(rows, filters));
+  }, [
+    query,
+    filters.text,
+    filters.version,
+    filters.sortIndex,
+    filters.sortDirection,
+  ]);
+
+  useEffect(() => {
+    setDisplayedRows(buildDisplayedRows(filteredRows));
+    setRowsFiltered(true);
+  }, [filteredRows, filters.limit, filters.offset]);
 
   const handleModalToggle = (disableRuleModalOpen, host = undefined) => {
     setDisableRuleModalOpen(disableRuleModalOpen);
diff --git a/src/Components/ClusterRules/ClusterRules.js b/src/Components/ClusterRules/ClusterRules.js
index bc511222..84c9bb94 100644
--- a/src/Components/ClusterRules/ClusterRules.js
+++ b/src/Components/ClusterRules/ClusterRules.js
@@ -106,22 +106,14 @@ const ClusterRules = ({ cluster }) => {
 
   useEffect(() => {
     setFilteredRows(buildFilteredRows(reports, filters));
-    if (isSuccess || isError) {
-      setRowsFiltered(true);
-    }
   }, [data, filters]);
 
   useEffect(() => {
     setDisplayedRows(
       buildDisplayedRows(filteredRows, filters.sortIndex, filters.sortDirection)
     );
-  }, [
-    filteredRows,
-    filters.limit,
-    filters.offset,
-    filters.sortIndex,
-    filters.sortDirection,
-  ]);
+    setRowsFiltered(true);
+  }, [filteredRows]);
 
   const handleOnCollapse = (_e, rowId, isOpen) => {
     if (rowId === undefined) {
@@ -409,8 +401,6 @@ const ClusterRules = ({ cluster }) => {
     const localFilters = { ...filters };
     delete localFilters.sortIndex;
     delete localFilters.sortDirection;
-    delete localFilters.offset;
-    delete localFilters.limit;
     return pruneFilters(localFilters, FILTER_CATEGORIES);
   };
 
diff --git a/src/Components/ClustersListTable/ClustersListTable.js b/src/Components/ClustersListTable/ClustersListTable.js
index 1823a6f3..a05a49d3 100644
--- a/src/Components/ClustersListTable/ClustersListTable.js
+++ b/src/Components/ClustersListTable/ClustersListTable.js
@@ -84,14 +84,19 @@ const ClustersListTable = ({
 
   useEffect(() => {
     setDisplayedRows(buildDisplayedRows(filteredRows));
+    setRowsFiltered(true);
   }, [filteredRows, filters.limit, filters.offset]);
 
   useEffect(() => {
     setFilteredRows(buildFilteredRows(clusters));
-    if (isSuccess || isError) {
-      setRowsFiltered(true);
-    }
-  }, [data, filters]);
+  }, [
+    data,
+    filters.text,
+    filters.version,
+    filters.hits,
+    filters.sortDirection,
+    filters.sortIndex,
+  ]);
 
   useEffect(() => {
     if (search && filterBuilding) {
diff --git a/src/Components/RecsListTable/RecsListTable.js b/src/Components/RecsListTable/RecsListTable.js
index 062ff7d3..6611d6b6 100644
--- a/src/Components/RecsListTable/RecsListTable.js
+++ b/src/Components/RecsListTable/RecsListTable.js
@@ -101,9 +101,7 @@ const RecsListTable = ({ query }) => {
     setDisplayedRows(
       buildDisplayedRows(filteredRows, filters.sortIndex, filters.sortDirection)
     );
-    if (isSuccess || isError) {
-      setRowsFiltered(true);
-    }
+    setRowsFiltered(true);
   }, [
     filteredRows,
     filters.limit,
@@ -114,7 +112,16 @@ const RecsListTable = ({ query }) => {
 
   useEffect(() => {
     setFilteredRows(buildFilteredRows(recs, filters));
-  }, [data, filters]);
+  }, [
+    data,
+    filters.category,
+    filters.impact,
+    filters.impacting,
+    filters.total_risk,
+    filters.rule_status,
+    filters.likelihood,
+    searchText,
+  ]);
 
   useEffect(() => {
     if (search && filterBuilding) {