feat(i18n): localize identity, configuration, and event destinations

Users, groups, policies, and access keys: forms, selectors, credential
prompts, and confirmations. Selectable tables now pass onSelectAll, so
the select column shows a select-all checkbox instead of the vendor's
untranslatable "Select" header text.

Configuration and event destinations: descriptor-driven forms translate
at the rendering seam, keeping the module-level field definitions pure;
protocol names and config keys stay untranslated. Example placeholders
read 例如： in Chinese. Also restores proper bullet-list layout in the
site replication help box.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: Vonng

web-app/src/screens/Console/Account/Account.tsx

@@ -45,7 +45,8 @@ import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import { api } from "api";
 import { errorToHandler } from "api/errors";
 import HelpMenu from "../HelpMenu";
-import { ACCOUNT_TABLE_COLUMNS } from "./AccountUtils";
+import { accountTableColumns } from "./AccountUtils";
+import { interpolate, useLocalizedLink, useT } from "i18n";
 import { useAppDispatch } from "store";
 import { ServiceAccounts } from "api/consoleApi";
 import {
@@ -68,6 +69,8 @@ const DeleteServiceAccount = withSuspense(
 const Account = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
+  const t = useT();
+  const localize = useLocalizedLink();
 
   const features = useSelector(selFeatures);
 
@@ -107,7 +110,7 @@ const Account = () => {
         .catch((res) => {
           dispatch(
             setErrorSnackMessage(
-              errorToHandler(res?.error || "Error retrieving access keys"),
+              errorToHandler(res?.error || t("Error retrieving access keys")),
             ),
           );
           setLoading(false);
@@ -131,7 +134,7 @@ const Account = () => {
   const closeDeleteMultipleModalAndRefresh = (refresh: boolean) => {
     setDeleteMultipleOpen(false);
     if (refresh) {
-      dispatch(setSnackBarMessage(`Access keys deleted successfully.`));
+      dispatch(setSnackBarMessage(t("Access keys deleted successfully.")));
       setSelectedSAs([]);
       setLoading(true);
     }
@@ -213,13 +216,13 @@ const Account = () => {
         open={changePasswordModalOpen}
         closeModal={() => setChangePasswordModalOpen(false)}
       />
-      <PageHeaderWrapper label="Access Keys" actions={<HelpMenu />} />
+      <PageHeaderWrapper label={t("Access Keys")} actions={<HelpMenu />} />
 
       <PageLayout>
         <Grid container>
           <Grid item xs={12} sx={{ ...actionsTray.actionsTray }}>
             <SearchBox
-              placeholder={"Search Access Keys"}
+              placeholder={t("Search Access Keys")}
               onChange={setFilter}
               sx={{ marginRight: "auto", maxWidth: 380 }}
               value={filter}
@@ -231,13 +234,13 @@ const Account = () => {
                 gap: 5,
               }}
             >
-              <TooltipWrapper tooltip={"Delete Selected"}>
+              <TooltipWrapper tooltip={t("Delete Selected")}>
                 <Button
                   id={"delete-selected-accounts"}
                   onClick={() => {
                     setDeleteMultipleOpen(true);
                   }}
-                  label={"Delete Selected"}
+                  label={t("Delete Selected")}
                   icon={<DeleteIcon />}
                   disabled={selectedSAs.length === 0}
                   variant={"secondary"}
@@ -252,7 +255,7 @@ const Account = () => {
                 <Button
                   id={"change-password"}
                   onClick={() => setChangePasswordModalOpen(true)}
-                  label={`Change Password`}
+                  label={t("Change Password")}
                   icon={<PasswordKeyIcon />}
                   variant={"regular"}
                   disabled={userIDP}
@@ -269,7 +272,7 @@ const Account = () => {
                   onClick={() => {
                     navigate(`${IAM_PAGES.ACCOUNT_ADD}`);
                   }}
-                  label={`Create access key`}
+                  label={t("Create access key")}
                   icon={<AddIcon />}
                   variant={"callAction"}
                 />
@@ -280,9 +283,17 @@ const Account = () => {
           <Grid item xs={12}>
             <DataTable
               itemActions={tableActions}
-              entityName={"Access Keys"}
-              columns={ACCOUNT_TABLE_COLUMNS}
+              entityName={t("Access Keys")}
+              customEmptyMessage={t("There are no Access Keys yet.")}
+              columns={accountTableColumns(t)}
               onSelect={(e) => selectSAs(e, setSelectedSAs, selectedSAs)}
+              onSelectAll={() =>
+                setSelectedSAs(
+                  selectedSAs.length === filteredRecords.length
+                    ? []
+                    : filteredRecords.map((r) => `${r.accessKey}`),
+                )
+              }
               selectedItems={selectedSAs}
               isLoading={loading}
               records={filteredRecords}
@@ -291,28 +302,28 @@ const Account = () => {
           </Grid>
           <Grid item xs={12} sx={{ marginTop: 15 }}>
             <HelpBox
-              title={"Learn more about ACCESS KEYS"}
+              title={t("Learn more about ACCESS KEYS")}
               iconComponent={<AccountIcon />}
               help={
                 <Fragment>
-                  SILO access keys are child identities of an authenticated SILO
-                  user, including externally managed identities. Each access key
-                  inherits its privileges based on the policies attached to it’s
-                  parent user or those groups in which the parent user has
-                  membership. Access Keys also support an optional inline policy
-                  which further restricts access to a subset of actions and
-                  resources available to the parent user.
+                  {t(
+                    "SILO access keys are child identities of an authenticated SILO user, including externally managed identities. Each access key inherits its privileges based on the policies attached to it’s parent user or those groups in which the parent user has membership. Access Keys also support an optional inline policy which further restricts access to a subset of actions and resources available to the parent user.",
+                  )}
                   <br />
                   <br />
-                  You can learn more at the{" "}
-                  <a
-                    href="https://silo.pgsty.com/administration/identity-access-management/minio-user-management/#access-keys"
-                    target="_blank"
-                    rel="noopener"
-                  >
-                    documentation
-                  </a>
-                  .
+                  {interpolate(t("You can learn more at the {link}."), {
+                    link: (
+                      <a
+                        href={localize(
+                          "https://silo.pgsty.com/administration/identity-access-management/minio-user-management/#access-keys",
+                        )}
+                        target="_blank"
+                        rel="noopener"
+                      >
+                        {t("documentation")}
+                      </a>
+                    ),
+                  })}
                 </Fragment>
               }
             />

web-app/src/screens/Console/Account/AccountUtils.tsx

@@ -17,10 +17,12 @@
 import React from "react";
 import { DateTime } from "luxon";
 
-export const ACCOUNT_TABLE_COLUMNS = [
-  { label: "Access Key", elementKey: "accessKey" },
+// Built per render so the labels follow the active language; callers pass the
+// t() they already hold.
+export const accountTableColumns = (t: (text: string) => string) => [
+  { label: t("Access Key"), elementKey: "accessKey" },
   {
-    label: "Expiry",
+    label: t("Expiry"),
     elementKey: "expiration",
     renderFunction: (expTime: string) => {
       if (expTime !== "1970-01-01T00:00:00Z") {
@@ -30,21 +32,21 @@ export const ACCOUNT_TABLE_COLUMNS = [
 
         return <span title={fmtDate}>{fmtDate}</span>;
       } else {
-        return <span>no-expiry</span>;
+        return <span>{t("no-expiry")}</span>;
       }
     },
   },
   {
-    label: "Status",
+    label: t("Status"),
     elementKey: "accountStatus",
     renderFunction: (status: string) => {
       if (status === "off") {
-        return "Disabled";
+        return t("Disabled");
       } else {
-        return "Enabled";
+        return t("Enabled");
       }
     },
   },
-  { label: "Name", elementKey: "name" },
-  { label: "Description", elementKey: "description" },
+  { label: t("Name"), elementKey: "name" },
+  { label: t("Description"), elementKey: "description" },
 ];

web-app/src/screens/Console/Account/AddServiceAccountHelpBox.tsx

@@ -21,6 +21,7 @@ import {
   PasswordKeyIcon,
   ServiceAccountIcon,
 } from "mds";
+import { useT } from "i18n";
 
 const FeatureItem = ({
   icon,
@@ -49,6 +50,7 @@ const FeatureItem = ({
   );
 };
 const AddServiceAccountHelpBox = () => {
+  const t = useT();
   return (
     <Box
       sx={{
@@ -78,51 +80,50 @@ const AddServiceAccountHelpBox = () => {
         }}
       >
         <HelpIconFilled />
-        <div>Learn more about Access Keys</div>
+        <div>{t("Learn more about Access Keys")}</div>
       </Box>
       <Box sx={{ fontSize: "14px", marginBottom: "15px" }}>
         <Box sx={{ paddingBottom: "20px" }}>
           <FeatureItem
             icon={<ServiceAccountIcon />}
-            description={`Create Access Keys`}
+            description={t("Create Access Keys")}
           />
           <Box sx={{ paddingTop: "20px" }}>
-            Access Keys inherit the policies explicitly attached to the parent
-            user, and the policies attached to each group in which the parent
-            user has membership.
+            {t(
+              "Access Keys inherit the policies explicitly attached to the parent user, and the policies attached to each group in which the parent user has membership.",
+            )}
           </Box>
         </Box>
         <Box sx={{ paddingBottom: "20px" }}>
           <FeatureItem
             icon={<PasswordKeyIcon />}
-            description={`Assign Custom Credentials`}
+            description={t("Assign Custom Credentials")}
           />
           <Box sx={{ paddingTop: "10px" }}>
-            Randomized access credentials are recommended, and provided by
-            default. You may use your own custom Access Key and Secret Key by
-            replacing the default values. After creation of any Access Key, you
-            will be given the opportunity to view and download the account
-            credentials.
+            {t(
+              "Randomized access credentials are recommended, and provided by default. You may use your own custom Access Key and Secret Key by replacing the default values. After creation of any Access Key, you will be given the opportunity to view and download the account credentials.",
+            )}
           </Box>
           <Box sx={{ paddingTop: "10px" }}>
-            Access Keys support programmatic access by applications. You cannot
-            use a Access Key to log into the SILO Console.
+            {t(
+              "Access Keys support programmatic access by applications. You cannot use a Access Key to log into the SILO Console.",
+            )}
           </Box>
         </Box>
         <Box sx={{ paddingBottom: "20px" }}>
           <FeatureItem
             icon={<IAMPoliciesIcon />}
-            description={`Assign Access Policies`}
+            description={t("Assign Access Policies")}
           />
           <Box sx={{ paddingTop: "10px" }}>
-            You can specify an optional JSON-formatted IAM policy to further
-            restrict Access Key access to a subset of the actions and resources
-            explicitly allowed for the parent user. Additional access beyond
-            that of the parent user cannot be implemented through these
-            policies.
+            {t(
+              "You can specify an optional JSON-formatted IAM policy to further restrict Access Key access to a subset of the actions and resources explicitly allowed for the parent user. Additional access beyond that of the parent user cannot be implemented through these policies.",
+            )}
           </Box>
           <Box sx={{ paddingTop: "10px" }}>
-            You cannot modify the optional Access Key IAM policy after saving.
+            {t(
+              "You cannot modify the optional Access Key IAM policy after saving.",
+            )}
           </Box>
         </Box>
       </Box>