diff --git a/js/apps/admin-ui/src/clients/ClientsSection.tsx b/js/apps/admin-ui/src/clients/ClientsSection.tsx
index 870963e7f5..ab54aca982 100644
--- a/js/apps/admin-ui/src/clients/ClientsSection.tsx
+++ b/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) => (
-
- {emptyFormatter()(client.name) as string}
-
-);
+const ClientName = (client: ClientRepresentation) => {
+ const { t } = useTranslation();
+ return (
+
+ {translationFormatter(t)(client.name) as string}
+
+ );
+};
const ClientDescription = (client: ClientRepresentation) => (
diff --git a/js/apps/admin-ui/src/clients/scopes/ClientScopes.tsx b/js/apps/admin-ui/src/clients/scopes/ClientScopes.tsx
index 4388ae81eb..26de429095 100644
--- a/js/apps/admin-ui/src/clients/scopes/ClientScopes.tsx
+++ b/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 = ({
),
},
- { name: "description" },
+ { name: "description", cellFormatters: [translationFormatter(t)] },
]}
actions={
isManager
diff --git a/js/apps/admin-ui/src/components/roles-list/RolesList.tsx b/js/apps/admin-ui/src/components/roles-list/RolesList.tsx
index 16064e899d..d78eff0250 100644
--- a/js/apps/admin-ui/src/components/roles-list/RolesList.tsx
+++ b/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={
diff --git a/js/apps/admin-ui/src/realm-settings/AddClientProfileModal.tsx b/js/apps/admin-ui/src/realm-settings/AddClientProfileModal.tsx
index 313acfbc80..a6134c64bd 100644
--- a/js/apps/admin-ui/src/realm-settings/AddClientProfileModal.tsx
+++ b/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={
diff --git a/js/apps/admin-ui/src/realm-settings/PoliciesTab.tsx b/js/apps/admin-ui/src/realm-settings/PoliciesTab.tsx
index df02d009fc..c0fdec4093 100644
--- a/js/apps/admin-ui/src/realm-settings/PoliciesTab.tsx
+++ b/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)],
},
]}
/>
diff --git a/js/apps/admin-ui/src/realm-settings/event-config/EventsTypeTable.tsx b/js/apps/admin-ui/src/realm-settings/event-config/EventsTypeTable.tsx
index c6d8216651..4bf47ff7c3 100644
--- a/js/apps/admin-ui/src/realm-settings/event-config/EventsTypeTable.tsx
+++ b/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={
diff --git a/js/apps/admin-ui/src/util.ts b/js/apps/admin-ui/src/util.ts
index 7213385349..8f7df66891 100644
--- a/js/apps/admin-ui/src/util.ts
+++ b/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";