From 60895b7439edec3e85e35ca8eb0101a70ee94535 Mon Sep 17 00:00:00 2001 From: Leanid Shutau Date: Tue, 25 Sep 2018 15:20:21 +0300 Subject: [PATCH 1/6] Add one-time binding to angularjs i18n --- packages/kbn-i18n/src/angular/directive.js | 21 +++++++------------ .../edit_index_pattern.html | 6 +++--- .../edit_index_pattern/field_controls.html | 4 ++-- .../index_header/index_header.html | 12 +++++------ .../management/sections/indices/index.html | 2 +- .../test_plugin_2/test_file.html | 2 +- src/dev/i18n/extractors/html.js | 21 ++++++++++++++++++- 7 files changed, 40 insertions(+), 28 deletions(-) diff --git a/packages/kbn-i18n/src/angular/directive.js b/packages/kbn-i18n/src/angular/directive.js index f9421814d9817..add0f9ce30ded 100644 --- a/packages/kbn-i18n/src/angular/directive.js +++ b/packages/kbn-i18n/src/angular/directive.js @@ -16,28 +16,21 @@ * specific language governing permissions and limitations * under the License. */ - export function i18nDirective(i18n) { return { restrict: 'A', scope: { id: '@i18nId', defaultMessage: '@i18nDefaultMessage', - values: '=i18nValues', + values: ' 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 @@ ``` @@ -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 5876234ce4659..694779deab185 100644 --- a/packages/kbn-i18n/src/angular/directive.ts +++ b/packages/kbn-i18n/src/angular/directive.ts @@ -33,11 +33,11 @@ export function i18nDirective(i18n: I18nServiceType): IDirective { scope: { id: '@i18nId', defaultMessage: '@i18nDefaultMessage', - values: ' { + $scope.$watchCollection('values', () => { setHtmlContent($element, $scope, i18n); }); } else { diff --git a/src/core_plugins/metric_vis/public/metric_vis_params.html b/src/core_plugins/metric_vis/public/metric_vis_params.html index 1edae37ff7e89..bddd36825441b 100644 --- a/src/core_plugins/metric_vis/public/metric_vis_params.html +++ b/src/core_plugins/metric_vis/public/metric_vis_params.html @@ -32,7 +32,7 @@ kbn-accessible-click aria-expanded="{{!!showColorRange}}" aria-controls="metricOptionsRanges" - aria-label="{{'metricVis.params.ranges.toggleOptionsAriaLabel' | i18n: { defaultMessage: 'Toggle range options' } }}" + aria-label="{{::'metricVis.params.ranges.toggleOptionsAriaLabel' | i18n: { defaultMessage: 'Toggle range options' } }}" class="kuiSideBarCollapsibleTitle__label" ng-click="showColorRange = !showColorRange" > @@ -135,7 +135,7 @@ kbn-accessible-click aria-expanded="{{!!showColorOptions}}" aria-controls="metricOptionsColors" - aria-label="{{'metricVis.params.color.toggleOptionsAriaLabel' | i18n: { defaultMessage: 'Toggle color options' } }}" + aria-label="{{::'metricVis.params.color.toggleOptionsAriaLabel' | i18n: { defaultMessage: 'Toggle color options' } }}" class="kuiSideBarCollapsibleTitle__label" ng-click="showColorOptions = !showColorOptions" > @@ -219,7 +219,7 @@ kbn-accessible-click aria-expanded="{{!!showStyle}}" aria-controls="metricOptionsStyle" - aria-label="{{'metricVis.params.style.toggleOptionsAriaLabel' | i18n: { defaultMessage: 'Toggle style options' } }}" + aria-label="{{::'metricVis.params.style.toggleOptionsAriaLabel' | i18n: { defaultMessage: 'Toggle style options' } }}" class="kuiSideBarCollapsibleTitle__label" ng-click="showStyle = !showStyle" > diff --git a/src/dev/i18n/extractors/html.js b/src/dev/i18n/extractors/html.js index e04d0a8f6fe2c..6db40df2768ae 100644 --- a/src/dev/i18n/extractors/html.js +++ b/src/dev/i18n/extractors/html.js @@ -119,6 +119,12 @@ function trimCurlyBraces(string) { return string.slice(2, -2).trim(); } +/** + * Removes parentheses from the start and the end of a string + * + * Example: `('id' | i18n: { defaultMessage: 'Message' })` + * @param {string} string string to trim + */ function trimParentheses(string) { if (string.startsWith('(') && string.endsWith(')')) { return string.slice(1, -1); @@ -127,6 +133,12 @@ function trimParentheses(string) { return string; } +/** + * Removes one-time binding operator `::` from the start of a string. + * + * Example: `::'id' | i18n: { defaultMessage: 'Message' }` + * @param {string} string string to trim + */ function trimOneTimeBindingOperator(string) { if (string.startsWith('::')) { return string.slice(2); From c5fbbca505afe95967fea903fe57ae2966b23a33 Mon Sep 17 00:00:00 2001 From: Leanid Shutau Date: Wed, 10 Oct 2018 11:37:24 +0300 Subject: [PATCH 6/6] Resolve comments --- packages/kbn-i18n/src/angular/directive.ts | 2 +- src/dev/i18n/extractors/html.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/kbn-i18n/src/angular/directive.ts b/packages/kbn-i18n/src/angular/directive.ts index 694779deab185..1dc817a82ab24 100644 --- a/packages/kbn-i18n/src/angular/directive.ts +++ b/packages/kbn-i18n/src/angular/directive.ts @@ -22,7 +22,7 @@ import { IDirective, IRootElementService, IScope } from 'angular'; import { I18nServiceType } from './provider'; interface I18nScope extends IScope { - values: any; + values?: Record; defaultMessage: string; id: string; } diff --git a/src/dev/i18n/extractors/html.js b/src/dev/i18n/extractors/html.js index 6db40df2768ae..69e9508d89d8a 100644 --- a/src/dev/i18n/extractors/html.js +++ b/src/dev/i18n/extractors/html.js @@ -120,7 +120,7 @@ function trimCurlyBraces(string) { } /** - * Removes parentheses from the start and the end of a string + * Removes parentheses from the start and the end of a string. * * Example: `('id' | i18n: { defaultMessage: 'Message' })` * @param {string} string string to trim