Add missing localization in admin portal to ui elements and MUI compo…

…nents
wso2 · Aug 9, 2024 · 7b19286 · 7b19286
1 parent a801263
commit 7b19286
Show file tree

Hide file tree

Showing 9 changed files with 166 additions and 38 deletions.
diff --git a/portals/admin/src/main/webapp/site/public/locales/en.json b/portals/admin/src/main/webapp/site/public/locales/en.json
@@ -1,4 +1,5 @@
 {
+  "Admin.Addons.Help.Base.title": "Help",
   "Admin.KeyManager.form.type": "Key Manager Type",
   "Admin.KeyManager.label.ConsumerKey.Claim": "Consumer Key Claim URI",
   "Admin.KeyManager.label.DisplayName": "Display Name",
@@ -141,6 +142,8 @@
   "AdminPages.KeyManager.Delete.form.delete.confirmation.message": "Are you sure you want to delete this KeyManager ?",
   "AdminPages.KeyManagers.Delete.form.delete.successful": "KeyManager deleted successfully",
   "AdminPages.KeyManagers.List.empty.content.keymanagers": "It is possible to register an OAuth Provider.",
+  "AdminPages.KeyManagers.Usages.dialog.close.btn": "Close",
+  "AdminPages.KeyManagers.Usages.dialog.title": "Key Manager Usages -",
   "AdminPagesGatewayEnvironments.AddEditGWEnvironment.form.environment.displayName.empty": "Display Name is Empty",
   "AdminPagesGatewayEnvironments.AddEditGWEnvironment.form.environment.vhost.duplicate": "VHosts are duplicated",
   "AdminPagesGatewayEnvironments.AddEditGWEnvironment.form.environment.vhost.empty": "VHost is empty",
@@ -244,7 +247,9 @@
   "Dashboard.apiCategories.apiCategoriesListing.no.description": "No description available",
   "Dashboard.apiCategories.noApiCategories.card.add.new.link.text": "Add new Category",
   "Dashboard.apiCategories.noApiCategories.card.description": "API categories allow API providers to categorize APIs that have similar attributes. When a categorized API gets published to the Developer Portal, its categories appear as clickable links to the API consumers. The API consumers can use the available API categories to quickly jump to a category of interest. {learnMoreLink}",
+  "Dashboard.apiCategories.noApiCategories.card.document.link.text": "Go to Category Documentation",
   "Dashboard.apiCategories.noApiCategories.card.title": "API Category based grouping",
+  "Dashboard.header.title": "Dashboard",
   "Dashboard.rateLimiting.card.advancedPolicies.description": "Control access per API or API resource using advanced rules",
   "Dashboard.rateLimiting.card.advancedPolicies.name": "Advanced Policies",
   "Dashboard.rateLimiting.card.applicationPolicies.description": "Applicable per access token generated for an application",
@@ -412,20 +417,28 @@
   "KeyManagers.Certificates.paste.label": "Paste the content of the PEM file",
   "KeyManagers.ListKeyManagerAPIUsages.error": "Unable to get Key Manager API usage details",
   "KeyManagers.ListKeyManagerApplicationUsages.error": "Unable to get Key Manager application usage details",
+  "KeyManagers.ListKeyManagerUsages.API.usages.count.multiple": "{count} APIs are using this key manager specifically",
+  "KeyManagers.ListKeyManagerUsages.API.usages.count.one": "1 API is using this key manager specifically.",
+  "KeyManagers.ListKeyManagerUsages.Application.usages.count.multiple": "{count} Applications are using this key manager specifically",
+  "KeyManagers.ListKeyManagerUsages.Application.usages.count.one": "1 Application is using this key manager specifically.",
   "KeyManagers.ListKeyManagerUsages.empty.content": "There are no Key Manger usages.",
   "KeyManagers.ListKeyManagerUsages.empty.title": "Key Manager Usages",
   "KeyManagers.ListKeyManagerUsages.permission.denied.content": "You dont have enough permission to view Key Manager Usages. Please contact the site administrator.",
   "KeyManagers.ListKeyManagerUsages.permission.denied.title": "Permission Denied",
+  "KeyManagers.ListKeyManagerUsages.tab.API.usages": "API Usages",
+  "KeyManagers.ListKeyManagerUsages.tab.Application.usages": "Application Usages",
   "KeyManagers.ListKeyManagers.List.title": "Key Managers",
   "KeyManagers.ListKeyManagers.addButtonProps.triggerButtonText": "Add Key Manager",
   "KeyManagers.ListKeyManagers.addGlobalKeyManager": "Add Global Key Manager",
   "KeyManagers.ListKeyManagers.edit.success": "Key Manager updated successfully.",
   "KeyManagers.ListKeyManagers.empty.title": "Key Managers",
+  "KeyManagers.ListKeyManagers.table.global.delete.tooltip": "Global Key Manager only can be deleted by the super admin user",
   "KeyManagers.ListKeyManagers.table.header.label.description": "Description",
   "KeyManagers.ListKeyManagers.table.header.label.name": "Name",
   "KeyManagers.ListKeyManagers.table.header.label.provider": "Provider",
   "KeyManagers.ListKeyManagers.table.header.label.tokenType": "Type",
   "KeyManagers.ListKeyManagers.table.header.label.usage": "Usage",
+  "KeyManagers.ListKeyManagers.table.is.used.delete.tooltip": "Key manager is used by an API or an Application",
   "Keymanager.Claim.Action": "Action",
   "Keymanager.KeyValidation.Action": "Action",
   "Keymanager.KeyValidation.ClaimKey": "Claim Key",
@@ -437,8 +450,10 @@
   "LoginDenied.message": "The server could not verify that you are authorized to access the requested resource.",
   "LoginDenied.retry": "Retry",
   "LoginDenied.title": "Error 403 : Forbidden",
+  "Mui.data.table.filter.icon.label": "Filter Table",
   "Mui.data.table.pagination.display.rows": "of",
   "Mui.data.table.pagination.rows.per.page": "Rows per page:",
+  "Mui.data.table.search.icon.label": "Search",
   "Mui.data.table.search.no.records.found": "Sorry, no matching records found",
   "PERMISSION_TREE.apim.admin": "Manage all admin operations",
   "PERMISSION_TREE.apim.admin_alert_manage": "Manage admin alerts",
@@ -642,11 +657,13 @@
   "Throttling.Advanced.ConditionalGroup.alert.title": "Warning",
   "Throttling.Advanced.ConditionalGroup.condition.policies": "Condition Policies",
   "Throttling.Advanced.ConditionalGroup.execution.policy": "Execution Policy",
+  "Throttling.Advanced.ConditionalGroup.expand.label": "Expand to edit",
   "Throttling.Advanced.ConditionalGroup.from": "From:",
   "Throttling.Advanced.ConditionalGroup.header": "Header Condition Policy",
   "Throttling.Advanced.ConditionalGroup.header.help": "This configuration is used to throttle based on Headers.",
   "Throttling.Advanced.ConditionalGroup.header.name": "Name",
   "Throttling.Advanced.ConditionalGroup.header.value": "Value",
+  "Throttling.Advanced.ConditionalGroup.hide.label": "Hide group",
   "Throttling.Advanced.ConditionalGroup.invert.condition": "Invert Condition",
   "Throttling.Advanced.ConditionalGroup.ip": "IP Condition Policy",
   "Throttling.Advanced.ConditionalGroup.ip.header.name": "IP Condition Type",
@@ -850,6 +867,7 @@
   "Workflow.APIProductStateChange.List.empty.content.apiProduct.statechange": "There are no pending workflow requests for API Product state change",
   "Workflow.APIProductStateChange.List.empty.title.apistatechange": "API Product State Change",
   "Workflow.APIProductStateChange.apicall.has.errors": "Unable to get workflow pending requests for API Product State Change",
+  "Workflow.APIProductStateChange.title.apistatechange": "API Product State Change - Approval Tasks",
   "Workflow.APIProductStateChange.updateStatus.has.errors": "Unable to complete API Product state change approve/reject process.",
   "Workflow.APIRevisionDeployment.List.empty.content.revisiondeployments": "There are no pending workflow requests for revision deployment.",
   "Workflow.APIRevisionDeployment.List.empty.title.revisiondeployments": "Revision Deployment",
@@ -880,6 +898,7 @@
   "Workflow.APIStateChange.table.header.CurrentState": "Current State",
   "Workflow.APIStateChange.table.header.Description": "Description",
   "Workflow.APIStateChange.table.header.RequestState": "Request State",
+  "Workflow.APIStateChange.title.apistatechange": "API State Change - Approval Tasks",
   "Workflow.APIStateChange.update.success": "Workflow status is updated successfully.",
   "Workflow.APIStateChange.updateStatus.has.errors": "Unable to complete API state change approve/reject process.",
   "Workflow.APIStatechange.help.link.one": "Create a API State change approval workflow request",
@@ -1017,4 +1036,4 @@
   "error.list.404.description": "The page you are looking for might have been removed, had its name changed or is temporarily unavailable.",
   "error.list.500": "500 : The page cannot be displayed.",
   "error.list.500.description": "The server encountered an internal error or misconfiguration and was unable to complete your request."
-}
+}
diff --git a/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Addons/HelpBase.jsx b/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Addons/HelpBase.jsx
@@ -22,7 +22,7 @@ import Popover from '@mui/material/Popover';
 import HelpIcon from '@mui/icons-material/Help';
 import Tooltip from '@mui/material/Tooltip';
 import IconButton from '@mui/material/IconButton';
-
+import { useIntl } from 'react-intl';
 /**
  * Render base for help links on top right corner of the page.
  * @returns {JSX} Header AppBar components.
@@ -37,13 +37,13 @@ function HelpBase({ children }) {
     const handleClose = () => {
         setAnchorEl(null);
     };
-
+    const intl = useIntl();
     const open = Boolean(anchorEl);
     const id = open ? 'simple-popover' : undefined;
 
     return (
         <div>
-            <Tooltip title='Help'>
+            <Tooltip title={intl.formatMessage({ id: 'Admin.Addons.Help.Base.title', defaultMessage: 'Help' })}>
                 <IconButton color='inherit' onClick={handleClick} size='large'>
                     <HelpIcon />
                 </IconButton>

diff --git a/...dmin/src/main/webapp/source/src/app/components/AdminPages/Dashboard/APICategoriesCard.jsx b/...dmin/src/main/webapp/source/src/app/components/AdminPages/Dashboard/APICategoriesCard.jsx
@@ -82,7 +82,10 @@ export default function APICategoriesCard() {
      + 'customize-api-listing/categorizing-and-grouping-apis/'
      + 'api-category-based-grouping'}
     >
-        Go to Category Documentation
+        <FormattedMessage
+            id='Dashboard.apiCategories.noApiCategories.card.document.link.text'
+            defaultMessage='Go to Category Documentation'
+        />
         <LaunchIcon fontSize='inherit' />
     </a>,
                         }}

diff --git a/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Dashboard/Dashboard.jsx b/portals/admin/src/main/webapp/source/src/app/components/AdminPages/Dashboard/Dashboard.jsx
@@ -23,18 +23,26 @@ import APICategoriesCard from 'AppComponents/AdminPages/Dashboard/APICategoriesC
 import RateLimitingCard from 'AppComponents/AdminPages/Dashboard/RateLimitingCard';
 import TasksWorkflowCard from 'AppComponents/AdminPages/Dashboard/TasksWorkflowCard';
 import { useAppContext } from 'AppComponents/Shared/AppContext';
-
+import { useIntl } from 'react-intl';
 /**
  * Render progress inside a container centering in the container.
  * @returns {JSX} Loading animation.
  */
 export default function Dashboard() {
     const { user: { _scopes } } = useAppContext();
+    const intl = useIntl();
     const hasWorkflowViewPermission = _scopes.includes('apim:api_workflow_view');
     const hasPolicyViewPermission = _scopes.includes('apim:admin_tier_view');
     const hasAPICategoryViewPermission = _scopes.includes('apim:api_category');
     return (
-        <ContentBase width='full' title='Dashboard' pageStyle='paperLess'>
+        <ContentBase
+            width='full'
+            title={intl.formatMessage({
+                id: 'Dashboard.header.title',
+                defaultMessage: 'Dashboard',
+            })}
+            pageStyle='paperLess'
+        >
             <Grid container spacing={3} justifyContent='center'>
                 {hasPolicyViewPermission && (
                     <Grid item xs={11} md={6}>

diff --git a/portals/admin/src/main/webapp/source/src/app/components/Base/Header/Breadcrumbs.jsx b/portals/admin/src/main/webapp/source/src/app/components/Base/Header/Breadcrumbs.jsx
@@ -38,19 +38,31 @@ function getPageDetails(routeMenuMapping, currentPath, pageDetails = []) {
             if (typeof routeDetail.children !== 'undefined') {
                 const result = getPageDetails(routeDetail.children, currentPath, pageDetails);
                 if (result !== '') {
-                    result.unshift({ id: routeDetail.id, path: routeDetail.path });
+                    result.unshift({
+                        id: routeDetail.id,
+                        displayText: routeDetail.displayText,
+                        path: routeDetail.path,
+                    });
                     return result;
                 }
             } else if (typeof routeDetail.addEditPageDetails !== 'undefined') {
                 const result = getPageDetails(routeDetail.addEditPageDetails, currentPath, pageDetails);
                 if (result !== '') {
-                    result.unshift({ id: routeDetail.id, path: routeDetail.path });
+                    result.unshift({
+                        id: routeDetail.id,
+                        displayText: routeDetail.displayText,
+                        path: routeDetail.path,
+                    });
                     return result;
                 }
             }
 
             if (routeDetail.path && currentPath.match(routeDetail.path)) {
-                return [{ id: routeDetail.id, path: currentPath }];
+                return [{
+                    id: routeDetail.id,
+                    displayText: routeDetail.displayText,
+                    path: currentPath,
+                }];
             }
         }
     }
@@ -79,12 +91,12 @@ function Breadcrumbs(props) {
                         key={page.id}
                         underline='hover'
                     >
-                        {page.id}
+                        {page.displayText}
                     </Link>,
                 );
             } else {
                 breadcrumbElements.push(
-                    <Typography color='textPrimary' key={page.id}>{page.id}</Typography>,
+                    <Typography color='textPrimary' key={page.id}>{page.displayText}</Typography>,
                 );
             }
         });

diff --git a/portals/admin/src/main/webapp/source/src/app/components/KeyManagers/ListKeyManagerUsages.jsx b/portals/admin/src/main/webapp/source/src/app/components/KeyManagers/ListKeyManagerUsages.jsx
@@ -266,6 +266,34 @@ function ListKeyManagerUsages(props) {
         viewColumns: false,
         customToolbar: false,
         responsive: 'stacked',
+        textLabels: {
+            toolbar: {
+                search: intl.formatMessage({
+                    id: 'Mui.data.table.search.icon.label',
+                    defaultMessage: 'Search',
+                }),
+                filterTable: intl.formatMessage({
+                    id: 'Mui.data.table.filter.icon.label',
+                    defaultMessage: 'Filter Table',
+                }),
+            },
+            body: {
+                noMatch: intl.formatMessage({
+                    id: 'Mui.data.table.search.no.records.found',
+                    defaultMessage: 'Sorry, no matching records found',
+                }),
+            },
+            pagination: {
+                rowsPerPage: intl.formatMessage({
+                    id: 'Mui.data.table.pagination.rows.per.page',
+                    defaultMessage: 'Rows per page:',
+                }),
+                displayRows: intl.formatMessage({
+                    id: 'Mui.data.table.pagination.display.rows',
+                    defaultMessage: 'of',
+                }),
+            },
+        },
     };
     if (data && data.length === 0) {
         return (
@@ -339,8 +367,22 @@ function ListKeyManagerUsages(props) {
             <TabContext value={value}>
                 <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                     <TabList onChange={handleChange} aria-label='key manager usage tabs'>
-                        <Tab label='API Usages' value='1' sx={{ fontSize: '0.9rem' }} />
-                        <Tab label='Application Usages' value='2' sx={{ fontSize: '0.9rem' }} />
+                        <Tab
+                            label={intl.formatMessage({
+                                id: 'KeyManagers.ListKeyManagerUsages.tab.API.usages',
+                                defaultMessage: 'API Usages',
+                            })}
+                            value='1'
+                            sx={{ fontSize: '0.9rem' }}
+                        />
+                        <Tab
+                            label={intl.formatMessage({
+                                id: 'KeyManagers.ListKeyManagerUsages.tab.Application.usages',
+                                defaultMessage: 'Application Usages',
+                            })}
+                            value='2'
+                            sx={{ fontSize: '0.9rem' }}
+                        />
                     </TabList>
                 </Box>
                 <TabPanel value='1'>
@@ -359,9 +401,19 @@ function ListKeyManagerUsages(props) {
                                                 <Box pl={2}>
                                                     <Typography variant='h8' gutterBottom>
                                                         {data.apiCount === 1
-                                                            ? '1 API is using this key manager specifically.'
-                                                            : data.apiCount
-                                                            + ' APIs are using this key manager specifically.'}
+                                                            ? intl.formatMessage({
+                                                                id: 'KeyManagers.ListKeyManagerUsages.API.usages'
+                                                                    + '.count.one',
+                                                                defaultMessage: '1 API is using this key manager'
+                                                                    + ' specifically.',
+                                                            })
+                                                            : intl.formatMessage({
+                                                                id: 'KeyManagers.ListKeyManagerUsages.API.usages'
+                                                                    + '.count.multiple',
+                                                                defaultMessage: '{count} APIs are using this key'
+                                                                    + ' manager specifically',
+                                                            },
+                                                            { count: data.apiCount })}
                                                     </Typography>
                                                 </Box>
                                             </Grid>
@@ -419,10 +471,20 @@ function ListKeyManagerUsages(props) {
                                             <Grid item xs={12}>
                                                 <Box pl={2}>
                                                     <Typography variant='h8' gutterBottom>
-                                                        {appData.applicationCount === 1 ? '1 Application is using this '
-                                                + 'key manager specifically.'
-                                                            : appData.applicationCount + ' Applications are using this '
-                                                + 'key manager specifically.'}
+                                                        {appData.applicationCount === 1
+                                                            ? intl.formatMessage({
+                                                                id: 'KeyManagers.ListKeyManagerUsages.Application'
+                                                                    + '.usages.count.one',
+                                                                defaultMessage: '1 Application is using this key '
+                                                                    + 'manager specifically.',
+                                                            })
+                                                            : intl.formatMessage({
+                                                                id: 'KeyManagers.ListKeyManagerUsages.Application'
+                                                                    + '.usages.count.multiple',
+                                                                defaultMessage: '{count} Applications are using this'
+                                                                    + ' key manager specifically',
+                                                            },
+                                                            { count: appData.applicationCount })}
                                                     </Typography>
                                                 </Box>
                                             </Grid>