From bcfa8fff788f559cb5c56e0f70b5fd71c92dada3 Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Fri, 5 Feb 2021 11:03:27 +0200
Subject: [PATCH] Extracted count badge into a separate component which is
 reused between scoutsuite rules button and monkey events button

---
 .../zerotrust/EventsButton.js                  | 10 +++-------
 .../scoutsuite/ScoutSuiteRuleButton.js         | 12 ++----------
 .../src/components/ui-components/CountBadge.js | 18 ++++++++++++++++++
 3 files changed, 23 insertions(+), 17 deletions(-)
 create mode 100644 monkey/monkey_island/cc/ui/src/components/ui-components/CountBadge.js

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsButton.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsButton.js
index 95fe93c4d..9f36c2b38 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsButton.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsButton.js
@@ -1,10 +1,11 @@
 import React, {Component, Fragment} from 'react';
 import EventsModal from './EventsModal';
-import {Badge, Button} from 'react-bootstrap';
+import {Button} from 'react-bootstrap';
 import * as PropTypes from 'prop-types';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faList } from '@fortawesome/free-solid-svg-icons/faList';
+import CountBadge from '../../ui-components/CountBadge';
 
 export default class EventsButton extends Component {
   constructor(props) {
@@ -33,16 +34,11 @@ export default class EventsButton extends Component {
                    exportFilename={this.props.exportFilename}/>
       <div className="text-center" style={{'display': 'grid'}}>
         <Button variant={'monkey-info'} size={'lg'} onClick={this.show}>
-          <FontAwesomeIcon icon={faList}/> Events {this.createEventsAmountBadge()}
+          <FontAwesomeIcon icon={faList}/> Events <CountBadge count={this.props.event_count} />
         </Button>
       </div>
     </Fragment>;
   }
-
-  createEventsAmountBadge() {
-    const eventsAmountBadgeContent = this.props.event_count > 9 ? '9+' : this.props.event_count;
-    return <Badge variant={'monkey-info-light'}>{eventsAmountBadgeContent}</Badge>;
-  }
 }
 
 EventsButton.propTypes = {
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 4b46c7c3b..b3809ec27 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
@@ -5,6 +5,7 @@ import * as PropTypes from 'prop-types';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faList} from '@fortawesome/free-solid-svg-icons/faList';
 import ScoutSuiteRuleModal from './ScoutSuiteRuleModal';
+import CountBadge from '../../../ui-components/CountBadge';
 
 export default class ScoutSuiteRuleButton extends Component {
   constructor(props) {
@@ -28,7 +29,7 @@ export default class ScoutSuiteRuleButton extends Component {
         <div className="text-center" style={{'display': 'grid'}}>
           <Button variant={'monkey-info'} size={'lg'} onClick={this.toggleModal}>
             <FontAwesomeIcon icon={faList}/> Rules
-            &nbsp;<RuleCountBadge count={this.props.scoutsuite_rules.length}/>
+            &nbsp;<CountBadge count={this.props.scoutsuite_rules.length}/>
           </Button>
         </div>
       </>);
@@ -39,15 +40,6 @@ export default class ScoutSuiteRuleButton extends Component {
   }
 }
 
-function RuleCountBadge(props) {
-  const MAX_RULE_COUNT_TO_SHOW = 9;
-  const TEXT_FOR_LARGE_RULE_COUNT = MAX_RULE_COUNT_TO_SHOW + '+';
-
-  const ruleCountText = props.count > MAX_RULE_COUNT_TO_SHOW ?
-    TEXT_FOR_LARGE_RULE_COUNT : props.count;
-  return <Badge variant={'monkey-info-light'}>{ruleCountText}</Badge>;
-}
-
 ScoutSuiteRuleButton.propTypes = {
   scoutsuite_rules: PropTypes.array,
   scoutsuite_data: PropTypes.object
diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/CountBadge.js b/monkey/monkey_island/cc/ui/src/components/ui-components/CountBadge.js
new file mode 100644
index 000000000..43b2ec518
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/CountBadge.js
@@ -0,0 +1,18 @@
+import {Badge} from 'react-bootstrap';
+import React from 'react';
+
+
+function CountBadge(props) {
+  const TEXT_FOR_LARGE_RULE_COUNT = props.maxCount + '+';
+
+  const ruleCountText = props.count > props.maxCount ?
+    TEXT_FOR_LARGE_RULE_COUNT : props.count;
+
+  return <Badge variant={'monkey-info-light'}>{ruleCountText}</Badge>;
+}
+
+CountBadge.defaultProps = {
+  maxCount: 9
+}
+
+export default CountBadge;