SONAR-10486 Offer built-in projects badges in SonarQube

4 files changed, 120 insertions, 14 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/badges/BadgesModal.tsx b/server/sonar-web/src/main/js/apps/overview/badges/BadgesModal.tsx
index ebea71b75a6..e666f5cb5c3 100644
--- a/server/sonar-web/src/main/js/apps/overview/badges/BadgesModal.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/badges/BadgesModal.tsx
@@ -32,6 +32,7 @@ import { Button, ResetButtonLink } from '../../../components/ui/buttons';
 interface Props {
   branchLike?: BranchLike;
   metrics: { [key: string]: Metric };
+  onSonarCloud: boolean;
   project: string;
 }
 
@@ -69,6 +70,9 @@ export default class BadgesModal extends React.PureComponent<Props, State> {
     const { selectedType, badgeOptions } = this.state;
     const header = translate('overview.badges.title');
     const fullBadgeOptions = { project, ...badgeOptions, ...getBranchLikeQuery(branchLike) };
+    const badges = this.props.onSonarCloud
+      ? [BadgeType.measure, BadgeType.qualityGate, BadgeType.marketing]
+      : [BadgeType.measure, BadgeType.qualityGate];
     return (
       <div className="overview-meta-card">
         <Button className="js-project-badges" onClick={this.handleOpen}>
@@ -82,7 +86,7 @@ export default class BadgesModal extends React.PureComponent<Props, State> {
             <div className="modal-body">
               <p className="huge-spacer-bottom">{translate('overview.badges.description')}</p>
               <div className="badges-list spacer-bottom">
-                {[BadgeType.measure, BadgeType.qualityGate, BadgeType.marketing].map(type => (
+                {badges.map(type => (
                   <BadgeButton
                     key={type}
                     onClick={this.handleSelectBadge}
diff --git a/server/sonar-web/src/main/js/apps/overview/badges/__tests__/BadgesModal-test.tsx b/server/sonar-web/src/main/js/apps/overview/badges/__tests__/BadgesModal-test.tsx
index d77c077d6d9..6d0bfbc613b 100644
--- a/server/sonar-web/src/main/js/apps/overview/badges/__tests__/BadgesModal-test.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/badges/__tests__/BadgesModal-test.tsx
@@ -27,14 +27,26 @@ jest.mock('../../../../helpers/urls', () => ({
   getHostUrl: () => 'host'
 }));
 
-it('should display the modal after click', () => {
-  const shortBranch: ShortLivingBranch = {
-    isMain: false,
-    mergeBranch: '',
-    name: 'branch-6.6',
-    type: BranchType.SHORT
-  };
-  const wrapper = shallow(<BadgesModal branchLike={shortBranch} metrics={{}} project="foo" />);
+const shortBranch: ShortLivingBranch = {
+  isMain: false,
+  mergeBranch: '',
+  name: 'branch-6.6',
+  type: BranchType.SHORT
+};
+
+it('should display the modal after click on sonar cloud', () => {
+  const wrapper = shallow(
+    <BadgesModal branchLike={shortBranch} metrics={{}} onSonarCloud={true} project="foo" />
+  );
+  expect(wrapper).toMatchSnapshot();
+  click(wrapper.find('Button'));
+  expect(wrapper.find('Modal')).toMatchSnapshot();
+});
+
+it('should display the modal after click on sonar qube', () => {
+  const wrapper = shallow(
+    <BadgesModal branchLike={shortBranch} metrics={{}} onSonarCloud={false} project="foo" />
+  );
   expect(wrapper).toMatchSnapshot();
   click(wrapper.find('Button'));
   expect(wrapper.find('Modal')).toMatchSnapshot();
diff --git a/server/sonar-web/src/main/js/apps/overview/badges/__tests__/__snapshots__/BadgesModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/badges/__tests__/__snapshots__/BadgesModal-test.tsx.snap
index 00776343f26..4c9ba3fb24b 100644
--- a/server/sonar-web/src/main/js/apps/overview/badges/__tests__/__snapshots__/BadgesModal-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/overview/badges/__tests__/__snapshots__/BadgesModal-test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should display the modal after click 1`] = `
+exports[`should display the modal after click on sonar cloud 1`] = `
 <div
   className="overview-meta-card"
 >
@@ -13,7 +13,7 @@ exports[`should display the modal after click 1`] = `
 </div>
 `;
 
-exports[`should display the modal after click 2`] = `
+exports[`should display the modal after click on sonar cloud 2`] = `
 <Modal
   contentLabel="overview.badges.title"
   onRequestClose={[Function]}
@@ -92,3 +92,89 @@ exports[`should display the modal after click 2`] = `
   </footer>
 </Modal>
 `;
+
+exports[`should display the modal after click on sonar qube 1`] = `
+<div
+  className="overview-meta-card"
+>
+  <Button
+    className="js-project-badges"
+    onClick={[Function]}
+  >
+    overview.badges.get_badge
+  </Button>
+</div>
+`;
+
+exports[`should display the modal after click on sonar qube 2`] = `
+<Modal
+  contentLabel="overview.badges.title"
+  onRequestClose={[Function]}
+>
+  <header
+    className="modal-head"
+  >
+    <h2>
+      overview.badges.title
+    </h2>
+  </header>
+  <div
+    className="modal-body"
+  >
+    <p
+      className="huge-spacer-bottom"
+    >
+      overview.badges.description
+    </p>
+    <div
+      className="badges-list spacer-bottom"
+    >
+      <BadgeButton
+        key="measure"
+        onClick={[Function]}
+        selected={true}
+        type="measure"
+        url="host/api/project_badges/measure?branch=branch-6.6&project=foo&metric=alert_status"
+      />
+      <BadgeButton
+        key="quality_gate"
+        onClick={[Function]}
+        selected={false}
+        type="quality_gate"
+        url="host/api/project_badges/quality_gate?branch=branch-6.6&project=foo"
+      />
+    </div>
+    <p
+      className="text-center note huge-spacer-bottom"
+    >
+      overview.badges.measure.description
+    </p>
+    <BadgeParams
+      className="big-spacer-bottom"
+      metrics={Object {}}
+      options={
+        Object {
+          "color": "white",
+          "metric": "alert_status",
+        }
+      }
+      type="measure"
+      updateOptions={[Function]}
+    />
+    <CodeSnippet
+      isOneLine={true}
+      snippet="host/api/project_badges/measure?branch=branch-6.6&project=foo&metric=alert_status"
+    />
+  </div>
+  <footer
+    className="modal-foot"
+  >
+    <ResetButtonLink
+      className="js-modal-close"
+      onClick={[Function]}
+    >
+      close
+    </ResetButtonLink>
+  </footer>
+</Modal>
+`;
diff --git a/server/sonar-web/src/main/js/apps/overview/meta/Meta.tsx b/server/sonar-web/src/main/js/apps/overview/meta/Meta.tsx
index edca9b4c4cb..ef5991a2a12 100644
--- a/server/sonar-web/src/main/js/apps/overview/meta/Meta.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/meta/Meta.tsx
@@ -104,10 +104,14 @@ export default class Meta extends React.PureComponent<Props> {
           {organizationsEnabled && <MetaOrganizationKey organization={component.organization} />}
         </div>
 
-        {onSonarCloud &&
-          isProject &&
+        {isProject &&
           !isPrivate && (
-            <BadgesModal branchLike={branchLike} metrics={metrics} project={component.key} />
+            <BadgesModal
+              branchLike={branchLike}
+              metrics={metrics}
+              onSonarCloud={onSonarCloud}
+              project={component.key}
+            />
           )}
       </div>
     );