Delete VSP - Onboarding UI support for VSP deletion

Issue-ID: SDC-3952
Signed-off-by: KrupaNagabhushan <krupa.nagabhushan@est.tech>
Change-Id: Ib7258fe7002f5db03ccec84e935adfe0d217bfad
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
index 6be0565..95c7530 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
@@ -21,22 +21,36 @@
 import { Button } from 'onap-ui-react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
-const ArchiveRestoreButton = ({ depricateAction, title, isArchived }) => (
+const ArchiveRestoreButton = ({
+    deprecateAction,
+    title,
+    isArchived,
+    deleteAction
+}) => (
     <div className="deprecate-btn-wrapper">
+        ,
         {isArchived ? (
-            <Button
-                data-test-id="deprecate-action-btn"
-                className="depricate-btn"
-                onClick={depricateAction}>
-                {title}
-            </Button>
+            <div>
+                <Button
+                    data-test-id="deprecate-action-btn"
+                    className="deprecate-btn"
+                    onClick={deprecateAction}>
+                    {title}
+                </Button>
+                <Button
+                    data-test-id="delete-action-btn"
+                    className="deprecate-btn"
+                    onClick={deleteAction}>
+                    {i18n('DELETE')}
+                </Button>
+            </div>
         ) : (
             <SVGIcon
                 data-test-id="deprecate-action-btn"
                 name="archiveBox"
                 title={i18n('Archive')}
                 color="secondary"
-                onClick={depricateAction}
+                onClick={deprecateAction}
             />
         )}
     </div>
@@ -50,6 +64,7 @@
     itemName,
     isArchived,
     onRestore,
+    onDelete,
     onArchive,
     isCollaborator
 }) => {
@@ -62,9 +77,10 @@
             {isCollaborator && (
                 <ArchiveRestoreButton
                     isArchived={isArchived}
-                    depricateAction={
+                    deprecateAction={
                         isArchived ? () => onRestore() : () => onArchive()
                     }
+                    deleteAction={isArchived ? () => onDelete() : null}
                     title={i18n(isArchived ? 'RESTORE' : 'ARCHIVE')}
                 />
             )}
@@ -95,7 +111,8 @@
             isManual,
             isArchived,
             onArchive,
-            onRestore
+            onRestore,
+            onDelete
         } = this.props;
         const depricatedTitle = isArchived ? i18n('(Archived)') : '';
         return (
@@ -106,6 +123,7 @@
                     onArchive={onArchive}
                     isArchived={isArchived}
                     onRestore={onRestore}
+                    onDelete={onDelete}
                     isCollaborator={isCollaborator}
                 />
                 <PermissionsView