apply feedback for the quality profiles page

server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js

@@ -177,8 +177,8 @@ export default class OverviewApp extends React.Component {
 
     return (
         <div className="page page-limited">
-          <div className="overview">
-            <div className="overview-main">
+          <div className="overview page-with-sidebar">
+            <div className="overview-main page-main">
               <QualityGate
                   component={component}
                   measures={measures}
@@ -193,7 +193,9 @@ export default class OverviewApp extends React.Component {
               </div>
             </div>
 
-            <Meta component={component}/>
+            <div className="page-sidebar-fixed">
+              <Meta component={component}/>
+            </div>
           </div>
         </div>
     );

server/sonar-web/src/main/js/apps/overview/styles.css

@@ -1,11 +1,8 @@
 .overview {
-  display: flex;
   animation: fadeIn 0.5s forwards;
 }
 
 .overview-main {
-  flex-grow: 1;
-  box-sizing: border-box;
   background-color: #f3f3f3;
   transition: transform 0.5s ease, opacity 0.5s ease;
 }
@@ -233,9 +230,6 @@
  */
 
 .overview-meta {
-  flex-shrink: 0;
-  width: 260px;
-  padding-left: 40px;
   background-color: #f3f3f3;
 }
 
@@ -260,7 +254,7 @@
   white-space: nowrap;
 }
 
-.overview-meta-list i {
+.overview-meta-list [class^="icon-"] {
   position: relative;
   top: -1px;
 }

server/sonar-web/src/main/js/apps/quality-profiles/components/App.js

@@ -91,7 +91,7 @@ export default class App extends React.Component {
 
   render () {
     return (
-        <div className="page page-limited-small">
+        <div className="page page-limited">
           {this.renderChild()}
         </div>
     );

server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileDate.js

@@ -36,7 +36,7 @@ export default class ProfileDate extends React.Component {
 
     if (!date) {
       return (
-          <span className="note">{translate('never')}</span>
+          <span className="text-muted">{translate('never')}</span>
       );
     }
 

server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileDetails.js

@@ -21,7 +21,6 @@ import React from 'react';
 import ProfileRules from './ProfileRules';
 import ProfileProjects from './ProfileProjects';
 import ProfileInheritance from './ProfileInheritance';
-import ProfileEvolution from './ProfileEvolution';
 import ProfileExporters from './ProfileExporters';
 import { ProfileType } from '../propTypes';
 
@@ -39,7 +38,6 @@ export default class ProfileDetails extends React.Component {
             <div className="quality-profile-grid-left">
               <ProfileRules {...this.props}/>
               <ProfileExporters {...this.props}/>
-              <ProfileEvolution {...this.props}/>
             </div>
             <div className="quality-profile-grid-right">
               <ProfileInheritance {...this.props}/>

server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileEvolution.js

@@ -1,61 +0,0 @@
-/*
- * 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 moment from 'moment';
-import { translate } from '../../../helpers/l10n';
-
-export default class ProfileEvolution extends React.Component {
-  render () {
-    const { profile } = this.props;
-
-    return (
-        <div className="quality-profile-evolution">
-          <div>
-            <h6 className="little-spacer-bottom">
-              {translate('quality_profiles.list.updated')}
-            </h6>
-            {profile.userUpdatedAt ? (
-                <div>
-                  {moment(profile.userUpdatedAt).format('LL')}
-                </div>
-            ) : (
-                <div className="note">
-                  {translate('never')}
-                </div>
-            )}
-          </div>
-          <div>
-            <h6 className="little-spacer-bottom">
-              {translate('quality_profiles.list.used')}
-            </h6>
-            {profile.lastUsed ? (
-                <div>
-                  {moment(profile.lastUsed).format('LL')}
-                </div>
-            ) : (
-                <div className="note">
-                  {translate('never')}
-                </div>
-            )}
-          </div>
-        </div>
-    );
-  }
-}

server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.js

@@ -23,6 +23,7 @@ import ProfileLink from '../components/ProfileLink';
 import RenameProfileView from '../views/RenameProfileView';
 import CopyProfileView from '../views/CopyProfileView';
 import DeleteProfileView from '../views/DeleteProfileView';
+import ProfileDate from '../components/ProfileDate';
 import { ProfileType } from '../propTypes';
 import { translate } from '../../../helpers/l10n';
 import { setDefaultProfile } from '../../../api/quality-profiles';
@@ -114,6 +115,16 @@ export default class ProfileHeader extends React.Component {
 
           <div className="pull-right">
             <ul className="list-inline" style={{ lineHeight: '24px' }}>
+              <li className="small spacer-right">
+                {translate('quality_profiles.updated_')}
+                {' '}
+                <ProfileDate date={profile.userUpdatedAt}/>
+              </li>
+              <li className="small big-spacer-right">
+                {translate('quality_profiles.used_')}
+                {' '}
+                <ProfileDate date={profile.lastUsed}/>
+              </li>
               <li>
                 <Link
                     to={{ pathname: '/changelog', query: { key: this.props.profile.key } }}

server/sonar-web/src/main/js/apps/quality-profiles/home/HomeContainer.js

@@ -33,11 +33,12 @@ export default class HomeContainer extends React.Component {
               titleTemplate="SonarQube - %s"/>
 
           <PageHeader {...this.props}/>
-          <div className="clearfix">
-            <div style={{ float: 'left', width: 750 }}>
+
+          <div className="page-with-sidebar">
+            <div className="page-main">
               <ProfilesList {...this.props}/>
             </div>
-            <div style={{ float: 'right', width: 260, paddingLeft: 30 }}>
+            <div className="page-sidebar">
               <Evolution {...this.props}/>
             </div>
           </div>

server/sonar-web/src/main/js/apps/quality-profiles/propTypes.js

@@ -32,7 +32,9 @@ export const ProfileType = shape({
   activeDeprecatedRuleCount: number.isRequired,
   projectCount: number,
   parentKey: string,
-  parentName: string
+  parentName: string,
+  userUpdatedAt: string,
+  lastUsed: string
 });
 
 export const ProfilesListType = arrayOf(ProfileType);

server/sonar-web/src/main/less/components/page.less

@@ -35,19 +35,13 @@ body {
 }
 
 .page-limited {
-  max-width: 1440px;
+  max-width: 1280px;
   margin-left: auto;
   margin-right: auto;
   padding-top: 20px;
   padding-bottom: 20px;
 }
 
-.page-limited-small {
-  .page-limited;
-  width: 1080px;
-  box-sizing: border-box;
-}
-
 .page-container {
   min-width: 1080px;
 }
@@ -134,3 +128,24 @@ body {
     .link-base-color;
   }
 }
+
+.page-with-sidebar {
+  display: flex;
+}
+
+.page-main {
+  flex-grow: 1;
+}
+
+.page-sidebar {
+  width: 30%;
+  min-width: 300px;
+  flex-shrink: 0;
+  padding-left: 40px;
+  box-sizing: border-box;
+}
+
+.page-sidebar-fixed {
+  .page-sidebar;
+  width: 300px;
+}

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -1787,6 +1787,8 @@ quality_profiles.x_deprecated_rules_are_still_activated={0} deprecated rule(s) a
 quality_profiles.stagnant_profiles=Stagnant Profiles
 quality_profiles.not_updated_more_than_year=The following profiles haven't been updated for more than 1 year:
 quality_profiles.exporters=Exporters
+quality_profiles.updated_=Updated:
+quality_profiles.used_=Used: