add lang labels

src/components/common/SettingsTable.js

@@ -25,7 +25,7 @@ export function SettingsTable({
   onPageSizeChange,
   filterValue,
 }) {
-  const { formatMessage, messages } = useMessages();
+  const { formatMessage, labels, messages } = useMessages();
   const [filter, setFilter] = useState(filterValue);
   const { data: value, page, count, pageSize } = data;
 
@@ -42,7 +42,7 @@ export function SettingsTable({
           delay={1000}
           value={filter}
           autoFocus={true}
-          placeholder="Search"
+          placeholder={formatMessage(labels.search)}
           style={{ maxWidth: '300px', marginBottom: '10px' }}
         />
       )}

src/components/messages.js

@@ -129,6 +129,10 @@ export const labels = defineMessages({
   reports: { id: 'label.reports', defaultMessage: 'Reports' },
   eventData: { id: 'label.event-data', defaultMessage: 'Event data' },
   funnel: { id: 'label.funnel', defaultMessage: 'Funnel' },
+  funnelDescription: {
+    id: 'label.funnel-description',
+    defaultMessage: 'Understand the conversion and drop-off rate of users.',
+  },
   url: { id: 'label.url', defaultMessage: 'URL' },
   urls: { id: 'label.urls', defaultMessage: 'URLs' },
   add: { id: 'label.add', defaultMessage: 'Add' },
@@ -167,7 +171,15 @@ export const labels = defineMessages({
   overview: { id: 'label.overview', defaultMessage: 'Overview' },
   totalRecords: { id: 'label.total-records', defaultMessage: 'Total records' },
   insights: { id: 'label.insights', defaultMessage: 'Insights' },
+  insightsDescription: {
+    id: 'label.insights-description',
+    defaultMessage: 'Dive deeper into your data by using segments and filters.',
+  },
   retention: { id: 'label.retention', defaultMessage: 'Retention' },
+  retentionDescription: {
+    id: 'label.retention-description',
+    defaultMessage: 'Measure you website stickiness by tracking how often users return.',
+  },
   dropoff: { id: 'label.dropoff', defaultMessage: 'Dropoff' },
   referrer: { id: 'label.referrer', defaultMessage: 'Referrer' },
   country: { id: 'label.country', defaultMessage: 'Country' },
@@ -179,6 +191,8 @@ export const labels = defineMessages({
   day: { id: 'label.day', defaultMessage: 'Day' },
   date: { id: 'label.date', defaultMessage: 'Date' },
   pageOf: { id: 'label.page-of', defaultMessage: 'Page {current} of {total}' },
+  create: { id: 'label.create', defaultMessage: 'Create' },
+  search: { id: 'label.search', defaultMessage: 'Search' },
 });
 
 export const messages = defineMessages({

src/components/pages/reports/ReportTemplates.js

@@ -9,6 +9,8 @@ import styles from './ReportTemplates.module.css';
 import { useMessages } from 'components/hooks';
 
 function ReportItem({ title, description, url, icon }) {
+  const { formatMessage, labels } = useMessages();
+
   return (
     <div className={styles.report}>
       <div className={styles.title}>
@@ -22,7 +24,7 @@ function ReportItem({ title, description, url, icon }) {
             <Icon>
               <Icons.Plus />
             </Icon>
-            <Text>Create</Text>
+            <Text>{formatMessage(labels.create)}</Text>
           </Button>
         </Link>
       </div>
@@ -36,19 +38,19 @@ export function ReportTemplates({ showHeader = true }) {
   const reports = [
     {
       title: formatMessage(labels.insights),
-      description: 'Dive deeper into your data by using segments and filters.',
+      description: formatMessage(labels.insightsDescription),
       url: '/reports/insights',
       icon: <Lightbulb />,
     },
     {
       title: formatMessage(labels.funnel),
-      description: 'Understand the conversion and drop-off rate of users.',
+      description: formatMessage(labels.funnelDescription),
       url: '/reports/funnel',
       icon: <Funnel />,
     },
     {
       title: formatMessage(labels.retention),
-      description: 'Measure you website stickiness by tracking how often users return.',
+      description: formatMessage(labels.retentionDescription),
       url: '/reports/retention',
       icon: <Magnet />,
     },