Merge pull request #722 from nisan-abeywickrama/improve-i18n-portals-…

…admin

Fix missing keys and add UI modifications for admin portal to support localization

portals/admin/src/main/webapp/source/src/app/components/APICategories/AddEditAPICategory.jsx

@@ -21,7 +21,7 @@ import { styled } from '@mui/material/styles';
 import API from 'AppData/api';
 import PropTypes from 'prop-types';
 import TextField from '@mui/material/TextField';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import FormDialogBase from 'AppComponents/AdminPages/Addons/FormDialogBase';
 import Alert from 'AppComponents/Shared/Alert';
 
@@ -53,7 +53,7 @@ function AddEdit(props) {
  const {
  updateList, dataRow, icon, triggerButtonText, title,
  } = props;
-
+ const intl = useIntl();
  const [initialState, setInitialState] = useState({
  description: '',
  });
@@ -80,20 +80,35 @@ function AddEdit(props) {
  break;
  }
  if (value === '') {
- error = 'Name is Empty';
+ error = intl.formatMessage({
+ id: 'AdminPages.ApiCategories.AddEdit.form.error.name.empty',
+ defaultMessage: 'Name is Empty',
+ });
  } else if (value.length > 255) {
- error = 'API Category name is too long';
+ error = intl.formatMessage({
+ id: 'AdminPages.ApiCategories.AddEdit.form.error.name.too.long',
+ defaultMessage: 'API Category name is too long',
+ });
  } else if (/\s/.test(value)) {
- error = 'Name contains spaces';
+ error = intl.formatMessage({
+ id: 'AdminPages.ApiCategories.AddEdit.form.error.name.has.spaces',
+ defaultMessage: 'Name contains spaces',
+ });
  } else if (/[!@#$%^&*(),?"{}[\]|<>\t\n]/i.test(value)) {
- error = 'Name field contains special characters';
+ error = intl.formatMessage({
+ id: 'AdminPages.ApiCategories.AddEdit.form.error.name.has.special.chars',
+ defaultMessage: 'Name field contains special characters',
+ });
  } else {
  error = false;
  }
  break;
  case 'description':
  if (value && value.length > 1024) {
- error = 'API Category description is too long';
+ error = intl.formatMessage({
+ id: 'AdminPages.ApiCategories.AddEdit.form.error.description.too.long',
+ defaultMessage: 'API Category description is too long',
+ });
  }
  break;
  default:
@@ -142,17 +157,17 @@ function AddEdit(props) {
  .then(() => {
  if (dataRow) {
  return (
- <FormattedMessage
- id='AdminPages.ApiCategories.AddEdit.form.edit.successful'
- defaultMessage='API Category edited successfully'
- />
+ intl.formatMessage({
+ id: 'AdminPages.ApiCategories.AddEdit.form.edit.successful',
+ defaultMessage: 'API Category edited successfully',
+ })
  );
  } else {
  return (
- <FormattedMessage
- id='AdminPages.ApiCategories.AddEdit.form.add.successful'
- defaultMessage='API Category added successfully'
- />
+ intl.formatMessage({
+ id: 'AdminPages.ApiCategories.AddEdit.form.add.successful',
+ defaultMessage: 'API Category added successfully',
+ })
  );
  }
  })
@@ -176,7 +191,10 @@ function AddEdit(props) {
  return (
  <FormDialogBase
  title={title}
- saveButtonText='Save'
+ saveButtonText={intl.formatMessage({
+ id: 'AdminPages.ApiCategories.AddEdit.form.save.btn',
+ defaultMessage: 'Save',
+ })}
  icon={icon}
  triggerButtonText={triggerButtonText}
  formSaveCallback={formSaveCallback}
@@ -196,7 +214,11 @@ function AddEdit(props) {
  )}
  fullWidth
  error={hasErrors('name', name)}
- helperText={hasErrors('name', name) || 'Name of the API category'}
+ helperText={hasErrors('name', name)
+ || intl.formatMessage({
+ id: 'AdminPages.ApiCategories.AddEdit.form.name.helper.text',
+ defaultMessage: 'Name of the API category',
+ })}
  variant='outlined'
  disabled={editMode}
  />
@@ -205,11 +227,18 @@ function AddEdit(props) {
  name='description'
  value={description}
  onChange={onChange}
- label='Description'
+ label={intl.formatMessage({
+ id: 'AdminPages.ApiCategories.AddEdit.form.description',
+ defaultMessage: 'Description',
+ })}
  fullWidth
  multiline
  error={hasErrors('description', description)}
- helperText={hasErrors('description', description) || 'Description of the API category'}
+ helperText={hasErrors('description', description)
+ || intl.formatMessage({
+ id: 'AdminPages.ApiCategories.AddEdit.form.description.helper.text',
+ defaultMessage: 'Description of the API category',
+ })}
  variant='outlined'
  />
  </FormDialogBase>

portals/admin/src/main/webapp/source/src/app/components/APICategories/DeleteAPICategory.jsx

@@ -19,7 +19,7 @@
 import React from 'react';
 import API from 'AppData/api';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import DialogContentText from '@mui/material/DialogContentText';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import FormDialogBase from 'AppComponents/AdminPages/Addons/FormDialogBase';
@@ -32,6 +32,7 @@ import Alert from 'AppComponents/Shared/Alert';
  */
 function Delete({ updateList, dataRow }) {
  const { id, noOfApis } = dataRow;
+ const intl = useIntl();
  const getValidationErrors = () => {
  let errorText = '';
  if (noOfApis > 0) {
@@ -68,12 +69,23 @@ function Delete({ updateList, dataRow }) {
 
  return (
  <FormDialogBase
- title='Delete API category?'
- saveButtonText='Delete'
+ title={intl.formatMessage({
+ id: 'AdminPages.ApiCategories.Delete.form.delete.title',
+ defaultMessage: 'Delete API category?',
+ })}
+ saveButtonText={intl.formatMessage({
+ id: 'AdminPages.ApiCategories.Delete.form.delete.btn',
+ defaultMessage: 'Delete',
+ })}
  icon={<DeleteForeverIcon />}
  formSaveCallback={formSaveCallback}
  >
- <DialogContentText>Are you sure you want to delete this API Category?</DialogContentText>
+ <DialogContentText>
+ <FormattedMessage
+ id='AdminPages.ApiCategories.Delete.form.delete.content'
+ defaultMessage='Are you sure you want to delete this API Category?'
+ />
+ </DialogContentText>
  </FormDialogBase>
  );
 }

portals/admin/src/main/webapp/source/src/app/components/APISettings/ApisTableContent.jsx

@@ -212,7 +212,12 @@ const ApisTableContent = ({ apis, updateApiList }) => {
  <StyledDiv sx={styles.tableActionBtnContainer}>
  <TextField
  id='standard-basic'
- label='Provider Name'
+ label={(
+ <FormattedMessage
+ id='AdminPages.ApiSettings.EditApi.form.edit.provider.label'
+ defaultMessage='Provider Name'
+ />
+ )}
  variant='standard'
  size='small'
  defaultValue={api.provider}

portals/admin/src/main/webapp/source/src/app/components/APISettings/ListApis.jsx

@@ -247,7 +247,26 @@ export default function ListApis() {
  count={totalApps}
  rowsPerPage={rowsPerPage}
  rowsPerPageOptions={[5, 10, 15]}
- labelRowsPerPage='Show'
+ labelDisplayedRows={({ from, to, count }) => {
+ if (count !== -1) {
+ return intl.formatMessage({
+ id: 'Applications.Listing.apis.list.rows.range.label',
+ defaultMessage: '{from}-{to} of {count}',
+ },
+ {
+ from, to, count,
+ });
+ }
+ return intl.formatMessage({
+ id: 'Applications.Listing.apis.list.rows.more.than.label',
+ defaultMessage: 'more than {to}',
+ },
+ { to });
+ }}
+ labelRowsPerPage={intl.formatMessage({
+ id: 'Applications.Listing.apis.list.rows.show.label',
+ defaultMessage: 'Show',
+ })}
  page={page}
  backIconButtonProps={{
  'aria-label': 'Previous Page',

portals/admin/src/main/webapp/source/src/app/components/AdminPages/Addons/FormDialogBase.jsx

@@ -26,6 +26,7 @@ import DialogTitle from '@mui/material/DialogTitle';
 import IconButton from '@mui/material/IconButton';
 import CircularProgress from '@mui/material/CircularProgress';
 import Alert from 'AppComponents/Shared/Alert';
+import { FormattedMessage } from 'react-intl';
 
 /**
  * Render base for dialogs.
@@ -94,7 +95,10 @@ function FormDialogBase({
  </DialogContent>
  <DialogActions>
  <Button onClick={handleClose}>
- Cancel
+ <FormattedMessage
+ id='Form.Dialog.Base.cancel.btn'
+ defaultMessage='Cancel'
+ />
  </Button>
  <Button
  onClick={saveTriggerd}

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>

portals/admin/src/main/webapp/source/src/app/components/AdminPages/Addons/ListBase.jsx

@@ -137,7 +137,10 @@ function ListBase(props) {
  columns.push(
  {
  name: '',
- label: 'Actions',
+ label: <FormattedMessage
+ id='Throttling.Advanced.AddEdit.form.actions.label'
+ defaultMessage='Actions'
+ />,
  options: {
  filter: false,
  sort: false,
@@ -213,6 +216,24 @@ function ListBase(props) {
  responsive: 'vertical',
  searchText,
  onColumnSortChange,
+ textLabels: {
+ 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 no apiCall is provided OR,

portals/admin/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>,
  }}

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}>