From 2a981676b2f034933c01b7fd7b745a61263690ac Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Mon, 25 Jan 2016 16:20:19 +0100 Subject: SONAR-7227 Convert "My Profile" page to the new "My Account" page --- server/sonar-web/src/main/js/apps/account/app.js | 74 +++++++++------------- .../account/components/FavoriteIssueFilters.js | 49 ++++++++++++++ .../account/components/FavoriteMeasureFilters.js | 49 ++++++++++++++ .../main/js/apps/account/components/Favorites.js | 54 ++++++++++++++++ .../src/main/js/apps/account/components/Home.js | 38 +++++++++++ .../src/main/js/apps/account/components/Nav.js | 46 ++++++++++++++ .../js/apps/account/components/Notifications.js | 26 ++++++++ .../main/js/apps/account/components/UserCard.js | 60 ++++++++++++++++++ .../main/js/apps/account/containers/AccountApp.js | 58 +++++++++++++++++ 9 files changed, 409 insertions(+), 45 deletions(-) create mode 100644 server/sonar-web/src/main/js/apps/account/components/FavoriteIssueFilters.js create mode 100644 server/sonar-web/src/main/js/apps/account/components/FavoriteMeasureFilters.js create mode 100644 server/sonar-web/src/main/js/apps/account/components/Favorites.js create mode 100644 server/sonar-web/src/main/js/apps/account/components/Home.js create mode 100644 server/sonar-web/src/main/js/apps/account/components/Nav.js create mode 100644 server/sonar-web/src/main/js/apps/account/components/Notifications.js create mode 100644 server/sonar-web/src/main/js/apps/account/components/UserCard.js create mode 100644 server/sonar-web/src/main/js/apps/account/containers/AccountApp.js (limited to 'server/sonar-web/src/main/js/apps') 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(( + + + + + + + + ), 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 }) => ( +
+

+ {translate('my_account.favorite_issue_filters')} +

+ + + {issueFilters.map(f => ( + + + + + ))} + +
+ + + + {f.name} + +
+ +
+); + +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 }) => ( +
+

+ {translate('my_account.favorite_measure_filters')} +

+ + + {measureFilters.map(f => ( + + + + + ))} + +
+ + + + {f.name} + +
+ +
+); + +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 }) => ( +
+

+ {translate('my_account.favorite_components')} +

+ + + {favorites.map(f => ( + + + + + ))} + +
+ + + + + {' '} + {f.name} + +
+ +
+); + +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 }) => ( +
+ +
+ + {issueFilters && } + {measureFilters && } +
+
+); + +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 = () => ( + +); + +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 = () => ( +

Notifications

+); + +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 }) => ( +
+
+
+
+ +
+

{user.name}

+

{user.login}

+
+

{user.email}

+
+
+ +
+

{translate('my_profile.groups')}

+
    + {user.groups.map(group => ( +
  • {group}
    • + ))} +
+
+ +
+

{translate('my_profile.scm_accounts')}

+
    + {user.scmAccounts.map(scmAccount => ( +
  • {scmAccount}
    • + ))} +
+
+
+
+); + +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 ( +
+
+ ); + } +} -- cgit v1.2.3