mirror/keycloak
1
0
Fork 0
mirror of https://github.com/keycloak/keycloak.git synced 2025-12-30 11:29:57 -06:00
Code Issues Packages Projects Releases Wiki Activity

small refactor to better understand (#37291) (#37292)

Browse Source 
fixes: #37268

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
(cherry picked from commit 7a8d18122a)
This commit is contained in:
Erik Jan de Wit
2025-02-13 15:01:58 +01:00
committed by GitHub
parent 5d1166a111
commit 6ec1610cd8
2 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
js/apps/admin-ui/src/realm-settings/user-profile/attribute/AddTranslationsDialog.tsx
View File

@@ -139,7 +139,10 @@ export const AddTranslationsDialog = ({
spaceItems={{ default: "spaceItemsNone" }}
>
<FlexItem>
<Trans i18nKey="addTranslationsModalTitle" values={{ fieldName }}>
<Trans
i18nKey="addTranslationsModalTitle"
values={{ fieldName: t(fieldName) }}
>
You are able to translate the fieldName based on your locale or
<strong>location</strong>
</Trans>

24
js/apps/admin-ui/src/realm-settings/user-profile/attribute/TranslatableField.tsx
View File

@@ -1,4 +1,5 @@
import KeycloakAdminClient from "@keycloak/keycloak-admin-client";
import RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
import { FormErrorText } from "@keycloak/keycloak-ui-shared";
import {
Alert,
@@ -9,6 +10,7 @@ import {
TextInput,
} from "@patternfly/react-core";
import { GlobeRouteIcon } from "@patternfly/react-icons";
import { TFunction } from "i18next";
import { useEffect } from "react";
import { useFormContext, useWatch } from "react-hook-form";
import { Trans, useTranslation } from "react-i18next";
@@ -67,6 +69,18 @@ type TranslatableFieldProps = {
fieldName: string;
};
function hasTranslation(value: string, t: TFunction) {
return t(value) === value && value !== "";
}
function isTranslationRequired(
value: string,
t: TFunction,
realm?: RealmRepresentation,
) {
return realm?.internationalizationEnabled && hasTranslation(value, t);
}
export const TranslatableField = ({
attributeName,
prefix,
@@ -84,16 +98,14 @@ export const TranslatableField = ({
const requiredTranslationName = `${translationPrefix}.0.value`;
useEffect(() => {
if (realm?.internationalizationEnabled) {
if (t(value) === value && value !== "") {
setValue(fieldName, `\${${prefix}.${value}}`);
}
if (isTranslationRequired(value, t, realm)) {
setValue(fieldName, `\${${prefix}.${value}}`);
}
}, [value]);
return (
<>
{realm?.internationalizationEnabled && (
{isTranslationRequired(value, t, realm) && (
<input
type="hidden"
data-testid="requiredTranslationName"
@@ -139,7 +151,7 @@ export const TranslatableField = ({
title={
<Trans
i18nKey="addTranslationsModalSubTitle"
values={{ fieldName }}
values={{ fieldName: t(fieldName) }}
>
You are able to translate the fieldName based on your locale or
<strong>location</strong>