mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-08-02 09:05:49 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add translation and fix ts issues

Browse source
This commit is contained in:
Owen 2025-06-10 18:34:04 -04:00
parent d66739f69e
commit 3c2ea1a75f
No known key found for this signature in database
GPG key ID: 8271FDFFD9E0CCBD
9 changed files with 167 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

3
eslint.config.js
View file

@ -3,7 +3,8 @@ export default [
{
rules: {
semi: "error",
"prefer-const": "error"
"prefer-const": "error",
quotes: ["error", "double"]
}
}
];

37
messages/en-US.json
View file

@ -1089,5 +1089,40 @@
"sidebarSettings": "Settings",
"sidebarAllUsers": "All Users",
"sidebarIdentityProviders": "Identity Providers",
"sidebarLicense": "License"
"sidebarLicense": "License",
"enableDockerSocket": "Enable Docker Socket",
"enableDockerSocketDescription": "Enable Docker Socket discovery for populating container information, useful in resource targets.",
"enableDockerSocketLink": "Enable Docker Socket discovery for populating container information, useful in resource targets.",
"viewDockerContainers": "View Docker Containers",
"containersIn": "Containers in {siteName}",
"selectContainerDescription": "Select any container to use as a hostname for this target. Click a port to use a port.",
"containerName": "Name",
"containerImage": "Image",
"containerState": "State",
"containerNetworks": "Networks",
"containerHostnameIp": "Hostname/IP",
"containerLabels": "Labels",
"containerLabelsCount": "{count} label{s,plural,one{} other{s}}",
"containerLabelsTitle": "Container Labels",
"containerLabelEmpty": "<empty>",
"containerPorts": "Ports",
"containerPortsMore": "+{count} more",
"containerActions": "Actions",
"select": "Select",
"noContainersMatchingFilters": "No containers found matching the current filters.",
"showContainersWithoutPorts": "Show containers without ports",
"showStoppedContainers": "Show stopped containers",
"noContainersFound": "No containers found. Make sure Docker containers are running.",
"searchContainersPlaceholder": "Search across {count} containers...",
"searchResultsCount": "{count} result{s,plural,one{} other{s}}",
"filters": "Filters",
"filterOptions": "Filter Options",
"filterPorts": "Ports",
"filterStopped": "Stopped",
"clearAllFilters": "Clear all filters",
"columns": "Columns",
"toggleColumns": "Toggle Columns",
"refreshContainersList": "Refresh containers list",
"searching": "Searching...",
"noContainersFoundMatching": "No containers found matching \"{filter}\"."
}

2
src/app/[orgId]/settings/access/invitations/InvitationsTable.tsx
View file

@ -148,7 +148,7 @@ export default function InvitationsTable({
dialog={
<div className="space-y-4">
<p>
{t('inviteQuestionRemove', {email: selectedInvitation?.email})}
{t('inviteQuestionRemove', {email: selectedInvitation?.email || ""})}
</p>
<p>
{t('inviteMessageRemove')}

2
src/app/[orgId]/settings/access/invitations/RegenerateInvitationForm.tsx
View file

@ -177,7 +177,7 @@ export default function RegenerateInvitationForm({
{!inviteLink ? (
<div>
<p>
{t('inviteQuestionRegenerate', {email: invitation?.email})}
{t('inviteQuestionRegenerate', {email: invitation?.email || ""})}
</p>
<div className="flex items-center space-x-2 mt-4">
<Checkbox

4
src/app/[orgId]/settings/access/users/UsersTable.tsx
View file

@ -222,7 +222,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
toast({
variant: "default",
title: t('userOrgRemoved'),
description: t('userOrgRemovedDescription', {email: selectedUser.email})
description: t('userOrgRemovedDescription', {email: selectedUser.email || ""})
});
setUsers((prev) =>
@ -244,7 +244,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
dialog={
<div className="space-y-4">
<p>
{t('userQuestionOrgRemove', {email: selectedUser?.email || selectedUser?.name || selectedUser?.username})}
{t('userQuestionOrgRemove', {email: selectedUser?.email || selectedUser?.name || selectedUser?.username || ""})}
</p>
<p>

101
src/app/[orgId]/settings/resources/[resourceId]/general/page.tsx
View file

@ -71,7 +71,6 @@ const TransferFormSchema = z.object({
siteId: z.number()
});
type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
type TransferFormValues = z.infer<typeof TransferFormSchema>;
export default function GeneralForm() {
@ -123,7 +122,7 @@ export default function GeneralForm() {
return true;
},
{
message: t('proxyErrorInvalidPort'),
message: t("proxyErrorInvalidPort"),
path: ["proxyPort"]
}
)
@ -135,11 +134,13 @@ export default function GeneralForm() {
return true;
},
{
message: t('subdomainErrorInvalid'),
message: t("subdomainErrorInvalid"),
path: ["subdomain"]
}
);
type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
const form = useForm<GeneralFormValues>({
resolver: zodResolver(GeneralFormSchema),
defaultValues: {
@ -176,8 +177,11 @@ export default function GeneralForm() {
.catch((e) => {
toast({
variant: "destructive",
title: t('domainErrorFetch'),
description: formatAxiosError(e, t('domainErrorFetchDescription'))
title: t("domainErrorFetch"),
description: formatAxiosError(
e,
t("domainErrorFetchDescription")
)
});
});
@ -215,15 +219,18 @@ export default function GeneralForm() {
.catch((e) => {
toast({
variant: "destructive",
title: t('resourceErrorUpdate'),
description: formatAxiosError(e, t('resourceErrorUpdateDescription'))
title: t("resourceErrorUpdate"),
description: formatAxiosError(
e,
t("resourceErrorUpdateDescription")
)
});
});
if (res && res.status === 200) {
toast({
title: t('resourceUpdated'),
description: t('resourceUpdatedDescription')
title: t("resourceUpdated"),
description: t("resourceUpdatedDescription")
});
const resource = res.data.data;
@ -251,16 +258,18 @@ export default function GeneralForm() {
.catch((e) => {
toast({
variant: "destructive",
title: t('resourceErrorTransfer'),
description: formatAxiosError(e, t('resourceErrorTransferDescription')
title: t("resourceErrorTransfer"),
description: formatAxiosError(
e,
t("resourceErrorTransferDescription")
)
});
});
if (res && res.status === 200) {
toast({
title: t('resourceTransferred'),
description: t('resourceTransferredDescription')
title: t("resourceTransferred"),
description: t("resourceTransferredDescription")
});
router.refresh();
@ -284,10 +293,10 @@ export default function GeneralForm() {
.catch((e) => {
toast({
variant: "destructive",
title: t('resourceErrorToggle'),
title: t("resourceErrorToggle"),
description: formatAxiosError(
e,
t('resourceErrorToggleDescription')
t("resourceErrorToggleDescription")
)
});
});
@ -302,15 +311,17 @@ export default function GeneralForm() {
<SettingsContainer>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>{t('resourceVisibilityTitle')}</SettingsSectionTitle>
<SettingsSectionTitle>
{t("resourceVisibilityTitle")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t('resourceVisibilityTitleDescription')}
{t("resourceVisibilityTitleDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<SwitchInput
id="enable-resource"
label={t('resourceEnable')}
label={t("resourceEnable")}
defaultChecked={resource.enabled}
onCheckedChange={async (val) => {
await toggleResourceEnabled(val);
@ -322,10 +333,10 @@ export default function GeneralForm() {
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t('resourceGeneral')}
{t("resourceGeneral")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t('resourceGeneralDescription')}
{t("resourceGeneralDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
@ -342,7 +353,9 @@ export default function GeneralForm() {
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>{t('name')}</FormLabel>
<FormLabel>
{t("name")}
</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
@ -361,7 +374,9 @@ export default function GeneralForm() {
render={({ field }) => (
<FormItem>
<FormLabel>
{t('domainType')}
{t(
"domainType"
)}
</FormLabel>
<Select
value={
@ -392,10 +407,14 @@ export default function GeneralForm() {
</FormControl>
<SelectContent>
<SelectItem value="subdomain">
{t('subdomain')}
{t(
"subdomain"
)}
</SelectItem>
<SelectItem value="basedomain">
{t('baseDomain')}
{t(
"baseDomain"
)}
</SelectItem>
</SelectContent>
</Select>
@ -409,7 +428,7 @@ export default function GeneralForm() {
{domainType === "subdomain" ? (
<div className="w-fill space-y-2">
<FormLabel>
{t('subdomain')}
{t("subdomain")}
</FormLabel>
<div className="flex">
<div className="w-1/2">
@ -495,7 +514,9 @@ export default function GeneralForm() {
render={({ field }) => (
<FormItem>
<FormLabel>
{t('baseDomain')}
{t(
"baseDomain"
)}
</FormLabel>
<Select
onValueChange={
@ -549,7 +570,9 @@ export default function GeneralForm() {
render={({ field }) => (
<FormItem>
<FormLabel>
{t('resourcePortNumber')}
{t(
"resourcePortNumber"
)}
</FormLabel>
<FormControl>
<Input
@ -589,7 +612,7 @@ export default function GeneralForm() {
disabled={saveLoading}
form="general-settings-form"
>
{t('saveGeneralSettings')}
{t("saveGeneralSettings")}
</Button>
</SettingsSectionFooter>
</SettingsSection>
@ -597,10 +620,10 @@ export default function GeneralForm() {
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t('resourceTransfer')}
{t("resourceTransfer")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t('resourceTransferDescription')}
{t("resourceTransferDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
@ -620,7 +643,7 @@ export default function GeneralForm() {
render={({ field }) => (
<FormItem>
<FormLabel>
{t('siteDestination')}
{t("siteDestination")}
</FormLabel>
<Popover
open={open}
@ -645,16 +668,24 @@ export default function GeneralForm() {
site.siteId ===
field.value
)?.name
: t('siteSelect')}
: t(
"siteSelect"
)}
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-full p-0">
<Command>
<CommandInput placeholder={t('searchSites')} />
<CommandInput
placeholder={t(
"searchSites"
)}
/>
<CommandEmpty>
{t('sitesNotFound')}
{t(
"sitesNotFound"
)}
</CommandEmpty>
<CommandGroup>
{sites.map(
@ -709,7 +740,7 @@ export default function GeneralForm() {
disabled={transferLoading}
form="transfer-form"
>
{t('resourceTransferSubmit')}
{t("resourceTransferSubmit")}
</Button>
</SettingsSectionFooter>
</SettingsSection>

1
src/app/[orgId]/settings/resources/[resourceId]/proxy/page.tsx
View file

@ -74,7 +74,6 @@ import {
CollapsibleTrigger
} from "@app/components/ui/collapsible";
import { ContainersSelector } from "@app/components/ContainersSelector";
import { FaDocker } from "react-icons/fa";
import { useTranslations } from "next-intl";
const addTargetSchema = z.object({

44
src/app/[orgId]/settings/sites/[niceId]/general/page.tsx
View file

@ -34,7 +34,6 @@ import { useState } from "react";
import { SwitchInput } from "@app/components/SwitchInput";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { ArrowRight } from "lucide-react";
const GeneralFormSchema = z.object({
name: z.string().nonempty("Name is required"),
@ -53,13 +52,6 @@ export default function GeneralPage() {
const router = useRouter();
const t = useTranslations();
const GeneralFormSchema = z.object({
name: z.string().nonempty("Name is required"),
dockerSocketEnabled: z.boolean().optional()
});
type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
const form = useForm<GeneralFormValues>({
resolver: zodResolver(GeneralFormSchema),
defaultValues: {
@ -80,10 +72,10 @@ export default function GeneralPage() {
.catch((e) => {
toast({
variant: "destructive",
title: t('siteErrorUpdate'),
title: t("siteErrorUpdate"),
description: formatAxiosError(
e,
t('siteErrorUpdateDescription')
t("siteErrorUpdateDescription")
)
});
});
@ -94,8 +86,8 @@ export default function GeneralPage() {
});
toast({
title: t('siteUpdated'),
description: t('siteUpdatedDescription')
title: t("siteUpdated"),
description: t("siteUpdatedDescription")
});
setLoading(false);
@ -108,10 +100,10 @@ export default function GeneralPage() {
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t('generalSettings')}
{t("generalSettings")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t('siteGeneralDescription')}
{t("siteGeneralDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
@ -128,13 +120,13 @@ export default function GeneralPage() {
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>{t('name')}</FormLabel>
<FormLabel>{t("name")}</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
<FormDescription>
{t('siteNameDescription')}
{t("siteNameDescription")}
</FormDescription>
</FormItem>
)}
@ -148,7 +140,9 @@ export default function GeneralPage() {
<FormControl>
<SwitchInput
id="docker-socket-enabled"
label="Enable Docker Socket"
label={t(
"enableDockerSocket"
)}
defaultChecked={
field.value
}
@ -159,10 +153,9 @@ export default function GeneralPage() {
</FormControl>
<FormMessage />
<FormDescription>
Enable Docker Socket
discovery for populating
container information,
useful in resource targets.
{t(
"enableDockerSocketDescription"
)}
<Link
href="https://docs.fossorial.io/Newt/overview#docker-socket-integration"
target="_blank"
@ -171,10 +164,9 @@ export default function GeneralPage() {
>
<span>
{" "}
Docker socket path
must be provided to
Newt in order to use
this feature.
{t(
"enableDockerSocketLink"
)}
</span>
</Link>
</FormDescription>
@ -194,7 +186,7 @@ export default function GeneralPage() {
loading={loading}
disabled={loading}
>
{t('saveGeneralSettings')}
{t("saveGeneralSettings")}
</Button>
</SettingsSectionFooter>
</SettingsSection>

85
src/components/ContainersSelector.tsx
View file

@ -45,7 +45,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
import { Search, RefreshCw, Filter, Columns } from "lucide-react";
import { GetSiteResponse, Container } from "@server/routers/site";
import { useDockerSocket } from "@app/hooks/useDockerSocket";
import { FaDocker } from "react-icons/fa";
import { useTranslations } from "next-intl";
// Type definitions based on the JSON structure
@ -60,6 +60,8 @@ export const ContainersSelector: FC<ContainerSelectorProps> = ({
}) => {
const [open, setOpen] = useState(false);
const t = useTranslations();
const { isAvailable, containers, fetchContainers } = useDockerSocket(site);
useEffect(() => {
@ -87,15 +89,16 @@ export const ContainersSelector: FC<ContainerSelectorProps> = ({
className="text-sm text-primary hover:underline cursor-pointer"
onClick={() => setOpen(true)}
>
View Docker Containers
{t("viewDockerContainers")}
</a>
<Credenza open={open} onOpenChange={setOpen}>
<CredenzaContent className="max-w-[75vw] max-h-[75vh] flex flex-col">
<CredenzaHeader>
<CredenzaTitle>Containers in {site.name}</CredenzaTitle>
<CredenzaTitle>
{t("containersIn", { siteName: site.name })}
</CredenzaTitle>
<CredenzaDescription>
Select any container to use as a hostname for this
target. Click a port to use a port.
{t("selectContainerDescription")}
</CredenzaDescription>
</CredenzaHeader>
<CredenzaBody>
@ -109,7 +112,7 @@ export const ContainersSelector: FC<ContainerSelectorProps> = ({
</CredenzaBody>
<CredenzaFooter>
<CredenzaClose asChild>
<Button variant="outline">Close</Button>
<Button variant="outline">{t("close")}</Button>
</CredenzaClose>
</CredenzaFooter>
</CredenzaContent>
@ -132,6 +135,8 @@ const DockerContainersTable: FC<{
labels: false
});
const t = useTranslations();
useEffect(() => {
const timer = setTimeout(() => {
setGlobalFilter(searchInput);
@ -182,14 +187,14 @@ const DockerContainersTable: FC<{
const columns: ColumnDef<Container>[] = [
{
accessorKey: "name",
header: "Name",
header: t("containerName"),
cell: ({ row }) => (
<div className="font-medium">{row.original.name}</div>
)
},
{
accessorKey: "image",
header: "Image",
header: t("containerImage"),
cell: ({ row }) => (
<div className="text-sm text-muted-foreground">
{row.original.image}
@ -198,7 +203,7 @@ const DockerContainersTable: FC<{
},
{
accessorKey: "state",
header: "State",
header: t("containerState"),
cell: ({ row }) => (
<Badge
variant={
@ -213,7 +218,7 @@ const DockerContainersTable: FC<{
},
{
accessorKey: "networks",
header: "Networks",
header: t("containerNetworks"),
cell: ({ row }) => {
const networks = Object.keys(row.original.networks);
return (
@ -231,7 +236,7 @@ const DockerContainersTable: FC<{
},
{
accessorKey: "hostname",
header: "Hostname/IP",
header: t("containerHostnameIp"),
enableHiding: false,
cell: ({ row }) => (
<div className="text-sm font-mono">
@ -241,7 +246,7 @@ const DockerContainersTable: FC<{
},
{
accessorKey: "labels",
header: "Labels",
header: t("containerLabels"),
cell: ({ row }) => {
const labels = row.original.labels || {};
const labelEntries = Object.entries(labels);
@ -258,15 +263,14 @@ const DockerContainersTable: FC<{
size="sm"
className="h-6 px-2 text-xs hover:bg-muted"
>
{labelEntries.length} label
{labelEntries.length !== 1 ? "s" : ""}
{t("containerLabelsCount", { count: labelEntries.length })}
</Button>
</PopoverTrigger>
<PopoverContent side="top" align="start">
<ScrollArea className="w-64 h-64">
<div className="space-y-2">
<h4 className="font-medium text-sm">
Container Labels
{t("containerLabelsTitle")}
</h4>
<div className="space-y-1">
{labelEntries.map(([key, value]) => (
@ -275,7 +279,7 @@ const DockerContainersTable: FC<{
{key}
</div>
<div className="font-mono text-muted-foreground pl-2 break-all">
{value || "<empty>"}
{value || t("containerLabelEmpty")}
</div>
</div>
))}
@ -289,7 +293,7 @@ const DockerContainersTable: FC<{
},
{
accessorKey: "ports",
header: "Ports",
header: t("containerPorts"),
enableHiding: false,
cell: ({ row }) => {
const ports = getExposedPorts(row.original);
@ -312,7 +316,7 @@ const DockerContainersTable: FC<{
<Popover>
<PopoverTrigger asChild>
<Button variant="link" size="sm">
+{ports.length - 2} more
{t("containerPortsMore", { count: ports.length - 2 })}
</Button>
</PopoverTrigger>
<PopoverContent
@ -345,7 +349,7 @@ const DockerContainersTable: FC<{
},
{
id: "actions",
header: "Actions",
header: t("containerActions"),
cell: ({ row }) => {
const ports = getExposedPorts(row.original);
return (
@ -355,7 +359,7 @@ const DockerContainersTable: FC<{
onClick={() => onContainerSelect(row.original, ports[0])}
disabled={row.original.state !== "running"}
>
Select
{t("select")}
</Button>
);
}
@ -412,8 +416,7 @@ const DockerContainersTable: FC<{
containers.length > 0 ? (
<>
<p>
No containers found matching the current
filters.
{t("noContainersMatchingFilters")}
</p>
<div className="space-x-2">
{hideContainersWithoutPorts && (
@ -426,7 +429,7 @@ const DockerContainersTable: FC<{
)
}
>
Show containers without ports
{t("showContainersWithoutPorts")}
</Button>
)}
{hideStoppedContainers && (
@ -437,15 +440,14 @@ const DockerContainersTable: FC<{
setHideStoppedContainers(false)
}
>
Show stopped containers
{t("showStoppedContainers")}
</Button>
)}
</div>
</>
) : (
<p>
No containers found. Make sure Docker containers
are running.
{t("noContainersFound")}
</p>
)}
</div>
@ -461,7 +463,7 @@ const DockerContainersTable: FC<{
<div className="relative flex-1">
<Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input
placeholder={`Search across ${initialFilters.length} containers...`}
placeholder={t("searchContainersPlaceholder", { count: initialFilters.length })}
value={searchInput}
onChange={(event) =>
setSearchInput(event.target.value)
@ -471,12 +473,7 @@ const DockerContainersTable: FC<{
{searchInput &&
table.getFilteredRowModel().rows.length > 0 && (
<div className="absolute right-2 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">
{table.getFilteredRowModel().rows.length}{" "}
result
{table.getFilteredRowModel().rows.length !==
1
? "s"
: ""}
{t("searchResultsCount", { count: table.getFilteredRowModel().rows.length })}
</div>
)}
</div>
@ -489,7 +486,7 @@ const DockerContainersTable: FC<{
className="gap-2"
>
<Filter className="h-4 w-4" />
Filters
{t("filters")}
{(hideContainersWithoutPorts ||
hideStoppedContainers) && (
<span className="bg-primary text-primary-foreground rounded-full w-5 h-5 text-xs flex items-center justify-center">
@ -502,7 +499,7 @@ const DockerContainersTable: FC<{
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-64">
<DropdownMenuLabel>
Filter Options
{t("filterOptions")}
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem
@ -511,13 +508,13 @@ const DockerContainersTable: FC<{
setHideContainersWithoutPorts
}
>
Ports
{t("filterPorts")}
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={hideStoppedContainers}
onCheckedChange={setHideStoppedContainers}
>
Stopped
{t("filterStopped")}
</DropdownMenuCheckboxItem>
{(hideContainersWithoutPorts ||
hideStoppedContainers) && (
@ -537,7 +534,7 @@ const DockerContainersTable: FC<{
}}
className="w-full text-xs"
>
Clear all filters
{t("clearAllFilters")}
</Button>
</div>
</>
@ -553,12 +550,12 @@ const DockerContainersTable: FC<{
className="gap-2"
>
<Columns className="h-4 w-4" />
Columns
{t("columns")}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-48">
<DropdownMenuLabel>
Toggle Columns
{t("toggleColumns")}
</DropdownMenuLabel>
<DropdownMenuSeparator />
{table
@ -577,7 +574,7 @@ const DockerContainersTable: FC<{
}
>
{column.id === "hostname"
? "Hostname/IP"
? t("containerHostnameIp")
: column.id}
</DropdownMenuCheckboxItem>
);
@ -589,7 +586,7 @@ const DockerContainersTable: FC<{
variant="outline"
size="icon"
onClick={onRefresh}
title="Refresh containers list"
title={t("refreshContainersList")}
>
<RefreshCw className="h-4 w-4" />
</Button>
@ -644,10 +641,10 @@ const DockerContainersTable: FC<{
{searchInput && !globalFilter ? (
<div className="flex items-center justify-center gap-2 text-muted-foreground">
<div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
Searching...
{t("searching")}
</div>
) : (
`No containers found matching "${globalFilter}".`
t("noContainersFoundMatching", { filter: globalFilter })
)}
</TableCell>
</TableRow>