From 10c3d4bfec2ade21b22a4d3078080c5e1cdbde26 Mon Sep 17 00:00:00 2001
From: David <dcarracedo@opennebula.io>
Date: Tue, 2 Jul 2024 18:27:21 +0200
Subject: [PATCH] M #-: Hook issues in translations (#3134)

Signed-off-by: dcarracedo <dcarracedo@opennebula.io>
---
 .../CreateForm/Steps/RoleConfig/index.js      |   2 +-
 .../Steps/RoleConfig/roleNetwork.js           |  16 +-
 .../CreateForm/Steps/Roles/roleSummary.js     | 251 +++++++++---------
 .../CreateForm/Steps/Roles/roleSummary.js     |   2 +-
 .../components/ResourcesBackButton/index.js   |   6 +-
 5 files changed, 148 insertions(+), 129 deletions(-)

diff --git a/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/RoleConfig/index.js b/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/RoleConfig/index.js
index a144ded4a2..cd66197655 100644
--- a/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/RoleConfig/index.js
+++ b/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/RoleConfig/index.js
@@ -281,7 +281,7 @@ export const Content = ({
 }
 
 Content.propTypes = {
-  standaloneModal: PropTypes.Boolean,
+  standaloneModal: PropTypes.bool,
   standaloneModalCallback: PropTypes.func,
 }
 
diff --git a/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/RoleConfig/roleNetwork.js b/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/RoleConfig/roleNetwork.js
index 871407d426..ce091e92f9 100644
--- a/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/RoleConfig/roleNetwork.js
+++ b/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/RoleConfig/roleNetwork.js
@@ -212,13 +212,21 @@ const RoleNetwork = ({ stepId, selectedRoleIndex }) => {
     })
   }
 
+  // Transalte before useMemo because Tr could not be inside useMemo
+  const columnTranslations = {
+    select: Tr(T.Select),
+    network: Tr(T.Network),
+    nicAlias: Tr(T.NICAlias),
+    alias: Tr(T.Alias),
+  }
+
   const columns = useMemo(
     () => [
       {
         field: 'select',
         disableColumnMenu: true,
         sortable: false,
-        headerName: Tr(T.Select),
+        headerName: columnTranslations.select,
         width: 100,
         renderCell: (params) => (
           <Checkbox
@@ -234,14 +242,14 @@ const RoleNetwork = ({ stepId, selectedRoleIndex }) => {
         field: 'network',
         disableColumnMenu: true,
         flex: 1,
-        headerName: Tr(T.Network),
+        headerName: columnTranslations.network,
         width: 150,
       },
       {
         field: 'aliasToggle',
         disableColumnMenu: true,
         sortable: false,
-        headerName: Tr(T.NICAlias),
+        headerName: columnTranslations.nicAlias,
         width: 110,
         renderCell: (params) =>
           params?.row?.rowSelected && (
@@ -258,7 +266,7 @@ const RoleNetwork = ({ stepId, selectedRoleIndex }) => {
         field: 'alias',
         disableColumnMenu: true,
         flex: 1,
-        headerName: Tr(T.Alias),
+        headerName: columnTranslations.alias,
         width: 200,
         renderCell: (params) =>
           params?.row?.aliasSelected && (
diff --git a/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Roles/roleSummary.js b/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Roles/roleSummary.js
index 8c5583b255..29d406d678 100644
--- a/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Roles/roleSummary.js
+++ b/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Roles/roleSummary.js
@@ -26,142 +26,149 @@ import { Component } from 'react'
  * @param {number} props.selectedRoleIndex - The index of the selected role.
  * @returns {Component} - Role summary component.
  */
-const RoleSummary = ({ role, selectedRoleIndex }) => (
-  <Card
-    elevation={2}
-    sx={{
-      height: '100%',
-      maxHeight: '630px',
-      display: 'flex',
-      flexDirection: 'column',
-      overflow: 'auto',
-    }}
-  >
-    <CardContent
+const RoleSummary = ({ role, selectedRoleIndex }) => {
+  const translations = {
+    template: Tr(T.VMTemplate) + ' ' + Tr(T.ID),
+    selectTemplate: Tr(T.SelectVmTemplate),
+  }
+
+  return (
+    <Card
+      elevation={2}
       sx={{
-        flexGrow: 1,
+        height: '100%',
+        maxHeight: '630px',
         display: 'flex',
         flexDirection: 'column',
-        gap: '1em',
+        overflow: 'auto',
       }}
     >
-      <Typography variant="h6" component="div" gutterBottom>
-        #{selectedRoleIndex + 1 ?? 0} {Tr(T.RoleConfiguration)}
-      </Typography>
-
-      <Typography
-        variant="body2"
-        color={role?.NAME ? 'text.primary' : 'text.disabled'}
-        gutterBottom
+      <CardContent
+        sx={{
+          flexGrow: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1em',
+        }}
       >
-        {Tr(T.Name)}: {role?.NAME || Tr(T.RoleEnterName)}
-      </Typography>
-
-      <Typography
-        variant="body2"
-        color={
-          role?.CARDINALITY === undefined ||
-          role?.CARDINALITY === 'None' ||
-          +role?.CARDINALITY < 1
-            ? 'text.disabled'
-            : 'text.primary'
-        }
-        gutterBottom
-      >
-        {Tr(T.NumberOfVms)}: {role?.CARDINALITY}
-      </Typography>
-
-      {role?.SELECTED_VM_TEMPLATE_ID ? (
-        <>
-          <Typography
-            variant="body2"
-            color={
-              role?.SELECTED_VM_TEMPLATE_ID === undefined ||
-              role?.SELECTED_VM_TEMPLATE_ID === 'None' ||
-              role?.SELECTED_VM_TEMPLATE_ID?.length < 1
-                ? 'text.disabled'
-                : 'text.primary'
-            }
-            gutterBottom
-          >
-            {Tr(T.VMTemplate)} {Tr(T.ID)}: {role?.SELECTED_VM_TEMPLATE_ID}
-          </Typography>
-        </>
-      ) : (
-        <Typography variant="body2" color="text.disabled" gutterBottom>
-          {Tr(T.SelectVmTemplate)}
+        <Typography variant="h6" component="div" gutterBottom>
+          #{selectedRoleIndex + 1 ?? 0} {Tr(T.RoleConfiguration)}
         </Typography>
-      )}
-      <Divider />
-      <Typography
-        variant="body2"
-        color={role?.NETWORKS ? 'text.primary' : 'text.disabled'}
-        gutterBottom
-      >
-        {Tr(T.Networks)}: {role?.NETWORKS || ' ' + Tr(T.RoleSelectNetwork)}
-      </Typography>
 
-      <Typography color={'text.primary'} sx={{ fontSize: 16 }} gutterBottom>
-        {Tr(T.RoleElasticity)}
-      </Typography>
+        <Typography
+          variant="body2"
+          color={role?.NAME ? 'text.primary' : 'text.disabled'}
+          gutterBottom
+        >
+          {Tr(T.Name)}: {role?.NAME || Tr(T.RoleEnterName)}
+        </Typography>
 
-      <Typography
-        variant="body2"
-        color={role?.MINVMS ? 'text.primary' : 'text.disabled'}
-        gutterBottom
-      >
-        {Tr(T.RolesMinVms)}:{role?.MINVMS || ' ' + Tr(T.RoleMinElasticity)}
-      </Typography>
+        <Typography
+          variant="body2"
+          color={
+            role?.CARDINALITY === undefined ||
+            role?.CARDINALITY === 'None' ||
+            +role?.CARDINALITY < 1
+              ? 'text.disabled'
+              : 'text.primary'
+          }
+          gutterBottom
+        >
+          {Tr(T.NumberOfVms)}: {role?.CARDINALITY}
+        </Typography>
 
-      <Typography
-        variant="body2"
-        color={role?.MAXVMS ? 'text.primary' : 'text.disabled'}
-        gutterBottom
-      >
-        {Tr(T.RolesMaxVms)}:{role?.MAXVMS || ' ' + Tr(T.RoleMaxElasticity)}
-      </Typography>
+        {role?.SELECTED_VM_TEMPLATE_ID ? (
+          <>
+            <Typography
+              variant="body2"
+              color={
+                role?.SELECTED_VM_TEMPLATE_ID === undefined ||
+                role?.SELECTED_VM_TEMPLATE_ID === 'None' ||
+                role?.SELECTED_VM_TEMPLATE_ID?.length < 1
+                  ? 'text.disabled'
+                  : 'text.primary'
+              }
+              gutterBottom
+            >
+              {translations.template}: {role?.SELECTED_VM_TEMPLATE_ID}
+            </Typography>
+          </>
+        ) : (
+          <Typography variant="body2" color="text.disabled" gutterBottom>
+            {translations.selectTemplate}
+          </Typography>
+        )}
+        <Divider />
+        <Typography
+          variant="body2"
+          color={role?.NETWORKS ? 'text.primary' : 'text.disabled'}
+          gutterBottom
+        >
+          {Tr(T.Networks)}: {role?.NETWORKS || ' ' + Tr(T.RoleSelectNetwork)}
+        </Typography>
 
-      <Typography
-        variant="body2"
-        color={role?.MAXVMS ? 'text.primary' : 'text.disabled'}
-        gutterBottom
-      >
-        {Tr(T.Cooldown)}:{role?.COOLDOWN || ' ' + Tr(T.RoleDurationScale)}
-      </Typography>
+        <Typography color={'text.primary'} sx={{ fontSize: 16 }} gutterBottom>
+          {Tr(T.RoleElasticity)}
+        </Typography>
 
-      <Typography
-        color={role?.ELASTICITYPOLICIES ? 'text.primary' : 'text.disabled'}
-        sx={{ fontSize: 14 }}
-        gutterBottom
-      >
-        {Tr(T.ElasticityPolicies)}
-      </Typography>
+        <Typography
+          variant="body2"
+          color={role?.MINVMS ? 'text.primary' : 'text.disabled'}
+          gutterBottom
+        >
+          {Tr(T.RolesMinVms)}:{role?.MINVMS || ' ' + Tr(T.RoleMinElasticity)}
+        </Typography>
 
-      <Typography
-        variant="body2"
-        color={
-          role?.ELASTICITYPOLICIES?.TYPE ? 'text.primary' : 'text.disabled'
-        }
-        gutterBottom
-      >
-        {Tr(T.Type)}:
-        {role?.ELASTICITYPOLICIES?.TYPE || ' ' + Tr(T.RoleAdjustmentType)}
-      </Typography>
+        <Typography
+          variant="body2"
+          color={role?.MAXVMS ? 'text.primary' : 'text.disabled'}
+          gutterBottom
+        >
+          {Tr(T.RolesMaxVms)}:{role?.MAXVMS || ' ' + Tr(T.RoleMaxElasticity)}
+        </Typography>
 
-      <Typography
-        variant="body2"
-        color={
-          role?.ELASTICITYPOLICIES?.ADJUST ? 'text.primary' : 'text.disabled'
-        }
-        gutterBottom
-      >
-        {Tr(T.Adjust)}:
-        {role?.ELASTICITYPOLICIES?.ADJUST ||
-          ' ' + Tr(T.RoleAdjustmentTypePositiveNegative)}
-      </Typography>
-    </CardContent>
-  </Card>
-)
+        <Typography
+          variant="body2"
+          color={role?.MAXVMS ? 'text.primary' : 'text.disabled'}
+          gutterBottom
+        >
+          {Tr(T.Cooldown)}:{role?.COOLDOWN || ' ' + Tr(T.RoleDurationScale)}
+        </Typography>
+
+        <Typography
+          color={role?.ELASTICITYPOLICIES ? 'text.primary' : 'text.disabled'}
+          sx={{ fontSize: 14 }}
+          gutterBottom
+        >
+          {Tr(T.ElasticityPolicies)}
+        </Typography>
+
+        <Typography
+          variant="body2"
+          color={
+            role?.ELASTICITYPOLICIES?.TYPE ? 'text.primary' : 'text.disabled'
+          }
+          gutterBottom
+        >
+          {Tr(T.Type)}:
+          {role?.ELASTICITYPOLICIES?.TYPE || ' ' + Tr(T.RoleAdjustmentType)}
+        </Typography>
+
+        <Typography
+          variant="body2"
+          color={
+            role?.ELASTICITYPOLICIES?.ADJUST ? 'text.primary' : 'text.disabled'
+          }
+          gutterBottom
+        >
+          {Tr(T.Adjust)}:
+          {role?.ELASTICITYPOLICIES?.ADJUST ||
+            ' ' + Tr(T.RoleAdjustmentTypePositiveNegative)}
+        </Typography>
+      </CardContent>
+    </Card>
+  )
+}
 
 RoleSummary.propTypes = {
   role: PropTypes.oneOfType([
diff --git a/src/fireedge/src/client/components/Forms/VmGroup/CreateForm/Steps/Roles/roleSummary.js b/src/fireedge/src/client/components/Forms/VmGroup/CreateForm/Steps/Roles/roleSummary.js
index 026c6c8c4c..5fbe31176e 100644
--- a/src/fireedge/src/client/components/Forms/VmGroup/CreateForm/Steps/Roles/roleSummary.js
+++ b/src/fireedge/src/client/components/Forms/VmGroup/CreateForm/Steps/Roles/roleSummary.js
@@ -187,7 +187,7 @@ RoleSummary.propTypes = {
     PropTypes.object,
   ]),
   selectedRoleIndex: PropTypes.number,
-  onRemoveAffinity: PropTypes.func.isRequired,
+  onRemoveAffinity: PropTypes.func,
 }
 
 export default RoleSummary
diff --git a/src/fireedge/src/client/components/ResourcesBackButton/index.js b/src/fireedge/src/client/components/ResourcesBackButton/index.js
index 3e55d4a644..115d9bcad2 100644
--- a/src/fireedge/src/client/components/ResourcesBackButton/index.js
+++ b/src/fireedge/src/client/components/ResourcesBackButton/index.js
@@ -109,6 +109,10 @@ const ResourcesBackButton = memo(
       tags: selectedRows,
     }
 
+    const translations = {
+      back: Tr(T.Back),
+    }
+
     return (
       <SplitPane gridTemplateRows={propsResize} rowMinSize={heightGutterRow}>
         {({ getGridProps, GutterComponent }) => (
@@ -125,7 +129,7 @@ const ResourcesBackButton = memo(
                 {hasSelectedRows && divided && (
                   <IconButton
                     onClick={() => setSelectedRows([])}
-                    title={Tr(T.Back)}
+                    title={translations.back}
                   >
                     <NavArrowLeft />
                   </IconButton>