Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/issue-list/mr-mode-selector/mr-mode-selector.js b/static_src/elements/issue-list/mr-mode-selector/mr-mode-selector.js
new file mode 100644
index 0000000..8876402
--- /dev/null
+++ b/static_src/elements/issue-list/mr-mode-selector/mr-mode-selector.js
@@ -0,0 +1,54 @@
+// 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 page from 'page';
+import {ChopsChoiceButtons} from
+ 'elements/chops/chops-choice-buttons/chops-choice-buttons.js';
+import {urlWithNewParams} from 'shared/helpers.js';
+
+/**
+ * Component for showing the chips to switch between List, Grid, and Chart modes
+ * on the Monorail issue list page.
+ * @extends {ChopsChoiceButtons}
+ */
+export class MrModeSelector extends ChopsChoiceButtons {
+ /** @override */
+ static get properties() {
+ return {
+ ...ChopsChoiceButtons.properties,
+ queryParams: {type: Object},
+ projectName: {type: String},
+ };
+ }
+
+ /** @override */
+ constructor() {
+ super();
+
+ this.queryParams = {};
+ this.projectName = '';
+
+ this._page = page;
+ };
+
+ /** @override */
+ update(changedProperties) {
+ if (changedProperties.has('queryParams') ||
+ changedProperties.has('projectName')) {
+ this.options = [
+ {text: 'List', value: 'list', url: this._newListViewPath()},
+ {text: 'Grid', value: 'grid', url: this._newListViewPath('grid')},
+ {text: 'Chart', value: 'chart', url: this._newListViewPath('chart')},
+ ];
+ }
+ super.update(changedProperties);
+ }
+
+ _newListViewPath(mode) {
+ const basePath = `/p/${this.projectName}/issues/list`;
+ const deletedParams = mode ? undefined : ['mode'];
+ return urlWithNewParams(basePath, this.queryParams, {mode}, deletedParams);
+ }
+};
+
+customElements.define('mr-mode-selector', MrModeSelector);
diff --git a/static_src/elements/issue-list/mr-mode-selector/mr-mode-selector.test.js b/static_src/elements/issue-list/mr-mode-selector/mr-mode-selector.test.js
new file mode 100644
index 0000000..07166d6
--- /dev/null
+++ b/static_src/elements/issue-list/mr-mode-selector/mr-mode-selector.test.js
@@ -0,0 +1,42 @@
+// 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 from 'sinon';
+import {assert} from 'chai';
+import {MrModeSelector} from './mr-mode-selector.js';
+
+let element;
+
+describe('mr-mode-selector', () => {
+ beforeEach(() => {
+ element = document.createElement('mr-mode-selector');
+ document.body.appendChild(element);
+
+ element._page = sinon.stub();
+ });
+
+ afterEach(() => {
+ document.body.removeChild(element);
+ });
+
+ it('initializes', () => {
+ assert.instanceOf(element, MrModeSelector);
+ });
+
+ it('renders links with projectName and queryParams', async () => {
+ element.value = 'list';
+ element.projectName = 'chromium';
+ element.queryParams = {q: 'hello-world'};
+
+ await element.updateComplete;
+
+ const links = element.shadowRoot.querySelectorAll('a');
+
+ assert.include(links[0].href, '/p/chromium/issues/list?q=hello-world');
+ assert.include(links[1].href,
+ '/p/chromium/issues/list?q=hello-world&mode=grid');
+ assert.include(links[2].href,
+ '/p/chromium/issues/list?q=hello-world&mode=chart');
+ });
+});