fix: stop failing when api key is not valid (#3314)

tolgee · Mar 7, 2024 · 47eba84 · 47eba84
1 parent f2a32e9
commit 47eba84
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/packages/web/src/ui/KeyDialog/KeyForm.tsx b/packages/web/src/ui/KeyDialog/KeyForm.tsx
@@ -95,6 +95,7 @@ export const KeyForm = () => {
   const formDisabled = useDialogContext((c) => c.formDisabled);
   const loading = useDialogContext((c) => c.loading);
   const error = useDialogContext((c) => c.error);
+  const submitError = useDialogContext((c) => c.submitError);
   const saving = useDialogContext((c) => c.saving);
   const success = useDialogContext((c) => c.success);
   const keyExists = useDialogContext((c) => c.keyExists);
@@ -106,6 +107,8 @@ export const KeyForm = () => {
   const viewPluralCheckbox = permissions.canEditPlural && pluralsSupported;
   const ready = !loading && !error;
 
+  const generalError = error || submitError;
+
   return (
     <ScContainer {...{ [TOLGEE_RESTRICT_ATTRIBUTE]: 'true' }}>
       <ScHeading>
@@ -170,9 +173,11 @@ export const KeyForm = () => {
 
       {ready && viewPluralCheckbox && <PluralFormCheckbox />}
 
-      <ScFieldsWrapper>
-        <TranslationFields />
-      </ScFieldsWrapper>
+      {!error && (
+        <ScFieldsWrapper>
+          <TranslationFields />
+        </ScFieldsWrapper>
+      )}
 
       {screenshotsView && ready && (
         <ScGalleryWrapper>
@@ -186,7 +191,7 @@ export const KeyForm = () => {
         </ScRestriction>
       )}
 
-      {error && <ScError>{error}</ScError>}
+      {generalError && <ScError>{generalError}</ScError>}
       <ScControls>
         <Button onClick={onClose} color="secondary">
           {useBrowserWindow ? 'Close' : 'Cancel'}

diff --git a/packages/web/src/ui/KeyDialog/TranslationTextField.tsx b/packages/web/src/ui/KeyDialog/TranslationTextField.tsx
@@ -120,7 +120,7 @@ export const TranslationTextField = ({
           mode={mode}
           value={value ? { ...value, parameter } : { variants: { other: '' } }}
           onChange={onChange}
-          locale={language!.tag}
+          locale={language?.tag || 'en'}
           editorProps={{ direction: 'ltr', disabled }}
         />
       </StyledContainer>

diff --git a/packages/web/src/ui/KeyDialog/dialogContext/index.ts b/packages/web/src/ui/KeyDialog/dialogContext/index.ts
@@ -82,11 +82,14 @@ export const [DialogProvider, useDialogActions, useDialogContext] =
     const [selectedNs, setSelectedNs] = useState<string>(props.namespace);
     const [tags, setTags] = useState<string[]>([]);
     const [_isPlural, setIsPlural] = useState<boolean>();
+    const [_pluralArgName, setPluralArgName] = useState<string>();
+    const [submitError, setSubmitError] = useState<string>();
+
     useEffect(() => {
       // reset when key changes
       setIsPlural(undefined);
+      setPluralArgName(undefined);
     }, [props.keyName, props.namespace]);
-    const [_pluralArgName, setPluralArgName] = useState<string>('value');
 
     const {
       screenshots,
@@ -170,6 +173,9 @@ export const [DialogProvider, useDialogActions, useDialogContext] =
               state: translation?.state || 'UNTRANSLATED',
             };
           });
+          if (_pluralArgName === undefined) {
+            setPluralArgName(firstKey?.keyPluralArgName);
+          }
           _setTranslationsForm(result);
           setTags(firstKey?.keyTags?.map((t) => t.name) || []);
           setScreenshots(
@@ -220,6 +226,7 @@ export const [DialogProvider, useDialogActions, useDialogContext] =
     const [useBrowserWindow, setUseBrowserWindow] = useState(false);
 
     function onInputChange(key: string, value: TolgeeFormat) {
+      setSubmitError(undefined);
       setSuccess(false);
       setTranslationsFormTouched(true);
       setTranslation(key, value);
@@ -323,9 +330,10 @@ export const [DialogProvider, useDialogActions, useDialogContext] =
           await sleep(400);
           props.onClose();
         }
-      } catch (e) {
+      } catch (e: any) {
         // eslint-disable-next-line no-console
         console.error(e);
+        setSubmitError(e?.message);
       } finally {
         setSaving(false);
         setSuccess(false);
@@ -483,6 +491,7 @@ export const [DialogProvider, useDialogActions, useDialogContext] =
       pluralArgName,
       pluralsSupported,
       icuPlaceholders,
+      submitError,
     } as const;
 
     const actions = {