Add translation keys in admin/api-keys

Author: vlalx

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')}
         />
     );
 }

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')}
                 />
             )}
 

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>

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>