apply feedback for the quality profiles page

10 files changed, 48 insertions, 86 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js b/server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js
index 19603ac1fcc..666d4f8d9ef 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js
+++ b/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>
     );
diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css
index 204f0fe760d..eaeed145c22 100644
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/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;
 }
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/App.js b/server/sonar-web/src/main/js/apps/quality-profiles/components/App.js
index 480a61ce779..2c2eff071c9 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/components/App.js
+++ b/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>
     );
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileDate.js b/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileDate.js
index 974f2d80f96..a538383bd82 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/components/ProfileDate.js
+++ b/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>
       );
     }
 
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileDetails.js b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileDetails.js
index f08eb868c1b..93020e2dff7 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileDetails.js
+++ b/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}/>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileEvolution.js b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileEvolution.js
deleted file mode 100644
index aa643f600a6..00000000000
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileEvolution.js
+++ /dev/null
@@ -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>
-    );
-  }
-}
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.js b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.js
index 1374002d6ed..bbf2913801e 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileHeader.js
+++ b/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 } }}
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/HomeContainer.js b/server/sonar-web/src/main/js/apps/quality-profiles/home/HomeContainer.js
index 8001085e09d..b303e70b40e 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/HomeContainer.js
+++ b/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>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/propTypes.js b/server/sonar-web/src/main/js/apps/quality-profiles/propTypes.js
index c8e40424e5a..3e8d1bf5650 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/propTypes.js
+++ b/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);
diff --git a/server/sonar-web/src/main/less/components/page.less b/server/sonar-web/src/main/less/components/page.less
index e6a828a0542..d6e25d68ac7 100644
--- a/server/sonar-web/src/main/less/components/page.less
+++ b/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;
+}