archive flow styling fixes

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

12 files changed, 116 insertions, 41 deletions

diff --git a/openecomp-ui/package.json b/openecomp-ui/package.json
index 28b6b521e7..8bab189f61 100644
--- a/openecomp-ui/package.json
+++ b/openecomp-ui/package.json
@@ -50,7 +50,7 @@
         "react-sortable": "^1.2.0",
         "react-transition-group": "^2.3.1",
         "redux": "^3.7.2",
-        "sdc-ui": "1.6.43",
+        "sdc-ui": "1.6.46",
         "uuid-js": "^0.7.5",
         "validator": "^4.3.0"
     },
diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss
index 94a8a6498f..98771f1dbd 100644
--- a/openecomp-ui/resources/scss/components/_versionController.scss
+++ b/openecomp-ui/resources/scss/components/_versionController.scss
@@ -69,11 +69,13 @@
 				}
 			}
 			.depricated-item-status {
+				@extend .body-3;
 				color: $white;
-				background-color: $gray;
+				background-color: $dark-purple;
 				margin-left: 10px;
-				padding: 5px 8px;
-				border-radius: 5px; 
+				padding: 1px 10px;
+				align-self: center;
+				border-radius: 3px; 
 			}
 		}
 
diff --git a/openecomp-ui/resources/scss/modules/_versionsPage.scss b/openecomp-ui/resources/scss/modules/_versionsPage.scss
index d99532cb20..5651c89032 100644
--- a/openecomp-ui/resources/scss/modules/_versionsPage.scss
+++ b/openecomp-ui/resources/scss/modules/_versionsPage.scss
@@ -51,11 +51,32 @@
 			text-transform: uppercase;
 			margin-bottom: 29px;
 			color: $blue;
+			display: flex;
+			.archived-title {
+				@extend .body-3;
+				color: $white;
+				background-color: $dark-purple;
+				margin-left: 20px;
+				border-radius: 3px;
+				padding: 1px 10px;
+				align-self: center;
+				text-transform: none;
+			}
 		}
-		.depricate-btn-wrapper {
+		.deprecate-btn-wrapper {
 			display: flex;
 			justify-content: flex-end;
 			margin-bottom: 10px;
+			align-self: center;
+			.svg-icon-wrapper {
+				&:hover {
+					fill: $light-blue;
+				}
+				.svg-icon {
+					width: 24px;
+					height: 24px;
+				}
+			}
 		}
 	}		
 	.versions-page-permissions-view-wrapper {
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
index a7a7628249..e3fc6a9143 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
@@ -11,6 +11,9 @@
         width: 100%;
         background-color: $tlv-light-gray;
         height: 34px;
+        color: $blue;
+        font-weight: bolder;
+        text-transform: uppercase;        
     }
     .sdc-accordion {
         padding-left: 18px;
diff --git a/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js b/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js
index e367a74352..3f2e1c1f78 100644
--- a/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js
+++ b/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js
@@ -19,6 +19,6 @@ export const actionTypes = keyMirror({
     SHOW: null,
     HIDE: null,
 
-    SEND_REQUEST: null,
-    RECEIVE_RESPONSE: null
+    SEND_REQUEST: 'SEND_REQUEST',
+    RECEIVE_RESPONSE: 'RECEIVE_RESPONSE'
 });
diff --git a/openecomp-ui/src/nfvo-components/notification/Notifications.js b/openecomp-ui/src/nfvo-components/notification/Notifications.js
index 046412a68d..d1ece699a8 100644
--- a/openecomp-ui/src/nfvo-components/notification/Notifications.js
+++ b/openecomp-ui/src/nfvo-components/notification/Notifications.js
@@ -17,7 +17,7 @@
 import React from 'react';
 import { Portal, Notification } from 'sdc-ui/lib/react/';
 import { connect } from 'react-redux';
-import { removeNotification } from './NotificationsConstants.js';
+import { notificationActions } from './NotificationsConstants.js';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 export const mapStateToProps = ({ popupNotifications = [] }) => {
@@ -29,7 +29,7 @@ export const mapStateToProps = ({ popupNotifications = [] }) => {
 const mapActionToProps = dispatch => {
     return {
         onClick: item => {
-            dispatch(removeNotification(item));
+            dispatch(notificationActions.removeNotification(item));
         }
     };
 };
diff --git a/openecomp-ui/src/nfvo-utils/i18n/en.json b/openecomp-ui/src/nfvo-utils/i18n/en.json
index 131c3572fe..ce6f7ea4bf 100644
--- a/openecomp-ui/src/nfvo-utils/i18n/en.json
+++ b/openecomp-ui/src/nfvo-utils/i18n/en.json
@@ -363,6 +363,9 @@
   "Active Items": "Active Items",
   "Archived Items": "Archived Items",
   "This is the current version of the VSP, as a result of healing": "This is the current version of the VSP, as a result of healing",
+  "Archive item": "Archive item",
+  "Item successfully Archived": "Item successfully Archived",
+  "Item successfully Restored": "Item successfully Restored",
   
   "VendorSoftwareProduct": "VSP",
   "VendorSoftwareProduct/category": "Category",
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js b/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js
index 36054397d9..8e07765122 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js
@@ -18,11 +18,12 @@ import keyMirror from 'nfvo-utils/KeyMirror.js';
 export const DATE_FORMAT = 'MM/DD/YYYY';
 
 export const actionTypes = keyMirror({
-    SET_CURRENT_SCREEN: null,
+    SET_CURRENT_SCREEN: 'SET_CURRENT_SCREEN',
     SET_CURRENT_LICENSE_MODEL: null,
     SET_CURRENT_SCREEN_VERSION: null,
-    UPDATE_CURRENT_SCREEN_PROPS: null,
-    UPDATE_ITEM_STATUS: null
+    UPDATE_CURRENT_SCREEN_PROPS: 'UPDATE_CURRENT_SCREEN_PROPS',
+    UPDATE_ITEM_STATUS: 'UPDATE_ITEM_STATUS',
+    UPDATE_ITEM_ARCHIVE_STATUS: 'UPDATE_ITEM_ARCHIVE_STATUS'
 });
 
 export const screenTypes = keyMirror({
@@ -117,3 +118,10 @@ export const enums = keyMirror({
             breadcrumbsEnum.SOFTWARE_PRODUCT_COMPONENT_IMAGES
     }
 });
+
+export const onboardingActions = {
+    updateItemArchivedStatus: isArchived => ({
+        type: actionTypes.UPDATE_ITEM_ARCHIVE_STATUS,
+        isArchived
+    })
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js b/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js
index 9abae2d1c1..bb711cd749 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js
@@ -163,6 +163,19 @@ const currentScreen = (
             };
         }
 
+        case actionTypes.UPDATE_ITEM_ARCHIVE_STATUS: {
+            const props = {
+                ...state.props,
+                status: action.isArchived
+                    ? catalogItemStatuses.ARCHIVED
+                    : catalogItemStatuses.ACTIVE
+            };
+            return {
+                ...state,
+                props
+            };
+        }
+
         default:
             return state;
     }
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')
+            })
+        );
     }
 };
 
diff --git a/openecomp-ui/yarn.lock b/openecomp-ui/yarn.lock
index 708cfb48ca..90765cf785 100644
--- a/openecomp-ui/yarn.lock
+++ b/openecomp-ui/yarn.lock
@@ -9475,9 +9475,9 @@ scss-tokenizer@^0.2.3:
     js-base64 "^2.1.8"
     source-map "^0.4.2"
 
-sdc-ui@1.6.43:
-  version "1.6.43"
-  resolved "https://registry.yarnpkg.com/sdc-ui/-/sdc-ui-1.6.43.tgz#c069337e977f769e21a237b5e139feed46bc6daa"
+sdc-ui@1.6.46:
+  version "1.6.46"
+  resolved "https://registry.yarnpkg.com/sdc-ui/-/sdc-ui-1.6.46.tgz#c9a759fd5d407774d7e805b09705353d51b869a1"
   dependencies:
     "@angular/common" "~2.4.8"
     "@angular/core" "~2.4.8"