refactor: Refactor Remediation component

Author: leSamo

src/Components/SmartComponents/Remediation/Remediation.js

@@ -1,57 +1,30 @@
-import React, { Component } from 'react';
+import React from 'react';
 import propTypes from 'prop-types';
 import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux';
 import RemediationButton from '@redhat-cloud-services/frontend-components-remediations/RemediationButton';
-import { AnsibeTowerIcon }  from '@patternfly/react-icons';
+import { AnsibeTowerIcon } from '@patternfly/react-icons';
 import routerParams from '@redhat-cloud-services/frontend-components-utilities/RouterParams';
 import { connect } from 'react-redux';
 import messages from '../../../Messages';
 import { FormattedMessage } from 'react-intl';
 import { mergeObjectPropertyBy } from '../../../Helpers/MiscHelper';
-class Remediation extends Component {
-    static propTypes = {
-        cves: propTypes.oneOfType([
-            propTypes.array,
-            propTypes.string
-        ]),
-        systems: propTypes.oneOfType([
-            propTypes.array,
-            propTypes.string
-        ]),
-        addNotification: propTypes.func,
-        manyRules: propTypes.bool
-    };
-
-    shouldComponentUpdate(nextProps) {
-        if (nextProps.cves !== this.props.cves) {
-            return true;
-        }
-
-        if (nextProps.systems !== this.props.systems) {
-            return true;
-        }
 
-        return false;
-    }
+const Remediation = ({ cves, systems, manyRules, addNotification: dispatchNotification }) => {
+    const baseIssueTemplate = (cve, system) => ({
+        id: `vulnerabilities:${cve}`,
+        description: cve,
+        systems: [system]
+    });
 
-    baseIssueTemplate = (cve, system) => (
-        {
-            id: `vulnerabilities:${cve}`,
-            description: cve,
-            systems: [system]
-        }
-    )
-
-    remediationProvider = (cvesProvider = [], systemsProvider = [], manyRules = false) => {
+    const remediationProvider = (cvesProvider = [], systemsProvider = [], manyRules = false) => {
         let cves = [].concat(cvesProvider);
         let systems = [].concat(systemsProvider);
         let issues = [];
 
         // CVE Details page where cves === 1 and systems > 1...N and cves linked rules > 1...N
         if (manyRules && cves.length === 1) {
-
             issues = systems.reduce((prev, { id: systemID, cve: cveID, rule }) => {
-                let issue = this.baseIssueTemplate(cveID, systemID);
+                let issue = baseIssueTemplate(cveID, systemID);
 
                 if (rule) {
                     issue.id = `${issue.id}:${rule?.rule?.rule_id}`;
@@ -61,44 +34,53 @@ class Remediation extends Component {
             }, []);
 
             issues = mergeObjectPropertyBy(issues, 'systems');
-
         }
 
         // System cves where systems === 1 & cves > 1..N and cves linked rules === 1
         if (!manyRules && systems?.length === 1) {
             const [systemID] = systems;
 
             issues = cves.reduce((acc, { id: cveID, rules }) => {
-                let issue = this.baseIssueTemplate(cveID, systemID);
+                let issue = baseIssueTemplate(cveID, systemID);
 
                 if (rules?.rule_id) {
                     issue.id = `${issue.id}:${rules.rule_id}`;
                 }
 
                 return [...acc, issue];
             }, []);
-
         }
 
         return cves.length && systems.length ? { issues } : false;
     };
 
-    render() {
-        const { cves, systems, manyRules, addNotification: dispatchNotification } = this.props;
-        return (
-            <div>
-                <RemediationButton
-                    dataProvider={() => this.remediationProvider(cves, systems, manyRules)}
-                    isDisabled={cves.length === 0 || systems.length === 0}
-                    onRemediationCreated={result => dispatchNotification(result.getNotification())}
-                >
-                    <AnsibeTowerIcon size="sm" color={'var(--pf-global--BackgroundColor--100)'} />
-                    &nbsp;{<FormattedMessage {...messages.remediateLabel} />}
-                </RemediationButton>
-            </div>
-        );
-    }
-}
+    return (
+        <div>
+            <RemediationButton
+                dataProvider={() => remediationProvider(cves, systems, manyRules)}
+                isDisabled={cves.length === 0 || systems.length === 0}
+                onRemediationCreated={result => dispatchNotification(result.getNotification())}
+            >
+                <AnsibeTowerIcon size="sm" color={'var(--pf-global--BackgroundColor--100)'} />
+                &nbsp;
+                <FormattedMessage {...messages.remediateLabel} />
+            </RemediationButton>
+        </div>
+    );
+};
+
+Remediation.propTypes = {
+    cves: propTypes.oneOfType([
+        propTypes.array,
+        propTypes.string
+    ]),
+    systems: propTypes.oneOfType([
+        propTypes.array,
+        propTypes.string
+    ]),
+    addNotification: propTypes.func,
+    manyRules: propTypes.bool
+};
 
 export default connect(
     null,