Translate filter editor (#29713)

src/ui/public/filter_editor/filter_editor.html

@@ -1,16 +1,22 @@
 <div class="filterEditor kuiModal">
   <div class="kuiModalHeader">
     <div class="kuiModalHeader__title">
-      <span ng-show="filterEditor.filter.meta.isNew">Add</span>
-      <span ng-hide="filterEditor.filter.meta.isNew">Edit</span>
-      filter
+      <span
+        ng-show="filterEditor.filter.meta.isNew"
+        i18n-id="common.ui.filterEditor.addFilterLabel"
+        i18n-default-message="Add filter"
+      ></span>
+      <span ng-hide="filterEditor.filter.meta.isNew"
+        i18n-id="common.ui.filterEditor.editFilterLabel"
+        i18n-default-message="Edit filter"
+      ></span>
     </div>
 
     <button
       data-test-subj="filterEditorModalCloseButton"
       class="kuiModalHeaderCloseButton kuiIcon fa-times"
       ng-click="filterEditor.onCancel()"
-      aria-label="Close filter popover"
+      aria-label="{{ ::'common.ui.filterEditor.closeFilterPopoverAriaLabel' | i18n: { defaultMessage: 'Close filter popover' } }}"
     ></button>
   </div>
 
@@ -18,9 +24,11 @@
     <!-- Filter definition -->
     <div class="kuiVerticalRhythm">
       <div class="kuiVerticalRhythmSmall filterEditor__labelBar">
-        <label class="kuiLabel">
-          Filter
-        </label>
+        <label
+          class="kuiLabel"
+          i18n-id="common.ui.filterEditor.filterLabel"
+          i18n-default-message="Filter"
+        ></label>
 
         <div>
           <a
@@ -28,13 +36,17 @@
             ng-click="filterEditor.toggleEditingQueryDsl()"
             kbn-accessible-click
           >
-            <span ng-if="filterEditor.isEditingQueryDsl">
-              Search filter values
-            </span>
+            <span
+              ng-if="filterEditor.isEditingQueryDsl"
+              i18n-id="common.ui.filterEditor.searchFilterValuesLabel"
+              i18n-default-message="Search filter values"
+            ></span>
 
-            <span ng-if="!filterEditor.isEditingQueryDsl">
-              Edit Query DSL
-            </span>
+            <span
+              ng-if="!filterEditor.isEditingQueryDsl"
+              i18n-id="common.ui.filterEditor.editQueryDSLLabel"
+              i18n-default-message="Edit Query DSL"
+            ></span>
           </a>
         </div>
       </div>
@@ -87,7 +99,20 @@
         ></filter-query-dsl-editor>
 
         <p class="kuiText kuiVerticalRhythmSmall">
-          Filters are built using the <a class="kuiLink" target="_blank" rel="noopener noreferrer" documentation-href="query.queryDsl">Elasticsearch Query DSL</a>.
+          <span
+            i18n-id="common.ui.filterEditor.filtersAreBuiltUsingESQueryDSLDescription"
+            i18n-default-message="Filters are built using the "
+            description="Part of composite text: common.ui.filterEditor.filtersAreBuiltUsingESQueryDSLDescription + common.ui.filterEditor.filtersAreBuiltUsingESQueryDSLDescription.esQueryDSLLinkText"
+          ></span>
+          <a
+            class="kuiLink"
+            target="_blank"
+            rel="noopener noreferrer"
+            documentation-href="query.queryDsl"
+            i18n-id="common.ui.filterEditor.filtersAreBuiltUsingESQueryDSLDescription.esQueryDSLLinkText"
+            i18n-default-message="Elasticsearch Query DSL"
+            description="Part of composite text: common.ui.filterEditor.filtersAreBuiltUsingESQueryDSLDescription + common.ui.filterEditor.filtersAreBuiltUsingESQueryDSLDescription.esQueryDSLLinkText"
+          ></a>.
         </p>
       </div>
     </div>
@@ -98,14 +123,14 @@
         <label
           class="kuiLabel"
           for="filterEditorLabelInput"
-        >
-          Label
-        </label>
+          i18n-id="common.ui.filterEditor.labelLabel"
+          i18n-default-message="Label"
+        ></label>
       </div>
 
       <input
         class="kuiTextInput kuiVerticalRhythmSmall"
-        placeholder="Optional"
+        placeholder="{{ ::'common.ui.filterEditor.optionalPlaceholder' | i18n: { defaultMessage: 'Optional' } }}"
         type="text"
         ng-model="filterEditor.alias"
         id="filterEditorLabelInput"
@@ -119,7 +144,7 @@
       <button
         class="kuiButton kuiButton--danger"
         ng-click="filterEditor.onDelete()"
-        aria-label="Delete filter"
+        aria-label="{{ ::'common.ui.filterEditor.deleteFilterAriaLabel' | i18n: { defaultMessage: 'Delete filter' } }}"
       >
         <span
           class="kuiIcon fa-trash"
@@ -132,17 +157,17 @@
       <button
         class="kuiButton kuiButton--basic"
         ng-click="filterEditor.onCancel()"
-      >
-        Cancel
-      </button>
+        i18n-id="common.ui.filterEditor.cancelButtonLabel"
+        i18n-default-message="Cancel"
+      ></button>
       <button
         class="kuiButton kuiButton--primary"
         ng-disabled="!filterEditor.isValid()"
         ng-click="filterEditor.save()"
         data-test-subj="saveFilter"
-      >
-        Save
-      </button>
+        i18n-id="common.ui.filterEditor.saveButtonLabel"
+        i18n-default-message="Save"
+      ></button>
     </div>
   </div>
 </div>

src/ui/public/filter_editor/filter_field_select.html

@@ -4,7 +4,7 @@
   on-select="onSelect({ field: field })"
   uis-open-close="resetLimit()"
 >
-  <ui-select-match placeholder="Fields...">
+  <ui-select-match placeholder="{{ ::'common.ui.filterEditor.fieldsPlaceholder' | i18n: { defaultMessage: 'Fields…' } }}">
     <span
       class="uiSelectMatch--ellipsis"
       tooltip="{{$select.selected.name}}"

src/ui/public/filter_editor/filter_operator_select.html

@@ -3,7 +3,7 @@
   ui-select-focus-on="focus-operator"
   on-select="onSelect({ operator: operator })"
 >
-  <ui-select-match placeholder="Operators...">
+  <ui-select-match placeholder="{{ ::'common.ui.filterEditor.operatorsPlaceholder' | i18n: { defaultMessage: 'Operators…' } }}">
     {{$select.selected.name}}
   </ui-select-match>
   <ui-select-choices repeat="operator in operatorOptions | filter:{ name: $select.search }">

src/ui/public/filter_editor/lib/filter_operators.js

@@ -19,48 +19,66 @@
 
 import _ from 'lodash';
 
+import { i18n } from '@kbn/i18n';
+
 export const FILTER_OPERATORS = [
   {
-    name: 'is',
+    name: i18n.translate('common.ui.filterEditor.operators.isLabel', {
+      defaultMessage: 'is'
+    }),
     type: 'phrase',
     negate: false,
   },
   {
-    name: 'is not',
+    name: i18n.translate('common.ui.filterEditor.operators.isNotLabel', {
+      defaultMessage: 'is not'
+    }),
     type: 'phrase',
     negate: true,
   },
   {
-    name: 'is one of',
+    name: i18n.translate('common.ui.filterEditor.operators.isOneOfLabel', {
+      defaultMessage: 'is one of'
+    }),
     type: 'phrases',
     negate: false,
     fieldTypes: ['string', 'number', 'date', 'ip', 'geo_point', 'geo_shape']
   },
   {
-    name: 'is not one of',
+    name: i18n.translate('common.ui.filterEditor.operators.isNotOneOfLabel', {
+      defaultMessage: 'is not one of'
+    }),
     type: 'phrases',
     negate: true,
     fieldTypes: ['string', 'number', 'date', 'ip', 'geo_point', 'geo_shape']
   },
   {
-    name: 'is between',
+    name: i18n.translate('common.ui.filterEditor.operators.isBetweenLabel', {
+      defaultMessage: 'is between'
+    }),
     type: 'range',
     negate: false,
     fieldTypes: ['number', 'date', 'ip'],
   },
   {
-    name: 'is not between',
+    name: i18n.translate('common.ui.filterEditor.operators.isNotBetweenLabel', {
+      defaultMessage: 'is not between'
+    }),
     type: 'range',
     negate: true,
     fieldTypes: ['number', 'date', 'ip'],
   },
   {
-    name: 'exists',
+    name: i18n.translate('common.ui.filterEditor.operators.existsLabel', {
+      defaultMessage: 'exists'
+    }),
     type: 'exists',
     negate: false,
   },
   {
-    name: 'does not exist',
+    name: i18n.translate('common.ui.filterEditor.operators.doesNotExistLabel', {
+      defaultMessage: 'does not exist'
+    }),
     type: 'exists',
     negate: true,
   },

src/ui/public/filter_editor/params_editor/filter_params_phrase_editor.html

@@ -5,7 +5,7 @@
   spinner-enabled="true"
   spinner-class="kuiIcon kuiIcon--basic fa-spinner fa-spin"
 >
-  <ui-select-match placeholder="Values...">
+  <ui-select-match placeholder="{{ ::'common.ui.filterEditor.filterParamsPhraseEditor.valuesPlaceholder' | i18n: { defaultMessage: 'Values…' } }}">
     <span
       class="uiSelectMatch--ellipsis"
       tooltip="{{$select.selected}}"
@@ -25,7 +25,7 @@
 
 <filter-params-input-type
   ng-if="!(filterParamsPhraseEditor.shouldSuggestValues && field.aggregatable && field.type === 'string')"
-  placeholder="Value..."
+  placeholder="{{ ::'common.ui.filterEditor.filterParamsPhraseEditor.valuePlaceholder' | i18n: { defaultMessage: 'Value…' } }}"
   type="field.type"
   value="params.phrase"
   on-change="params.phrase = value"
@@ -39,7 +39,7 @@
     documentation-href="date.dateMath"
     target="_blank"
     rel="noopener noreferrer"
-  >
-    Accepted date formats
-  </a>
+    i18n-id="common.ui.filterEditor.filterParamsPhraseEditor.acceptedDateFormatsLinkText"
+    i18n-default-message="Accepted date formats"
+  ></a>
 </small>

src/ui/public/filter_editor/params_editor/filter_params_phrases_editor.html

@@ -6,7 +6,7 @@
   spinner-class="kuiIcon kuiIcon--basic fa-spinner fa-spin"
 >
   <ui-select-match
-    placeholder="Values..."
+    placeholder="{{ ::'common.ui.filterEditor.filterParamsPhrasesEditor.valuesPlaceholder' | i18n: { defaultMessage: 'Values…' } }}"
     class="uiSelectMatch--restrictToParent"
   >
     <span

src/ui/public/filter_editor/params_editor/filter_params_range_editor.html

@@ -1,6 +1,6 @@
 <div class="kuiVerticalRhythm">
   <filter-params-input-type
-    placeholder="From..."
+    placeholder="{{ ::'common.ui.filterEditor.filterParamsRangeEditor.fromPlaceholder' | i18n: { defaultMessage: 'From…' } }}"
     type="field.type"
     value="params.range.from"
     on-change="params.range.from = value"
@@ -10,7 +10,7 @@
 
 <div class="kuiVerticalRhythm">
   <filter-params-input-type
-    placeholder="To..."
+    placeholder="{{ ::'common.ui.filterEditor.filterParamsRangeEditor.toPlaceholder' | i18n: { defaultMessage: 'To…' } }}"
     type="field.type"
     value="params.range.to"
     on-change="params.range.to = value"
@@ -24,7 +24,7 @@
     documentation-href="date.dateMath"
     target="_blank"
     rel="noopener noreferrer"
-  >
-    Accepted date formats
-  </a>
+    i18n-id="common.ui.filterEditor.filterParamsRangeEditor.acceptedDateFormatsLinkText"
+    i18n-default-message="Accepted date formats"
+  ></a>
 </small>