added translation formatter to role description (#31747)

fixes: #31592

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

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

@@ -1,6 +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, useEnvironment } from "@keycloak/keycloak-ui-shared";
+import { useAlerts, useEnvironment } from "@keycloak/keycloak-ui-shared";
 import {
   AlertVariant,
   Badge,
@@ -11,19 +11,11 @@ import {
   TabTitleText,
   ToolbarItem,
 } from "@patternfly/react-core";
-import {
-  IFormatter,
-  IFormatterValueType,
-  IRowData,
-  TableText,
-  cellWidth,
-} from "@patternfly/react-table";
-import { TFunction } from "i18next";
+import { IRowData, TableText, cellWidth } from "@patternfly/react-table";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { useAdminClient } from "../admin-client";
-import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { FormattedLink } from "../components/external-link/FormattedLink";
 import {
@@ -41,6 +33,7 @@ import { Environment } from "../environment";
 import helpUrls from "../help-urls";
 import { emptyFormatter, exportClient } from "../util";
 import { convertClientToUrl } from "../utils/client-url";
+import { translationFormatter } from "../utils/translationFormatter";
 import { InitialAccessTokenList } from "./initial-access/InitialAccessTokenList";
 import { ClientRegistration } from "./registration/ClientRegistration";
 import { toAddClient } from "./routes/AddClient";
@@ -49,12 +42,6 @@ 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();
@@ -157,7 +144,7 @@ export default function ClientsSection() {
       params.clientId = search;
       params.search = true;
     }
-    return await adminClient.clients.find({ ...params });
+    return adminClient.clients.find({ ...params });
   };
 
   const useTab = (tab: ClientsTab) => useRoutableTab(toClients({ realm, tab }));

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

@@ -1,4 +1,5 @@
 import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientScopeRepresentation";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import {
   AlertVariant,
   Button,
@@ -22,7 +23,6 @@ import {
   nameFilter,
   typeFilter,
 } from "../../client-scopes/details/SearchFilter";
-import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import {
   AllClientScopeType,
   AllClientScopes,
@@ -40,8 +40,8 @@ import {
 } from "../../components/table-toolbar/KeycloakDataTable";
 import { useAccess } from "../../context/access/Access";
 import { useRealm } from "../../context/realm-context/RealmContext";
+import { translationFormatter } from "../../utils/translationFormatter";
 import useLocaleSort, { mapByKey } from "../../utils/useLocaleSort";
-import { translationFormatter } from "../ClientsSection";
 import { toDedicatedScope } from "../routes/DedicatedScopeDetails";
 import { AddScopeDialog } from "./AddScopeDialog";
 

js/apps/admin-ui/src/components/role-mapping/AddRoleMappingModal.tsx

@@ -13,6 +13,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../../admin-client";
 import { useAccess } from "../../context/access/Access";
+import { translationFormatter } from "../../utils/translationFormatter";
 import useLocaleSort from "../../utils/useLocaleSort";
 import { ListEmptyState } from "../list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../table-toolbar/KeycloakDataTable";
@@ -187,6 +188,7 @@ export const AddRoleMappingModal = ({
           {
             name: "role.description",
             displayKey: "description",
+            cellFormatters: [translationFormatter(t)],
           },
         ]}
         emptyState={

js/apps/admin-ui/src/components/role-mapping/RoleMapping.tsx

@@ -1,6 +1,7 @@
 import type KeycloakAdminClient from "@keycloak/keycloak-admin-client";
 import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
 import type RoleRepresentation from "@keycloak/keycloak-admin-client/lib/defs/roleRepresentation";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import {
   AlertVariant,
   Badge,
@@ -14,7 +15,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../../admin-client";
 import { emptyFormatter, upperCaseFormatter } from "../../util";
-import { useAlerts } from "@keycloak/keycloak-ui-shared";
+import { translationFormatter } from "../../utils/translationFormatter";
 import { useConfirmDialog } from "../confirm-dialog/ConfirmDialog";
 import { ListEmptyState } from "../list-empty-state/ListEmptyState";
 import { Action, KeycloakDataTable } from "../table-toolbar/KeycloakDataTable";
@@ -240,19 +241,19 @@ export const RoleMapping = ({
         columns={[
           {
             name: "role.name",
-            displayKey: t("name"),
+            displayKey: "name",
             transforms: [cellWidth(30)],
             cellRenderer: ServiceRole,
           },
           {
             name: "role.isInherited",
-            displayKey: t("inherent"),
+            displayKey: "inherent",
             cellFormatters: [upperCaseFormatter(), emptyFormatter()],
           },
           {
             name: "role.description",
-            displayKey: t("description"),
-            cellFormatters: [emptyFormatter()],
+            displayKey: "description",
+            cellFormatters: [translationFormatter(t)],
           },
         ]}
         emptyState={

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

@@ -1,20 +1,20 @@
 import type RoleRepresentation from "@keycloak/keycloak-admin-client/lib/defs/roleRepresentation";
-import { HelpItem } from "@keycloak/keycloak-ui-shared";
+import { HelpItem, useAlerts } from "@keycloak/keycloak-ui-shared";
 import { AlertVariant, Button, ButtonVariant } from "@patternfly/react-core";
 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 { useAccess } from "../../context/access/Access";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { toRealmSettings } from "../../realm-settings/routes/RealmSettings";
 import { emptyFormatter, upperCaseFormatter } from "../../util";
-import { useAlerts } from "@keycloak/keycloak-ui-shared";
+import { translationFormatter } from "../../utils/translationFormatter";
 import { useConfirmDialog } from "../confirm-dialog/ConfirmDialog";
 import { ListEmptyState } from "../list-empty-state/ListEmptyState";
 import { Action, KeycloakDataTable } from "../table-toolbar/KeycloakDataTable";
+
 import "./RolesList.css";
-import { useAccess } from "../../context/access/Access";
 
 type RoleDetailLinkProps = RoleRepresentation & {
   defaultRoleName?: string;

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

@@ -4,10 +4,10 @@ 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";
+import { translationFormatter } from "../utils/translationFormatter";
 import { useFetch } from "../utils/useFetch";
 
 type ClientProfile = ClientProfileRepresentation & {

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

@@ -1,4 +1,5 @@
 import type ClientPolicyRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientPolicyRepresentation";
+import { useAlerts } from "@keycloak/keycloak-ui-shared";
 import { CodeEditor, Language } from "@patternfly/react-code-editor";
 import {
   AlertVariant,
@@ -19,8 +20,6 @@ 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 "@keycloak/keycloak-ui-shared";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
@@ -30,6 +29,7 @@ import {
 } from "../components/table-toolbar/KeycloakDataTable";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { prettyPrintJSON } from "../util";
+import { translationFormatter } from "../utils/translationFormatter";
 import { useFetch } from "../utils/useFetch";
 import { toAddClientPolicy } from "./routes/AddClientPolicy";
 import { toClientPolicies } from "./routes/ClientPolicies";

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

@@ -1,11 +1,11 @@
 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 { translationFormatter } from "../../utils/translationFormatter";
 
 export type EventType = {
   id: string;

js/apps/admin-ui/src/utils/translationFormatter.ts

@@ -0,0 +1,9 @@
+import { label } from "@keycloak/keycloak-ui-shared";
+import { IFormatter, IFormatterValueType } from "@patternfly/react-table";
+import { TFunction } from "i18next";
+
+export const translationFormatter =
+  (t: TFunction): IFormatter =>
+  (data?: IFormatterValueType) => {
+    return data ? label(t, data as string) || "—" : "—";
+  };