PolyGerrit: Add new gr-edit-preferences component
Now that we are adding syntax highlighting in the codemirror plugin [1]
We can add the edit preference to settings in polygerrit.
[1] Icc222cde89eff7a0992fbcaaf8e7bac560347c18
Change-Id: I15088c7e7f3a9fae9bc66aa77fe160cfbca14918
diff --git a/polygerrit-ui/app/elements/settings/gr-edit-preferences/gr-edit-preferences.html b/polygerrit-ui/app/elements/settings/gr-edit-preferences/gr-edit-preferences.html
new file mode 100644
index 0000000..bbd7396
--- /dev/null
+++ b/polygerrit-ui/app/elements/settings/gr-edit-preferences/gr-edit-preferences.html
@@ -0,0 +1,170 @@
+<!--
+Copyright (C) 2018 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../styles/gr-form-styles.html">
+<link rel="import" href="../../../styles/shared-styles.html">
+<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
+<link rel="import" href="../../shared/gr-select/gr-select.html">
+
+<dom-module id="gr-edit-preferences">
+ <template>
+ <style include="shared-styles"></style>
+ <style include="gr-form-styles"></style>
+ <div id="editPreferences" class="gr-form-styles">
+ <section>
+ <span class="title">Tab width</span>
+ <span class="value">
+ <input
+ is="iron-input"
+ type="number"
+ prevent-invalid-input
+ allowed-pattern="[0-9]"
+ bind-value="{{editPrefs.tab_size}}"
+ on-change="_handleEditPrefsChanged">
+ </span>
+ </section>
+ <section>
+ <span class="title">Columns</span>
+ <span class="value">
+ <input
+ is="iron-input"
+ type="number"
+ prevent-invalid-input
+ allowed-pattern="[0-9]"
+ bind-value="{{editPrefs.line_length}}"
+ on-change="_handleEditPrefsChanged">
+ </span>
+ </section>
+ <section>
+ <span class="title">Indent unit</span>
+ <span class="value">
+ <input
+ is="iron-input"
+ type="number"
+ prevent-invalid-input
+ allowed-pattern="[0-9]"
+ bind-value="{{editPrefs.indent_unit}}"
+ on-change="_handleEditPrefsChanged">
+ </span>
+ </section>
+ <section>
+ <span class="title">Cursor blink rate</span>
+ <span class="value">
+ <input
+ is="iron-input"
+ type="number"
+ prevent-invalid-input
+ allowed-pattern="[0-9]"
+ bind-value="{{editPrefs.cursor_blink_rate}}"
+ on-change="_handleEditPrefsChanged">
+ </span>
+ </section>
+ <section>
+ <span class="title">Top menu</span>
+ <span class="value">
+ <input
+ id="showTopMenu"
+ type="checkbox"
+ checked$="[[editPrefs.hide_top_menu]]"
+ on-change="_handleTopMenuChanged">
+ </span>
+ </section>
+ <section>
+ <span class="title">Syntax highlighting</span>
+ <span class="value">
+ <input
+ id="editSyntaxHighlighting"
+ type="checkbox"
+ checked$="[[editPrefs.syntax_highlighting]]"
+ on-change="_handleEditSyntaxHighlightingChanged">
+ </span>
+ </section>
+ <section>
+ <span class="title">Show tabs</span>
+ <span class="value">
+ <input
+ id="editShowTabs"
+ type="checkbox"
+ checked$="[[editPrefs.show_tabs]]"
+ on-change="_handleEditShowTabsChanged">
+ </span>
+ </section>
+ <section>
+ <span class="title">Whitespace errors</span>
+ <span class="value">
+ <input
+ id="whitespaceErrors"
+ type="checkbox"
+ checked$="[[editPrefs.show_whitespace_errors]]"
+ on-change="_handleWhitespaceErrorsChanged">
+ </span>
+ </section>
+ <section>
+ <span class="title">Line numbers</span>
+ <span class="value">
+ <input
+ id="showLineNumbers"
+ type="checkbox"
+ checked$="[[editPrefs.hide_line_numbers]]"
+ on-change="_handleLineNumbersChanged">
+ </span>
+ </section>
+ <section>
+ <span class="title">Match brackets</span>
+ <span class="value">
+ <input
+ id="showMatchBrackets"
+ type="checkbox"
+ checked$="[[editPrefs.match_brackets]]"
+ on-change="_handleMatchBracketsChanged">
+ </span>
+ </section>
+ <section>
+ <span class="title">Line wrapping</span>
+ <span class="value">
+ <input
+ id="editShowLineWrapping"
+ type="checkbox"
+ checked$="[[editPrefs.line_wrapping]]"
+ on-change="_handleEditLineWrappingChanged">
+ </span>
+ </section>
+ <section>
+ <span class="title">Indent with tabs</span>
+ <span class="value">
+ <input
+ id="showIndentWithTabs"
+ type="checkbox"
+ checked$="[[editPrefs.indent_with_tabs]]"
+ on-change="_handleIndentWithTabsChanged">
+ </span>
+ </section>
+ <section>
+ <span class="title">Auto close brackets</span>
+ <span class="value">
+ <input
+ id="showAutoCloseBrackets"
+ type="checkbox"
+ checked$="[[editPrefs.auto_close_brackets]]"
+ on-change="_handleAutoCloseBracketsChanged">
+ </span>
+ </section>
+ </div>
+ <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
+ </template>
+ <script src="gr-edit-preferences.js"></script>
+</dom-module>
diff --git a/polygerrit-ui/app/elements/settings/gr-edit-preferences/gr-edit-preferences.js b/polygerrit-ui/app/elements/settings/gr-edit-preferences/gr-edit-preferences.js
new file mode 100644
index 0000000..01b45f8
--- /dev/null
+++ b/polygerrit-ui/app/elements/settings/gr-edit-preferences/gr-edit-preferences.js
@@ -0,0 +1,105 @@
+// Copyright (C) 2018 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+(function() {
+ 'use strict';
+
+ Polymer({
+ is: 'gr-edit-preferences',
+
+ properties: {
+ hasUnsavedChanges: {
+ type: Boolean,
+ notify: true,
+ value: false,
+ },
+
+ /** @type {?} */
+ editPrefs: Object,
+ },
+
+ loadData() {
+ return this.$.restAPI.getEditPreferences().then(prefs => {
+ this.editPrefs = prefs;
+ });
+ },
+
+ _handleEditPrefsChanged() {
+ this.hasUnsavedChanges = true;
+ },
+
+ _handleTopMenuChanged() {
+ this.set('editPrefs.hide_top_menu', this.$.showTopMenu.checked);
+ this._handleEditPrefsChanged();
+ },
+
+ _handleEditSyntaxHighlightingChanged() {
+ this.set('editPrefs.syntax_highlighting',
+ this.$.editSyntaxHighlighting.checked);
+ this._handleEditPrefsChanged();
+ },
+
+ _handleEditShowTabsChanged() {
+ this.set('editPrefs.show_tabs', this.$.editShowTabs.checked);
+ this._handleEditPrefsChanged();
+ },
+
+ _handleWhitespaceErrorsChanged() {
+ this.set('editPrefs.show_whitespace_errors',
+ this.$.whitespaceErrors.checked);
+ this._handleEditPrefsChanged();
+ },
+
+ _handleLineNumbersChanged() {
+ this.set('editPrefs.hide_line_numbers',
+ this.$.showLineNumbers.checked);
+ this._handleEditPrefsChanged();
+ },
+
+ _handleMatchBracketsChanged() {
+ this.set('editPrefs.match_brackets', this.$.showMatchBrackets.checked);
+ this._handleEditPrefsChanged();
+ },
+
+ _handleEditLineWrappingChanged() {
+ this.set('editPrefs.line_wrapping',
+ this.$.editShowLineWrapping.checked);
+ this._handleEditPrefsChanged();
+ },
+
+ _handleIndentWithTabsChanged() {
+ this.set('editPrefs.indent_with_tabs',
+ this.$.showIndentWithTabs.checked);
+ this._handleEditPrefsChanged();
+ },
+
+ _handleAutoCloseBracketsChanged() {
+ this.set('editPrefs.auto_close_brackets',
+ this.$.showAutoCloseBrackets.checked);
+ this._handleEditPrefsChanged();
+ },
+
+ _handleShowBaseVersionChanged() {
+ this.set('editPrefs.show_base',
+ this.$.showShowBaseVersion.checked);
+ this._handleEditPrefsChanged();
+ },
+
+ save() {
+ return this.$.restAPI.saveEditPreferences(this.editPrefs)
+ .then(() => {
+ this.hasUnsavedChanges = false;
+ });
+ },
+ });
+})();
diff --git a/polygerrit-ui/app/elements/settings/gr-edit-preferences/gr-edit-preferences_test.html b/polygerrit-ui/app/elements/settings/gr-edit-preferences/gr-edit-preferences_test.html
new file mode 100644
index 0000000..0305c84
--- /dev/null
+++ b/polygerrit-ui/app/elements/settings/gr-edit-preferences/gr-edit-preferences_test.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<!--
+Copyright (C) 2018 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+<title>gr-edit-preferences</title>
+
+<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+<script src="../../../bower_components/web-component-tester/browser.js"></script>
+<link rel="import" href="../../../test/common-test-setup.html"/>
+<link rel="import" href="gr-edit-preferences.html">
+
+<script>void(0);</script>
+
+<test-fixture id="basic">
+ <template>
+ <gr-edit-preferences></gr-edit-preferences>
+ </template>
+</test-fixture>
+
+<script>
+ suite('gr-edit-preferences tests', () => {
+ let element;
+ let editPreferences;
+
+ function valueOf(title, fieldsetid) {
+ const sections = element.$[fieldsetid].querySelectorAll('section');
+ let titleEl;
+ for (let i = 0; i < sections.length; i++) {
+ titleEl = sections[i].querySelector('.title');
+ if (titleEl.textContent.trim() === title) {
+ return sections[i].querySelector('.value');
+ }
+ }
+ }
+
+ setup(done => {
+ editPreferences = {
+ auto_close_brackets: false,
+ cursor_blink_rate: 0,
+ hide_line_numbers: false,
+ hide_top_menu: false,
+ indent_unit: 2,
+ indent_with_tabs: false,
+ key_map_type: 'DEFAULT',
+ line_length: 100,
+ line_wrapping: false,
+ match_brackets: true,
+ show_base: false,
+ show_tabs: true,
+ show_whitespace_errors: true,
+ syntax_highlighting: true,
+ tab_size: 8,
+ theme: 'DEFAULT',
+ };
+
+ stub('gr-rest-api-interface', {
+ getEditPreferences() {
+ return Promise.resolve(editPreferences);
+ },
+ });
+
+ element = fixture('basic');
+
+ element.loadData().then(done);
+ });
+
+ test('renders', () => {
+ // Rendered with the expected preferences selected.
+ assert.equal(valueOf('Tab width', 'editPreferences')
+ .firstElementChild.bindValue, editPreferences.tab_size);
+ assert.equal(valueOf('Columns', 'editPreferences')
+ .firstElementChild.bindValue, editPreferences.line_length);
+ assert.equal(valueOf('Indent unit', 'editPreferences')
+ .firstElementChild.bindValue, editPreferences.indent_unit);
+ assert.equal(valueOf('Cursor blink rate', 'editPreferences')
+ .firstElementChild.bindValue, editPreferences.cursor_blink_rate);
+ assert.equal(valueOf('Top menu', 'editPreferences')
+ .firstElementChild.checked, editPreferences.hide_top_menu);
+ assert.equal(valueOf('Syntax highlighting', 'editPreferences')
+ .firstElementChild.checked, editPreferences.syntax_highlighting);
+ assert.equal(valueOf('Show tabs', 'editPreferences')
+ .firstElementChild.checked, editPreferences.show_tabs);
+ assert.equal(valueOf('Whitespace errors', 'editPreferences')
+ .firstElementChild.checked, editPreferences.show_whitespace_errors);
+ assert.equal(valueOf('Line numbers', 'editPreferences')
+ .firstElementChild.checked, editPreferences.hide_line_numbers);
+ assert.equal(valueOf('Match brackets', 'editPreferences')
+ .firstElementChild.checked, editPreferences.match_brackets);
+ assert.equal(valueOf('Line wrapping', 'editPreferences')
+ .firstElementChild.checked, editPreferences.line_wrapping);
+ assert.equal(valueOf('Indent with tabs', 'editPreferences')
+ .firstElementChild.checked, editPreferences.indent_with_tabs);
+ assert.equal(valueOf('Auto close brackets', 'editPreferences')
+ .firstElementChild.checked, editPreferences.auto_close_brackets);
+
+ assert.isFalse(element.hasUnsavedChanges);
+ });
+
+ test('save changes', done => {
+ const showTabsCheckbox = valueOf('Show tabs', 'editPreferences')
+ .firstElementChild;
+ showTabsCheckbox.checked = false;
+ element._handleEditShowTabsChanged();
+
+ assert.isTrue(element.hasUnsavedChanges);
+
+ stub('gr-rest-api-interface', {
+ saveEditPreferences(prefs) {
+ assert.equal(prefs.show_tabs, false);
+ return Promise.resolve();
+ },
+ });
+
+ // Save the change.
+ element.save().then(() => {
+ assert.isFalse(element.hasUnsavedChanges);
+ done();
+ });
+ });
+ });
+</script>
diff --git a/polygerrit-ui/app/test/index.html b/polygerrit-ui/app/test/index.html
index ecbd86a..a21890c 100644
--- a/polygerrit-ui/app/test/index.html
+++ b/polygerrit-ui/app/test/index.html
@@ -119,6 +119,7 @@
'plugins/gr-settings-api/gr-settings-api_test.html',
'settings/gr-account-info/gr-account-info_test.html',
'settings/gr-change-table-editor/gr-change-table-editor_test.html',
+ 'settings/gr-edit-preferences/gr-edit-preferences_test.html',
'settings/gr-email-editor/gr-email-editor_test.html',
'settings/gr-group-list/gr-group-list_test.html',
'settings/gr-http-password/gr-http-password_test.html',
