Replaced tooltip for adding a translations to an attribute with Info Alert (#29051)

* replaced tooltip with info alert

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* replaced tooltip with info alert

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

---------

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>
Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>

js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties

@@ -3084,7 +3084,7 @@ sendIdTokenOnLogoutHelp=If the 'id_token_hint' parameter should be sent in logou
 sendClientIdOnLogout=Send 'client_id' in logout requests
 sendClientIdOnLogoutHelp=If the 'client_id' parameter should be sent in logout requests.
 addAttributeTranslationBtn=Add translation button
-addAttributeTranslationTooltip=Add translations for this field value.
+addAttributeTranslationInfo=Add translations for this field using the icon next to the "Display name" field.
 addTranslationsModalTitle=Add translations
 addTranslationsModalSubTitle=You are able to translate the "Display name" based on your locale or preferred languages. In addition, you are also able to create or edit the "Display name" translations in the
 addTranslationsModalSubTitleBolded=Realm settings > Localization > Realm overrides.

js/apps/admin-ui/src/realm-settings/user-profile/attribute/AttributeGeneralSettings.tsx

@@ -2,6 +2,7 @@ import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
 import type { UserProfileConfig } from "@keycloak/keycloak-admin-client/lib/defs/userProfileMetadata";
 import {
+  Alert,
   Button,
   Divider,
   FormGroup,
@@ -10,7 +11,6 @@ import {
   Radio,
   Switch,
   TextInput,
-  Tooltip,
 } from "@patternfly/react-core";
 import {
   Select,
@@ -19,7 +19,7 @@ import {
 } from "@patternfly/react-core/deprecated";
 import { GlobeRouteIcon } from "@patternfly/react-icons";
 import { isEqual } from "lodash-es";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { FormErrorText, HelpItem } from "@keycloak/keycloak-ui-shared";
@@ -65,7 +65,6 @@ export const AttributeGeneralSettings = ({
   const { t } = useTranslation();
   const { realm: realmName } = useRealm();
   const form = useFormContext();
-  const tooltipRef = useRef();
   const [clientScopes, setClientScopes] =
     useState<ClientScopeRepresentation[]>();
   const [config, setConfig] = useState<UserProfileConfig>();
@@ -90,12 +89,10 @@ export const AttributeGeneralSettings = ({
     value: string,
   ) => {
     setNewAttributeName(value);
-
     const newDisplayName =
       value !== "" && realm?.internationalizationEnabled
         ? "${profile.attributes." + `${value}}`
         : "";
-
     setGeneratedDisplayName(newDisplayName);
   };
 
@@ -248,11 +245,19 @@ export const AttributeGeneralSettings = ({
                 }
                 {...form.register("displayName")}
               />
+              {generatedDisplayName && (
+                <Alert
+                  className="pf-v5-u-mt-sm"
+                  variant="info"
+                  isInline
+                  isPlain
+                  title={t("addAttributeTranslationInfo")}
+                />
+              )}
             </GridItem>
             {realm?.internationalizationEnabled && (
               <GridItem span={1}>
                 <Button
-                  ref={tooltipRef}
                   variant="link"
                   className="pf-m-plain kc-attribute-display-name-iconBtn"
                   data-testid="addAttributeTranslationBtn"
@@ -263,10 +268,6 @@ export const AttributeGeneralSettings = ({
                   }}
                   icon={<GlobeRouteIcon />}
                 />
-                <Tooltip
-                  content={t("addAttributeTranslationTooltip")}
-                  triggerRef={tooltipRef}
-                />
               </GridItem>
             )}
           </Grid>