archive flow styling fixes
Issue-ID: SDC-1383
Change-Id: I624adfc4eb2a441581583f29dc3d0d3512cb8f4c
Signed-off-by: svishnev <shlomo-stanisla.vishnevetskiy@amdocs.com>
diff --git a/openecomp-ui/package.json b/openecomp-ui/package.json
index 28b6b52..8bab189 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 94a8a64..98771f1 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 d99532c..5651c89 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 a7a7628..e3fc6a9 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 e367a74..3f2e1c1 100644
--- a/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js
+++ b/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js
@@ -19,6 +19,6 @@
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 046412a..d1ece69 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 @@
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 131c357..ce6f7ea 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 3605439..8e07765 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js
@@ -18,11 +18,12 @@
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 @@
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 9abae2d..bb711cd 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js
@@ -163,6 +163,19 @@
};
}
+ 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 b61abea..504de99 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 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 @@
}) => {
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 606b17b..afbb056 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 { 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 @@
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 708cfb4..90765cf 100644
--- a/openecomp-ui/yarn.lock
+++ b/openecomp-ui/yarn.lock
@@ -9475,9 +9475,9 @@
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"