fix: default value prefilled in form (#3402)

tolgee · Nov 12, 2024 · 8d77ef5 · 8d77ef5
1 parent 848c235
commit 8d77ef5
Showing 1 changed file with 46 additions and 44 deletions.
diff --git a/packages/web/src/package/ui/KeyDialog/dialogContext/index.ts b/packages/web/src/package/ui/KeyDialog/dialogContext/index.ts
@@ -27,9 +27,13 @@ import {
 } from '../State/translationStates';
 import { useComputedPermissions } from './usePermissions';
 import { HttpError } from '../../client/HttpError';
+import { components } from '../../client/apiSchema.generated';
+import { isTranslationEmpty } from '../../tools/isTranslationEmpty';
 
 const MINIMAL_PLATFORM_VERSION = 'v3.42.0';
 
+type LanguageModel = components['schemas']['LanguageModel'];
+
 type FormTranslations = {
   [key: string]: {
     value: TolgeeFormat;
@@ -76,9 +80,6 @@ export const [DialogProvider, useDialogActions, useDialogContext] =
 
     const [saving, setSaving] = useState(false);
 
-    const [translationsFormTouched, setTranslationsFormTouched] =
-      useState(false);
-
     const [selectedNs, setSelectedNs] = useState<string>(props.namespace);
     const [tags, setTags] = useState<string[]>([]);
     const [_isPlural, setIsPlural] = useState<boolean>();
@@ -128,6 +129,7 @@ export const [DialogProvider, useDialogActions, useDialogContext] =
           const selectedLanguages = getInitialLanguages(
             data._embedded?.languages?.map((l) => l.tag!) || []
           );
+          initializeWithDefaultValue(undefined, data._embedded?.languages);
           setSelectedLanguages(selectedLanguages);
           setPreferredLanguages(selectedLanguages);
         },
@@ -176,7 +178,7 @@ export const [DialogProvider, useDialogActions, useDialogContext] =
           if (_pluralArgName === undefined && isPlural) {
             setPluralArgName(firstKey?.keyPluralArgName);
           }
-          _setTranslationsForm(result);
+          initializeWithDefaultValue(result, undefined);
           if (firstKey) {
             setTags(firstKey?.keyTags?.map((t) => t.name) || []);
           } else {
@@ -193,6 +195,46 @@ export const [DialogProvider, useDialogActions, useDialogContext] =
       },
     });
 
+    function initializeWithDefaultValue(
+      translationData: FormTranslations | undefined,
+      languagesData: LanguageModel[] | undefined
+    ) {
+      const data =
+        translationData ??
+        (translationsLoadable.isSuccess ? undefined : translationsForm);
+      const languages =
+        languagesData ?? languagesLoadable.data._embedded.languages;
+
+      if (!data || !languages) {
+        return undefined;
+      }
+
+      const baseLang = languages.find((l) => l.base);
+      const baseLangIncluded = selectedLanguages.includes(baseLang.tag);
+      const baseValueEmpty = isTranslationEmpty(
+        data?.[baseLang.tag]?.value,
+        isPlural
+      );
+
+      if (data && baseLangIncluded && baseValueEmpty && props.defaultValue) {
+        _setTranslationsForm({
+          ...data,
+          [baseLang.tag]: {
+            state: data?.[baseLang.tag]?.state ?? 'UNTRANSLATED',
+            value: getTolgeeFormat(
+              props.defaultValue,
+              isPlural,
+              !icuPlaceholders
+            ),
+          },
+        });
+      } else {
+        _setTranslationsForm({
+          ...data,
+        });
+      }
+    }
+
     const keyData = translationsLoadable.data?._embedded?.keys?.[0];
     const isPlural =
       _isPlural !== undefined ? _isPlural : Boolean(keyData?.keyIsPlural);
@@ -230,13 +272,11 @@ export const [DialogProvider, useDialogActions, useDialogContext] =
     function onInputChange(key: string, value: TolgeeFormat) {
       setSubmitError(undefined);
       setSuccess(false);
-      setTranslationsFormTouched(true);
       setTranslation(key, value);
     }
 
     function onStateChange(key: string, value: StateType) {
       setSuccess(false);
-      setTranslationsFormTouched(true);
       setState(key, value);
     }
 
@@ -403,44 +443,6 @@ export const [DialogProvider, useDialogActions, useDialogContext] =
       );
     }
 
-    // sets the default value for base language if is not stored already
-    useEffect(() => {
-      if (
-        props.defaultValue &&
-        availableLanguages &&
-        selectedLanguages &&
-        translationsForm &&
-        keyData
-      ) {
-        const baseLanguageDefinition = availableLanguages.find((l) => l.base);
-        if (
-          baseLanguageDefinition &&
-          selectedLanguages.includes(baseLanguageDefinition.tag!) &&
-          !translationsFormTouched
-        ) {
-          const wasBaseTranslationProvided =
-            keyData?.translations?.[baseLanguageDefinition.tag!] !== undefined;
-
-          if (!wasBaseTranslationProvided) {
-            setTranslation(
-              baseLanguageDefinition.tag!,
-              getTolgeeFormat(
-                props.defaultValue ?? '',
-                isPlural,
-                !icuPlaceholders
-              )
-            );
-          }
-        }
-      }
-    }, [
-      availableLanguages,
-      translationsForm,
-      selectedLanguages,
-      props.defaultValue,
-      keyData,
-    ]);
-
     const versionError = checkPlatformVersion(
       MINIMAL_PLATFORM_VERSION,
       translationsLoadable.data?._internal?.version