Expandable flyout translations (#166216)

elastic · Sep 14, 2023 · 8d14f21 · 8d14f21
1 parent c7d2eb5
commit 8d14f21
Show file tree

Hide file tree

Showing 112 changed files with 1,532 additions and 1,637 deletions.
diff --git a/x-pack/plugins/security_solution/public/flyout/isolate_host/header.test.tsx b/x-pack/plugins/security_solution/public/flyout/isolate_host/header.test.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
+import { useIsolateHostPanelContext } from './context';
+import { PanelHeader } from './header';
+import { FLYOUT_HEADER_TITLE_TEST_ID } from './test_ids';
+
+jest.mock('./context');
+
+const renderPanelHeader = () =>
+  render(
+    <IntlProvider locale="en">
+      <PanelHeader />
+    </IntlProvider>
+  );
+
+describe('<PanelHeader />', () => {
+  (useIsolateHostPanelContext as jest.Mock).mockReturnValue({ isolateAction: 'isolateHost' });
+
+  it('should display isolate host message', () => {
+    const { getByTestId } = renderPanelHeader();
+
+    expect(getByTestId(FLYOUT_HEADER_TITLE_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(FLYOUT_HEADER_TITLE_TEST_ID)).toHaveTextContent('Isolate host');
+  });
+
+  it('should display release host message', () => {
+    (useIsolateHostPanelContext as jest.Mock).mockReturnValue({ isolateAction: 'unisolateHost' });
+
+    const { getByTestId } = renderPanelHeader();
+
+    expect(getByTestId(FLYOUT_HEADER_TITLE_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(FLYOUT_HEADER_TITLE_TEST_ID)).toHaveTextContent('Release host');
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/flyout/isolate_host/header.tsx b/x-pack/plugins/security_solution/public/flyout/isolate_host/header.tsx
@@ -8,9 +8,9 @@
 import { EuiFlyoutHeader, EuiTitle } from '@elastic/eui';
 import type { FC } from 'react';
 import React from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { useIsolateHostPanelContext } from './context';
 import { FLYOUT_HEADER_TITLE_TEST_ID } from './test_ids';
-import { PANEL_HEADER_ISOLATE_TITLE, PANEL_HEADER_RELEASE_TITLE } from './translations';
 
 /**
  * Document details expandable right section header for the isolate host panel
@@ -19,7 +19,17 @@ export const PanelHeader: FC = () => {
   const { isolateAction } = useIsolateHostPanelContext();
 
   const title =
-    isolateAction === 'isolateHost' ? PANEL_HEADER_ISOLATE_TITLE : PANEL_HEADER_RELEASE_TITLE;
+    isolateAction === 'isolateHost' ? (
+      <FormattedMessage
+        id="xpack.securitySolution.flyout.isolateHost.isolateTitle"
+        defaultMessage="Isolate host"
+      />
+    ) : (
+      <FormattedMessage
+        id="xpack.securitySolution.flyout.isolateHost.releaseTitle"
+        defaultMessage="Release host"
+      />
+    );
 
   return (
     <EuiFlyoutHeader hasBorder>

diff --git a/x-pack/plugins/security_solution/public/flyout/isolate_host/translations.ts b/x-pack/plugins/security_solution/public/flyout/isolate_host/translations.ts
diff --git a/x-pack/plugins/security_solution/public/flyout/left/components/correlations_details.test.tsx b/x-pack/plugins/security_solution/public/flyout/left/components/correlations_details.test.tsx
@@ -20,8 +20,8 @@ import {
   CORRELATIONS_DETAILS_BY_SESSION_SECTION_TABLE_TEST_ID,
   CORRELATIONS_DETAILS_BY_SOURCE_SECTION_TABLE_TEST_ID,
   CORRELATIONS_DETAILS_CASES_SECTION_TABLE_TEST_ID,
+  CORRELATIONS_DETAILS_NO_DATA_TEST_ID,
   CORRELATIONS_DETAILS_SUPPRESSED_ALERTS_SECTION_TEST_ID,
-  CORRELATIONS_DETAILS_TEST_ID,
 } from './test_ids';
 import { useFetchRelatedAlertsBySession } from '../../shared/hooks/use_fetch_related_alerts_by_session';
 import { useFetchRelatedAlertsByAncestry } from '../../shared/hooks/use_fetch_related_alerts_by_ancestry';
@@ -102,13 +102,14 @@ describe('CorrelationsDetails', () => {
       dataCount: 1,
     });
 
-    const { getByTestId } = renderCorrelationDetails();
+    const { getByTestId, queryByTestId } = renderCorrelationDetails();
 
     expect(getByTestId(CORRELATIONS_DETAILS_BY_ANCESTRY_SECTION_TABLE_TEST_ID)).toBeInTheDocument();
     expect(getByTestId(CORRELATIONS_DETAILS_BY_SOURCE_SECTION_TABLE_TEST_ID)).toBeInTheDocument();
     expect(getByTestId(CORRELATIONS_DETAILS_BY_SESSION_SECTION_TABLE_TEST_ID)).toBeInTheDocument();
     expect(getByTestId(CORRELATIONS_DETAILS_CASES_SECTION_TABLE_TEST_ID)).toBeInTheDocument();
     expect(getByTestId(CORRELATIONS_DETAILS_SUPPRESSED_ALERTS_TITLE_TEST_ID)).toBeInTheDocument();
+    expect(queryByTestId(CORRELATIONS_DETAILS_NO_DATA_TEST_ID)).not.toBeInTheDocument();
   });
 
   it('should render no section and show error message if show values are false', () => {
@@ -139,7 +140,10 @@ describe('CorrelationsDetails', () => {
     expect(
       queryByTestId(CORRELATIONS_DETAILS_SUPPRESSED_ALERTS_TITLE_TEST_ID)
     ).not.toBeInTheDocument();
-    expect(getByTestId(`${CORRELATIONS_DETAILS_TEST_ID}Error`)).toBeInTheDocument();
+    expect(getByTestId(CORRELATIONS_DETAILS_NO_DATA_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(CORRELATIONS_DETAILS_NO_DATA_TEST_ID)).toHaveTextContent(
+      'No correlations data available.'
+    );
   });
 
   it('should render no section if values are null', () => {

diff --git a/x-pack/plugins/security_solution/public/flyout/left/components/correlations_details.tsx b/x-pack/plugins/security_solution/public/flyout/left/components/correlations_details.tsx
@@ -7,8 +7,8 @@
 
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { CORRELATIONS_ERROR_MESSAGE } from './translations';
-import { CORRELATIONS_DETAILS_TEST_ID } from './test_ids';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { CORRELATIONS_DETAILS_NO_DATA_TEST_ID } from './test_ids';
 import { RelatedAlertsBySession } from './related_alerts_by_session';
 import { RelatedAlertsBySameSourceEvent } from './related_alerts_by_same_source_event';
 import { RelatedCases } from './related_cases';
@@ -98,9 +98,12 @@ export const CorrelationsDetails: React.FC = () => {
           )}
         </EuiFlexGroup>
       ) : (
-        <div data-test-subj={`${CORRELATIONS_DETAILS_TEST_ID}Error`}>
-          {CORRELATIONS_ERROR_MESSAGE}
-        </div>
+        <p data-test-subj={CORRELATIONS_DETAILS_NO_DATA_TEST_ID}>
+          <FormattedMessage
+            id="xpack.securitySolution.flyout.left.insights.correlations.noDataDescription"
+            defaultMessage="No correlations data available."
+          />
+        </p>
       )}
     </>
   );

diff --git a/...ecurity_solution/public/flyout/left/components/correlations_details_alerts_table.test.tsx b/...ecurity_solution/public/flyout/left/components/correlations_details_alerts_table.test.tsx
@@ -67,7 +67,7 @@ describe('CorrelationsDetailsAlertsTable', () => {
     const { getByTestId } = render(
       <TestProviders>
         <CorrelationsDetailsAlertsTable
-          title={'title'}
+          title={<p>{'title'}</p>}
           loading={false}
           alertIds={alertIds}
           scopeId={scopeId}

diff --git a/...ins/security_solution/public/flyout/left/components/correlations_details_alerts_table.tsx b/...ins/security_solution/public/flyout/left/components/correlations_details_alerts_table.tsx
@@ -5,17 +5,18 @@
  * 2.0.
  */
 
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React, { type FC, useMemo, useCallback } from 'react';
 import { type Criteria, EuiBasicTable, formatDate } from '@elastic/eui';
 import { Severity } from '@kbn/securitysolution-io-ts-alerting-types';
 import type { Filter } from '@kbn/es-query';
 import { isRight } from 'fp-ts/lib/Either';
 import { ALERT_REASON, ALERT_RULE_NAME } from '@kbn/rule-data-utils';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
 import type { DataProvider } from '../../../../common/types';
 import { SeverityBadge } from '../../../detections/components/rules/severity_badge';
 import { usePaginatedAlerts } from '../hooks/use_paginated_alerts';
-import * as i18n from './translations';
 import { ExpandablePanel } from '../../shared/components/expandable_panel';
 import { InvestigateInTimelineButton } from '../../../common/components/event_details/table/investigate_in_timeline_button';
 import { ACTION_INVESTIGATE_IN_TIMELINE } from '../../../detections/components/alerts_table/translations';
@@ -27,24 +28,44 @@ const dataProviderLimit = 5;
 export const columns = [
   {
     field: '@timestamp',
-    name: i18n.CORRELATIONS_TIMESTAMP_COLUMN_TITLE,
+    name: (
+      <FormattedMessage
+        id="xpack.securitySolution.flyout.left.insights.correlations.timestampColumnLabel"
+        defaultMessage="Timestamp"
+      />
+    ),
     truncateText: true,
     dataType: 'date' as const,
     render: (value: string) => formatDate(value, TIMESTAMP_DATE_FORMAT),
   },
   {
     field: ALERT_RULE_NAME,
-    name: i18n.CORRELATIONS_RULE_COLUMN_TITLE,
+    name: (
+      <FormattedMessage
+        id="xpack.securitySolution.flyout.left.insights.correlations.ruleColumnLabel"
+        defaultMessage="Rule"
+      />
+    ),
     truncateText: true,
   },
   {
     field: ALERT_REASON,
-    name: i18n.CORRELATIONS_REASON_COLUMN_TITLE,
+    name: (
+      <FormattedMessage
+        id="xpack.securitySolution.flyout.left.insights.correlations.reasonColumnLabel"
+        defaultMessage="Reason"
+      />
+    ),
     truncateText: true,
   },
   {
     field: 'kibana.alert.severity',
-    name: i18n.CORRELATIONS_SEVERITY_COLUMN_TITLE,
+    name: (
+      <FormattedMessage
+        id="xpack.securitySolution.flyout.left.insights.correlations.severityColumnLabel"
+        defaultMessage="Severity"
+      />
+    ),
     truncateText: true,
     render: (value: string) => {
       const decodedSeverity = Severity.decode(value);
@@ -57,7 +78,7 @@ export interface CorrelationsDetailsAlertsTableProps {
   /**
    * Text to display in the ExpandablePanel title section
    */
-  title: string;
+  title: ReactElement;
   /**
    * Whether the table is loading
    */
@@ -188,7 +209,12 @@ const getFilters = (alertIds?: string[]) => {
     return [
       {
         meta: {
-          alias: i18n.CORRELATIONS_DETAILS_TABLE_FILTER,
+          alias: i18n.translate(
+            'xpack.securitySolution.flyout.left.insights.correlations.tableFilterLabel',
+            {
+              defaultMessage: 'Correlations Details Table Alert IDs.',
+            }
+          ),
           type: 'phrases',
           key: '_id',
           params: [...alertIds],

diff --git a/x-pack/plugins/security_solution/public/flyout/left/components/entities_details.test.tsx b/x-pack/plugins/security_solution/public/flyout/left/components/entities_details.test.tsx
@@ -42,7 +42,7 @@ const HOST_TEST_ID = EXPANDABLE_PANEL_CONTENT_TEST_ID(HOST_DETAILS_TEST_ID);
 
 describe('<EntitiesDetails />', () => {
   it('renders entities details correctly', () => {
-    const { getByTestId } = render(
+    const { getByTestId, queryByTestId } = render(
       <TestProviders>
         <LeftPanelContext.Provider value={mockContextValue}>
           <EntitiesDetails />
@@ -52,6 +52,7 @@ describe('<EntitiesDetails />', () => {
     expect(getByTestId(ENTITIES_DETAILS_TEST_ID)).toBeInTheDocument();
     expect(getByTestId(USER_TEST_ID)).toBeInTheDocument();
     expect(getByTestId(HOST_TEST_ID)).toBeInTheDocument();
+    expect(queryByTestId(ENTITIES_DETAILS_NO_DATA_TEST_ID)).not.toBeInTheDocument();
   });
 
   it('should render no data message if user name and host name are not available', () => {
@@ -69,6 +70,9 @@ describe('<EntitiesDetails />', () => {
       </TestProviders>
     );
     expect(getByTestId(ENTITIES_DETAILS_NO_DATA_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(ENTITIES_DETAILS_NO_DATA_TEST_ID)).toHaveTextContent(
+      'Host and user information are unavailable for this alert.'
+    );
     expect(queryByTestId(USER_TEST_ID)).not.toBeInTheDocument();
     expect(queryByTestId(HOST_TEST_ID)).not.toBeInTheDocument();
   });
@@ -96,6 +100,9 @@ describe('<EntitiesDetails />', () => {
       </TestProviders>
     );
     expect(getByTestId(ENTITIES_DETAILS_NO_DATA_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(ENTITIES_DETAILS_NO_DATA_TEST_ID)).toHaveTextContent(
+      'Host and user information are unavailable for this alert.'
+    );
     expect(queryByTestId(USER_TEST_ID)).not.toBeInTheDocument();
     expect(queryByTestId(HOST_TEST_ID)).not.toBeInTheDocument();
   });

diff --git a/x-pack/plugins/security_solution/public/flyout/left/components/entities_details.tsx b/x-pack/plugins/security_solution/public/flyout/left/components/entities_details.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { ENTITIES_NO_DATA_MESSAGE } from './translations';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { useLeftPanelContext } from '../context';
 import { getField } from '../../shared/utils';
 import { UserDetails } from './user_details';
@@ -45,7 +45,12 @@ export const EntitiesDetails: React.FC = () => {
           )}
         </EuiFlexGroup>
       ) : (
-        <div data-test-subj={ENTITIES_DETAILS_NO_DATA_TEST_ID}>{ENTITIES_NO_DATA_MESSAGE}</div>
+        <p data-test-subj={ENTITIES_DETAILS_NO_DATA_TEST_ID}>
+          <FormattedMessage
+            id="xpack.securitySolution.flyout.left.insights.entities.noDataDescription"
+            defaultMessage="Host and user information are unavailable for this alert."
+          />
+        </p>
       )}
     </>
   );