feat: disabled translations (#3272)

tolgee · Oct 27, 2023 · f063777 · f063777
1 parent 5792c57
commit f063777
Show file tree

Hide file tree

Showing 6 changed files with 1,564 additions and 335 deletions.
diff --git a/packages/web/src/ui/KeyDialog/KeyForm.tsx b/packages/web/src/ui/KeyDialog/KeyForm.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import OpenInNew from '@mui/icons-material/OpenInNew';
 
 import { TranslationFields } from './TranslationFields';
@@ -82,13 +82,14 @@ const ScError = styled('div')`
 `;
 
 export const KeyForm = () => {
+  const theme = useTheme();
   const { setUseBrowserWindow, onClose, onSave, setSelectedNs } =
     useDialogActions();
 
   const linkToPlatform = useDialogContext((c) => c.linkToPlatform);
   const useBrowserWindow = useDialogContext((c) => c.useBrowserWindow);
   const input = useDialogContext((c) => c.input);
-  const translations = useDialogContext((c) => c.translations);
+  const keyData = useDialogContext((c) => c.keyData);
   const formDisabled = useDialogContext((c) => c.formDisabled);
   const loading = useDialogContext((c) => c.loading);
   const error = useDialogContext((c) => c.error);
@@ -116,7 +117,7 @@ export const KeyForm = () => {
             viewBox="0 0 200 200"
             xmlns="http://www.w3.org/2000/svg"
             opacity="0.99"
-            fill="#822B55"
+            fill={theme.palette.primary.main}
             style={{
               fillRule: 'evenodd',
               clipRule: 'evenodd',
@@ -177,7 +178,7 @@ export const KeyForm = () => {
 
       {formDisabled && ready && (
         <ScRestriction>{`Modification is restricted due to missing ${
-          translations?.keyId !== undefined ? 'translations.edit' : 'keys.edit'
+          keyData?.keyId !== undefined ? 'translations.edit' : 'keys.edit'
         } scope in current api key settings.`}</ScRestriction>
       )}
 
@@ -196,7 +197,7 @@ export const KeyForm = () => {
         >
           {success
             ? 'Saved! ✓'
-            : translations?.keyId === undefined
+            : keyData?.keyId === undefined
             ? 'Create'
             : 'Update'}
         </LoadingButton>

diff --git a/packages/web/src/ui/KeyDialog/ScreenshotGallery/ScreenshotGallery.tsx b/packages/web/src/ui/KeyDialog/ScreenshotGallery/ScreenshotGallery.tsx
@@ -61,7 +61,7 @@ export const ScreenshotGallery: React.FC = () => {
     setScreenshotDetail,
   } = useDialogActions();
 
-  const keyId = useDialogContext((c) => c.translations?.keyId);
+  const keyId = useDialogContext((c) => c.keyData?.keyId);
   const screenshots = useDialogContext((c) => c.screenshots);
   const screenshotDetails = useDialogContext((c) => c.screenshotDetail);
   const canTakeScreenshots = useDialogContext((c) => c.canTakeScreenshots);

diff --git a/packages/web/src/ui/KeyDialog/TranslationFields.tsx b/packages/web/src/ui/KeyDialog/TranslationFields.tsx
@@ -57,6 +57,7 @@ export const TranslationFields: FunctionComponent = () => {
   const formDisabled = useDialogContext((c) => c.formDisabled);
   const loading = useDialogContext((c) => c.loading);
   const permittedLanguageIds = useDialogContext((c) => c.permittedLanguageIds);
+  const keyData = useDialogContext((c) => c.keyData);
 
   const onChange = (key: string) => (e: any) => {
     onInputChange(key, e.target.value);
@@ -85,13 +86,18 @@ export const TranslationFields: FunctionComponent = () => {
                 permittedLanguageIds,
                 availableLanguages
               ));
+          const translation = keyData?.translations[key];
 
           return (
             <React.Fragment key={key}>
               <ScFieldTitle>{lang?.name || key}</ScFieldTitle>
               <ScTextField
                 size="small"
-                disabled={formDisabled || !languagePermitted}
+                disabled={
+                  formDisabled ||
+                  !languagePermitted ||
+                  translation?.state === 'DISABLED'
+                }
                 key={key}
                 inputProps={{
                   lang: key,

diff --git a/packages/web/src/ui/KeyDialog/dialogContext/index.ts b/packages/web/src/ui/KeyDialog/dialogContext/index.ts
@@ -142,7 +142,7 @@ export const [DialogProvider, useDialogActions, useDialogContext] =
       method: 'post',
     });
 
-    const translations = translationsLoadable.data?._embedded?.keys?.[0];
+    const keyData = translationsLoadable.data?._embedded?.keys?.[0];
 
     const linkToPlatform =
       scopesLoadable.data?.projectId !== undefined
@@ -185,7 +185,7 @@ export const [DialogProvider, useDialogActions, useDialogContext] =
           }
         });
 
-        const result = await (translations === undefined
+        const result = await (keyData === undefined
           ? createKey.mutateAsync({
               content: {
                 'application/json': {
@@ -214,7 +214,7 @@ export const [DialogProvider, useDialogActions, useDialogContext] =
                   tags,
                 },
               },
-              path: { id: translations.keyId! },
+              path: { id: keyData.keyId! },
             }));
 
         const version = result._internal?.version;
@@ -311,7 +311,7 @@ export const [DialogProvider, useDialogActions, useDialogContext] =
 
     const getRemovedScreenshots = () => {
       return (
-        translations?.screenshots
+        keyData?.screenshots
           ?.map((sc) => sc.id)
           .filter((scId) => !screenshots.find((sc) => sc.id === scId)) || []
       );
@@ -340,8 +340,7 @@ export const [DialogProvider, useDialogActions, useDialogContext] =
           !translationsFormTouched
         ) {
           const wasBaseTranslationProvided =
-            translations?.translations?.[baseLanguageDefinition.tag!] !==
-            undefined;
+            keyData?.translations?.[baseLanguageDefinition.tag!] !== undefined;
 
           if (
             !translationsForm[baseLanguageDefinition.tag!] &&
@@ -405,7 +404,7 @@ export const [DialogProvider, useDialogActions, useDialogContext] =
       availableLanguages,
       selectedLanguages: putBaseLangFirstTags(selectedLanguages, baseLang?.tag),
       formDisabled,
-      translations,
+      keyData,
       translationsForm,
       container,
       useBrowserWindow,

diff --git a/packages/web/src/ui/ThemeProvider.tsx b/packages/web/src/ui/ThemeProvider.tsx
@@ -18,7 +18,7 @@ let theme = createTheme({
   },
   palette: {
     primary: {
-      main: '#822B55',
+      main: '#EC407A',
     },
     secondary: {
       main: '#2B5582',