From 5f2fbeb4996f0b5b95bb718be9364a63caff4cbb Mon Sep 17 00:00:00 2001
From: Stas Vilchik <vilchiks@gmail.com>
Date: Wed, 13 Jan 2016 11:04:01 +0100
Subject: [PATCH] SONAR-7167 Display function key on project overview page

---
 .../src/main/js/apps/overview/meta.js         | 38 +++++++++++++------
 .../src/main/less/pages/overview.less         |  2 +-
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/overview/meta.js b/server/sonar-web/src/main/js/apps/overview/meta.js
index 3506f29c1ad..bb2f6fa5510 100644
--- a/server/sonar-web/src/main/js/apps/overview/meta.js
+++ b/server/sonar-web/src/main/js/apps/overview/meta.js
@@ -84,26 +84,35 @@ export default React.createClass({
     });
 
     let descriptionCard = this.props.component.description ? (
-        <div className="overview-meta-card">
-          <div className="overview-meta-description">{this.props.component.description}</div>
+        <div className="overview-meta-description big-spacer-bottom">
+          {this.props.component.description}
         </div>
     ) : null;
 
     let linksCard = _.size(this.props.component.links) > 0 ? (
-        <div className="overview-meta-card">
-          <ul className="overview-meta-list">{links}</ul>
-        </div>
+        <ul className="overview-meta-list big-spacer-bottom">
+          {links}
+        </ul>
     ) : null;
 
+    let keyCard = (
+        <div>
+          <h4 className="overview-meta-header">{translate('key')}</h4>
+          <div style={{ overflow: 'auto', whiteSpace: 'nowrap' }}>
+            <code>{this.props.component.key}</code>
+          </div>
+        </div>
+    );
+
     let profilesCard = !this.isView() && !this.isDeveloper() && _.size(this.props.component.profiles) > 0 ? (
-        <div className="overview-meta-card">
+        <div>
           <h4 className="overview-meta-header">{translate('overview.quality_profiles')}</h4>
           <ul className="overview-meta-list">{profiles}</ul>
         </div>
     ) : null;
 
     let gateCard = !this.isView() && !this.isDeveloper() && this.props.component.gate ? (
-        <div className="overview-meta-card">
+        <div className="big-spacer-bottom">
           <h4 className="overview-meta-header">{translate('overview.quality_gate')}</h4>
           <ul className="overview-meta-list">
             <li>
@@ -119,10 +128,17 @@ export default React.createClass({
 
     return (
         <div className="overview-meta">
-          {descriptionCard}
-          {linksCard}
-          {gateCard}
-          {profilesCard}
+          <div className="overview-meta-card">
+            {descriptionCard}
+            {linksCard}
+            {keyCard}
+          </div>
+          {(!!gateCard || !!profilesCard) && (
+              <div className="overview-meta-card">
+                {gateCard}
+                {profilesCard}
+              </div>
+          )}
           {this.renderEvents()}
         </div>
     );
diff --git a/server/sonar-web/src/main/less/pages/overview.less b/server/sonar-web/src/main/less/pages/overview.less
index cf27bd92e62..c0851c59e3c 100644
--- a/server/sonar-web/src/main/less/pages/overview.less
+++ b/server/sonar-web/src/main/less/pages/overview.less
@@ -605,7 +605,7 @@
   }
 
   .overview-meta .overview-meta-card {
-    max-width: 25%;
+    width: calc(100% / 3);
   }
 }
 
-- 
2.39.5