From 87dafeb440bf2924f616675c1e5e47ce61e3c12f Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Wed, 13 Jan 2021 17:57:54 +0200
Subject: [PATCH] Refactored scoutsuite rule count badge readability.

---
 .../zerotrust/scoutsuite/ScoutSuiteRuleButton.js  | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/scoutsuite/ScoutSuiteRuleButton.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/scoutsuite/ScoutSuiteRuleButton.js
index 97c5f861a..c22c54a96 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/scoutsuite/ScoutSuiteRuleButton.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/scoutsuite/ScoutSuiteRuleButton.js
@@ -27,18 +27,27 @@ export default class ScoutSuiteRuleButton extends Component {
                              hideCallback={this.toggleModal} />
         <div className="text-center" style={{'display': 'grid'}}>
           <Button variant={'monkey-info'} size={'lg'} onClick={this.toggleModal}>
-            <FontAwesomeIcon icon={faList}/> ScoutSuite rules {this.createRuleCountBadge()}
+            <FontAwesomeIcon icon={faList}/> ScoutSuite rules
+            &nbsp;<RuleCountBadge count={this.props.scoutsuite_rules.length}/>
           </Button>
         </div>
       </>);
   }
 
   createRuleCountBadge() {
-    const ruleCount = this.props.scoutsuite_rules.length > 9 ? '9+' : this.props.scoutsuite_rules.length;
-    return <Badge variant={'monkey-info-light'}>{ruleCount}</Badge>;
+
   }
 }
 
+function RuleCountBadge(props) {
+  const maxRuleCountToShow = 9;
+  const textForMoreThanMaxRuleCount = maxRuleCountToShow + '+';
+
+  const ruleCountText = props.count > maxRuleCountToShow ?
+    textForMoreThanMaxRuleCount : props.count;
+  return <Badge variant={'monkey-info-light'}>{ruleCountText}</Badge>;
+}
+
 ScoutSuiteRuleButton.propTypes = {
   scoutsuite_rules: PropTypes.array,
   scoutsuite_data: PropTypes.object