add label interpolation to description fields (#30325)

fixes: #30271

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

js/apps/admin-ui/src/clients/ClientsSection.tsx

@@ -1,5 +1,6 @@
 import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
 import type { ClientQuery } from "@keycloak/keycloak-admin-client/lib/resources/clients";
+import { label } from "@keycloak/keycloak-ui-shared";
 import {
   AlertVariant,
   Badge,
@@ -10,7 +11,14 @@ import {
   TabTitleText,
   ToolbarItem,
 } from "@patternfly/react-core";
-import { IRowData, TableText, cellWidth } from "@patternfly/react-table";
+import {
+  IFormatter,
+  IFormatterValueType,
+  IRowData,
+  TableText,
+  cellWidth,
+} from "@patternfly/react-table";
+import { TFunction } from "i18next";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -40,6 +48,12 @@ import { ClientsTab, toClients } from "./routes/Clients";
 import { toImportClient } from "./routes/ImportClient";
 import { getProtocolName, isRealmClient } from "./utils";
 
+export const translationFormatter =
+  (t: TFunction): IFormatter =>
+  (data?: IFormatterValueType) => {
+    return data ? label(t, data as string) || "—" : "—";
+  };
+
 const ClientDetailLink = (client: ClientRepresentation) => {
   const { t } = useTranslation();
   const { realm } = useRealm();
@@ -60,11 +74,14 @@ const ClientDetailLink = (client: ClientRepresentation) => {
   );
 };
 
-const ClientName = (client: ClientRepresentation) => (
-  <TableText wrapModifier="truncate">
-    {emptyFormatter()(client.name) as string}
-  </TableText>
-);
+const ClientName = (client: ClientRepresentation) => {
+  const { t } = useTranslation();
+  return (
+    <TableText wrapModifier="truncate">
+      {translationFormatter(t)(client.name) as string}
+    </TableText>
+  );
+};
 
 const ClientDescription = (client: ClientRepresentation) => (
   <TableText wrapModifier="truncate">

js/apps/admin-ui/src/clients/scopes/ClientScopes.tsx

@@ -41,6 +41,7 @@ import {
 import { useAccess } from "../../context/access/Access";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import useLocaleSort, { mapByKey } from "../../utils/useLocaleSort";
+import { translationFormatter } from "../ClientsSection";
 import { toDedicatedScope } from "../routes/DedicatedScopeDetails";
 import { AddScopeDialog } from "./AddScopeDialog";
 
@@ -368,7 +369,7 @@ export const ClientScopes = ({
               <TypeSelector clientId={clientId} refresh={refresh} {...row} />
             ),
           },
-          { name: "description" },
+          { name: "description", cellFormatters: [translationFormatter(t)] },
         ]}
         actions={
           isManager

js/apps/admin-ui/src/components/roles-list/RolesList.tsx

@@ -5,6 +5,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, To, useNavigate } from "react-router-dom";
 import { useAdminClient } from "../../admin-client";
+import { translationFormatter } from "../../clients/ClientsSection";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { toRealmSettings } from "../../realm-settings/routes/RealmSettings";
 import { emptyFormatter, upperCaseFormatter } from "../../util";
@@ -162,8 +163,7 @@ export const RolesList = ({
           },
           {
             name: "description",
-            displayKey: "description",
-            cellFormatters: [emptyFormatter()],
+            cellFormatters: [translationFormatter(t)],
           },
         ]}
         emptyState={

js/apps/admin-ui/src/realm-settings/AddClientProfileModal.tsx

@@ -4,6 +4,7 @@ import { Button, Label, Modal, ModalVariant } from "@patternfly/react-core";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../admin-client";
+import { translationFormatter } from "../clients/ClientsSection";
 import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
@@ -116,7 +117,7 @@ export const AddClientProfileModal = (props: AddClientProfileModalProps) => {
           },
           {
             name: "description",
-            displayKey: "description",
+            cellFormatters: [translationFormatter(t)],
           },
         ]}
         emptyState={

js/apps/admin-ui/src/realm-settings/PoliciesTab.tsx

@@ -19,6 +19,7 @@ import { Controller, useForm, type UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { useAdminClient } from "../admin-client";
+import { translationFormatter } from "../clients/ClientsSection";
 import { useAlerts } from "../components/alert/Alerts";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner";
@@ -280,6 +281,7 @@ export const PoliciesTab = () => {
             },
             {
               name: "description",
+              cellFormatters: [translationFormatter(t)],
             },
           ]}
         />

js/apps/admin-ui/src/realm-settings/event-config/EventsTypeTable.tsx

@@ -1,11 +1,11 @@
-import { useTranslation } from "react-i18next";
 import { Button, ToolbarItem } from "@patternfly/react-core";
-
+import { useTranslation } from "react-i18next";
+import { translationFormatter } from "../../clients/ClientsSection";
+import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
 import {
   Action,
   KeycloakDataTable,
 } from "../../components/table-toolbar/KeycloakDataTable";
-import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
 
 export type EventType = {
   id: string;
@@ -66,7 +66,7 @@ export function EventsTypeTable({
         },
         {
           name: "description",
-          displayKey: "description",
+          cellFormatters: [translationFormatter(t)],
         },
       ]}
       emptyState={

js/apps/admin-ui/src/util.ts

@@ -5,11 +5,10 @@ import { saveAs } from "file-saver";
 import { flatten } from "flat";
 import { cloneDeep } from "lodash-es";
 import { FieldValues, Path, PathValue, UseFormSetValue } from "react-hook-form";
-
 import {
+  KeyValueType,
   arrayToKeyValue,
   keyValueToArray,
-  KeyValueType,
 } from "./components/key-value-form/key-value-convert";
 import { ReplaceString } from "./utils/types";