diff --git a/js/apps/admin-ui/src/clients/ClientsSection.tsx b/js/apps/admin-ui/src/clients/ClientsSection.tsx index 4639c15444..411844ab44 100644 --- a/js/apps/admin-ui/src/clients/ClientsSection.tsx +++ b/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 })); diff --git a/js/apps/admin-ui/src/clients/scopes/ClientScopes.tsx b/js/apps/admin-ui/src/clients/scopes/ClientScopes.tsx index cfb563e480..a13889c69b 100644 --- a/js/apps/admin-ui/src/clients/scopes/ClientScopes.tsx +++ b/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"; diff --git a/js/apps/admin-ui/src/components/role-mapping/AddRoleMappingModal.tsx b/js/apps/admin-ui/src/components/role-mapping/AddRoleMappingModal.tsx index 837a83257d..f4703e8402 100644 --- a/js/apps/admin-ui/src/components/role-mapping/AddRoleMappingModal.tsx +++ b/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={ diff --git a/js/apps/admin-ui/src/components/role-mapping/RoleMapping.tsx b/js/apps/admin-ui/src/components/role-mapping/RoleMapping.tsx index ba60753b93..36bec81da6 100644 --- a/js/apps/admin-ui/src/components/role-mapping/RoleMapping.tsx +++ b/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={ 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 bcf228d74e..b6ba6d5a1f 100644 --- a/js/apps/admin-ui/src/components/roles-list/RolesList.tsx +++ b/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; diff --git a/js/apps/admin-ui/src/realm-settings/AddClientProfileModal.tsx b/js/apps/admin-ui/src/realm-settings/AddClientProfileModal.tsx index a6134c64bd..9d70bc47f8 100644 --- a/js/apps/admin-ui/src/realm-settings/AddClientProfileModal.tsx +++ b/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 & { diff --git a/js/apps/admin-ui/src/realm-settings/PoliciesTab.tsx b/js/apps/admin-ui/src/realm-settings/PoliciesTab.tsx index fd794ac40d..a8caa31ed0 100644 --- a/js/apps/admin-ui/src/realm-settings/PoliciesTab.tsx +++ b/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"; 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 4bf47ff7c3..222f67f7aa 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 { 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; diff --git a/js/apps/admin-ui/src/utils/translationFormatter.ts b/js/apps/admin-ui/src/utils/translationFormatter.ts new file mode 100644 index 0000000000..f4853a42d1 --- /dev/null +++ b/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) || "—" : "—"; + };