Fix blocked navigation on Safari

This commit is contained in:
Gina A. 2025-11-12 10:20:16 +01:00 committed by GitHub
parent f45317c9c9
commit 77b1282570
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 29 additions and 34 deletions

View File

@ -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>
)
}

View File

@ -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>
)}

View File

@ -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>
)}

View File

@ -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>
)}

View File

@ -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>
)}

View File

@ -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>
)}

View File

@ -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>
)}

View File

@ -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>
)}

View File

@ -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>
)}