[Dashboard] [Controls] [Discover] Fix small i18n + l10n inconsist…

…encies (#181735)

## Summary

Related: #181771
Related: elastic/eui#7714

I found a few missed translations when reviewing
#181597 and
#181356, and so I figured I would
quickly add them. In this PR, I have addressed 4 out of the 6 issues
noted in [this
comment](#181356 (review)).
The remaining 2 issues have related issues linked above.

- **Controls field type filter:**

   | Before | After |
   |--------|--------|
|
![image](https://github.com/elastic/kibana/assets/8698078/caf83a8e-278b-44ae-923a-d2538a78291d)
|
![image](https://github.com/elastic/kibana/assets/8698078/dd7fd317-0dfa-4e02-b223-e2f432f04765)
|

- **Dashboard settings menu:**

   | Before | After |
   |--------|--------|
| ![Screenshot 2024-04-25 at 1 24
47 PM](https://github.com/elastic/kibana/assets/8698078/2f97df73-f748-4802-a096-ca98e1c48ea3)
| ![Screenshot 2024-04-25 at 1 25
45 PM](https://github.com/elastic/kibana/assets/8698078/386476f4-f2fe-4f88-a164-50e7ad6d7e0b)
|

- **Custom time range badge:**

   | Before | After |
   |--------|--------|
|
![image](https://github.com/elastic/kibana/assets/8698078/08986343-77bb-4fb8-8e9c-91994676dbe1)
|
![image](https://github.com/elastic/kibana/assets/8698078/17d4b268-feaa-48d0-b356-edd801a9a548)
|

- **Time slider button:**

   | Before | After |
   |--------|--------|
|
![image](https://github.com/elastic/kibana/assets/8698078/4dd8b4c9-8b49-4e5b-9d5e-5b40505df69c)
|
![image](https://github.com/elastic/kibana/assets/8698078/284b91eb-58e7-4e9f-9933-449616125262)
|

In my investigation of the time slider control, I also noticed that the
options list was not taking locale into consideration when formatting
dates - upon further investigation, this is because the date formatter
(`src/plugins/field_formats/public/lib/converters/date.ts`), which is
also used in Discover, did not localize the dates. By adding this, I
have fixed both options list suggestions and dates in Discover (and
anywhere else that uses `getFormatterForField` for date fields):


| Before | After |
|--------|--------|
|
![image](https://github.com/elastic/kibana/assets/8698078/ae776923-d047-49f9-a04d-69eab1b9a167)
|
![image](https://github.com/elastic/kibana/assets/8698078/7ef49472-e01c-4376-acee-fa54ab55d128)
|
| ![Screenshot 2024-04-26 at 9 44
51 AM](https://github.com/elastic/kibana/assets/8698078/6d2684f7-8296-46f4-9be7-21f6309501e6)
| ![Screenshot 2024-04-26 at 9 45
33 AM](https://github.com/elastic/kibana/assets/8698078/fb03f273-3f89-4493-9b68-f15a868e03d8)
|




### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome]

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/controls/public/time_slider/embeddable/time_slider_embeddable.tsx

@@ -10,11 +10,11 @@ import _ from 'lodash';
 import moment from 'moment-timezone';
 import React, { createContext, useContext } from 'react';
 import ReactDOM from 'react-dom';
-import { Subscription } from 'rxjs';
-import { debounceTime, first, map } from 'rxjs';
+import { debounceTime, first, map, Subscription } from 'rxjs';
 
 import { Embeddable, IContainer } from '@kbn/embeddable-plugin/public';
 import type { TimeRange } from '@kbn/es-query';
+import { i18n } from '@kbn/i18n';
 import { ReduxEmbeddableTools, ReduxToolsPackage } from '@kbn/presentation-util-plugin/public';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 
@@ -374,6 +374,7 @@ export class TimeSliderControlEmbeddable
   private formatDate = (epoch: number) => {
     return moment
       .tz(epoch, getMomentTimezone(this.getTimezone()))
+      .locale(i18n.getLocale())
       .format(this.getState().componentState.format);
   };
 

src/plugins/dashboard/public/dashboard_container/component/settings/settings_flyout.tsx

@@ -258,7 +258,14 @@ export const DashboardSettings = ({ onClose }: DashboardSettingsProps) => {
               data-test-subj="dashboardPanelTitlesCheckbox"
             />
           </EuiFormRow>
-          <EuiFormRow label="Sync across panels">
+          <EuiFormRow
+            label={i18n.translate(
+              'dashboard.embeddableApi.showSettings.flyout.formRow.syncAcrossPanelsLabel',
+              {
+                defaultMessage: 'Sync across panels',
+              }
+            )}
+          >
             <>
               <EuiFormRow>
                 <EuiSwitch

src/plugins/field_formats/public/lib/converters/date.ts

@@ -51,7 +51,7 @@ export class DateFormat extends FieldFormat {
         const date = moment(value);
 
         if (date.isValid()) {
-          return date.format(pattern);
+          return date.locale(i18n.getLocale()).format(pattern);
         } else {
           return value;
         }

src/plugins/presentation_panel/public/panel_actions/customize_panel_action/custom_time_range_badge.tsx

@@ -13,7 +13,6 @@ import {
   IncompatibleActionError,
 } from '@kbn/ui-actions-plugin/public';
 import React from 'react';
-import { renderToString } from 'react-dom/server';
 
 import { UI_SETTINGS } from '@kbn/data-plugin/common';
 import { apiPublishesTimeRange, EmbeddableApiContext } from '@kbn/presentation-publishing';
@@ -31,16 +30,29 @@ export class CustomTimeRangeBadge
 
   public getDisplayName({ embeddable }: EmbeddableApiContext) {
     if (!apiPublishesTimeRange(embeddable)) throw new IncompatibleActionError();
-    const timeRange = embeddable.timeRange$.value;
-    if (!timeRange) return '';
-    return renderToString(
+    /**
+     * WARNING!! We would not normally return an empty string here - but in order for i18n to be
+     * handled properly by the `PrettyDuration` component, we need it to handle the aria label.
+     */
+    return '';
+  }
+
+  public readonly MenuItem = ({ context }: { context: EmbeddableApiContext }) => {
+    const { embeddable } = context;
+    if (!apiPublishesTimeRange(embeddable)) throw new IncompatibleActionError();
+
+    const timeRange = embeddable.timeRange$.getValue();
+    if (!timeRange) {
+      throw new IncompatibleActionError();
+    }
+    return (
       <PrettyDuration
         timeTo={timeRange.to}
         timeFrom={timeRange.from}
         dateFormat={core.uiSettings.get<string>(UI_SETTINGS.DATE_FORMAT) ?? 'Browser'}
       />
     );
-  }
+  };
 
   public couldBecomeCompatible({ embeddable }: EmbeddableApiContext) {
     return apiPublishesTimeRange(embeddable);

src/plugins/presentation_panel/public/panel_component/panel_header/use_presentation_panel_header_actions.tsx

@@ -114,18 +114,27 @@ export const usePresentationPanelHeaderActions = <
 
   const badgeElements = useMemo(() => {
     if (!showBadges) return [];
-    return badges?.map((badge) => (
-      <EuiBadge
-        key={badge.id}
-        className="embPanel__headerBadge"
-        iconType={badge.getIconType({ embeddable: api, trigger: panelBadgeTrigger })}
-        onClick={() => badge.execute({ embeddable: api, trigger: panelBadgeTrigger })}
-        onClickAriaLabel={badge.getDisplayName({ embeddable: api, trigger: panelBadgeTrigger })}
-        data-test-subj={`embeddablePanelBadge-${badge.id}`}
-      >
-        {badge.getDisplayName({ embeddable: api, trigger: panelBadgeTrigger })}
-      </EuiBadge>
-    ));
+    return badges?.map((badge) => {
+      return (
+        <EuiBadge
+          key={badge.id}
+          className="embPanel__headerBadge"
+          iconType={badge.getIconType({ embeddable: api, trigger: panelBadgeTrigger })}
+          onClick={() => badge.execute({ embeddable: api, trigger: panelBadgeTrigger })}
+          onClickAriaLabel={badge.getDisplayName({ embeddable: api, trigger: panelBadgeTrigger })}
+          data-test-subj={`embeddablePanelBadge-${badge.id}`}
+        >
+          {badge.MenuItem
+            ? React.createElement(badge.MenuItem, {
+                context: {
+                  embeddable: api,
+                  trigger: panelBadgeTrigger,
+                },
+              })
+            : badge.getDisplayName({ embeddable: api, trigger: panelBadgeTrigger })}
+        </EuiBadge>
+      );
+    });
   }, [api, badges, showBadges]);
 
   const notificationElements = useMemo(() => {

src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx

@@ -9,17 +9,18 @@
 import React, { useState } from 'react';
 
 import {
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiFilterButton,
+  EuiFilterButtonProps,
   EuiFilterGroup,
   EuiFlexGroup,
   EuiFlexItem,
   EuiInputPopover,
-  EuiContextMenuPanel,
-  EuiContextMenuItem,
-  EuiFilterButton,
-  EuiFilterButtonProps,
 } from '@elastic/eui';
-import { FieldIcon } from '@kbn/react-field';
+import { getFieldTypeName } from '@kbn/field-utils';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { FieldIcon } from '@kbn/react-field';
 
 export interface Props {
   onFieldTypesChange: (value: string[]) => void;
@@ -94,7 +95,7 @@ export function FieldTypeFilter({
                 <EuiFlexItem grow={false}>
                   <FieldIcon type={type} label={type} />
                 </EuiFlexItem>
-                <EuiFlexItem>{type}</EuiFlexItem>
+                <EuiFlexItem>{getFieldTypeName(type)}</EuiFlexItem>
               </EuiFlexGroup>
             </EuiContextMenuItem>
           ))}

src/plugins/presentation_util/tsconfig.json

@@ -34,6 +34,7 @@
     "@kbn/shared-ux-button-toolbar",
     "@kbn/code-editor",
     "@kbn/calculate-width-from-char-count",
+    "@kbn/field-utils",
   ],
   "exclude": ["target/**/*"]
 }