api keys

src/app/[orgId]/settings/api-keys/OrgApiKeysTable.tsx

@@ -24,6 +24,7 @@ import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import moment from "moment";
+import { useTranslations } from "next-intl";
 
 export type OrgApiKeyRow = {
     id: string;
@@ -49,14 +50,16 @@ export default function OrgApiKeysTable({
 
     const api = createApiClient(useEnvContext());
 
+    const t = useTranslations();
+
     const deleteSite = (apiKeyId: string) => {
         api.delete(`/org/${orgId}/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(() => {
@@ -90,7 +93,7 @@ export default function OrgApiKeysTable({
                                     setSelected(apiKeyROw);
                                 }}
                             >
-                                <span>View settings</span>
+                                <span>{t('viewSettings')}</span>
                             </DropdownMenuItem>
                             <DropdownMenuItem
                                 onClick={() => {
@@ -115,7 +118,7 @@ export default function OrgApiKeysTable({
                             column.toggleSorting(column.getIsSorted() === "asc")
                         }
                     >
-                        Name
+                        {t('name')}
                         <ArrowUpDown className="ml-2 h-4 w-4" />
                     </Button>
                 );
@@ -145,7 +148,7 @@ export default function OrgApiKeysTable({
                     <div className="flex items-center justify-end">
                         <Link href={`/${orgId}/settings/api-keys/${r.id}`}>
                             <Button variant={"outlinePrimary"} className="ml-2">
-                                Edit
+                                {t('edit')}
                                 <ArrowRight className="ml-2 w-4 h-4" />
                             </Button>
                         </Link>
@@ -167,28 +170,24 @@ export default function OrgApiKeysTable({
                     dialog={
                         <div className="space-y-4">
                             <p>
-                                Are you sure you want to remove the API key{" "}
-                                <b>{selected?.name || selected?.id}</b> from the
-                                organization?
+                                {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')}
                 />
             )}