[i18n] Translate filter_bar (#26250)

* Translate ui -> filter_bar

* Fix issue

* Resolve review comments

src/ui/public/filter_bar/filter_bar.html

@@ -1,24 +1,43 @@
-<section aria-label="Filters">
+<section
+  aria-label="{{ ::'common.ui.filterBar.filtersAriaLabel' | i18n: { defaultMessage: 'Filters' } }}"
+>
   <div class="filter-bar-confirm" ng-show="newFilters.length">
     <form ng-submit="applyFilters(newFilters)">
     <ul class="list-unstyled">
-      <li>Apply these filters?</li>
+      <li
+        i18n-id="common.ui.filterBar.applyTheseFiltersLabel"
+        i18n-default-message="Apply these filters?"
+      ></li>
       <li ng-repeat="filter in newFilters track by $index" class="filter" ng-click="filter.meta.apply = !filter.meta.apply"><input type="checkbox" ng-checked="filter.meta.apply"/>
-        <span ng-if="filter.meta.negate">NOT </span> {{ filter.meta.key }}: {{ filter.meta.value }}
+        <span
+          ng-if="filter.meta.negate"
+          i18n-id="common.ui.filterBar.notFilterLabel"
+          i18n-default-message="NOT"
+        ></span>
+        {{ filter.meta.key }}: {{ filter.meta.value }}
+      </li>
+      <li ng-if="changeTimeFilter" class="changeTimeFilter filter" ng-click="changeTimeFilter.meta.apply = !changeTimeFilter.meta.apply"><input type="checkbox" ng-checked="changeTimeFilter.meta.apply"/>
+        <strong
+          i18n-id="common.ui.filterBar.changeTimeToLabel"
+          i18n-default-message="Change time to:"
+        ></strong>
+        {{changeTimeFilter.meta.value}}
       </li>
-      <li ng-if="changeTimeFilter" class="changeTimeFilter filter" ng-click="changeTimeFilter.meta.apply = !changeTimeFilter.meta.apply"><input type="checkbox" ng-checked="changeTimeFilter.meta.apply"/> <strong>Change time to:</strong> {{changeTimeFilter.meta.value}} </li>
       <li>
         <div class="kuiButtonGroup">
-          <button class="kuiButton kuiButton--primary kuiButton--small" data-test-subj="filterBarApplyFilters">
-            Apply Now
-          </button>
+          <button
+            class="kuiButton kuiButton--primary kuiButton--small"
+            data-test-subj="filterBarApplyFilters"
+            i18n-id="common.ui.filterBar.applyNowButtonLabel"
+            i18n-default-message="Apply Now"
+            ></button>
 
           <button
             class="kuiButton kuiButton--hollow"
             ng-click="clearFilterBar();"
-          >
-            Cancel
-          </button>
+            i18n-id="common.ui.filterBar.cancelButtonLabel"
+            i18n-default-message="Cancel"
+          ></button>
         </div>
       </li>
     </ul>
@@ -50,7 +69,10 @@
           class="euiLink euiLink--primary"
           data-test-subj="addFilter"
         >
-          Add a filter
+          <span
+            i18n-id="common.ui.filterBar.addFilterButtonLabel"
+            i18n-default-message="Add a filter"
+          ></span>
           <span class="fa fa-plus"></span>
         </button>
       </div>
@@ -68,7 +90,10 @@
           aria-expanded="{{!!showFilterActions}}"
           aria-controls="filterActionsAllContainer"
         >
-          Actions
+          <span
+            i18n-id="common.ui.filterBar.actionsButtonLabel"
+            i18n-default-message="Actions"
+          ></span>
           <span
             class="fa"
             ng-class="{
@@ -94,7 +119,7 @@
         class="filter-nav-link__collapser"
         ng-click="toggleFilterShown($event)"
         aria-expanded="true"
-        aria-label="Toggle filterbar"
+        aria-label="{{ ::'common.ui.filterBar.toggleFilterbarAriaLabel' | i18n: { defaultMessage: 'Toggle filterbar' } }}"
       >
         <span class="kuiIcon" ng-class="filterNavToggle.isOpen == true ? 'fa-chevron-circle-up' : 'fa-chevron-circle-down'"></span>
       </button>
@@ -121,28 +146,83 @@
   >
     <div class="filter-actions-all">
       <div class="filter-link">
-        <div class="filter-description"><strong>All filters:</strong></div>
+        <div class="filter-description">
+          <strong
+            i18n-id="common.ui.filterBar.allFiltersLabel"
+            i18n-default-message="All filters:"
+          ></strong>
+        </div>
       </div>
         <div class="filter-link">
-          <div class="filter-description"><a ng-click="toggleAll(false)" kbn-accessible-click>Enable</a></div>
+          <div class="filter-description">
+            <a
+              ng-click="toggleAll(false)"
+              kbn-accessible-click
+              i18n-id="common.ui.filterBar.allFilters.enableLabel"
+              i18n-default-message="Enable"
+            ></a>
+          </div>
         </div>
       <div class="filter-link">
-        <div class="filter-description"><a ng-click="toggleAll(true)" kbn-accessible-click>Disable</a></div>
+        <div class="filter-description">
+          <a
+            ng-click="toggleAll(true)"
+            kbn-accessible-click
+            i18n-id="common.ui.filterBar.allFilters.disableLabel"
+            i18n-default-message="Disable"
+          ></a>
+        </div>
       </div>
       <div class="filter-link">
-        <div class="filter-description"><a ng-click="pinAll(true)" kbn-accessible-click>Pin</a></div>
+        <div class="filter-description">
+          <a
+            ng-click="pinAll(true)"
+            kbn-accessible-click
+            i18n-id="common.ui.filterBar.allFilters.pinLabel"
+            i18n-default-message="Pin"
+          ></a>
+        </div>
       </div>
       <div class="filter-link">
-        <div class="filter-description"><a ng-click="pinAll(false)" kbn-accessible-click>Unpin</a></div>
+        <div class="filter-description">
+          <a
+            ng-click="pinAll(false)"
+            kbn-accessible-click
+            i18n-id="common.ui.filterBar.allFilters.unpinLabel"
+            i18n-default-message="Unpin"
+          ></a>
+        </div>
       </div>
       <div class="filter-link">
-        <div class="filter-description"><a ng-click="invertAll()" kbn-accessible-click>Invert</a></div>
+        <div class="filter-description">
+          <a
+            ng-click="invertAll()"
+            kbn-accessible-click
+            i18n-id="common.ui.filterBar.allFilters.invertLabel"
+            i18n-default-message="Invert"
+          ></a>
+        </div>
       </div>
       <div class="filter-link">
-        <div class="filter-description"><a ng-click="toggleAll()" kbn-accessible-click>Toggle</a></div>
+        <div class="filter-description">
+          <a
+            ng-click="toggleAll()"
+            kbn-accessible-click
+            i18n-id="common.ui.filterBar.allFilters.toggleLabel"
+            i18n-default-message="Toggle"
+          ></a>
+        </div>
       </div>
       <div class="filter-link">
-        <div class="filter-description"><a ng-click="removeAll()" data-test-subj="removeAllFilters" kbn-accessible-click>Remove</a></div>
+        <div class="filter-description">
+          <a
+            ng-click="removeAll()"
+            data-test-subj="removeAllFilters"
+            kbn-accessible-click
+            i18n-id="common.ui.filterBar.allFilters.removeLabel"
+            i18n-default-message="Remove"
+          ></a>
+        </div>
       </div>
     </div>
   </div>

src/ui/public/filter_bar/filter_bar.js

@@ -37,7 +37,7 @@ export { disableFilter, enableFilter, toggleFilterDisabled } from './lib/disable
 
 const module = uiModules.get('kibana');
 
-module.directive('filterBar', function (Private, Promise, getAppState) {
+module.directive('filterBar', function (Private, Promise, getAppState, i18n) {
   const mapAndFlattenFilters = Private(FilterBarLibMapAndFlattenFiltersProvider);
   const mapFlattenAndWrapFilters = Private(FilterBarLibMapFlattenAndWrapFiltersProvider);
   const extractTimeFilter = Private(FilterBarLibExtractTimeFilterProvider);
@@ -74,20 +74,25 @@ module.directive('filterBar', function (Private, Promise, getAppState) {
         return pill[pill.length - 1].offsetTop > 10;
       };
 
+      const collapseFilterTooltip = i18n('common.ui.filterBar.collapseFilterTooltip', {
+        defaultMessage: 'Collapse filter bar \n to show less'
+      });
+      const expandFilterTooltip = i18n('common.ui.filterBar.expandFilterTooltip', { defaultMessage: 'Expand filter bar \n to show more' });
+
       $scope.filterNavToggle = {
         isOpen: true,
-        tooltipContent: 'Collapse filter bar \n to show less'
+        tooltipContent: collapseFilterTooltip
       };
 
       $scope.toggleFilterShown = () => {
         const collapser = $elem.find('.filter-nav-link__collapser');
         const filterPanelPill = $elem.find('.filter-panel__pill');
         if ($scope.filterNavToggle.isOpen) {
-          $scope.filterNavToggle.tooltipContent = 'Expand filter bar \n to show more';
+          $scope.filterNavToggle.tooltipContent = expandFilterTooltip;
           collapser.attr('aria-expanded', 'false');
           filterPanelPill.attr('style', 'width: calc(100% - 80px)');
         } else {
-          $scope.filterNavToggle.tooltipContent = 'Collapse filter bar \n to show less';
+          $scope.filterNavToggle.tooltipContent = collapseFilterTooltip;
           collapser.attr('aria-expanded', 'true');
           filterPanelPill.attr('style', 'width: auto');
         }

src/ui/public/filter_bar/filter_pill/filter_pill.html

@@ -13,7 +13,11 @@
     aria-disabled="{{pill.filter.meta.disabled}}"
   >
     <span ng-if="pill.filter.$state.store == 'globalState'"><span class="fa fa-fw fa-thumb-tack pinned"></span></span>
-    <span ng-if="pill.filter.meta.negate">NOT</span>
+    <span
+      ng-if="pill.filter.meta.negate"
+      i18n-id="common.ui.filterBar.filterPill.negateLabel"
+      i18n-default-message="NOT"
+    ></span>
     <span ng-if="pill.filter.meta.alias">{{ pill.filter.meta.alias }}</span>
     <span ng-if="!pill.filter.meta.alias">{{ pill.filter.meta.key }}:</span>
     <span ng-if="!pill.filter.meta.alias">"{{ pill.filter.meta.value }}"</span>
@@ -26,8 +30,8 @@
       data-test-subj="disableFilter-{{ pill.filter.meta.key }}"
       ng-focus="pill.activateActions()"
       ng-blur="pill.deactivateActions()"
-      aria-label="{{pill.filter.meta.disabled ? 'Enable filter' : 'Disable filter'}}"
-      tooltip="{{pill.filter.meta.disabled ? 'Enable filter' : 'Disable filter'}}"
+      aria-label="{{pill.filter.meta.disabled ? pill.i18n.enableFilterAriaLabel : pill.i18n.disableFilterAriaLabel}}"
+      tooltip="{{pill.filter.meta.disabled ? pill.i18n.enableFilterTooltip : pill.i18n.disableFilterTooltip}}"
       tooltip-append-to-body="true"
     >
       <span ng-show="pill.filter.meta.disabled" class="fa fa-fw fa-square-o disabled"></span>
@@ -40,8 +44,8 @@
       data-test-subj="pinFilter-{{ pill.filter.meta.key }}"
       ng-focus="pill.activateActions()"
       ng-blur="pill.deactivateActions()"
-      aria-label="{{pill.filter.$state.store == 'globalState' ? 'Unpin filter' : 'Pin filter'}}"
-      tooltip="{{pill.filter.$state.store == 'globalState' ? 'Unpin filter' : 'Pin filter'}}"
+      aria-label="{{pill.filter.$state.store == 'globalState' ? pill.i18n.unpinFilterAriaLabel : pill.i18n.pinFilterAriaLabel}}"
+      tooltip="{{pill.filter.$state.store == 'globalState' ? pill.i18n.unpinFilterTooltip : pill.i18n.pinFilterTooltip}}"
       tooltip-append-to-body="true"
     >
       <span ng-show="pill.filter.$state.store == 'globalState'" class="fa fa-fw fa-thumb-tack pinned"></span>
@@ -54,8 +58,8 @@
       data-test-subj="invertFilter-{{ pill.filter.meta.key }}"
       ng-focus="pill.activateActions()"
       ng-blur="pill.deactivateActions()"
-      aria-label="{{pill.filter.meta.negate ? 'Include matches' : 'Exclude matches'}}"
-      tooltip="{{pill.filter.meta.negate ? 'Include matches' : 'Exclude matches'}}"
+      aria-label="{{pill.filter.meta.negate ? pill.i18n.includeMatchesAriaLabel : pill.i18n.excludeMatchesAriaLabel}}"
+      tooltip="{{pill.filter.meta.negate ? pill.i18n.includeMatchesTooltip : pill.i18n.excludeMatchesTooltip}}"
       tooltip-append-to-body="true"
     >
       <span ng-show="pill.filter.meta.negate" class="fa fa-fw fa-search-plus negative"></span>
@@ -67,8 +71,8 @@
       ng-click="pill.onDeleteFilter(pill.filter)"
       ng-focus="pill.activateActions()"
       ng-blur="pill.deactivateActions()"
-      aria-label="Remove filter"
-      tooltip="Remove filter"
+      aria-label="{{ ::'common.ui.filterBar.filterPill.removeFilterAriaLabel' | i18n: { defaultMessage: 'Remove filter' } }}"
+      tooltip="{{ ::'common.ui.filterBar.filterPill.removeFilterTooltip' | i18n: { defaultMessage: 'Remove filter' } }}"
       tooltip-append-to-body="true"
     >
       <span class="fa fa-fw fa-trash" data-test-subj="removeFilter-{{ pill.filter.meta.key }}"></span>
@@ -80,14 +84,14 @@
       ng-disabled="pill.isControlledByPanel()"
       ng-focus="pill.activateActions()"
       ng-blur="pill.deactivateActions()"
-      aria-label="Edit filter"
-      tooltip="Edit filter"
+      aria-label="{{ ::'common.ui.filterBar.filterPill.editFilterAriaLabel' | i18n: { defaultMessage: 'Edit filter' } }}"
+      tooltip="{{ ::'common.ui.filterBar.filterPill.editFilterTooltip' | i18n: { defaultMessage: 'Edit filter' } }}"
       tooltip-append-to-body="true"
       data-test-subj="editFilter"
     >
       <span
         ng-show="pill.isControlledByPanel()"
-        tooltip="Edit disabled because filter is controlled by Kibana"
+        tooltip="{{ ::'common.ui.filterBar.filterPill.editDisabledTooltip' | i18n: { defaultMessage: 'Edit disabled because filter is controlled by Kibana' } }}"
         class="fa fa-fw fa-edit fa-disabled"
       ></span>
       <span ng-hide="pill.isControlledByPanel()" class="fa fa-fw fa-edit"></span>

src/ui/public/filter_bar/filter_pill/filter_pill.js

@@ -23,7 +23,7 @@ import { uiModules } from '../../modules';
 
 const module = uiModules.get('kibana');
 
-module.directive('filterPill', function () {
+module.directive('filterPill', function (i18n) {
   return {
     template,
     restrict: 'E',
@@ -51,6 +51,20 @@ module.directive('filterPill', function () {
         return _.has(this.filter, 'meta.controlledBy');
       };
 
+      this.i18n = {
+        enableFilterAriaLabel: i18n('common.ui.filterBar.filterPill.enableFilterAriaLabel', { defaultMessage: 'Enable filter' }),
+        enableFilterTooltip: i18n('common.ui.filterBar.filterPill.enableFilterTooltip', { defaultMessage: 'Enable filter' }),
+        disableFilterAriaLabel: i18n('common.ui.filterBar.filterPill.disableFilterAriaLabel', { defaultMessage: 'Disable filter' }),
+        disableFilterTooltip: i18n('common.ui.filterBar.filterPill.disableFilterTooltip', { defaultMessage: 'Disable filter' }),
+        pinFilterAriaLabel: i18n('common.ui.filterBar.filterPill.pinFilterAriaLabel', { defaultMessage: 'Pin filter' }),
+        pinFilterTooltip: i18n('common.ui.filterBar.filterPill.pinFilterTooltip', { defaultMessage: 'Pin filter' }),
+        unpinFilterAriaLabel: i18n('common.ui.filterBar.filterPill.unpinFilterAriaLabel', { defaultMessage: 'Unpin filter' }),
+        unpinFilterTooltip: i18n('common.ui.filterBar.filterPill.unpinFilterTooltip', { defaultMessage: 'Unpin filter' }),
+        includeMatchesAriaLabel: i18n('common.ui.filterBar.filterPill.includeMatchesAriaLabel', { defaultMessage: 'Include matches' }),
+        includeMatchesTooltip: i18n('common.ui.filterBar.filterPill.includeMatchesTooltip', { defaultMessage: 'Include matches' }),
+        excludeMatchesAriaLabel: i18n('common.ui.filterBar.filterPill.excludeMatchesAriaLabel', { defaultMessage: 'Exclude matches' }),
+        excludeMatchesTooltip: i18n('common.ui.filterBar.filterPill.excludeMatchesTooltip', { defaultMessage: 'Exclude matches' }),
+      };
     }
   };
 });