From f00dd17213d2e82bbe3cd8de3211c271b079d1d3 Mon Sep 17 00:00:00 2001
From: Radek Podrazky <rpodrazky@securityscorecard.io>
Date: Wed, 9 Oct 2024 16:35:09 +0200
Subject: [PATCH] fix(DatatableV2): fix Rendered fewer hooks than expected
 issue

Ref AFE-209
---
 src/components/DatatableV2/buttons/ExpandAllButton.tsx | 6 ++++--
 src/components/DatatableV2/buttons/ExpandButton.tsx    | 2 +-
 src/components/DatatableV2/header/HeaderCell.tsx       | 2 +-
 src/components/DatatableV2/hooks/useDisplayColumns.tsx | 7 ++-----
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/DatatableV2/buttons/ExpandAllButton.tsx b/src/components/DatatableV2/buttons/ExpandAllButton.tsx
index 6780c8200..405e1a379 100644
--- a/src/components/DatatableV2/buttons/ExpandAllButton.tsx
+++ b/src/components/DatatableV2/buttons/ExpandAllButton.tsx
@@ -3,16 +3,18 @@ import IconButton from '../../ButtonV2/IconButton';
 import { useSafeTranslation } from '../../../hooks/useSafeTranslation';
 
 const ExpandAllButton = <D,>({ table }: { table: DatatableInstance<D> }) => {
+  const { t } = useSafeTranslation();
   const {
     getIsSomeRowsExpanded,
     getState,
-    options: { renderDetailPanel },
+    options: { renderDetailPanel, enableExpandAll },
     toggleAllRowsExpanded,
   } = table;
 
   const { isLoading } = getState();
   const areSomeRowsExpanded = getIsSomeRowsExpanded();
-  const { t } = useSafeTranslation();
+
+  if (!enableExpandAll) return null;
 
   return (
     <IconButton
diff --git a/src/components/DatatableV2/buttons/ExpandButton.tsx b/src/components/DatatableV2/buttons/ExpandButton.tsx
index b69731d9c..75fc3df59 100644
--- a/src/components/DatatableV2/buttons/ExpandButton.tsx
+++ b/src/components/DatatableV2/buttons/ExpandButton.tsx
@@ -9,6 +9,7 @@ const ExpandButton = <D,>({
   table: DatatableInstance<D>;
   row: DatatableRow<D>;
 }) => {
+  const { t } = useSafeTranslation();
   const {
     options: { renderDetailPanel },
   } = table;
@@ -16,7 +17,6 @@ const ExpandButton = <D,>({
 
   const canExpand = getCanExpand();
   const isExpanded = getIsExpanded();
-  const { t } = useSafeTranslation();
 
   return (
     <IconButton
diff --git a/src/components/DatatableV2/header/HeaderCell.tsx b/src/components/DatatableV2/header/HeaderCell.tsx
index 7e3d2e819..9f6a80e77 100644
--- a/src/components/DatatableV2/header/HeaderCell.tsx
+++ b/src/components/DatatableV2/header/HeaderCell.tsx
@@ -103,7 +103,7 @@ const HeaderCell = <D,>({
             <HeaderCellResizeHandler header={header} table={table} />
           )}
         </Inline>
-      ) : Object.values(displayColumnIds).indexOf(columnDef.id) > 0 ? (
+      ) : Object.values(displayColumnIds).includes(columnDef.id) ? (
         <Inline align="center" justify="center">
           {headerElement}
         </Inline>
diff --git a/src/components/DatatableV2/hooks/useDisplayColumns.tsx b/src/components/DatatableV2/hooks/useDisplayColumns.tsx
index ea3d887f9..d58a32b4e 100644
--- a/src/components/DatatableV2/hooks/useDisplayColumns.tsx
+++ b/src/components/DatatableV2/hooks/useDisplayColumns.tsx
@@ -21,10 +21,8 @@ export const useDisplayColumns = <D,>(
           tableOptions.enableExpanding && {
             id: displayColumnIds.expand,
             header: '',
-            headerComponent: tableOptions.enableExpandAll
-              ? ExpandAllButton
-              : null,
-            cell: ExpandButton,
+            headerComponent: (props) => <ExpandAllButton {...props} />,
+            cell: (props) => <ExpandButton {...props} />,
             size: 56,
             ...tableOptions.defaultDisplayColumn,
           },
@@ -59,7 +57,6 @@ export const useDisplayColumns = <D,>(
       ).filter(Boolean),
     [
       tableOptions.enableExpanding,
-      tableOptions.enableExpandAll,
       tableOptions.enableRowSelection,
       tableOptions.enableSelectAll,
       tableOptions.enableMultiRowSelection,