From fa538a14ed825d417dcbc0c846b98c1b512aa4dd Mon Sep 17 00:00:00 2001 From: svishnev Date: Thu, 31 May 2018 15:01:00 +0300 Subject: archive flow styling fixes Issue-ID: SDC-1383 Change-Id: I624adfc4eb2a441581583f29dc3d0d3512cb8f4c Signed-off-by: svishnev --- openecomp-ui/package.json | 2 +- .../scss/components/_versionController.scss | 8 +++-- .../resources/scss/modules/_versionsPage.scss | 23 +++++++++++- .../modules/onboardingCatalog/_catalogFilter.scss | 3 ++ .../src/nfvo-components/loader/LoaderConstants.js | 4 +-- .../nfvo-components/notification/Notifications.js | 4 +-- openecomp-ui/src/nfvo-utils/i18n/en.json | 3 ++ .../src/sdc-app/onboarding/OnboardingConstants.js | 14 ++++++-- .../src/sdc-app/onboarding/OnboardingReducers.js | 13 +++++++ .../onboarding/versionsPage/VersionsPage.jsx | 42 +++++++++++++++------- .../versionsPage/VersionsPageActionHelper.js | 35 +++++++++++------- openecomp-ui/yarn.lock | 6 ++-- 12 files changed, 116 insertions(+), 41 deletions(-) (limited to 'openecomp-ui') 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 }) => ( -
- +const ArchiveRestoreButton = ({ depricateAction, title, isArchived }) => ( +
+ {isArchived ? ( + + ) : ( + + )}
); -const FeatureDepricatedButton = featureToggle('ARCHIVE_ITEM')(DepricateButton); +const ArchivedTitle = () => ( +
{i18n('Archived')}
+); + +const FeatureDepricatedButton = featureToggle('ARCHIVE_ITEM')( + ArchiveRestoreButton +); const VersionPageTitle = ({ itemName, - depricatedTitle, isArchived, onRestore, onArchive, @@ -45,11 +59,13 @@ const VersionPageTitle = ({ }) => { return (
-
{`${i18n( - 'Available Versions' - )} - ${itemName} ${depricatedTitle}`}
+
+ {`${i18n('Available Versions')} - ${itemName}`} + {isArchived ? : null} +
{isCollaborator && ( 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" -- cgit 1.2.3-korg