1 files changed, 54 insertions, 37 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx
index c2eb8250f8..fa71f67759 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx
@@ -18,46 +18,63 @@ import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import { migrationStatusMapper } from './OnboardingCatalogConstants.js';
 
-const VSPOverlay = ({ VSPList, onSelectVSP, onSeeMore, onMigrate }) => (
-    <div
-        className="vsp-overlay-wrapper"
-        onClick={e => {
-            e.stopPropagation();
-            e.preventDefault();
-        }}>
-        <div className="vsp-overlay-arrow" />
-        <div className="vsp-overlay">
-            <div className="vsp-overlay-title">{i18n('Recently Edited')}</div>
-            <div className="vsp-overlay-list">
-                {VSPList.slice(0, 5).map(vsp => (
-                    <div
-                        key={vsp.id}
-                        className="vsp-overlay-detail"
-                        onClick={() => {
-                            if (
-                                vsp.isOldVersion &&
-                                vsp.isOldVersion ===
-                                    migrationStatusMapper.OLD_VERSION
-                            ) {
-                                onMigrate({
-                                    softwareProduct: vsp
-                                });
-                            } else {
-                                onSelectVSP(vsp);
-                            }
-                        }}>
-                        {i18n(vsp.name)}
+const VspOverlayItem = ({ vsp, onClick }) => {
+    const handleClick = () => onClick(vsp);
+    return (
+        <div key={vsp.id} className="vsp-overlay-detail" onClick={handleClick}>
+            {i18n(vsp.name)}
+        </div>
+    );
+};
+
+VspOverlayItem.propTypes = {
+    vsp: PropTypes.object,
+    onClick: PropTypes.func
+};
+
+const VSPOverlay = ({ VSPList, onSelectVSP, onSeeMore, onMigrate }) => {
+    const handleSelect = vsp => {
+        if (
+            vsp.isOldVersion &&
+            vsp.isOldVersion === migrationStatusMapper.OLD_VERSION
+        ) {
+            onMigrate({
+                softwareProduct: vsp
+            });
+        } else {
+            onSelectVSP(vsp);
+        }
+    };
+    return (
+        <div
+            className="vsp-overlay-wrapper"
+            onClick={e => {
+                e.stopPropagation();
+                e.preventDefault();
+            }}>
+            <div className="vsp-overlay-arrow" />
+            <div className="vsp-overlay">
+                <div className="vsp-overlay-title">
+                    {i18n('Recently Edited')}
+                </div>
+                <div className="vsp-overlay-list">
+                    {VSPList.slice(0, 5).map(vsp => (
+                        <VspOverlayItem
+                            key={vsp.id}
+                            onClick={handleSelect}
+                            vsp={vsp}
+                        />
+                    ))}
+                </div>
+                {VSPList.length > 5 && (
+                    <div className="vsp-overlay-see-more" onClick={onSeeMore}>
+                        {i18n('See More')}
                     </div>
-                ))}
+                )}
             </div>
-            {VSPList.length > 5 && (
-                <div className="vsp-overlay-see-more" onClick={onSeeMore}>
-                    {i18n('See More')}
-                </div>
-            )}
         </div>
-    </div>
-);
+    );
+};
 
 VSPOverlay.PropTypes = {
     VSPList: PropTypes.array,