SONAR-7227 Convert "My Profile" page to the new "My Account" page

9 files changed, 409 insertions, 45 deletions

diff --git a/server/sonar-web/src/main/js/apps/account/app.js b/server/sonar-web/src/main/js/apps/account/app.js
index f2f87052d5e..5af38f5b6c3 100644
--- a/server/sonar-web/src/main/js/apps/account/app.js
+++ b/server/sonar-web/src/main/js/apps/account/app.js
@@ -17,48 +17,32 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import $ from 'jquery';
-import Backbone from 'backbone';
-import ChangePasswordView from './change-password-view';
-import TokensView from './tokens-view';
-import avatarHelper from '../../helpers/handlebars/avatarHelper';
-
-var shouldShowAvatars = window.SS && window.SS.lf && window.SS.lf.enableGravatar;
-var favorites = $('.js-account-favorites tr');
-
-function showExtraFavorites () {
-  favorites.removeClass('hidden');
-}
-
-class App {
-  start () {
-    $('html').addClass('dashboard-page');
-
-    if (shouldShowAvatars) {
-      var avatarHtml = avatarHelper(window.SS.userEmail, 100).string;
-      $('.js-avatar').html(avatarHtml);
-    }
-
-    $('.js-show-all-favorites').on('click', function (e) {
-      e.preventDefault();
-      $(e.currentTarget).hide();
-      showExtraFavorites();
-    });
-
-    $('#account-change-password-trigger').on('click', function (e) {
-      e.preventDefault();
-      new ChangePasswordView().render();
-    });
-
-    const account = new Backbone.Model({
-      id: window.SS.user
-    });
-
-    new TokensView({
-      el: '#account-tokens',
-      model: account
-    }).render();
-  }
-}
-
-window.sonarqube.appStarted.then(options => new App().start(options));
+import React from 'react';
+import { render } from 'react-dom';
+import { Router, Route, IndexRoute, Redirect } from 'react-router';
+import { createHistory, useBasename } from 'history';
+
+import AccountApp from './containers/AccountApp';
+import Home from './components/Home';
+import Notifications from './components/Notifications';
+
+window.sonarqube.appStarted.then(options => {
+  const el = document.querySelector(options.el);
+
+  const history = useBasename(createHistory)({
+    basename: window.baseUrl + '/account'
+  });
+
+  document.querySelector('html').classList.add('dashboard-page');
+  document.querySelector('#container').classList.add('page-wrapper-context');
+
+  render((
+      <Router history={history}>
+        <Route path="/" component={AccountApp}>
+          <IndexRoute component={Home}/>
+
+          <Redirect from="/index" to="/"/>
+        </Route>
+      </Router>
+  ), el);
+});
diff --git a/server/sonar-web/src/main/js/apps/account/components/FavoriteIssueFilters.js b/server/sonar-web/src/main/js/apps/account/components/FavoriteIssueFilters.js
new file mode 100644
index 00000000000..80cbac9d451
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/components/FavoriteIssueFilters.js
@@ -0,0 +1,49 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import React from 'react';
+
+import { translate } from '../../../helpers/l10n';
+
+const FavoriteIssueFilters = ({ issueFilters }) => (
+    <section className="big-spacer-bottom">
+      <h2 className="spacer-bottom">
+        {translate('my_account.favorite_issue_filters')}
+      </h2>
+      <table id="favorite-issue-filters" className="data">
+        <tbody>
+          {issueFilters.map(f => (
+              <tr key={f.name}>
+                <td className="thin">
+                  <i className="icon-favorite"/>
+                </td>
+                <td>
+                  <a href={`${window.baseUrl}/issues/search#id=${f.id}`}>
+                    {f.name}
+                  </a>
+                </td>
+              </tr>
+          ))}
+        </tbody>
+      </table>
+
+    </section>
+);
+
+export default FavoriteIssueFilters;
diff --git a/server/sonar-web/src/main/js/apps/account/components/FavoriteMeasureFilters.js b/server/sonar-web/src/main/js/apps/account/components/FavoriteMeasureFilters.js
new file mode 100644
index 00000000000..3e528ed2cd9
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/components/FavoriteMeasureFilters.js
@@ -0,0 +1,49 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import React from 'react';
+
+import { translate } from '../../../helpers/l10n';
+
+const FavoriteMeasureFilters = ({ measureFilters }) => (
+    <section className="big-spacer-bottom">
+      <h2 className="spacer-bottom">
+        {translate('my_account.favorite_measure_filters')}
+      </h2>
+      <table id="favorite-measure-filters" className="data">
+        <tbody>
+          {measureFilters.map(f => (
+              <tr key={f.name}>
+                <td className="thin">
+                  <i className="icon-favorite"/>
+                </td>
+                <td>
+                  <a href={`${window.baseUrl}/measures/filter/${f.id}`}>
+                    {f.name}
+                  </a>
+                </td>
+              </tr>
+          ))}
+        </tbody>
+      </table>
+
+    </section>
+);
+
+export default FavoriteMeasureFilters;
diff --git a/server/sonar-web/src/main/js/apps/account/components/Favorites.js b/server/sonar-web/src/main/js/apps/account/components/Favorites.js
new file mode 100644
index 00000000000..5466066a803
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/components/Favorites.js
@@ -0,0 +1,54 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import React from 'react';
+
+import Favorite from '../../../components/shared/favorite';
+import QualifierIcon from '../../../components/shared/qualifier-icon';
+import { translate } from '../../../helpers/l10n';
+import { getComponentUrl } from '../../../helpers/urls';
+
+const Favorites = ({ favorites }) => (
+    <section className="big-spacer-bottom">
+      <h2 className="spacer-bottom">
+        {translate('my_account.favorite_components')}
+      </h2>
+      <table id="favorite-components" className="data">
+        <tbody>
+          {favorites.map(f => (
+              <tr key={f.key}>
+                <td className="thin">
+                  <Favorite component={f.key} favorite={true}/>
+                </td>
+                <td>
+                  <a href={getComponentUrl(f.key)} className="link-with-icon">
+                    <QualifierIcon qualifier={f.qualifier}/>
+                    {' '}
+                    <span>{f.name}</span>
+                  </a>
+                </td>
+              </tr>
+          ))}
+        </tbody>
+      </table>
+
+    </section>
+);
+
+export default Favorites;
diff --git a/server/sonar-web/src/main/js/apps/account/components/Home.js b/server/sonar-web/src/main/js/apps/account/components/Home.js
new file mode 100644
index 00000000000..f9a76bf27f9
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/components/Home.js
@@ -0,0 +1,38 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import React from 'react';
+
+import UserCard from './UserCard';
+import Favorites from './Favorites';
+import FavoriteIssueFilters from './FavoriteIssueFilters';
+import FavoriteMeasureFilters from './FavoriteMeasureFilters';
+
+const Home = ({ user, favorites, issueFilters, measureFilters }) => (
+    <div>
+      <UserCard user={user}/>
+      <div className="overflow-hidden">
+        <Favorites favorites={favorites}/>
+        {issueFilters && <FavoriteIssueFilters issueFilters={issueFilters}/>}
+        {measureFilters && <FavoriteMeasureFilters measureFilters={measureFilters}/>}
+      </div>
+    </div>
+);
+
+export default Home;
diff --git a/server/sonar-web/src/main/js/apps/account/components/Nav.js b/server/sonar-web/src/main/js/apps/account/components/Nav.js
new file mode 100644
index 00000000000..3a85c7da307
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/components/Nav.js
@@ -0,0 +1,46 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import React from 'react';
+import { IndexLink } from 'react-router';
+
+import { translate } from '../../../helpers/l10n';
+
+const Nav = () => (
+    <nav className="navbar navbar-context page-container">
+      <div className="container">
+        <ul className="nav navbar-nav nav-crumbs">
+          <li>
+            <IndexLink to="/" activeClassName="active">
+              {translate('my_account.page')}
+            </IndexLink>
+          </li>
+        </ul>
+        <ul className="nav navbar-nav nav-tabs">
+          <li>
+            <IndexLink to="/" activeClassName="active">
+              <i className="icon-home"/>
+            </IndexLink>
+          </li>
+        </ul>
+      </div>
+    </nav>
+);
+
+export default Nav;
diff --git a/server/sonar-web/src/main/js/apps/account/components/Notifications.js b/server/sonar-web/src/main/js/apps/account/components/Notifications.js
new file mode 100644
index 00000000000..195a134c15c
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/components/Notifications.js
@@ -0,0 +1,26 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import React from 'react';
+
+const Notifications = () => (
+    <h1>Notifications</h1>
+);
+
+export default Notifications;
diff --git a/server/sonar-web/src/main/js/apps/account/components/UserCard.js b/server/sonar-web/src/main/js/apps/account/components/UserCard.js
new file mode 100644
index 00000000000..327ab9e5b02
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/components/UserCard.js
@@ -0,0 +1,60 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import React from 'react';
+
+import Avatar from '../../../components/shared/avatar';
+import { translate } from '../../../helpers/l10n';
+
+const UserCard = ({ user }) => (
+    <div className="pull-left big-spacer-right abs-width-240">
+      <div className="panel panel-white">
+        <div className="text-center">
+          <div id="avatar" className="big-spacer-bottom">
+            <Avatar email={user.email} size={100}/>
+          </div>
+          <h2 id="name" className="text-ellipsis" title={user.name}>{user.name}</h2>
+          <p id="login" className="note text-ellipsis" title={user.login}>{user.login}</p>
+          <div className="text-center spacer-top">
+            <p id="email" className="text-ellipsis" title={user.email}>{user.email}</p>
+          </div>
+        </div>
+
+        <div className="big-spacer-top">
+          <h3 className="text-center">{translate('my_profile.groups')}</h3>
+          <ul id="groups">
+            {user.groups.map(group => (
+                <li key={group} className="text-ellipsis" title={group}>{group}</li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="big-spacer-top">
+          <h3 className="text-center">{translate('my_profile.scm_accounts')}</h3>
+          <ul id="scm-accounts">
+            {user.scmAccounts.map(scmAccount => (
+                <li key={scmAccount} className="text-ellipsis" title={scmAccount}>{scmAccount}</li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+);
+
+export default UserCard;
diff --git a/server/sonar-web/src/main/js/apps/account/containers/AccountApp.js b/server/sonar-web/src/main/js/apps/account/containers/AccountApp.js
new file mode 100644
index 00000000000..6325b562420
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/containers/AccountApp.js
@@ -0,0 +1,58 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import React, { Component, cloneElement } from 'react';
+
+import Nav from '../components/Nav';
+import { getIssueFilters } from '../../../api/issues';
+
+export default class AccountApp extends Component {
+  state = {}
+
+  componentDidMount () {
+    this.fetchFavoriteIssueFilters();
+  }
+
+  fetchFavoriteIssueFilters () {
+    getIssueFilters().then(issueFilters => {
+      this.setState({ issueFilters });
+    });
+  }
+
+  render () {
+    const { user } = window.sonarqube;
+    const { favorites } = user;
+    const { issueFilters } = this.state;
+    const children = cloneElement(this.props.children, {
+      measureFilters: user.favoriteMeasureFilters,
+      user,
+      favorites,
+      issueFilters
+    });
+
+    return (
+        <div>
+          <Nav/>
+          <div className="page">
+            {children}
+          </div>
+        </div>
+    );
+  }
+}