SONAR-10087 SONAR-10113 Display built-in badges on quality gates

3 files changed, 57 insertions, 4 deletions

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/BuiltInBadge.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/BuiltInBadge.tsx
new file mode 100644
index 00000000000..6d5ad233540
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/BuiltInBadge.tsx
@@ -0,0 +1,45 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info 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 * as React from 'react';
+import * as classNames from 'classnames';
+import Tooltip from '../../../components/controls/Tooltip';
+import { translate } from '../../../helpers/l10n';
+
+interface Props {
+  className?: string;
+  tooltip?: boolean;
+}
+
+export default function BuiltInBadge({ className, tooltip = true }: Props) {
+  const badge = (
+    <div className={classNames('outline-badge', className)}>
+      {translate('quality_gates.built_in')}
+    </div>
+  );
+
+  const overlay = (
+    <div>
+      <p>{translate('quality_gates.built_in.description.1')}</p>
+      <p>{translate('quality_gates.built_in.description.2')}</p>
+    </div>
+  );
+
+  return tooltip ? <Tooltip overlay={overlay}>{badge}</Tooltip> : badge;
+}
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.js b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.js
index f70313e9a59..db4c2bb5fcd 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.js
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
+import BuiltInBadge from './BuiltInBadge';
 import { translate } from '../../../helpers/l10n';
 
 export default class DetailsHeader extends React.PureComponent {
@@ -48,7 +49,10 @@ export default class DetailsHeader extends React.PureComponent {
       <div className="layout-page-header-panel layout-page-main-header issues-main-header">
         <div className="layout-page-header-panel-inner layout-page-main-header-inner">
           <div className="layout-page-main-inner">
-            <h2 className="pull-left">{qualityGate.name}</h2>
+            <h2 className="pull-left">
+              {qualityGate.name}
+              {qualityGate.isBuiltIn && <BuiltInBadge className="spacer-left" tooltip={true} />}
+            </h2>
             {edit && (
               <div className="pull-right">
                 <button id="quality-gate-rename" onClick={this.handleRenameClick}>
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/List.js b/server/sonar-web/src/main/js/apps/quality-gates/components/List.js
index 8d84ec0e677..f99de57f400 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/List.js
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/List.js
@@ -19,6 +19,7 @@
  */
 import React from 'react';
 import { Link } from 'react-router';
+import BuiltInBadge from './BuiltInBadge';
 import { translate } from '../../../helpers/l10n';
 import { getQualityGateUrl } from '../../../helpers/urls';
 
@@ -35,10 +36,13 @@ export default function List({ organization, qualityGates }) {
           <table>
             <tbody>
               <tr>
-                <td className="text-top">{qualityGate.name}</td>
-                <td className="text-top thin nowrap spacer-left">
+                <td>{qualityGate.name}</td>
+                <td className="thin nowrap spacer-left text-right">
                   {qualityGate.isDefault && (
-                    <span className="badge pull-right">{translate('default')}</span>
+                    <span className="text-middle badge">{translate('default')}</span>
+                  )}
+                  {qualityGate.isBuiltIn && (
+                    <BuiltInBadge className="little-spacer-left" tooltip={false} />
                   )}
                 </td>
               </tr>