From 60ea95fac7b74c5f340637485d873e6b0b02a8f6 Mon Sep 17 00:00:00 2001
From: Wyatt Allen <wyatta@google.com>
Date: Fri, 3 Jun 2016 09:35:07 -0700
Subject: [PATCH] Adds user settings/preferences page

Adds a home for viewing and editing user preferences at a new client
route: /settings/. This is first in a series of changes to bring
preferences editing to PolyGerrit. At this point the settings page is
read-only and mostly un-styled.

Introduces the gr-settings-view element which is added to gr-app in the
same manner as the other main PolyGerrit views. Introduces the /settings
route which will display the new view, or redirect to login if the user
is not authenticated. Adds a link to user settings in the
gr-account-dropdown.

Bug: Issue 3911
Change-Id: Ib164502d586518876737c6d333c8940f2898dad4
---
 .../gr-account-dropdown.html                  |  1 +
 .../app/elements/core/gr-router/gr-router.js  | 10 ++
 polygerrit-ui/app/elements/gr-app.html        |  4 +
 polygerrit-ui/app/elements/gr-app.js          |  3 +
 .../gr-settings-view/gr-settings-view.html    | 96 +++++++++++++++++++
 .../gr-settings-view/gr-settings-view.js      | 56 +++++++++++
 .../gr-settings-view_test.html                | 83 ++++++++++++++++
 polygerrit-ui/app/test/index.html             |  1 +
 8 files changed, 254 insertions(+)
 create mode 100644 polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html
 create mode 100644 polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.js
 create mode 100644 polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view_test.html

diff --git a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html
index 6880a39369..1d31c12159 100644
--- a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html
+++ b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html
@@ -82,6 +82,7 @@ limitations under the License.
               <div>[[account.email]]</div>
             </div>
           </li>
+          <li><a href$="[[_computeRelativeURL('/settings')]]">Settings</a></li>
           <li><a href$="[[_computeRelativeURL('/switch-account')]]">Switch account</a></li>
           <li><a href$="[[_computeRelativeURL('/logout')]]">Sign out</a></li>
         </ul>
diff --git a/polygerrit-ui/app/elements/core/gr-router/gr-router.js b/polygerrit-ui/app/elements/core/gr-router/gr-router.js
index dea0d1d3c4..32246caf66 100644
--- a/polygerrit-ui/app/elements/core/gr-router/gr-router.js
+++ b/polygerrit-ui/app/elements/core/gr-router/gr-router.js
@@ -132,6 +132,16 @@
       }
     }
 
+    page(/^\/settings\/?/, function(data) {
+      restAPI.getLoggedIn().then(function(loggedIn) {
+        if (loggedIn) {
+          app.params = {view: 'gr-settings-view'};
+        } else {
+          page.show('/login/' + encodeURIComponent(data.canonicalPath));
+        }
+      });
+    });
+
     page.start();
   });
 })();
diff --git a/polygerrit-ui/app/elements/gr-app.html b/polygerrit-ui/app/elements/gr-app.html
index 0d6eaa8fe7..b15672104b 100644
--- a/polygerrit-ui/app/elements/gr-app.html
+++ b/polygerrit-ui/app/elements/gr-app.html
@@ -27,6 +27,7 @@ limitations under the License.
 <link rel="import" href="./change-list/gr-dashboard-view/gr-dashboard-view.html">
 <link rel="import" href="./change/gr-change-view/gr-change-view.html">
 <link rel="import" href="./diff/gr-diff-view/gr-diff-view.html">
+<link rel="import" href="./settings/gr-settings-view/gr-settings-view.html">
 
 <link rel="import" href="./shared/gr-overlay/gr-overlay.html">
 <link rel="import" href="./shared/gr-rest-api-interface/gr-rest-api-interface.html">
@@ -109,6 +110,9 @@ limitations under the License.
             params="[[params]]"
             change-view-state="{{_viewState.changeView}}"></gr-diff-view>
       </template>
+      <template is="dom-if" if="[[_showSettingsView]]" restamp="true">
+        <gr-settings-view></gr-settings-view>
+      </template>
       <div id="errorView" class="errorView" hidden>
         <div class="errorEmoji">[[_lastError.emoji]]</div>
         <div class="errorText">[[_lastError.text]]</div>
diff --git a/polygerrit-ui/app/elements/gr-app.js b/polygerrit-ui/app/elements/gr-app.js
index affcd44e89..0833a725a2 100644
--- a/polygerrit-ui/app/elements/gr-app.js
+++ b/polygerrit-ui/app/elements/gr-app.js
@@ -40,6 +40,7 @@
       _showDashboardView: Boolean,
       _showChangeView: Boolean,
       _showDiffView: Boolean,
+      _showSettingsView: Boolean,
       _viewState: Object,
       _lastError: Object,
     },
@@ -102,6 +103,7 @@
       this.set('_showDashboardView', view === 'gr-dashboard-view');
       this.set('_showChangeView', view === 'gr-change-view');
       this.set('_showDiffView', view === 'gr-diff-view');
+      this.set('_showSettingsView', view === 'gr-settings-view');
     },
 
     _loadPlugins: function(plugins) {
@@ -130,6 +132,7 @@
         '_showDashboardView',
         '_showChangeView',
         '_showDiffView',
+        '_showSettingsView',
       ].forEach(function(showProp) {
         this.set(showProp, false);
       }.bind(this));
diff --git a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html
new file mode 100644
index 0000000000..545f8946a6
--- /dev/null
+++ b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html
@@ -0,0 +1,96 @@
+<!--
+Copyright (C) 2016 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="../../shared/gr-date-formatter/gr-date-formatter.html">
+<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
+
+<dom-module id="gr-settings-view">
+  <template>
+    <style>
+      :host {
+        background-color: var(--view-background-color);
+        display: block;
+      }
+      fieldset {
+        border: none;
+        display: table;
+      }
+      section {
+        display: table-row;
+      }
+      section:not(:first-of-type) {
+        margin-top: 1em;
+      }
+      section:not(:first-of-type) .title,
+      section:not(:first-of-type) .value {
+        padding-top: .5em;
+      }
+      .title,
+      .value {
+        display: table-cell;
+        vertical-align: top;
+      }
+      .title {
+        color: #666;
+        font-weight: bold;
+        padding-right: .5em;
+      }
+      .loading {
+        color: #666;
+        padding: 1em var(--default-horizontal-margin);
+      }
+      @media only screen and (max-width: 50em) {
+        .loading {
+          padding: 0 var(--default-horizontal-margin);
+        }
+      }
+    </style>
+    <div class="loading" hidden$="[[!_loading]]">Loading...</div>
+    <div hidden$="[[_loading]]" hidden>
+      <h1>User Settings</h1>
+      <h2>Profile</h2>
+      <fieldset>
+        <section>
+          <span class="title">ID</span>
+          <span class="value">[[account._account_id]]</span>
+        </section>
+        <section>
+          <span class="title">Name</span>
+          <span class="value">[[account.name]]</span>
+        </section>
+        <section>
+          <span class="title">Email</span>
+          <span class="value">[[account.email]]</span>
+        </section>
+        <section hidden$="[[!account.username]]">
+          <span class="title">Username</span>
+          <span class="value">[[account.username]]</span>
+        </section>
+        <section>
+          <span class="title">Registered</span>
+          <span class="value">
+            <gr-date-formatter
+                date-str="[[account.registered_on]]"></gr-date-formatter>
+          </span>
+        </section>
+      </fieldset>
+    </div>
+    <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
+  </template>
+  <script src="../../../scripts/util.js"></script>
+  <script src="gr-settings-view.js"></script>
+</dom-module>
diff --git a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.js b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.js
new file mode 100644
index 0000000000..044eb4653c
--- /dev/null
+++ b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.js
@@ -0,0 +1,56 @@
+// Copyright (C) 2016 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-settings-view',
+
+    properties: {
+      account: {
+        type: Object,
+        value: function() { return {}; },
+      },
+      prefs: {
+        type: Object,
+        value: function() { return {}; },
+      },
+      _loading: {
+        type: Boolean,
+        value: true,
+      },
+    },
+
+    attached: function() {
+      var promises = [];
+
+      promises.push(this.$.restAPI.getAccount().then(function(account) {
+        this.account = account;
+      }.bind(this)));
+
+      promises.push(this.$.restAPI.getPreferences().then(function(prefs) {
+        this.prefs = prefs;
+      }.bind(this)));
+
+      Promise.all(promises).then(function() {
+        this._loading = false;
+      }.bind(this));
+    },
+
+    _computeRegistered: function(registered) {
+      if (!registered) { return ''; }
+      return util.parseDate(registered).toGMTString();
+    },
+  });
+})();
diff --git a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view_test.html b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view_test.html
new file mode 100644
index 0000000000..626d01907e
--- /dev/null
+++ b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view_test.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<!--
+Copyright (C) 2016 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-settings-view</title>
+
+<script src="../../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
+<script src="../../../bower_components/web-component-tester/browser.js"></script>
+
+<link rel="import" href="../../../bower_components/iron-test-helpers/iron-test-helpers.html">
+<link rel="import" href="gr-settings-view.html">
+
+<test-fixture id="basic">
+  <template>
+    <gr-settings-view></gr-settings-view>
+  </template>
+</test-fixture>
+
+<script>
+  suite('gr-settings-view tests', function() {
+    var element;
+    var account;
+    var preferences;
+
+    setup(function(done) {
+      account = {
+        _account_id: 123,
+        name: 'user name',
+        email: 'user@email',
+        username: 'user username',
+        registered: '2000-01-01 00:00:00.000000000',
+      };
+      preferences = {time_format: 'HHMM_12'};
+
+      stub('gr-rest-api-interface', {
+        getLoggedIn: function() { return Promise.resolve(true); },
+        getAccount: function() { return Promise.resolve(account); },
+        getPreferences: function() { return Promise.resolve(preferences); },
+      });
+      element = fixture('basic');
+
+      // Allow the element to render.
+      element.async(done, 1);
+    });
+
+    test('render', function() {
+      assert.isFalse(element._loading);
+
+      var sections = element.$$('fieldset').querySelectorAll('section');
+
+      function valueOf(title) {
+        var titleEl;
+        for (var i = 0; i < sections.length; i++) {
+          titleEl = sections[i].querySelector('.title');
+          if (titleEl.textContent === title) {
+            return sections[i].querySelector('.value').textContent;
+          }
+        }
+      }
+
+      assert.equal(valueOf('ID'), account._account_id);
+      assert.equal(valueOf('Name'), account.name);
+      assert.equal(valueOf('Email'), account.email);
+      assert.equal(valueOf('Username'), account.username);
+      assert.equal(element._computeRegistered(element.account.registered),
+          'Sat, 01 Jan 2000 00:00:00 GMT');
+    });
+  });
+</script>
diff --git a/polygerrit-ui/app/test/index.html b/polygerrit-ui/app/test/index.html
index 6fe3a08a31..f0854830db 100644
--- a/polygerrit-ui/app/test/index.html
+++ b/polygerrit-ui/app/test/index.html
@@ -52,6 +52,7 @@ limitations under the License.
     'diff/gr-diff/gr-diff_test.html',
     'diff/gr-patch-range-select/gr-patch-range-select_test.html',
     'diff/gr-selection-action-box/gr-selection-action-box_test.html',
+    'settings/gr-settings-view/gr-settings-view_test.html',
     'shared/gr-account-label/gr-account-label_test.html',
     'shared/gr-account-link/gr-account-link_test.html',
     'shared/gr-alert/gr-alert_test.html',