archive flow styling fixes

Issue-ID: SDC-1383
Change-Id: I624adfc4eb2a441581583f29dc3d0d3512cb8f4c
Signed-off-by: svishnev <shlomo-stanisla.vishnevetskiy@amdocs.com>

2 files changed, 51 insertions, 26 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
index b61abea520..504de99e12 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
@@ -22,22 +22,36 @@ import Button from 'sdc-ui/lib/react/Button.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import featureToggle from 'sdc-app/features/featureToggle.js';
 
-const DepricateButton = ({ depricateAction, title }) => (
-    <div className="depricate-btn-wrapper">
-        <Button
-            data-test-id="depricate-action-btn"
-            className="depricate-btn"
-            onClick={depricateAction}>
-            {title}
-        </Button>
+const ArchiveRestoreButton = ({ depricateAction, title, isArchived }) => (
+    <div className="deprecate-btn-wrapper">
+        {isArchived ? (
+            <Button
+                data-test-id="deprecate-action-btn"
+                className="depricate-btn"
+                onClick={depricateAction}>
+                {title}
+            </Button>
+        ) : (
+            <SVGIcon
+                name="archiveBox"
+                title={i18n('Archive item')}
+                color="secondary"
+                onClick={depricateAction}
+            />
+        )}
     </div>
 );
 
-const FeatureDepricatedButton = featureToggle('ARCHIVE_ITEM')(DepricateButton);
+const ArchivedTitle = () => (
+    <div className="archived-title">{i18n('Archived')}</div>
+);
+
+const FeatureDepricatedButton = featureToggle('ARCHIVE_ITEM')(
+    ArchiveRestoreButton
+);
 
 const VersionPageTitle = ({
     itemName,
-    depricatedTitle,
     isArchived,
     onRestore,
     onArchive,
@@ -45,11 +59,13 @@ const VersionPageTitle = ({
 }) => {
     return (
         <div className="version-page-header">
-            <div className="versions-page-title">{`${i18n(
-                'Available Versions'
-            )} - ${itemName}  ${depricatedTitle}`}</div>
+            <div className="versions-page-title">
+                {`${i18n('Available Versions')} - ${itemName}`}
+                {isArchived ? <ArchivedTitle /> : null}
+            </div>
             {isCollaborator && (
                 <FeatureDepricatedButton
+                    isArchived={isArchived}
                     depricateAction={
                         isArchived ? () => onRestore() : () => onArchive()
                     }
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js
index 606b17b897..afbb056686 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js
@@ -20,7 +20,12 @@ import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
 import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
+import {
+    enums,
+    screenTypes,
+    onboardingActions
+} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { notificationActions } from 'nfvo-components/notification/NotificationsConstants.js';
 
 const VersionsPageActionHelper = {
     fetchVersions(dispatch, { itemType, itemId }) {
@@ -89,20 +94,24 @@ const VersionsPageActionHelper = {
         this.selectVersion(dispatch, { version });
     },
 
-    archiveItem(dispatch, itemId) {
-        ItemsHelper.archiveItem(itemId).then(() => {
-            ScreensHelper.loadScreen(dispatch, {
-                screen: enums.SCREEN.ONBOARDING_CATALOG
-            });
-        });
+    async archiveItem(dispatch, itemId) {
+        await ItemsHelper.archiveItem(itemId);
+        dispatch(onboardingActions.updateItemArchivedStatus(true));
+        dispatch(
+            notificationActions.showSuccess({
+                message: i18n('Item successfully archived')
+            })
+        );
     },
 
-    restoreItemFromArchive(dispatch, itemId) {
-        ItemsHelper.restoreItem(itemId).then(() => {
-            ScreensHelper.loadScreen(dispatch, {
-                screen: enums.SCREEN.ONBOARDING_CATALOG
-            });
-        });
+    async restoreItemFromArchive(dispatch, itemId) {
+        await ItemsHelper.restoreItem(itemId);
+        dispatch(onboardingActions.updateItemArchivedStatus(false));
+        dispatch(
+            notificationActions.showSuccess({
+                message: i18n('Item successfully restored')
+            })
+        );
     }
 };