expose ratings and level components (#2257)

5 files changed, 42 insertions, 5 deletions

diff --git a/server/sonar-web/src/main/js/app/utils/exposeLibraries.js b/server/sonar-web/src/main/js/app/utils/exposeLibraries.js
index 24927bd3555..dd928635b8b 100644
--- a/server/sonar-web/src/main/js/app/utils/exposeLibraries.js
+++ b/server/sonar-web/src/main/js/app/utils/exposeLibraries.js
@@ -29,6 +29,9 @@ import ListFooter from '../../components/controls/ListFooter';
 import Tooltip from '../../components/controls/Tooltip';
 import ModalForm from '../../components/common/modal-form';
 import SelectList from '../../components/SelectList';
+import CoverageRating from '../../components/ui/CoverageRating';
+import DuplicationsRating from '../../components/ui/DuplicationsRating';
+import Level from '../../components/ui/Level';
 
 const exposeLibraries = () => {
   window.moment = moment;
@@ -42,6 +45,9 @@ const exposeLibraries = () => {
     Modal,
     Tooltip,
     Select,
+    CoverageRating,
+    DuplicationsRating,
+    Level,
     // deprecated, used in Governance
     ModalForm_deprecated: ModalForm,
     SelectList
diff --git a/server/sonar-web/src/main/js/components/ui/CoverageRating.js b/server/sonar-web/src/main/js/components/ui/CoverageRating.js
index b2edbd48c38..6a88cc2aa63 100644
--- a/server/sonar-web/src/main/js/components/ui/CoverageRating.js
+++ b/server/sonar-web/src/main/js/components/ui/CoverageRating.js
@@ -24,19 +24,21 @@ import { DonutChart } from '../charts/donut-chart';
 const SIZE_TO_WIDTH_MAPPING = {
   small: 16,
   normal: 24,
-  big: 40
+  big: 40,
+  huge: 60
 };
 
 const SIZE_TO_THICKNESS_MAPPING = {
   small: 2,
   normal: 3,
-  big: 3
+  big: 3,
+  huge: 4
 };
 
 export default class CoverageRating extends React.PureComponent {
   props: {
     value: number | string,
-    size?: 'small' | 'normal' | 'big',
+    size?: 'small' | 'normal' | 'big' | 'huge',
     muted?: boolean
   };
 
diff --git a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
index f8b14c03087..77d99af4129 100644
--- a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
+++ b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
@@ -23,6 +23,13 @@
   border-width: 3px;
 }
 
+.duplications-rating-huge {
+  width: 60px;
+  height: 60px;
+  border-width: 4px;
+  border-radius: 30px;
+}
+
 .duplications-rating-muted {
   border-color: #bdbdbd !important;
 }
@@ -64,6 +71,11 @@
   height: 12px;
 }
 
+.duplications-rating-huge.duplications-rating-B:after {
+  width: 18px;
+  height: 18px;
+}
+
 .duplications-rating-C {
   border-color: #eabe06;
 }
@@ -84,6 +96,11 @@
   height: 16px;
 }
 
+.duplications-rating-huge.duplications-rating-C:after {
+  width: 24px;
+  height: 24px;
+}
+
 .duplications-rating-D {
   border-color: #ed7d20;
 }
@@ -104,6 +121,11 @@
   height: 24px;
 }
 
+.duplications-rating-huge.duplications-rating-D:after {
+  width: 36px;
+  height: 36px;
+}
+
 .duplications-rating-E {
   border-color: #d4333f;
 }
@@ -123,3 +145,8 @@
   width: 28px;
   height: 28px;
 }
+
+.duplications-rating-huge.duplications-rating-E:after {
+  width: 42px;
+  height: 42px;
+}
diff --git a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.js b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.js
index d9a4e68fb6a..43bed152558 100644
--- a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.js
+++ b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.js
@@ -26,7 +26,7 @@ import './DuplicationsRating.css';
 export default class DuplicationsRating extends React.PureComponent {
   props: {
     value: number,
-    size?: 'small' | 'normal' | 'big',
+    size?: 'small' | 'normal' | 'big' | 'huge',
     muted?: boolean
   };
 
@@ -40,6 +40,7 @@ export default class DuplicationsRating extends React.PureComponent {
     const className = classNames('duplications-rating', {
       'duplications-rating-small': size === 'small',
       'duplications-rating-big': size === 'big',
+      'duplications-rating-huge': size === 'huge',
       'duplications-rating-muted': muted,
       'duplications-rating-A': inRange(value, 0, 3),
       'duplications-rating-B': inRange(value, 3, 5),
diff --git a/server/sonar-web/src/main/js/components/ui/Level.js b/server/sonar-web/src/main/js/components/ui/Level.js
index 013618021ef..2c75e84e32c 100644
--- a/server/sonar-web/src/main/js/components/ui/Level.js
+++ b/server/sonar-web/src/main/js/components/ui/Level.js
@@ -25,6 +25,7 @@ import './Level.css';
 
 export default class Level extends React.PureComponent {
   static propTypes = {
+    className: PropTypes.string,
     level: PropTypes.oneOf(['ERROR', 'WARN', 'OK']).isRequired,
     small: PropTypes.bool,
     muted: PropTypes.bool
@@ -37,7 +38,7 @@ export default class Level extends React.PureComponent {
 
   render() {
     const formatted = formatMeasure(this.props.level, 'LEVEL');
-    const className = classNames('level', 'level-' + this.props.level, {
+    const className = classNames(this.props.className, 'level', 'level-' + this.props.level, {
       'level-small': this.props.small,
       'level-muted': this.props.muted
     });