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";