Merge pull request #16 from vlalx/i18n_admin_api_keys

Lokowitz · web-flow · commit a8e8676b0ae7 · 2025-05-06T14:10:27.000+02:00
i18n in admin/api-keys
diff --git a/messages/de-DE.json b/messages/de-DE.json
@@ -286,6 +286,7 @@
     "apiKeysDelete": "API-Schlüssel löschen",
     "apiKeysManage": "API-Schlüssel verwalten",
     "apiKeysDescription": "API-Schlüssel werden zur Authentifizierung mit der Integrations-API verwendet",
+    "apiKeysSettings": "{apiKeyName} Einstellungen",
     "userTitle": "Alle Benutzer verwalten",
     "userDescription": "Alle Benutzer im System anzeigen und verwalten",
     "userAbount": "Über Benutzerverwaltung",
diff --git a/messages/en-US.json b/messages/en-US.json
@@ -286,6 +286,7 @@
     "apiKeysDelete": "Delete API Key",
     "apiKeysManage": "Manage API Keys",
     "apiKeysDescription": "API keys are used to authenticate with the integration API",
+    "apiKeysSettings": "{apiKeyName} Settings",
     "userTitle": "Manage All Users",
     "userDescription": "View and manage all users in the system",
     "userAbount": "About User Management",
diff --git a/messages/fr-FR.json b/messages/fr-FR.json
@@ -286,6 +286,7 @@
     "apiKeysDelete": "Supprimer la clé API",
     "apiKeysManage": "Gérer les clés API",
     "apiKeysDescription": "Les clés API sont utilisées pour s'authentifier avec l'API d'intégration",
+    "apiKeysSettings": "Paramètres de {apiKeyName}",
     "userTitle": "Gérer tous les utilisateurs",
     "userDescription": "Voir et gérer tous les utilisateurs du système",
     "userAbount": "À propos de la gestion des utilisateurs",
diff --git a/messages/it-IT.json b/messages/it-IT.json
@@ -286,6 +286,7 @@
     "apiKeysDelete": "Elimina Chiave API",
     "apiKeysManage": "Gestisci Chiavi API",
     "apiKeysDescription": "Le chiavi API sono utilizzate per autenticarsi con l'API di integrazione",
+    "apiKeysSettings": "Impostazioni {apiKeyName}",
     "userTitle": "Gestisci Tutti Gli Utenti",
     "userDescription": "Visualizza e gestisci tutti gli utenti del sistema",
     "userAbount": "Informazioni Sulla Gestione Utente",
diff --git a/messages/pl-PL.json b/messages/pl-PL.json
@@ -286,6 +286,7 @@
     "apiKeysDelete": "Usuń klucz API",
     "apiKeysManage": "Zarządzaj kluczami API",
     "apiKeysDescription": "Klucze API służą do uwierzytelniania z API integracji",
+    "apiKeysSettings": "Ustawienia {apiKeyName}",
     "userTitle": "Zarządzaj wszystkimi użytkownikami",
     "userDescription": "Zobacz i zarządzaj wszystkimi użytkownikami w systemie",
     "userAbount": "O zarządzaniu użytkownikami",
diff --git a/messages/pt-PT.json b/messages/pt-PT.json
@@ -286,6 +286,7 @@
     "apiKeysDelete": "Excluir Chave API",
     "apiKeysManage": "Gerenciar Chaves API",
     "apiKeysDescription": "As chaves API são usadas para autenticar com a API de integração",
+    "apiKeysSettings": "Configurações de {apiKeyName}",
     "userTitle": "Gerenciar Todos os Usuários",
     "userDescription": "Visualizar e gerenciar todos os usuários no sistema",
     "userAbount": "Sobre a Gestão de Usuário",
diff --git a/messages/tr-TR.json b/messages/tr-TR.json
@@ -286,6 +286,7 @@
     "apiKeysDelete": "Delete API Key",
     "apiKeysManage": "Manage API Keys",
     "apiKeysDescription": "API keys are used to authenticate with the integration API",
+    "apiKeysSettings": "{apiKeyName} Settings",
     "userTitle": "Manage All Users",
     "userDescription": "View and manage all users in the system",
     "userAbount": "About User Management",
diff --git a/src/app/[orgId]/settings/api-keys/OrgApiKeysTable.tsx b/src/app/[orgId]/settings/api-keys/OrgApiKeysTable.tsx
@@ -101,7 +101,7 @@ export default function OrgApiKeysTable({
                                     setIsDeleteModalOpen(true);
                                 }}
                             >
-                                <span className="text-red-500">Delete</span>
+                                <span className="text-red-500">{t('delete')}</span>
                             </DropdownMenuItem>
                         </DropdownMenuContent>
                     </DropdownMenu>
diff --git a/src/app/[orgId]/settings/api-keys/[apiKeyId]/layout.tsx b/src/app/[orgId]/settings/api-keys/[apiKeyId]/layout.tsx
@@ -55,7 +55,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
 
     return (
         <>
-            <SettingsSectionTitle title={`${apiKey?.name} Settings`} />
+            <SettingsSectionTitle title={t('apiKeysSettings', {apiKeyName: apiKey?.name})} />
 
             <ApiKeyProvider apiKey={apiKey}>
                 <HorizontalTabs items={navItems}>{children}</HorizontalTabs>
diff --git a/src/app/admin/api-keys/ApiKeysDataTable.tsx b/src/app/admin/api-keys/ApiKeysDataTable.tsx
@@ -32,6 +32,7 @@ import { Input } from "@app/components/ui/input";
 import { DataTablePagination } from "@app/components/DataTablePagination";
 import { Plus, Search } from "lucide-react";
 import { DataTable } from "@app/components/ui/data-table";
+import { useTranslations } from "next-intl";
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
@@ -44,15 +45,17 @@ export function ApiKeysDataTable<TData, TValue>({
     columns,
     data
 }: DataTableProps<TData, TValue>) {
+
+    const t = useTranslations();
     return (
         <DataTable
             columns={columns}
             data={data}
-            title="API Keys"
-            searchPlaceholder="Search API keys..."
+            title={t('apiKeys')}
+            searchPlaceholder={t('searchApiKeys')}
             searchColumn="name"
             onAdd={addApiKey}
-            addButtonText="Generate API Key"
+            addButtonText={t('apiKeysAdd')}
         />
     );
 }
diff --git a/src/app/admin/api-keys/ApiKeysTable.tsx b/src/app/admin/api-keys/ApiKeysTable.tsx
@@ -24,6 +24,7 @@ import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import moment from "moment";
 import { ApiKeysDataTable } from "./ApiKeysDataTable";
+import { useTranslations } from "next-intl";
 
 export type ApiKeyRow = {
     id: string;
@@ -45,14 +46,16 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
 
     const api = createApiClient(useEnvContext());
 
+    const t = useTranslations();
+
     const deleteSite = (apiKeyId: string) => {
         api.delete(`/api-key/${apiKeyId}`)
             .catch((e) => {
-                console.error("Error deleting API key", e);
+                console.error(t('apiKeysErrorDelete'), e);
                 toast({
                     variant: "destructive",
-                    title: "Error deleting API key",
-                    description: formatAxiosError(e, "Error deleting API key")
+                    title: t('apiKeysErrorDelete'),
+                    description: formatAxiosError(e, t('apiKeysErrorDeleteMessage'))
                 });
             })
             .then(() => {
@@ -86,15 +89,15 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
                                     setSelected(apiKeyROw);
                                 }}
                             >
-                                <span>View settings</span>
+                                <span>{t('viewSettings')}</span>
                             </DropdownMenuItem>
                             <DropdownMenuItem
                                 onClick={() => {
                                     setSelected(apiKeyROw);
                                     setIsDeleteModalOpen(true);
                                 }}
                             >
-                                <span className="text-red-500">Delete</span>
+                                <span className="text-red-500">{t('delete')}</span>
                             </DropdownMenuItem>
                         </DropdownMenuContent>
                     </DropdownMenu>
@@ -111,7 +114,7 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
                             column.toggleSorting(column.getIsSorted() === "asc")
                         }
                     >
-                        Name
+                        {t('name')}
                         <ArrowUpDown className="ml-2 h-4 w-4" />
                     </Button>
                 );
@@ -141,7 +144,7 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
                     <div className="flex items-center justify-end">
                         <Link href={`/admin/api-keys/${r.id}`}>
                             <Button variant={"outlinePrimary"} className="ml-2">
-                                Edit
+                                {t('edit')}
                                 <ArrowRight className="ml-2 w-4 h-4" />
                             </Button>
                         </Link>
@@ -163,27 +166,24 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
                     dialog={
                         <div className="space-y-4">
                             <p>
-                                Are you sure you want to remove the API key{" "}
-                                <b>{selected?.name || selected?.id}</b>?
+                                {t('apiKeysQuestionRemove', {selectedApiKey: selected?.name || selected?.id})}
                             </p>
 
                             <p>
                                 <b>
-                                    Once removed, the API key will no longer be
-                                    able to be used.
+                                    {t('apiKeysMessageRemove')}
                                 </b>
                             </p>
 
                             <p>
-                                To confirm, please type the name of the API key
-                                below.
+                                {t('apiKeysMessageConfirm')}
                             </p>
                         </div>
                     }
-                    buttonText="Confirm Delete API Key"
+                    buttonText={t('apiKeysDeleteConfirm')}
                     onConfirm={async () => deleteSite(selected!.id)}
                     string={selected.name}
-                    title="Delete API Key"
+                    title={t('apiKeysDelete')}
                 />
             )}
 
diff --git a/src/app/admin/api-keys/[apiKeyId]/layout.tsx b/src/app/admin/api-keys/[apiKeyId]/layout.tsx
@@ -20,6 +20,7 @@ import {
 import { GetApiKeyResponse } from "@server/routers/apiKeys";
 import ApiKeyProvider from "@app/providers/ApiKeyProvider";
 import { HorizontalTabs } from "@app/components/HorizontalTabs";
+import { useTranslations } from "next-intl";
 
 interface SettingsLayoutProps {
     children: React.ReactNode;
@@ -29,6 +30,8 @@ interface SettingsLayoutProps {
 export default async function SettingsLayout(props: SettingsLayoutProps) {
     const params = await props.params;
 
+    const t = useTranslations();
+
     const { children } = props;
 
     let apiKey = null;
@@ -45,14 +48,14 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
 
     const navItems = [
         {
-            title: "Permissions",
+            title: t('apiKeysPermissionsTitle'),
             href: "/admin/api-keys/{apiKeyId}/permissions"
         }
     ];
 
     return (
         <>
-            <SettingsSectionTitle title={`${apiKey?.name} Settings`} />
+            <SettingsSectionTitle title={t('apiKeysSettings', {apiKeyName: apiKey?.name})} />
 
             <ApiKeyProvider apiKey={apiKey}>
                 <HorizontalTabs items={navItems}>{children}</HorizontalTabs>
diff --git a/src/app/admin/api-keys/[apiKeyId]/permissions/page.tsx b/src/app/admin/api-keys/[apiKeyId]/permissions/page.tsx
@@ -23,12 +23,15 @@ import { ListApiKeyActionsResponse } from "@server/routers/apiKeys";
 import { AxiosResponse } from "axios";
 import { useParams } from "next/navigation";
 import { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
 
 export default function Page() {
     const { env } = useEnvContext();
     const api = createApiClient({ env });
     const { apiKeyId } = useParams();
 
+    const t = useTranslations();
+
     const [loadingPage, setLoadingPage] = useState<boolean>(true);
     const [selectedPermissions, setSelectedPermissions] = useState<
         Record<string, boolean>
@@ -47,10 +50,10 @@ export default function Page() {
                 .catch((e) => {
                     toast({
                         variant: "destructive",
-                        title: "Error loading API key actions",
+                        title: t('apiKeysPermissionsErrorLoadingActions'),
                         description: formatAxiosError(
                             e,
-                            "Error loading API key actions"
+                            t('apiKeysPermissionsErrorLoadingActions')
                         )
                     });
                 });
@@ -81,18 +84,18 @@ export default function Page() {
                 )
             })
             .catch((e) => {
-                console.error("Error setting permissions", e);
+                console.error(t('apiKeysPermissionsErrorUpdate'), e);
                 toast({
                     variant: "destructive",
-                    title: "Error setting permissions",
+                    title: t('apiKeysPermissionsErrorUpdate'),
                     description: formatAxiosError(e)
                 });
             });
 
         if (actionsRes && actionsRes.status === 200) {
             toast({
-                title: "Permissions updated",
-                description: "The permissions have been updated."
+                title: t('apiKeysPermissionsUpdated'),
+                description: t('apiKeysPermissionsUpdatedDescription')
             });
         }
 
@@ -106,10 +109,10 @@ export default function Page() {
                     <SettingsSection>
                         <SettingsSectionHeader>
                             <SettingsSectionTitle>
-                                Permissions
+                                {t('apiKeysPermissionsTitle')}
                             </SettingsSectionTitle>
                             <SettingsSectionDescription>
-                                Determine what this API key can do
+                                {t('apiKeysPermissionsGeneralSettingsDescription')}
                             </SettingsSectionDescription>
                         </SettingsSectionHeader>
                         <SettingsSectionBody>
@@ -127,7 +130,7 @@ export default function Page() {
                                     loading={loadingSavePermissions}
                                     disabled={loadingSavePermissions}
                                 >
-                                    Save Permissions
+                                    {t('apiKeysPermissionsSave')}
                                 </Button>
                             </SettingsSectionFooter>
                         </SettingsSectionBody>
diff --git a/src/app/admin/api-keys/create/page.tsx b/src/app/admin/api-keys/create/page.tsx
diff --git a/src/app/admin/api-keys/page.tsx b/src/app/admin/api-keys/page.tsx

Original file line number	Diff line number	Diff line change
`@@ -101,7 +101,7 @@ export default function OrgApiKeysTable({`
`101`	`101`	`setIsDeleteModalOpen(true);`
`102`	`102`	`}}`
`103`	`103`	`>`
`104`		`- <span className="text-red-500">Delete</span>`
	`104`	`+ <span className="text-red-500">{t('delete')}</span>`
`105`	`105`	`</DropdownMenuItem>`
`106`	`106`	`</DropdownMenuContent>`
`107`	`107`	`</DropdownMenu>`