Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/framework/dialogs/mr-change-columns/mr-change-columns.js b/static_src/elements/framework/dialogs/mr-change-columns/mr-change-columns.js
new file mode 100644
index 0000000..a7870f6
--- /dev/null
+++ b/static_src/elements/framework/dialogs/mr-change-columns/mr-change-columns.js
@@ -0,0 +1,151 @@
+// 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, css} from 'lit-element';
+import page from 'page';
+import qs from 'qs';
+import 'elements/chops/chops-button/chops-button.js';
+import 'elements/chops/chops-dialog/chops-dialog.js';
+import {SHARED_STYLES} from 'shared/shared-styles.js';
+import {parseColSpec} from 'shared/issue-fields.js';
+
+/**
+ * `<mr-change-columns>`
+ *
+ * Dialog where the user can change columns on the list view.
+ *
+ */
+export class MrChangeColumns extends LitElement {
+ /** @override */
+ static get styles() {
+ return [
+ SHARED_STYLES,
+ css`
+ .edit-actions {
+ margin: 0.5em 0;
+ text-align: right;
+ }
+ .input-grid {
+ align-items: center;
+ width: 800px;
+ max-width: 100%;
+ }
+ input {
+ box-sizing: border-box;
+ padding: 0.25em 4px;
+ }
+ `,
+ ];
+ }
+
+ /** @override */
+ render() {
+ return html`
+ <chops-dialog closeOnOutsideClick>
+ <h3 class="medium-heading">Change list columns</h3>
+ <form id="changeColumns" @submit=${this._save}>
+ <div class="input-grid">
+ <label for="columnsInput">Columns: </label>
+ <input
+ id="columnsInput"
+ placeholder="Edit columns..."
+ value=${this.columns.join(' ')}
+ />
+ </div>
+ <div class="edit-actions">
+ <chops-button
+ @click=${this.close}
+ class="de-emphasized discard-button"
+ >
+ Discard
+ </chops-button>
+ <chops-button
+ @click=${this._save}
+ class="emphasized"
+ >
+ Update columns
+ </chops-button>
+ </div>
+ </form>
+ </chops-dialog>
+ `;
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ /**
+ * Array of the currently configured issue columns, used to set
+ * the default value.
+ */
+ columns: {type: Array},
+ /**
+ * Parsed query params for the current page, to be used in
+ * navigation.
+ */
+ queryParams: {type: Object},
+ };
+ }
+
+ /** @override */
+ constructor() {
+ super();
+
+ this.columns = [];
+ this.queryParams = {};
+
+ this._page = page;
+ }
+
+ /**
+ * Abstract out the computation of the current page. Useful for testing.
+ */
+ get _currentPage() {
+ return window.location.pathname;
+ }
+
+ /** Updates the URL query params with the new columns. */
+ save() {
+ const input = this.shadowRoot.querySelector('#columnsInput');
+ const newColumns = parseColSpec(input.value);
+
+ const params = {...this.queryParams};
+ params.colspec = newColumns.join('+');
+
+ // TODO(zhangtiff): Create a shared function to change only
+ // query params in a URL.
+ this._page(`${this._currentPage}?${qs.stringify(params)}`);
+
+ this.close();
+ }
+
+ /**
+ * Handles form submit events.
+ * @param {Event} e A click or submit event.
+ */
+ _save(e) {
+ e.preventDefault();
+ this.save();
+ }
+
+ /** Opens and resets this dialog. */
+ open() {
+ this.reset();
+ const dialog = this.shadowRoot.querySelector('chops-dialog');
+ dialog.open();
+ }
+
+ /** Closes this dialog. */
+ close() {
+ const dialog = this.shadowRoot.querySelector('chops-dialog');
+ dialog.close();
+ }
+
+ /** Resets the form in this dialog. */
+ reset() {
+ this.shadowRoot.querySelector('form').reset();
+ }
+}
+
+customElements.define('mr-change-columns', MrChangeColumns);