Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/framework/mr-pref-toggle/mr-pref-toggle.js b/static_src/elements/framework/mr-pref-toggle/mr-pref-toggle.js
new file mode 100644
index 0000000..a5f9d7a
--- /dev/null
+++ b/static_src/elements/framework/mr-pref-toggle/mr-pref-toggle.js
@@ -0,0 +1,94 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {LitElement, html} from 'lit-element';
+
+import {store, connectStore} from 'reducers/base.js';
+import * as userV0 from 'reducers/userV0.js';
+import * as projectV0 from 'reducers/projectV0.js';
+import 'elements/chops/chops-toggle/chops-toggle.js';
+import {logEvent} from 'monitoring/client-logger.js';
+
+/**
+ * `<mr-pref-toggle>`
+ *
+ * Toggle button for any user pref, including code font and
+ * rendering markdown. For our purposes, pressing it causes
+ * issue description and comment text to switch either to
+ * monospace font or to render in markdown and the setting
+ * is saved in the user's preferences.
+ */
+export class MrPrefToggle extends connectStore(LitElement) {
+ /** @override */
+ render() {
+ return html`
+ <chops-toggle
+ ?checked=${this._checked}
+ ?disabled=${this._prefsInFlight}
+ @checked-change=${this._togglePref}
+ title=${this.title}
+ >${this.label}</chops-toggle>
+ `;
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ prefs: {type: Object},
+ userDisplayName: {type: String},
+ initialValue: {type: Boolean},
+ _prefsInFlight: {type: Boolean},
+ label: {type: String},
+ title: {type: String},
+ prefName: {type: String},
+ };
+ }
+
+ /** @override */
+ stateChanged(state) {
+ this.prefs = userV0.prefs(state);
+ this._prefsInFlight = userV0.requests(state).fetchPrefs.requesting ||
+ userV0.requests(state).setPrefs.requesting;
+ this._projectName = projectV0.viewedProjectName(state);
+ }
+
+ /** @override */
+ constructor() {
+ super();
+ this.initialValue = false;
+ this.userDisplayName = '';
+ this.label = '';
+ this.title = '';
+ this.prefName = '';
+ this._projectName = '';
+ }
+
+ // Used by the legacy EZT page to interact with Redux.
+ fetchPrefs() {
+ store.dispatch(userV0.fetchPrefs());
+ }
+
+ get _checked() {
+ const {prefs, initialValue} = this;
+ if (prefs && prefs.has(this.prefName)) return prefs.get(this.prefName);
+ return initialValue;
+ }
+
+ /**
+ * Toggles the code font in response to the user activating the button.
+ * @param {Event} e
+ * @fires CustomEvent#font-toggle
+ * @private
+ */
+ _togglePref(e) {
+ const checked = e.detail.checked;
+ this.dispatchEvent(new CustomEvent('font-toggle', {detail: {checked}}));
+
+ const newPrefs = [{name: this.prefName, value: '' + checked}];
+ store.dispatch(userV0.setPrefs(newPrefs, !!this.userDisplayName));
+
+ logEvent('mr-pref-toggle', `${this.prefName}: ${checked}`, this._projectName);
+ }
+}
+customElements.define('mr-pref-toggle', MrPrefToggle);
diff --git a/static_src/elements/framework/mr-pref-toggle/mr-pref-toggle.test.js b/static_src/elements/framework/mr-pref-toggle/mr-pref-toggle.test.js
new file mode 100644
index 0000000..b6dbb41
--- /dev/null
+++ b/static_src/elements/framework/mr-pref-toggle/mr-pref-toggle.test.js
@@ -0,0 +1,86 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'sinon';
+import {assert} from 'chai';
+import {MrPrefToggle} from './mr-pref-toggle.js';
+import {prpcClient} from 'prpc-client-instance.js';
+
+let element;
+
+describe('mr-pref-toggle', () => {
+ beforeEach(() => {
+ element = document.createElement('mr-pref-toggle');
+ element.label = 'Code';
+ element.title = 'Code font';
+ element.prefName = 'code_font';
+ document.body.appendChild(element);
+ sinon.stub(prpcClient, 'call').returns(Promise.resolve({}));
+ window.ga = sinon.stub();
+ });
+
+ afterEach(() => {
+ document.body.removeChild(element);
+ prpcClient.call.restore();
+ });
+
+ it('initializes', () => {
+ assert.instanceOf(element, MrPrefToggle);
+ });
+
+ it('toggling does not save when user is not logged in', async () => {
+ element.userDisplayName = undefined;
+ element.prefs = new Map([]);
+
+ await element.updateComplete;
+
+ const chopsToggle = element.shadowRoot.querySelector('chops-toggle');
+ chopsToggle.click();
+ await element.updateComplete;
+
+ sinon.assert.notCalled(prpcClient.call);
+
+ assert.isTrue(element.prefs.get('code_font'));
+ });
+
+ it('toggling to true saves result', async () => {
+ element.userDisplayName = 'test@example.com';
+ element.prefs = new Map([['code_font', false]]);
+
+ await element.updateComplete;
+
+ const chopsToggle = element.shadowRoot.querySelector('chops-toggle');
+
+ chopsToggle.click(); // Toggle it on.
+ await element.updateComplete;
+
+ sinon.assert.calledWith(
+ prpcClient.call,
+ 'monorail.Users',
+ 'SetUserPrefs',
+ {prefs: [{name: 'code_font', value: 'true'}]});
+
+ assert.isTrue(element.prefs.get('code_font'));
+ });
+
+ it('toggling to false saves result', async () => {
+ element.userDisplayName = 'test@example.com';
+ element.prefs = new Map([['code_font', true]]);
+
+ await element.updateComplete;
+
+ const chopsToggle = element.shadowRoot.querySelector('chops-toggle');
+
+ chopsToggle.click(); // Toggle it off.
+ await element.updateComplete;
+
+ sinon.assert.calledWith(
+ prpcClient.call,
+ 'monorail.Users',
+ 'SetUserPrefs',
+ {prefs: [{name: 'code_font', value: 'false'}]});
+
+ assert.isFalse(element.prefs.get('code_font'));
+ });
+});