From 5b763de093600d50a6ed6f6eb39784325a80b510 Mon Sep 17 00:00:00 2001
From: Ahmed Magdy <ahussein@outlook.com>
Date: Tue, 27 Sep 2022 12:26:57 +0200
Subject: [PATCH 1/3] add empty table row prop so it can be configured from
 parent component

---
 ui/components/DataTable.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/components/DataTable.tsx b/ui/components/DataTable.tsx
index 2379ad0802..6c880610ca 100644
--- a/ui/components/DataTable.tsx
+++ b/ui/components/DataTable.tsx
@@ -59,6 +59,7 @@ export interface Props {
   dialogOpen?: boolean;
   hasCheckboxes?: boolean;
   hideSearchAndFilters?: boolean;
+  emptyMessagePlaceholder?: string | React.ReactNode;
 }
 //styled components
 const EmptyRow = styled(TableRow)<{ colSpan: number }>`
@@ -331,6 +332,7 @@ function UnstyledDataTable({
   hasCheckboxes: checkboxes,
   dialogOpen,
   hideSearchAndFilters,
+  emptyMessagePlaceholder,
 }: Props) {
   //URL info
   const history = useHistory();
@@ -561,7 +563,9 @@ function UnstyledDataTable({
                         size="base"
                       />
                       <Spacer padding="xxs" />
-                      <Text color="neutral30">No data</Text>
+                      <Text color="neutral30">
+                        {emptyMessagePlaceholder || "No data"}
+                      </Text>
                     </Flex>
                   </TableCell>
                 </EmptyRow>

From 8f471a3c309207837a6673bacba58fcd9754c83b Mon Sep 17 00:00:00 2001
From: Ahmed Magdy <ahussein@outlook.com>
Date: Tue, 27 Sep 2022 13:31:24 +0200
Subject: [PATCH 2/3] remove type string as its already a type of react node

---
 ui/components/DataTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/components/DataTable.tsx b/ui/components/DataTable.tsx
index 6c880610ca..ce4854e43f 100644
--- a/ui/components/DataTable.tsx
+++ b/ui/components/DataTable.tsx
@@ -59,7 +59,7 @@ export interface Props {
   dialogOpen?: boolean;
   hasCheckboxes?: boolean;
   hideSearchAndFilters?: boolean;
-  emptyMessagePlaceholder?: string | React.ReactNode;
+  emptyMessagePlaceholder?: React.ReactNode;
 }
 //styled components
 const EmptyRow = styled(TableRow)<{ colSpan: number }>`

From 9795661f9c63ad3c86facc2eef8e6cab91cfc0c8 Mon Sep 17 00:00:00 2001
From: Ahmed Magdy <ahussein@outlook.com>
Date: Tue, 27 Sep 2022 14:03:00 +0200
Subject: [PATCH 3/3] move emptyMessageplaceholder out from Text component

---
 ui/components/DataTable.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/components/DataTable.tsx b/ui/components/DataTable.tsx
index ce4854e43f..0377251a25 100644
--- a/ui/components/DataTable.tsx
+++ b/ui/components/DataTable.tsx
@@ -563,9 +563,9 @@ function UnstyledDataTable({
                         size="base"
                       />
                       <Spacer padding="xxs" />
-                      <Text color="neutral30">
-                        {emptyMessagePlaceholder || "No data"}
-                      </Text>
+                      {emptyMessagePlaceholder || (
+                        <Text color="neutral30">No data</Text>
+                      )}
                     </Flex>
                   </TableCell>
                 </EmptyRow>