Add help text to the realm localization fields (#1266)

src/realm-settings/LocalizationTab.tsx

@@ -26,6 +26,7 @@ import { useAdminClient } from "../context/auth/AdminClient";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { AddMessageBundleModal } from "./AddMessageBundleModal";
 import { useAlerts } from "../components/alert/Alerts";
+import { HelpItem } from "../components/help-enabler/HelpItem";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { DEFAULT_LOCALE } from "../i18n";
 
@@ -186,6 +187,13 @@ export const LocalizationTab = ({
             <FormGroup
               label={t("internationalization")}
               fieldId="kc-internationalization"
+              labelIcon={
+                <HelpItem
+                  helpText="realm-settings-help:internationalization"
+                  forLabel={t("internationalization")}
+                  forID="kc-internationalization"
+                />
+              }
             >
               <Controller
                 name="internationalizationEnabled"
@@ -210,6 +218,13 @@ export const LocalizationTab = ({
             <FormGroup
               label={t("supportedLocales")}
               fieldId="kc-l-supported-locales"
+              labelIcon={
+                <HelpItem
+                  helpText="realm-settings-help:supportedLocales"
+                  forLabel={t("supportedLocales")}
+                  forID="kc-l-supported-locales"
+                />
+              }
             >
               <Controller
                 name="supportedLocales"
@@ -260,7 +275,17 @@ export const LocalizationTab = ({
                 }}
               />
             </FormGroup>
-            <FormGroup label={t("defaultLocale")} fieldId="kc-l-default-locale">
+            <FormGroup
+              label={t("defaultLocale")}
+              fieldId="kc-l-default-locale"
+              labelIcon={
+                <HelpItem
+                  helpText="realm-settings-help:defaultLocale"
+                  forLabel={t("defaultLocale")}
+                  forID="kc-l-default-locale"
+                />
+              }
+            >
               <Controller
                 name="defaultLocale"
                 control={control}

src/realm-settings/help.ts

@@ -106,5 +106,11 @@ export default {
       "Maximum time before an action permit sent to a user by administrator is expired. This value is recommended to be long to allow administrators to send e-mails for users that are currently offline. The default timeout can be overridden immediately before issuing the token.",
     overrideActionTokens:
       "Override default settings of maximum time before an action permit sent by a user (such as a forgot password e-mail) is expired for specific action. This value is recommended to be short because it's expected that the user would react to self-created action quickly.",
+    internationalization:
+      "If enabled, you can choose which locales you support for this realm and which locale is the default.",
+    supportedLocales:
+      "The locales to support for this realm. The user chooses one of these locales on the login screen.",
+    defaultLocale:
+      "The initial locale to use. It is used on the login screen and other screens in the Admin Console and Account Console.",
   },
 };