From 26aa485d95d6a785e572274a4e629ed303dcd6fe Mon Sep 17 00:00:00 2001
From: StaNov <stanovec@gmail.com>
Date: Wed, 18 Dec 2024 17:33:04 +0100
Subject: [PATCH] BE Import: Translated warning box as a standalone component

---
 .../translationTools/TranslatedWarningBox.tsx | 18 +++++++++++++++
 .../useImportWarningTranslation.ts            | 22 +++++++++++--------
 .../src/views/projects/import/ImportView.tsx  | 16 +++-----------
 3 files changed, 34 insertions(+), 22 deletions(-)
 create mode 100644 webapp/src/translationTools/TranslatedWarningBox.tsx

diff --git a/webapp/src/translationTools/TranslatedWarningBox.tsx b/webapp/src/translationTools/TranslatedWarningBox.tsx
new file mode 100644
index 0000000000..07cc0d950d
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/webapp/src/translationTools/useImportWarningTranslation.ts b/webapp/src/translationTools/useImportWarningTranslation.ts
index ba47b37fd5..e72f771064 100644
--- a/webapp/src/translationTools/useImportWarningTranslation.ts
+++ b/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}`,
+        };
     }
   };
 }
diff --git a/webapp/src/views/projects/import/ImportView.tsx b/webapp/src/views/projects/import/ImportView.tsx
index b9d9057aa2..28c5c4075a 100644
--- a/webapp/src/views/projects/import/ImportView.tsx
+++ b/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">