can't remove english from supported locals (#1461)

fixes: #1059

src/realm-settings/LocalizationTab.tsx

@@ -59,7 +59,6 @@ export const LocalizationTab = ({
   const [selectMenuLocale, setSelectMenuLocale] = useState(DEFAULT_LOCALE);
 
   const { getValues, control, handleSubmit, formState } = useFormContext();
-  const [valueSelected, setValueSelected] = useState(false);
   const [selectMenuValueSelected, setSelectMenuValueSelected] = useState(false);
 
   const themeTypes = useServerInfo().themes!;
@@ -174,10 +173,6 @@ export const LocalizationTab = ({
         />
       )}
       <PageSection variant="light">
-        <FormPanel
-          className="kc-login-screen"
-          title="Login screen customization"
-        >
         <FormAccess
           isHorizontal
           role="manage-realm"
@@ -215,22 +210,17 @@ export const LocalizationTab = ({
               )}
             />
           </FormGroup>
+          {internationalizationEnabled && (
+            <>
               <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"
                   control={control}
-                render={({ onChange, value }) => {
+                  defaultValue={[DEFAULT_LOCALE]}
-                  return internationalizationEnabled ? (
+                  render={({ onChange, value }) => (
                     <Select
                       toggleId="kc-l-supported-locales"
                       onToggle={(open) => {
@@ -238,11 +228,12 @@ export const LocalizationTab = ({
                       }}
                       onSelect={(_, v) => {
                         const option = v as string;
-                        if (!value) {
+                        if (value.includes(option)) {
-                          onChange([option]);
-                        } else if (value.includes(option)) {
                           onChange(
-                            value.filter((item: string) => item !== option)
+                            value.filter(
+                              (item: string) =>
+                                item !== option || option === DEFAULT_LOCALE
+                            )
                           );
                         } else {
                           onChange([...value, option]);
@@ -255,12 +246,12 @@ export const LocalizationTab = ({
                       variant={SelectVariant.typeaheadMulti}
                       aria-label={t("supportedLocales")}
                       isOpen={supportedLocalesOpen}
-                      placeholderText={"Select locales"}
+                      placeholderText={t("selectLocales")}
                     >
                       {themeTypes.login![0].locales.map(
                         (locale: string, idx: number) => (
                           <SelectOption
-                            selected={true}
+                            selected={value.includes(locale)}
                             key={`locale-${idx}`}
                             value={locale}
                           >
@@ -269,38 +260,27 @@ export const LocalizationTab = ({
                         )
                       )}
                     </Select>
-                  ) : (
+                  )}
-                    <div />
-                  );
-                }}
                 />
               </FormGroup>
               <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}
-                render={({ onChange, value }) => {
+                  defaultValue={DEFAULT_LOCALE}
-                  return internationalizationEnabled ? (
+                  render={({ onChange, value }) => (
                     <Select
                       toggleId="kc-default-locale"
                       onToggle={() => setDefaultLocaleOpen(!defaultLocaleOpen)}
                       onSelect={(_, value) => {
                         onChange(value as string);
-                        setValueSelected(true);
                         setDefaultLocaleOpen(false);
                       }}
                       selections={
-                        valueSelected
+                        value
                           ? t(`allSupportedLocales.${value}`)
                           : realm.defaultLocale !== ""
                           ? t(
@@ -327,12 +307,11 @@ export const LocalizationTab = ({
                         )
                       )}
                     </Select>
-                  ) : (
+                  )}
-                    <div />
-                  );
-                }}
                 />
               </FormGroup>
+            </>
+          )}
           <ActionGroup>
             <Button
               variant="primary"
@@ -347,7 +326,6 @@ export const LocalizationTab = ({
             </Button>
           </ActionGroup>
         </FormAccess>
-        </FormPanel>
 
         <FormPanel className="kc-message-bundles" title="Edit message bundles">
           <TextContent className="messageBundleDescription">

src/realm-settings/RealmSettingsTabs.tsx

@@ -47,6 +47,7 @@ import { PartialExportDialog } from "./PartialExport";
 import { toRealmSettings } from "./routes/RealmSettings";
 import { LocalizationTab } from "./LocalizationTab";
 import { HelpItem } from "../components/help-enabler/HelpItem";
+import { DEFAULT_LOCALE } from "../i18n";
 
 type RealmSettingsHeaderProps = {
   onChange: (value: boolean) => void;
@@ -168,7 +169,7 @@ export const RealmSettingsTabs = ({
   const kpComponentTypes =
     useServerInfo().componentTypes?.[KEY_PROVIDER_TYPE] ?? [];
 
-  const form = useForm({ mode: "onChange" });
+  const form = useForm({ mode: "onChange", shouldUnregister: false });
   const { control, getValues, setValue, reset: resetForm } = form;
 
   const [activeTab, setActiveTab] = useState(0);
@@ -182,6 +183,8 @@ export const RealmSettingsTabs = ({
     Object.entries(r).map(([key, value]) => {
       if (key === "attributes") {
         convertToFormValues(value, "attributes", setValue);
+      } else if (key === "supportedLocales" && value?.length === 0) {
+        setValue(key, [DEFAULT_LOCALE]);
       } else {
         setValue(key, value);
       }

src/realm-settings/messages.ts

@@ -336,6 +336,7 @@ export default {
     pairCreatedError: "Error creating localization text.",
     supportedLocales: "Supported locales",
     defaultLocale: "Default locale",
+    selectLocales: "Select locales",
     addMessageBundle: "Add message bundle",
     eventType: "Event saved type",
     searchEventType: "Search saved event type",