From d08c6eb80b42e73d1fea4740dcc1c90640624ced Mon Sep 17 00:00:00 2001
From: mgiota <panagiota.mitsopoulou@elastic.co>
Date: Mon, 19 Jul 2021 08:45:12 +0200
Subject: [PATCH] Internationalization for actions

---
 .../public/pages/alerts/alerts_table_t_grid.tsx        | 10 +++++++---
 .../pages/alerts/alerts_table_t_grid_actions.tsx       | 10 ++++++++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx b/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx
index 7259f279c6bcc..54ed7e54648a1 100644
--- a/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx
+++ b/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx
@@ -22,7 +22,6 @@ import type { TimelinesUIStart } from '../../../../timelines/public';
 import type { TopAlert } from './';
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
 import type { ActionProps, ColumnHeaderOptions, RowRenderer } from '../../../../timelines/common';
-// import { EventsThContent } from '../../../../timelines/public';
 
 import { getRenderCellValue } from './render_cell_value';
 import { usePluginContext } from '../../hooks/use_plugin_context';
@@ -38,7 +37,6 @@ interface AlertsTableTGridProps {
   setRefetch: (ref: () => void) => void;
 }
 
-// TODO import EventsThContent from timelines plugin and customize a few css properties (position & padding-top)
 const EventsThContent = styled.div.attrs(({ className = '' }) => ({
   className: `siemEventsTable__thContent ${className}`,
 }))<{ textAlign?: string; width?: number }>`
@@ -126,7 +124,13 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
       id: 'expand',
       width: 40,
       headerCellRender: () => {
-        return <EventsThContent>Actions</EventsThContent>; // TODO: internationalization
+        return (
+          <EventsThContent>
+            {i18n.translate('xpack.observability.alertsTable.actionsTextLabel', {
+              defaultMessage: 'Actions',
+            })}
+          </EventsThContent>
+        );
       },
       rowCellRender: ({ data }: ActionProps) => {
         const dataFieldEs = data.reduce((acc, d) => ({ ...acc, [d.field]: d.value }), {});
diff --git a/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid_actions.tsx b/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid_actions.tsx
index 38919857e86c1..1f5372c8f2fea 100644
--- a/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid_actions.tsx
+++ b/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid_actions.tsx
@@ -55,7 +55,9 @@ export function RowCellActionsRender({ data }: ActionProps) {
         anchorPosition="upCenter"
         button={
           <EuiButtonIcon
-            aria-label="show actions"
+            aria-label={i18n.translate('xpack.observability.alertsTable.actionsTextAriaLabel', {
+              defaultMessage: 'show actions',
+            })}
             iconType="boxesHorizontal"
             color="text"
             onClick={() => setIsPopoverOpen(!isPopoverOpen)}
@@ -63,7 +65,11 @@ export function RowCellActionsRender({ data }: ActionProps) {
         }
         closePopover={() => setIsPopoverOpen(false)}
       >
-        <EuiPopoverTitle>Actions</EuiPopoverTitle>
+        <EuiPopoverTitle>
+          {i18n.translate('xpack.observability.alertsTable.actionsTextLabel', {
+            defaultMessage: 'Actions',
+          })}
+        </EuiPopoverTitle>
         <div style={{ width: 150 }}>
           <EuiButtonEmpty href={prepend(link ?? '')}>
             <EuiFlexGroup alignItems="center" component="span" gutterSize="s">