diff --git a/packages/kbn-i18n/GUIDELINE.md b/packages/kbn-i18n/GUIDELINE.md index 77e54fc1240f4..188a88316b131 100644 --- a/packages/kbn-i18n/GUIDELINE.md +++ b/packages/kbn-i18n/GUIDELINE.md @@ -18,7 +18,7 @@ The following types are supported: - ToggleSwitch - LinkLabel and etc. -There is one more complex case, when we have to divide a single expression into different labels. +There is one more complex case, when we have to divide a single expression into different labels. For example the message before translation looks like: @@ -221,8 +221,8 @@ For example: ```js ``` @@ -333,4 +333,3 @@ it('should render normally', async () => { }); // ... ``` - diff --git a/packages/kbn-i18n/README.md b/packages/kbn-i18n/README.md index 2a5abe3e2b1da..445004c853a10 100644 --- a/packages/kbn-i18n/README.md +++ b/packages/kbn-i18n/README.md @@ -188,7 +188,7 @@ import { i18n } from '@kbn/i18n'; i18n.init(messages); ``` -One common use-case is that of internationalizing a string constant. Here's an +One common use-case is that of internationalizing a string constant. Here's an example of how we'd do that: ```js @@ -399,7 +399,7 @@ In order to translate attributes in Angular we should use `i18nFilter`: ```html diff --git a/packages/kbn-i18n/src/angular/__snapshots__/directive.test.ts.snap b/packages/kbn-i18n/src/angular/__snapshots__/directive.test.ts.snap new file mode 100644 index 0000000000000..b845ea4228838 --- /dev/null +++ b/packages/kbn-i18n/src/angular/__snapshots__/directive.test.ts.snap @@ -0,0 +1,5 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`i18nDirective inserts correct translation html content with values 1`] = `"default-message word"`; + +exports[`i18nDirective inserts correct translation html content with values 2`] = `"default-message anotherWord"`; diff --git a/packages/kbn-i18n/src/angular/directive.test.ts b/packages/kbn-i18n/src/angular/directive.test.ts index 20bcab4e67cda..813863fed7e4e 100644 --- a/packages/kbn-i18n/src/angular/directive.test.ts +++ b/packages/kbn-i18n/src/angular/directive.test.ts @@ -30,7 +30,7 @@ angular describe('i18nDirective', () => { let compile: angular.ICompileService; - let scope: angular.IRootScopeService; + let scope: angular.IRootScopeService & { word?: string }; beforeEach(angular.mock.module('app')); beforeEach( @@ -38,6 +38,7 @@ describe('i18nDirective', () => { ($compile: angular.ICompileService, $rootScope: angular.IRootScopeService) => { compile = $compile; scope = $rootScope.$new(); + scope.word = 'word'; } ) ); @@ -62,19 +63,23 @@ describe('i18nDirective', () => { test('inserts correct translation html content with values', () => { const id = 'id'; const defaultMessage = 'default-message {word}'; - const compiledContent = 'default-message word'; const element = angular.element( `
` ); compile(element)(scope); scope.$digest(); - expect(element.html()).toEqual(compiledContent); + expect(element.html()).toMatchSnapshot(); + + scope.word = 'anotherWord'; + scope.$digest(); + + expect(element.html()).toMatchSnapshot(); }); }); diff --git a/packages/kbn-i18n/src/angular/directive.ts b/packages/kbn-i18n/src/angular/directive.ts index f0ef9e6b58a89..1dc817a82ab24 100644 --- a/packages/kbn-i18n/src/angular/directive.ts +++ b/packages/kbn-i18n/src/angular/directive.ts @@ -21,26 +21,37 @@ import { IDirective, IRootElementService, IScope } from 'angular'; import { I18nServiceType } from './provider'; -export function i18nDirective(i18n: I18nServiceType): IDirective { +interface I18nScope extends IScope { + values?: Record; + defaultMessage: string; + id: string; +} + +export function i18nDirective(i18n: I18nServiceType): IDirective { return { restrict: 'A', scope: { id: '@i18nId', defaultMessage: '@i18nDefaultMessage', - values: '=i18nValues', + values: ' { - $element.html( - i18n(id, { - values, - defaultMessage, - }) - ); - } - ); + link($scope, $element) { + if ($scope.values) { + $scope.$watchCollection('values', () => { + setHtmlContent($element, $scope, i18n); + }); + } else { + setHtmlContent($element, $scope, i18n); + } }, }; } + +function setHtmlContent($element: IRootElementService, $scope: I18nScope, i18n: I18nServiceType) { + $element.html( + i18n($scope.id, { + values: $scope.values, + defaultMessage: $scope.defaultMessage, + }) + ); +} diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html index 47dcb7758d731..9e8d982090177 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html +++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html @@ -5,7 +5,7 @@ data-test-subj="editIndexPattern" class="kuiViewContent" role="region" - aria-label="{{'kbn.management.editIndexPattern.detailsAria' | i18n: { defaultMessage: 'Index pattern details' } }}" + aria-label="{{::'kbn.management.editIndexPattern.detailsAria' | i18n: { defaultMessage: 'Index pattern details' } }}" >
diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/field_controls.html b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/field_controls.html index c5ab67cb37f2c..c14dcd3f3a8d5 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/field_controls.html +++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/field_controls.html @@ -2,7 +2,7 @@ @@ -12,7 +12,7 @@ ng-if="field.scripted" ng-click="remove(field)" class="kuiButton kuiButton--danger kuiButton--small" - aria-label="{{'kbn.management.editIndexPattern.deleteFieldButton' | i18n: { defaultMessage: 'Delete' } }}" + aria-label="{{::'kbn.management.editIndexPattern.deleteFieldButton' | i18n: { defaultMessage: 'Delete' } }}" > diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/index_header/index_header.html b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/index_header/index_header.html index 1b3b4379ec85b..bf61f95d72abd 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/index_header/index_header.html +++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/index_header/index_header.html @@ -18,8 +18,8 @@