F #5422: Add translation to sidebar & header (#1945)

2025-03-30 22:50:10 +03:00 · 2022-04-13 17:10:56 +02:00 · 2022-04-13 17:10:56 +02:00 · a3cb07c975
commit a3cb07c975
parent e5db4f1e17
7 changed files with 59 additions and 42 deletions
--- a/src/fireedge/src/client/apps/sunstone/routesOne.js
+++ b/src/fireedge/src/client/apps/sunstone/routesOne.js
@ -37,7 +37,7 @@ import {
 } from 'iconoir-react'

 import loadable from '@loadable/component'
-import { RESOURCE_NAMES } from 'client/constants'
+import { RESOURCE_NAMES, T } from 'client/constants'

 const VirtualMachines = loadable(
  () => import('client/containers/VirtualMachines'),
@ -204,23 +204,23 @@ export const PATH = {

 const ENDPOINTS = [
  {
-    label: 'Instances',
+    label: T.Instances,
    icon: InstancesIcons,
    routes: [
      {
-        label: 'VMs',
+        label: T.VMs,
        path: PATH.INSTANCE.VMS.LIST,
        sidebar: true,
        icon: VmsIcons,
        Component: VirtualMachines,
      },
      {
-        label: (params) => `VM #${params.id}`,
+        label: (params) => [T.VMDetailId, params.id],
        path: PATH.INSTANCE.VMS.DETAIL,
        Component: VirtualMachineDetail,
      },
      {
-        label: 'Virtual Routers',
+        label: T.VirtualRouters,
        path: PATH.INSTANCE.VROUTERS.LIST,
        sidebar: true,
        icon: VRoutersIcons,
@ -229,80 +229,80 @@ const ENDPOINTS = [
    ],
  },
  {
-    label: 'Templates',
+    label: T.Templates,
    icon: TemplatesIcon,
    routes: [
      {
-        label: 'VM Templates',
+        label: T.VMTemplates,
        path: PATH.TEMPLATE.VMS.LIST,
        sidebar: true,
        icon: TemplateIcon,
        Component: VmTemplates,
      },
      {
-        label: 'Instantiate VM Template',
+        label: T.InstantiateVmTemplate,
        path: PATH.TEMPLATE.VMS.INSTANTIATE,
        Component: InstantiateVmTemplate,
      },
      {
-        label: 'Create VM Template',
+        label: T.CreateVmTemplate,
        path: PATH.TEMPLATE.VMS.CREATE,
        Component: CreateVmTemplate,
      },
    ],
  },
  {
-    label: 'Storage',
+    label: T.Storage,
    icon: StorageIcon,
    routes: [
      {
-        label: 'Datastores',
+        label: T.Datastores,
        path: PATH.STORAGE.DATASTORES.LIST,
        sidebar: true,
        icon: DatastoreIcon,
        Component: Datastores,
      },
      {
-        label: 'Images',
+        label: T.Images,
        path: PATH.STORAGE.IMAGES.LIST,
        sidebar: true,
        icon: ImageIcon,
        Component: Images,
      },
      {
-        label: 'Marketplaces',
+        label: T.Marketplaces,
        path: PATH.STORAGE.MARKETPLACES.LIST,
        sidebar: true,
        icon: MarketplaceIcon,
        Component: Marketplaces,
      },
      {
-        label: 'Apps',
+        label: T.Apps,
        path: PATH.STORAGE.MARKETPLACE_APPS.LIST,
        sidebar: true,
        icon: MarketplaceAppIcon,
        Component: MarketplaceApps,
      },
      {
-        label: 'Create Marketplace App',
+        label: T.CreateMarketApp,
        path: PATH.STORAGE.MARKETPLACE_APPS.CREATE,
        Component: CreateMarketplaceApp,
      },
    ],
  },
  {
-    label: 'Networks',
+    label: T.Networks,
    icon: NetworksIcon,
    routes: [
      {
-        label: 'Virtual Networks',
+        label: T.VirtualNetworks,
        path: PATH.NETWORK.VNETS.LIST,
        sidebar: true,
        icon: NetworkIcon,
        Component: VirtualNetworks,
      },
      {
-        label: 'Network Templates',
+        label: T.NetworkTemplates,
        path: PATH.NETWORK.VN_TEMPLATES.LIST,
        sidebar: true,
        icon: NetworkTemplateIcon,
@ -311,40 +311,40 @@ const ENDPOINTS = [
    ],
  },
  {
-    label: 'Infrastructure',
+    label: T.Infrastructure,
    icon: InfrastructureIcon,
    routes: [
      {
-        label: 'Clusters',
+        label: T.Clusters,
        path: PATH.INFRASTRUCTURE.CLUSTERS.LIST,
        sidebar: true,
        icon: ClusterIcon,
        Component: Clusters,
      },
      {
-        label: (params) => `Clusters #${params.id}`,
+        label: (params) => [T.ClusterDetailId, params.id],
        path: PATH.INFRASTRUCTURE.CLUSTERS.DETAIL,
        Component: ClusterDetail,
      },
      {
-        label: 'Hosts',
+        label: T.Hosts,
        path: PATH.INFRASTRUCTURE.HOSTS.LIST,
        sidebar: true,
        icon: HostIcon,
        Component: Hosts,
      },
      {
-        label: 'Create Host',
+        label: T.CreateHost,
        path: PATH.INFRASTRUCTURE.HOSTS.CREATE,
        Component: CreateHost,
      },
      {
-        label: (params) => `Hosts #${params.id}`,
+        label: (params) => [T.HostDetailId, params.id],
        path: PATH.INFRASTRUCTURE.HOSTS.DETAIL,
        Component: HostDetail,
      },
      {
-        label: 'Zones',
+        label: T.Zones,
        path: PATH.INFRASTRUCTURE.ZONES.LIST,
        sidebar: true,
        icon: ZoneIcon,
@ -353,30 +353,30 @@ const ENDPOINTS = [
    ],
  },
  {
-    label: 'System',
+    label: T.System,
    icon: SystemIcon,
    routes: [
      {
-        label: 'Users',
+        label: T.Users,
        path: PATH.SYSTEM.USERS.LIST,
        sidebar: true,
        icon: UserIcon,
        Component: Users,
      },
      {
-        label: (params) => `User #${params.id}`,
+        label: (params) => [T.UserDetailId, params.id],
        path: PATH.SYSTEM.USERS.DETAIL,
        Component: UserDetail,
      },
      {
-        label: 'Groups',
+        label: T.Groups,
        path: PATH.SYSTEM.GROUPS.LIST,
        sidebar: true,
        icon: GroupIcon,
        Component: Groups,
      },
      {
-        label: (params) => `Group #${params.id}`,
+        label: (params) => [T.GroupDetailId, params.id],
        path: PATH.SYSTEM.GROUPS.DETAIL,
        Component: GroupDetail,
      },
--- a/src/fireedge/src/client/components/Cards/DiskCard.js
+++ b/src/fireedge/src/client/components/Cards/DiskCard.js
@ -78,7 +78,7 @@ const DiskCard = memo(({ disk = {}, actions = [], snapshotActions = [] }) => {
    <Paper
      variant="outlined"
      className={classes.root}
-      sx={{ flexWrap: 'wrap' }}
+      sx={{ flexWrap: 'wrap', alignContent: 'start' }}
      data-cy={`disk-${DISK_ID}`}
    >
      <div className={classes.main}>
--- a/src/fireedge/src/client/components/HOC/Translate.js
+++ b/src/fireedge/src/client/components/HOC/Translate.js
@ -69,11 +69,12 @@ const translateString = (word = '', values) => {
  const { [word]: wordVal } = hash

  const translation = useMemo(() => {
-    if (!wordVal) return word
-    if (!Array.isArray(wordVal)) return wordVal
+    const ensuredWord = wordVal || word
+
+    if (!ensuredWord || !values) return ensuredWord

    try {
-      return sprintf(...wordVal)
+      return sprintf(ensuredWord, ...values)
    } catch {
      return word
    }
--- a/src/fireedge/src/client/components/Header/index.js
+++ b/src/fireedge/src/client/components/Header/index.js
@ -34,6 +34,7 @@ import User from 'client/components/Header/User'
 import View from 'client/components/Header/View'
 import Group from 'client/components/Header/Group'
 import Zone from 'client/components/Header/Zone'
+import { Translate } from 'client/components/HOC'
 import { sentenceCase } from 'client/utils'

 const Header = () => {
@ -87,7 +88,7 @@ const Header = () => {
              variant="h6"
              data-cy="header-description"
              sx={{
-                display: { xs: 'none', xl: 'block' },
+                display: { xs: 'none', md: 'block' },
                '&::before': {
                  content: '"|"',
                  margin: '0.5em',
@ -95,7 +96,7 @@ const Header = () => {
                },
              }}
            >
-              {title}
+              <Translate word={title} />
            </Typography>
          )}
        </Box>
--- a/src/fireedge/src/client/components/Sidebar/SidebarCollapseItem.js
+++ b/src/fireedge/src/client/components/Sidebar/SidebarCollapseItem.js
@ -32,6 +32,7 @@ import { Minus as CollapseIcon, Plus as ExpandMoreIcon } from 'iconoir-react'
 import { useGeneral } from 'client/features/General'
 import SidebarLink from 'client/components/Sidebar/SidebarLink'
 import sidebarStyles from 'client/components/Sidebar/styles'
+import { Translate } from 'client/components/HOC'

 /**
 * Renders nested list options for sidebar.
@ -75,7 +76,7 @@ const SidebarCollapseItem = ({ label = '', routes = [], icon: Icon }) => {
        )}
        <ListItemText
          data-cy={label.toLocaleLowerCase()}
-          primary={label}
+          primary={<Translate word={label} />}
          {...(expanded && { className: 'open' })}
          primaryTypographyProps={{ variant: 'body1' }}
        />
--- a/src/fireedge/src/client/components/Sidebar/SidebarLink.js
+++ b/src/fireedge/src/client/components/Sidebar/SidebarLink.js
@ -27,6 +27,7 @@ import {

 import { useGeneralApi } from 'client/features/General'
 import { DevTypography } from 'client/components/Typography'
+import { Translate } from 'client/components/HOC'

 const SidebarLink = memo(
  ({
@ -62,7 +63,7 @@ const SidebarLink = memo(
          </ListItemIcon>
        )}
        <ListItemText
-          primary={label}
+          primary={<Translate word={label} />}
          primaryTypographyProps={{
            ...(devMode && { component: DevTypography }),
            'data-cy': 'main-menu-item-text',
--- a/src/fireedge/src/client/constants/translates.js
+++ b/src/fireedge/src/client/constants/translates.js
@ -54,7 +54,9 @@ module.exports = {
  Configuration: 'Configuration',
  CopiedToClipboard: 'Copied to clipboard',
  Create: 'Create',
+  CreateHost: 'Create Host',
  CreateMarketApp: 'Create Marketplace App',
+  CreateVmTemplate: 'Create VM Template',
  CurrentGroup: 'Current group: %s',
  CurrentOwner: 'Current owner: %s',
  Delete: 'Delete',
@ -76,6 +78,7 @@ module.exports = {
  Import: 'Import',
  Info: 'Info',
  Instantiate: 'Instantiate',
+  InstantiateVmTemplate: 'Instantiate VM Template',
  Lock: 'Lock',
  Migrate: 'Migrate',
  MigrateLive: 'Migrate live',
@ -269,8 +272,10 @@ module.exports = {

  /* sections - system */
  User: 'User',
+  UserDetailId: 'User #%s',
  Users: 'Users',
  Group: 'Group',
+  GroupDetailId: 'Group #%s',
  Groups: 'Groups',
  VDC: 'VDC',
  VDCs: 'VDCs',
@ -278,18 +283,23 @@ module.exports = {
  ACLs: 'ACLs',

  /* sections - infrastructure */
-  Zone: 'Zone',
-  Zones: 'Zones',
  Cluster: 'Cluster',
+  ClusterDetailId: 'Cluster #%s',
  Clusters: 'Clusters',
  Host: 'Host',
+  HostDetailId: 'Host #%s',
  Hosts: 'Hosts',
+  Infrastructure: 'Infrastructure',
+  Zone: 'Zone',
+  Zones: 'Zones',

  /* sections - network */
  Network: 'Network',
  Networks: 'Networks',
  VirtualNetwork: 'Virtual network',
  VirtualNetworks: 'Virtual networks',
+  NetworkTemplate: 'Network Template',
+  NetworkTemplates: 'Network Templates',
  NetworkTopology: 'Network topology',
  NetworksTopologies: 'Networks topologies',
  SecurityGroup: 'Security group',
@ -308,12 +318,15 @@ module.exports = {
  Apps: 'Apps',

  /* sections - templates & instances */
+  Instances: 'Instances',
  VM: 'VM',
+  VMDetailId: 'VM #%s',
  VMs: 'VMs',
-  VirtualRouter: 'VirtualRouter',
-  VirtualRouters: 'VirtualRouters',
+  VirtualRouter: 'Virtual Router',
+  VirtualRouters: 'Virtual Routers',
  VMGroup: 'VM Group',
  VMGroups: 'VM Groups',
+  Templates: 'Templates',
  VMTemplate: 'VM Template',
  VMTemplates: 'VM Templates',