M #-: Hook issues in translations (#3134)

Signed-off-by: dcarracedo <dcarracedo@opennebula.io>
2025-01-08 21:17:43 +03:00 · 2024-07-02 18:27:21 +02:00 · 2024-07-02 18:27:21 +02:00 · 10c3d4bfec
commit 10c3d4bfec
parent cbb26cff6d
5 changed files with 148 additions and 129 deletions
--- 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,
 }

--- 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 && (
--- 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([
--- 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
--- 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>