From 6d0e32810c7e16176f820c93e21e56c834eb950d Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Wed, 20 Dec 2023 15:11:21 +0100
Subject: [PATCH] fix: empty paginated table state (#5685)

Table placeholder should be visible if search query returns no data.
---
 .../PaginatedProjectFeatureToggles.tsx               |  9 +++++++--
 .../TableEmptyState.tsx}                             | 12 ++----------
 2 files changed, 9 insertions(+), 12 deletions(-)
 rename frontend/src/component/project/Project/PaginatedProjectFeatureToggles/{TablePlaceholder/TablePlaceholder.tsx => TableEmptyState/TableEmptyState.tsx} (70%)

diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
index ce755ab0c8..0b7d63041b 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
@@ -46,7 +46,7 @@ import { FeatureNameCell } from 'component/common/Table/cells/FeatureNameCell/Fe
 import { FeatureToggleCell } from './FeatureToggleCell/FeatureToggleCell';
 import { ProjectOverviewFilters } from './ProjectOverviewFilters';
 import { useDefaultColumnVisibility } from './hooks/useDefaultColumnVisibility';
-import { Placeholder } from './TablePlaceholder/TablePlaceholder';
+import { TableEmptyState } from './TableEmptyState/TableEmptyState';
 import { useRowActions } from './hooks/useRowActions';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { FeatureTagCell } from 'component/common/Table/cells/FeatureTagCell/FeatureTagCell';
@@ -457,7 +457,12 @@ export const PaginatedProjectFeatureToggles = ({
                             totalItems={total}
                         />
                     </SearchHighlightProvider>
-                    <Placeholder total={total} query={tableState.query || ''} />
+                    <ConditionallyRender
+                        condition={!data.length && !isPlaceholder}
+                        show={
+                            <TableEmptyState query={tableState.query || ''} />
+                        }
+                    />
                     {rowActionsDialogs}
 
                     <ConditionallyRender
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/TablePlaceholder/TablePlaceholder.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/TableEmptyState/TableEmptyState.tsx
similarity index 70%
rename from frontend/src/component/project/Project/PaginatedProjectFeatureToggles/TablePlaceholder/TablePlaceholder.tsx
rename to frontend/src/component/project/Project/PaginatedProjectFeatureToggles/TableEmptyState/TableEmptyState.tsx
index 6351c88b18..f9e67732e2 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/TablePlaceholder/TablePlaceholder.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/TableEmptyState/TableEmptyState.tsx
@@ -3,15 +3,10 @@ import { Box } from '@mui/material';
 import { TablePlaceholder } from 'component/common/Table';
 
 interface ITablePlaceholderProps {
-    total?: number;
     query?: string;
 }
 
-export const Placeholder: FC<ITablePlaceholderProps> = ({ total, query }) => {
-    if (total !== 0) {
-        return null;
-    }
-
+export const TableEmptyState: FC<ITablePlaceholderProps> = ({ query }) => {
     if ((query || '')?.length > 0) {
         return (
             <Box
@@ -34,10 +29,7 @@ export const Placeholder: FC<ITablePlaceholderProps> = ({ total, query }) => {
                 padding: theme.spacing(3),
             })}
         >
-            <TablePlaceholder>
-                No feature toggles available. Get started by adding a new
-                feature toggle.
-            </TablePlaceholder>
+            <TablePlaceholder>No feature toggles available.</TablePlaceholder>
         </Box>
     );
 };