BE Import: Translated warning box as a standalone component

webapp/src/translationTools/TranslatedWarningBox.tsx

@@ -0,0 +1,18 @@
+import { Alert, AlertTitle } from '@mui/material';
+import { useImportWarningTranslation } from 'tg.translationTools/useImportWarningTranslation';
+
+type Props = {
+  code: string;
+};
+
+export function TranslatedWarningBox({ code }: Props) {
+  const importWarningTranslation = useImportWarningTranslation();
+  const translation = importWarningTranslation(code);
+
+  return (
+    <Alert severity="warning">
+      <AlertTitle>{translation.title}</AlertTitle>
+      {translation.message}
+    </Alert>
+  );
+}

webapp/src/translationTools/useImportWarningTranslation.ts

@@ -5,16 +5,20 @@ export function useImportWarningTranslation() {
 
   return (code: string) => {
     switch (code.toLocaleLowerCase()) {
-      case 'import_file_warning_header_namespace_cannot_be_used_when_feature_is_disabled':
-        return t(
-          'import_file_warning_header_namespace_cannot_be_used_when_feature_is_disabled'
-        );
-      case 'import_file_warning_message_namespace_cannot_be_used_when_feature_is_disabled':
-        return t(
-          'import_file_warning_message_namespace_cannot_be_used_when_feature_is_disabled'
-        );
+      case 'namespace_cannot_be_used_when_feature_is_disabled':
+        return {
+          title: t(
+            'warning_header_namespace_cannot_be_used_when_feature_is_disabled'
+          ),
+          message: t(
+            'warning_message_namespace_cannot_be_used_when_feature_is_disabled'
+          ),
+        };
       default:
-        return code;
+        return {
+          title: `warning_header_${code}`,
+          message: `warning_message_${code}`,
+        };
     }
   };
 }

webapp/src/views/projects/import/ImportView.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, useEffect, useState } from 'react';
-import { Alert, AlertTitle, Box, Button } from '@mui/material';
+import { Box, Button } from '@mui/material';
 import { T, useTranslate } from '@tolgee/react';
 
 import { LINKS, PARAMS } from 'tg.constants/links';
@@ -21,7 +21,7 @@ import { useImportDataHelper } from './hooks/useImportDataHelper';
 import { BaseProjectView } from '../BaseProjectView';
 import { ImportResultLoadingOverlay } from './component/ImportResultLoadingOverlay';
 import { ImportSettingsPanel } from './component/ImportSettingsPanel';
-import { useImportWarningTranslation } from 'tg.translationTools/useImportWarningTranslation';
+import { TranslatedWarningBox } from 'tg.translationTools/TranslatedWarningBox';
 
 export const ImportView: FunctionComponent = () => {
   const dataHelper = useImportDataHelper();
@@ -37,7 +37,6 @@ export const ImportView: FunctionComponent = () => {
   const { refetchUsage } = useGlobalActions();
 
   const { t } = useTranslate();
-  const importWarningTranslation = useImportWarningTranslation();
 
   const onConflictResolutionDialogClose = () => {
     dataHelper.refetchData();
@@ -127,16 +126,7 @@ export const ImportView: FunctionComponent = () => {
         ))}
         {dataHelper.addFilesMutation.data?.warnings.map((item) => (
           <Box key={item.code} mt={4} data-cy="import-file-warnings">
-            <Alert severity="warning">
-              <AlertTitle>
-                {importWarningTranslation(
-                  'import_file_warning_header_' + item.code
-                )}
-              </AlertTitle>
-              {importWarningTranslation(
-                'import_file_warning_message_' + item.code
-              )}
-            </Alert>
+            <TranslatedWarningBox code={item.code} />
           </Box>
         ))}
         <Box position="relative">