Move translations inline

elastic · Jun 26, 2023 · 96a2365 · 96a2365
1 parent fd9f795
commit 96a2365
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 139 deletions.
diff --git a/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_body.tsx b/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_body.tsx
@@ -26,13 +26,13 @@ import {
   ALERT_STATUS_ACTIVE,
   ALERT_STATUS_RECOVERED,
 } from '@kbn/rule-data-utils';
+import { i18n } from '@kbn/i18n';
 import { AlertLifecycleStatusBadge } from '@kbn/alerts-ui-shared';
 import moment from 'moment-timezone';
 import { useUiSetting } from '@kbn/kibana-react-plugin/public';
 import { useKibana } from '../../utils/kibana_react';
 import { asDuration } from '../../../common/utils/formatters';
 import { paths } from '../../config/paths';
-import { translations } from '../../config/translations';
 import { formatAlertEvaluationValue } from '../../utils/format_alert_evaluation_value';
 import { RULE_DETAILS_PAGE_ID } from '../../pages/rule_details/constants';
 import type { TopAlert } from '../../typings/alerts';
@@ -59,7 +59,9 @@ export function AlertsFlyoutBody({ alert, id: pageId }: FlyoutProps) {
 
   const overviewListItems = [
     {
-      title: translations.alertsFlyout.statusLabel,
+      title: i18n.translate('xpack.observability.alertsFlyout.statusLabel', {
+        defaultMessage: 'Status',
+      }),
       description: (
         <AlertLifecycleStatusBadge
           alertStatus={alert.active ? ALERT_STATUS_ACTIVE : ALERT_STATUS_RECOVERED}
@@ -68,59 +70,81 @@ export function AlertsFlyoutBody({ alert, id: pageId }: FlyoutProps) {
       ),
     },
     {
-      title: translations.alertsFlyout.startedAtLabel,
+      title: i18n.translate('xpack.observability.alertsFlyout.startedAtLabel', {
+        defaultMessage: 'Started at',
+      }),
       description: (
         <span title={alert.start.toString()}>{moment(alert.start).format(dateFormat)}</span>
       ),
     },
     {
-      title: translations.alertsFlyout.lastUpdatedLabel,
+      title: i18n.translate('xpack.observability.alertsFlyout.lastUpdatedLabel', {
+        defaultMessage: 'Last updated',
+      }),
       description: (
         <span title={alert.lastUpdated.toString()}>
           {moment(alert.lastUpdated).format(dateFormat)}
         </span>
       ),
     },
     {
-      title: translations.alertsFlyout.durationLabel,
+      title: i18n.translate('xpack.observability.alertsFlyout.durationLabel', {
+        defaultMessage: 'Duration',
+      }),
       description: asDuration(alert.fields[ALERT_DURATION], { extended: true }),
     },
     {
-      title: translations.alertsFlyout.expectedValueLabel,
+      title: i18n.translate('xpack.observability.alertsFlyout.expectedValueLabel', {
+        defaultMessage: 'Expected value',
+      }),
       description: formatAlertEvaluationValue(
         alert.fields[ALERT_RULE_TYPE_ID],
         alert.fields[ALERT_EVALUATION_THRESHOLD]
       ),
     },
     {
-      title: translations.alertsFlyout.actualValueLabel,
+      title: i18n.translate('xpack.observability.alertsFlyout.actualValueLabel', {
+        defaultMessage: 'Actual value',
+      }),
       description: formatAlertEvaluationValue(
         alert.fields[ALERT_RULE_TYPE_ID],
         alert.fields[ALERT_EVALUATION_VALUE]
       ),
     },
     {
-      title: translations.alertsFlyout.ruleTypeLabel,
+      title: i18n.translate('xpack.observability.alertsFlyout.ruleTypeLabel', {
+        defaultMessage: 'Rule type',
+      }),
       description: alert.fields[ALERT_RULE_CATEGORY] ?? '-',
     },
   ];
 
   return (
     <EuiFlyoutBody>
       <EuiTitle size="xs">
-        <h4>{translations.alertsFlyout.reasonTitle}</h4>
+        <h4>
+          {i18n.translate('xpack.observability.alertsFlyout.reasonTitle', {
+            defaultMessage: 'Reason',
+          })}
+        </h4>
       </EuiTitle>
       <EuiSpacer size="s" />
       <EuiText size="s">{alert.reason}</EuiText>
       <EuiSpacer size="s" />
       {!!linkToRule && (
         <EuiLink href={linkToRule} data-test-subj="viewRuleDetailsFlyout">
-          {translations.alertsFlyout.viewRulesDetailsLinkText}
+          {i18n.translate('xpack.observability.alertsFlyout.viewRulesDetailsLinkText', {
+            defaultMessage: 'View rule details',
+          })}
         </EuiLink>
       )}
       <EuiHorizontalRule size="full" />
       <EuiTitle size="xs">
-        <h4>{translations.alertsFlyout.documentSummaryTitle}</h4>
+        <h4>
+          {i18n.translate('xpack.observability.alertsFlyout.documentSummaryTitle', {
+            defaultMessage: 'Document Summary',
+          })}
+        </h4>
       </EuiTitle>
       <EuiSpacer size="m" />
       <EuiDescriptionList

diff --git a/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_footer.tsx b/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_footer.tsx
@@ -6,10 +6,10 @@
  */
 import React from 'react';
 import { EuiFlyoutFooter, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { useKibana } from '../../utils/kibana_react';
 import { usePluginContext } from '../../hooks/use_plugin_context';
 import { isAlertDetailsEnabledPerApp } from '../../utils/is_alert_details_enabled';
-import { translations } from '../../config/translations';
 import { paths } from '../../config/paths';
 import type { TopAlert } from '../../typings/alerts';
 
@@ -37,7 +37,9 @@ export function AlertsFlyoutFooter({ alert, isInApp }: FlyoutProps & { isInApp:
           data-test-subj="alertsFlyoutAlertDetailsButton"
           fill
         >
-          {translations.alertsFlyout.alertDetailsButtonText}
+          {i18n.translate('xpack.observability.alertsFlyout.alertsDetailsButtonText', {
+            defaultMessage: 'Alert details',
+          })}
         </EuiButton>
       </EuiFlexItem>
     );
@@ -52,7 +54,9 @@ export function AlertsFlyoutFooter({ alert, isInApp }: FlyoutProps & { isInApp:
           data-test-subj="alertsFlyoutViewInAppButton"
           fill
         >
-          {translations.alertsFlyout.viewInAppButtonText}
+          {i18n.translate('xpack.observability.alertsFlyout.viewInAppButtonText', {
+            defaultMessage: 'View in app',
+          })}
         </EuiButton>
       </EuiFlexItem>
     );

diff --git a/x-pack/plugins/observability/public/config/translations.ts b/x-pack/plugins/observability/public/config/translations.ts