Fixed typo. Added new localization string.

components/common/Table.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import styles from './Table.module.css';
+import { FormattedMessage } from 'react-intl';
 
 export default function Table({ columns, rows, empty }) {
   if (empty && rows.length === 0) {
@@ -21,6 +22,11 @@ export default function Table({ columns, rows, empty }) {
         ))}
       </div>
       <div className={styles.body}>
+        {rows.length === 0 && (
+          <div className={styles.empty}>
+            <FormattedMessage id="message.no-data-available" defaultMessage="No data available." />
+          </div>
+        )}
         {rows.map((row, rowIndex) => (
           <div className={classNames(styles.row, 'row')} key={rowIndex}>
             {columns.map(({ key, render, className, style, cell }) => (

components/common/Table.module.css

@@ -19,8 +19,7 @@
   flex-direction: column;
 }
 
-.body:empty:before {
-  content: 'No data available';
+.empty {
   color: var(--gray500);
   position: absolute;
   top: 50%;

components/metrics/MetricsTable.js

@@ -87,6 +87,14 @@ export default function MetricsTable({
             </div>
           </div>
           <div className={styles.body}>
+            {data?.length === 0 && (
+              <div className={styles.empty}>
+                <FormattedMessage
+                  id="message.no-data-available"
+                  defaultMessage="No data available."
+                />
+              </div>
+            )}
             {limit
               ? rankings.map(row => getRow(row))
               : data?.length > 0 && (

components/metrics/MetricsTable.module.css

@@ -95,8 +95,7 @@
   overflow: hidden;
 }
 
-.body:empty:before {
-  content: 'No data available';
+.empty {
   color: var(--gray500);
   position: absolute;
   top: 50%;

lang/en.json

@@ -47,7 +47,7 @@
   "header.nav.settings": {
     "defaultMessage": "Settings"
   },
-  "label.adminsitrator": {
+  "label.administrator": {
     "defaultMessage": "Administrator"
   },
   "label.confirm-password": {
@@ -125,6 +125,9 @@
   "message.incorrect-username-password": {
     "defaultMessage": "Incorrect username/password."
   },
+  "message.no-data-available": {
+    "defaultMessage": "No data available."
+  },
   "message.save-success": {
     "defaultMessage": "Saved successfully."
   },

lang/nl-NL.json

@@ -47,7 +47,7 @@
   "header.nav.settings": {
     "defaultMessage": "Instellingen"
   },
-  "label.adminsitrator": {
+  "label.administrator": {
     "defaultMessage": "Administrator"
   },
   "label.confirm-password": {

lang/zh-CN.json

@@ -47,7 +47,7 @@
   "header.nav.settings": {
     "defaultMessage": "设置"
   },
-  "label.adminsitrator": {
+  "label.administrator": {
     "defaultMessage": "管理员"
   },
   "label.confirm-password": {