From 77b1282570dc80a6bbe7e83742ce44496923be45 Mon Sep 17 00:00:00 2001
From: "Gina A." <70909035+gndz07@users.noreply.github.com>
Date: Wed, 12 Nov 2025 10:20:16 +0100
Subject: [PATCH] Fix blocked navigation on Safari

---
 webui/src/layout/EmptyPlaceholder.tsx    | 15 +++++++++++++--
 webui/src/pages/http/HttpMiddlewares.tsx |  6 ++----
 webui/src/pages/http/HttpRouters.tsx     |  6 ++----
 webui/src/pages/http/HttpServices.tsx    |  6 ++----
 webui/src/pages/tcp/TcpMiddlewares.tsx   |  6 ++----
 webui/src/pages/tcp/TcpRouters.tsx       |  6 ++----
 webui/src/pages/tcp/TcpServices.tsx      |  6 ++----
 webui/src/pages/udp/UdpRouters.tsx       |  6 ++----
 webui/src/pages/udp/UdpServices.tsx      |  6 ++----
 9 files changed, 29 insertions(+), 34 deletions(-)

diff --git a/webui/src/layout/EmptyPlaceholder.tsx b/webui/src/layout/EmptyPlaceholder.tsx
index e81ace9df..e62fcb112 100644
--- a/webui/src/layout/EmptyPlaceholder.tsx
+++ b/webui/src/layout/EmptyPlaceholder.tsx
@@ -1,9 +1,20 @@
-import { Flex, Text } from '@traefiklabs/faency'
+import { AriaTd, Flex, Text } from '@traefiklabs/faency'
 import { FiAlertTriangle } from 'react-icons/fi'
 
-export const EmptyPlaceholder = ({ message = 'No data available' }: { message?: string }) => (
+type EmptyPlaceholderProps = {
+  message?: string
+}
+export const EmptyPlaceholder = ({ message = 'No data available' }: EmptyPlaceholderProps) => (
   <Flex align="center" justify="center" css={{ py: '$5', color: '$primary' }}>
     <FiAlertTriangle size={16} />
     <Text css={{ pl: '$2' }}>{message}</Text>
   </Flex>
 )
+
+export const EmptyPlaceholderTd = (props: EmptyPlaceholderProps) => {
+  return (
+    <AriaTd css={{ pointerEvents: 'none' }} fullColSpan>
+      <EmptyPlaceholder {...props} />
+    </AriaTd>
+  )
+}
diff --git a/webui/src/pages/http/HttpMiddlewares.tsx b/webui/src/pages/http/HttpMiddlewares.tsx
index e3274009e..4ec86d841 100644
--- a/webui/src/pages/http/HttpMiddlewares.tsx
+++ b/webui/src/pages/http/HttpMiddlewares.tsx
@@ -14,7 +14,7 @@ import SortableTh from 'components/tables/SortableTh'
 import Tooltip from 'components/Tooltip'
 import TooltipText from 'components/TooltipText'
 import useFetchWithPagination, { pagesResponseInterface, RenderRowType } from 'hooks/use-fetch-with-pagination'
-import { EmptyPlaceholder } from 'layout/EmptyPlaceholder'
+import { EmptyPlaceholderTd } from 'layout/EmptyPlaceholder'
 import { parseMiddlewareType } from 'libs/parsers'
 
 export const makeRowRender = (): RenderRowType => {
@@ -79,9 +79,7 @@ export const HttpMiddlewaresRender = ({
         {(isEmpty || !!error) && (
           <AriaTfoot>
             <AriaTr>
-              <AriaTd fullColSpan>
-                <EmptyPlaceholder message={error ? 'Failed to fetch data' : 'No data available'} />
-              </AriaTd>
+              <EmptyPlaceholderTd message={error ? 'Failed to fetch data' : 'No data available'} />
             </AriaTr>
           </AriaTfoot>
         )}
diff --git a/webui/src/pages/http/HttpRouters.tsx b/webui/src/pages/http/HttpRouters.tsx
index 06c2c255f..7896ca38a 100644
--- a/webui/src/pages/http/HttpRouters.tsx
+++ b/webui/src/pages/http/HttpRouters.tsx
@@ -16,7 +16,7 @@ import SortableTh from 'components/tables/SortableTh'
 import Tooltip from 'components/Tooltip'
 import TooltipText from 'components/TooltipText'
 import useFetchWithPagination, { pagesResponseInterface, RenderRowType } from 'hooks/use-fetch-with-pagination'
-import { EmptyPlaceholder } from 'layout/EmptyPlaceholder'
+import { EmptyPlaceholderTd } from 'layout/EmptyPlaceholder'
 
 export const makeRowRender = (protocol = 'http'): RenderRowType => {
   const HttpRoutersRenderRow = (row) => (
@@ -100,9 +100,7 @@ export const HttpRoutersRender = ({
         {(isEmpty || !!error) && (
           <AriaTfoot>
             <AriaTr>
-              <AriaTd fullColSpan>
-                <EmptyPlaceholder message={error ? 'Failed to fetch data' : 'No data available'} />
-              </AriaTd>
+              <EmptyPlaceholderTd message={error ? 'Failed to fetch data' : 'No data available'} />
             </AriaTr>
           </AriaTfoot>
         )}
diff --git a/webui/src/pages/http/HttpServices.tsx b/webui/src/pages/http/HttpServices.tsx
index 8c41badcd..e49bc82b6 100644
--- a/webui/src/pages/http/HttpServices.tsx
+++ b/webui/src/pages/http/HttpServices.tsx
@@ -14,7 +14,7 @@ import SortableTh from 'components/tables/SortableTh'
 import Tooltip from 'components/Tooltip'
 import TooltipText from 'components/TooltipText'
 import useFetchWithPagination, { pagesResponseInterface, RenderRowType } from 'hooks/use-fetch-with-pagination'
-import { EmptyPlaceholder } from 'layout/EmptyPlaceholder'
+import { EmptyPlaceholderTd } from 'layout/EmptyPlaceholder'
 
 export const makeRowRender = (): RenderRowType => {
   const HttpServicesRenderRow = (row) => (
@@ -78,9 +78,7 @@ export const HttpServicesRender = ({
         {(isEmpty || !!error) && (
           <AriaTfoot>
             <AriaTr>
-              <AriaTd fullColSpan>
-                <EmptyPlaceholder message={error ? 'Failed to fetch data' : 'No data available'} />
-              </AriaTd>
+              <EmptyPlaceholderTd message={error ? 'Failed to fetch data' : 'No data available'} />
             </AriaTr>
           </AriaTfoot>
         )}
diff --git a/webui/src/pages/tcp/TcpMiddlewares.tsx b/webui/src/pages/tcp/TcpMiddlewares.tsx
index b0189a2e5..25bca597b 100644
--- a/webui/src/pages/tcp/TcpMiddlewares.tsx
+++ b/webui/src/pages/tcp/TcpMiddlewares.tsx
@@ -14,7 +14,7 @@ import SortableTh from 'components/tables/SortableTh'
 import Tooltip from 'components/Tooltip'
 import TooltipText from 'components/TooltipText'
 import useFetchWithPagination, { pagesResponseInterface, RenderRowType } from 'hooks/use-fetch-with-pagination'
-import { EmptyPlaceholder } from 'layout/EmptyPlaceholder'
+import { EmptyPlaceholderTd } from 'layout/EmptyPlaceholder'
 import { parseMiddlewareType } from 'libs/parsers'
 
 export const makeRowRender = (): RenderRowType => {
@@ -79,9 +79,7 @@ export const TcpMiddlewaresRender = ({
         {(isEmpty || !!error) && (
           <AriaTfoot>
             <AriaTr>
-              <AriaTd fullColSpan>
-                <EmptyPlaceholder message={error ? 'Failed to fetch data' : 'No data available'} />
-              </AriaTd>
+              <EmptyPlaceholderTd message={error ? 'Failed to fetch data' : 'No data available'} />
             </AriaTr>
           </AriaTfoot>
         )}
diff --git a/webui/src/pages/tcp/TcpRouters.tsx b/webui/src/pages/tcp/TcpRouters.tsx
index f3cd3d497..8a8f638ac 100644
--- a/webui/src/pages/tcp/TcpRouters.tsx
+++ b/webui/src/pages/tcp/TcpRouters.tsx
@@ -16,7 +16,7 @@ import SortableTh from 'components/tables/SortableTh'
 import Tooltip from 'components/Tooltip'
 import TooltipText from 'components/TooltipText'
 import useFetchWithPagination, { pagesResponseInterface, RenderRowType } from 'hooks/use-fetch-with-pagination'
-import { EmptyPlaceholder } from 'layout/EmptyPlaceholder'
+import { EmptyPlaceholderTd } from 'layout/EmptyPlaceholder'
 
 export const makeRowRender = (): RenderRowType => {
   const TcpRoutersRenderRow = (row) => (
@@ -96,9 +96,7 @@ export const TcpRoutersRender = ({
         {(isEmpty || !!error) && (
           <AriaTfoot>
             <AriaTr>
-              <AriaTd fullColSpan>
-                <EmptyPlaceholder message={error ? 'Failed to fetch data' : 'No data available'} />
-              </AriaTd>
+              <EmptyPlaceholderTd message={error ? 'Failed to fetch data' : 'No data available'} />
             </AriaTr>
           </AriaTfoot>
         )}
diff --git a/webui/src/pages/tcp/TcpServices.tsx b/webui/src/pages/tcp/TcpServices.tsx
index 77480fd4e..13df8792b 100644
--- a/webui/src/pages/tcp/TcpServices.tsx
+++ b/webui/src/pages/tcp/TcpServices.tsx
@@ -14,7 +14,7 @@ import SortableTh from 'components/tables/SortableTh'
 import Tooltip from 'components/Tooltip'
 import TooltipText from 'components/TooltipText'
 import useFetchWithPagination, { pagesResponseInterface, RenderRowType } from 'hooks/use-fetch-with-pagination'
-import { EmptyPlaceholder } from 'layout/EmptyPlaceholder'
+import { EmptyPlaceholderTd } from 'layout/EmptyPlaceholder'
 
 export const makeRowRender = (): RenderRowType => {
   const TcpServicesRenderRow = (row) => (
@@ -78,9 +78,7 @@ export const TcpServicesRender = ({
         {(isEmpty || !!error) && (
           <AriaTfoot>
             <AriaTr>
-              <AriaTd fullColSpan>
-                <EmptyPlaceholder message={error ? 'Failed to fetch data' : 'No data available'} />
-              </AriaTd>
+              <EmptyPlaceholderTd message={error ? 'Failed to fetch data' : 'No data available'} />
             </AriaTr>
           </AriaTfoot>
         )}
diff --git a/webui/src/pages/udp/UdpRouters.tsx b/webui/src/pages/udp/UdpRouters.tsx
index ce6348b75..b468630ce 100644
--- a/webui/src/pages/udp/UdpRouters.tsx
+++ b/webui/src/pages/udp/UdpRouters.tsx
@@ -15,7 +15,7 @@ import SortableTh from 'components/tables/SortableTh'
 import Tooltip from 'components/Tooltip'
 import TooltipText from 'components/TooltipText'
 import useFetchWithPagination, { pagesResponseInterface, RenderRowType } from 'hooks/use-fetch-with-pagination'
-import { EmptyPlaceholder } from 'layout/EmptyPlaceholder'
+import { EmptyPlaceholderTd } from 'layout/EmptyPlaceholder'
 
 export const makeRowRender = (): RenderRowType => {
   const UdpRoutersRenderRow = (row) => (
@@ -81,9 +81,7 @@ export const UdpRoutersRender = ({
         {(isEmpty || !!error) && (
           <AriaTfoot>
             <AriaTr>
-              <AriaTd fullColSpan>
-                <EmptyPlaceholder message={error ? 'Failed to fetch data' : 'No data available'} />
-              </AriaTd>
+              <EmptyPlaceholderTd message={error ? 'Failed to fetch data' : 'No data available'} />
             </AriaTr>
           </AriaTfoot>
         )}
diff --git a/webui/src/pages/udp/UdpServices.tsx b/webui/src/pages/udp/UdpServices.tsx
index 5d6b47c66..76abc3d02 100644
--- a/webui/src/pages/udp/UdpServices.tsx
+++ b/webui/src/pages/udp/UdpServices.tsx
@@ -14,7 +14,7 @@ import SortableTh from 'components/tables/SortableTh'
 import Tooltip from 'components/Tooltip'
 import TooltipText from 'components/TooltipText'
 import useFetchWithPagination, { pagesResponseInterface, RenderRowType } from 'hooks/use-fetch-with-pagination'
-import { EmptyPlaceholder } from 'layout/EmptyPlaceholder'
+import { EmptyPlaceholderTd } from 'layout/EmptyPlaceholder'
 
 export const makeRowRender = (): RenderRowType => {
   const UdpServicesRenderRow = (row) => (
@@ -78,9 +78,7 @@ export const UdpServicesRender = ({
         {(isEmpty || !!error) && (
           <AriaTfoot>
             <AriaTr>
-              <AriaTd fullColSpan>
-                <EmptyPlaceholder message={error ? 'Failed to fetch data' : 'No data available'} />
-              </AriaTd>
+              <EmptyPlaceholderTd message={error ? 'Failed to fetch data' : 'No data available'} />
             </AriaTr>
           </AriaTfoot>
         )}