diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/onboard')
9 files changed, 158 insertions, 78 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx index 03efa19533..10d855c862 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx @@ -1,17 +1,17 @@ -/*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. +/* + * Copyright © 2016-2018 European Support Limited * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * + * + * http://www.apache.org/licenses/LICENSE-2.0 + * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing - * permissions and limitations under the License. + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. */ import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; @@ -29,10 +29,12 @@ const CatalogList = ({children, onAddVLM, onAddVSP, vendorPageOptions}) => ( <div className='catalog-list'> {vendorPageOptions && <SoftwareProductListHeader onBack={vendorPageOptions.onBack} selectedVendor={vendorPageOptions.selectedVendor}/>} <div className='catalog-items'> - <div className='create-catalog-item-wrapper'> - {onAddVLM && <CreateItemTile onClick={onAddVLM} dataTestId={'catalog-add-new-vlm'} className='vlm-type' title={i18n('CREATE NEW VLM')}/>} - {onAddVSP && <CreateItemTile onClick={() => onAddVSP()} dataTestId={'catalog-add-new-vsp'} className='vsp-type' title={i18n('CREATE NEW VSP')}/>} - </div> + { (onAddVLM || onAddVSP) && + <div className='create-catalog-item-wrapper'> + {onAddVLM && <CreateItemTile onClick={onAddVLM} dataTestId={'catalog-add-new-vlm'} className='vlm-type' title={i18n('CREATE NEW VLM')}/>} + {onAddVSP && <CreateItemTile onClick={() => onAddVSP()} dataTestId={'catalog-add-new-vsp'} className='vsp-type' title={i18n('CREATE NEW VSP')}/>} + </div> + } {children} </div> </div> diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx index 887517238b..ea6cf5e9bc 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx @@ -1,5 +1,5 @@ /*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * Copyright © 2016-2018 European Support Limited * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -27,8 +27,8 @@ class DetailsCatalogView extends React.Component{ VSPList: PropTypes.array, onSelectVLM: PropTypes.func.isRequired, onSelectVSP: PropTypes.func.isRequired, - onAddVLM: PropTypes.func.isRequired, - onAddVSP: PropTypes.func.isRequired, + onAddVLM: PropTypes.func, + onAddVSP: PropTypes.func, filter: PropTypes.string.isRequired }; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js b/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js index a308e1ec5e..9535147a46 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js @@ -1,17 +1,17 @@ -/*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. +/* + * Copyright © 2016-2018 European Support Limited * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * + * + * http://www.apache.org/licenses/LICENSE-2.0 + * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing - * permissions and limitations under the License. + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. */ import {connect} from 'react-redux'; @@ -21,16 +21,20 @@ import OnboardActionHelper from './OnboardActionHelper.js'; import LicenseModelCreationActionHelper from '../licenseModel/creation/LicenseModelCreationActionHelper.js'; import SoftwareProductCreationActionHelper from '../softwareProduct/creation/SoftwareProductCreationActionHelper.js'; import sortByStringProperty from 'nfvo-utils/sortByStringProperty.js'; - +import {tabsMapping} from './onboardingCatalog/OnboardingCatalogConstants.js'; +import {itemsType} from './filter/FilterConstants.js'; export const mapStateToProps = ({ onboard: { onboardingCatalog, activeTab, - searchValue + searchValue, + filter }, licenseModelList, users, + archivedLicenseModelList, + archivedSoftwareProductList, finalizedLicenseModelList, softwareProductList, finalizedSoftwareProductList @@ -69,12 +73,20 @@ export const mapStateToProps = ({ ).concat(finalizedLicenseModelList); let {activeTab: catalogActiveTab, vendorCatalog: {vspOverlay, selectedVendor}} = onboardingCatalog; + if (filter.byVendorView) { + catalogActiveTab = tabsMapping.BY_VENDOR; + } + else if (filter.itemsType && filter.itemsType === itemsType.ARCHIVED) { + catalogActiveTab = tabsMapping.ARCHIVE; + } return { finalizedLicenseModelList, finalizedSoftwareProductList, licenseModelList, softwareProductList, + archivedLicenseModelList, + archivedSoftwareProductList, fullLicenseModelList, activeTab, catalogActiveTab, @@ -105,7 +117,6 @@ const mapActionsToProps = (dispatch) => { onVendorSelect: (vendor) => OnboardingCatalogActionHelper.onVendorSelect(dispatch, {vendor}), onMigrate: ({softwareProduct}) => OnboardingCatalogActionHelper.onMigrate(dispatch, softwareProduct) }; - }; export default connect(mapStateToProps, mapActionsToProps)(OnboardView); diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx index f64c1e55fa..c045a3739a 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx @@ -60,6 +60,8 @@ class OnboardView extends React.Component { softwareProductList: PropTypes.array, finalizedLicenseModelList: PropTypes.array, finalizedSoftwareProductList: PropTypes.array, + archivedSoftwareProductList: PropTypes.array, + archivedLicenseModelList: PropTypes.array, modalToShow: PropTypes.oneOf(objectValues(catalogItemTypes)), onSelectLicenseModel: PropTypes.func.isRequired, onSelectSoftwareProduct: PropTypes.func.isRequired, @@ -80,8 +82,9 @@ class OnboardView extends React.Component { case tabsMapping.WORKSPACE: return <WorkspaceView {...this.props} />; case tabsMapping.CATALOG: - default: return <OnboardingCatalogView {...this.props} />; + default: + return <WorkspaceView {...this.props} />; } } @@ -93,7 +96,7 @@ class OnboardView extends React.Component { <div className='catalog-parts'> <OnboardHeader activeTab={activeTab} onTabClick={onTabClick} searchValue={searchValue} onSearch={value => onSearch(value)}/> {this.renderViewByTab(activeTab)} - </div> + </div> </div> ); } diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx index bf1927d2c5..d8d04f242b 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx @@ -22,10 +22,14 @@ import Input from 'nfvo-components/input/validation/Input.jsx'; import Accordion from 'nfvo-components/accordion/Accordion.jsx'; import {actionTypes} from './FilterConstants.js'; import featureToggle from 'sdc-app/features/featureToggle.js'; +import {featureToggleNames} from 'sdc-app/features/FeaturesConstants.js'; +import {tabsMapping as onboardTabsMapping} from '../OnboardConstants.js'; +import {itemsType as itemsTypeConstants} from './FilterConstants.js'; -const mapStateToProps = ({onboard: {filter}}) => { +const mapStateToProps = ({onboard: {filter, activeTab}}) => { return { - data: filter + data: filter, + activeTab }; }; @@ -40,9 +44,27 @@ const mapActionsToProps = (dispatch) => { }; const Filter = ({onDataChanged, data: {entityTypeVsp, entityTypeVlm, roleOwner, roleContributor, roleViewer, - procedureNetwork, procedureManual, recentlyUpdated}}) => ( - <div className='catalog-filter'> - <Input label={i18n('Recently Updated')} type='checkbox' checked={recentlyUpdated} + procedureNetwork, procedureManual, recentlyUpdated, byVendorView, itemsType}, activeTab}) => ( + <div className='catalog-filter'> + {activeTab === onboardTabsMapping.CATALOG && <Input + type='select' + className='catalog-filter-items-type' + data-test-id='catalog-filter-items-type' + disabled={byVendorView} + value={itemsType} + onChange={e => onDataChanged({itemsType: e.target.value})}> + <option key={itemsTypeConstants.ACTIVE} value={itemsTypeConstants.ACTIVE}>Active Items</option> + <option key={itemsTypeConstants.ARCHIVED} value={itemsTypeConstants.ARCHIVED}>Archived Items</option> + </Input>} + {activeTab === onboardTabsMapping.CATALOG && <Input + label={i18n('By Vendor View')} + type='checkbox' + disabled={itemsType === itemsTypeConstants.ARCHIVED} + checked={byVendorView} + onChange={byVendorView => onDataChanged({byVendorView})} + data-test-id='filter-by-vendor-view' value='' /> + } + <Input label={i18n('Recently Updated')} type='checkbox' checked={recentlyUpdated} onChange={recentlyUpdated => onDataChanged({recentlyUpdated})} data-test-id='filter-recently-updated' value='' /> <Accordion title={i18n('ENTITY TYPE')}> @@ -71,4 +93,4 @@ Filter.PropTypes = { data: PropTypes.object }; -export default featureToggle('ONBOARDING_FILTER')(connect(mapStateToProps, mapActionsToProps)(Filter)); +export default featureToggle(featureToggleNames.FILTER)(connect(mapStateToProps, mapActionsToProps)(Filter)); diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js index 36a415cd4f..d944cb02fb 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js @@ -19,3 +19,8 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionTypes = keyMirror({ FILTER_DATA_CHANGED: null }); + +export const itemsType = { + ACTIVE: '1', + ARCHIVED: '2' +};
\ No newline at end of file diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js index a1bf1b1fc8..239ae4545f 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js @@ -1,17 +1,17 @@ -/*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. +/* + * Copyright © 2016-2018 European Support Limited * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * + * + * http://www.apache.org/licenses/LICENSE-2.0 + * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing - * permissions and limitations under the License. + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. */ import keyMirror from 'nfvo-utils/KeyMirror.js'; @@ -28,7 +28,8 @@ export const catalogItemTypeClasses = { export const catalogItemStatuses = { DRAFT: 'Draft', - CERTIFIED: 'Certified' + CERTIFIED: 'Certified', + ARCHIVED: 'ARCHIVED' }; export const modalMapper = { @@ -38,7 +39,8 @@ export const modalMapper = { export const tabsMapping = { 'BY_VENDOR': 1, - 'ALL': 2 + 'ACTIVE': 2, + 'ARCHIVE': 3 }; export const migrationStatusMapper = { diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js index d7d9d0bd6c..3f8a833074 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js @@ -1,17 +1,17 @@ -/*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. +/* + * Copyright © 2016-2018 European Support Limited * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * + * + * http://www.apache.org/licenses/LICENSE-2.0 + * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing - * permissions and limitations under the License. + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. */ import {actionTypes, tabsMapping} from './OnboardingCatalogConstants.js'; import {combineReducers} from 'redux'; @@ -19,7 +19,7 @@ import vendorCatalogReducer from './VendorCatalogReducer.js'; const onboardingCatalogReducer = combineReducers({ vendorCatalog: vendorCatalogReducer, - activeTab: (state = tabsMapping.ALL, action) => action.type === actionTypes.CHANGE_ACTIVE_CATALOG_TAB ? action.activeTab : state + activeTab: (state = tabsMapping.ACTIVE, action) => action.type === actionTypes.CHANGE_ACTIVE_CATALOG_TAB ? action.activeTab : state }); export default (state, action) => { diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx index 60a5aaeef0..8ae8549688 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx @@ -1,17 +1,17 @@ -/*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. +/* + * Copyright © 2016-2018 European Support Limited * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * + * + * http://www.apache.org/licenses/LICENSE-2.0 + * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing - * permissions and limitations under the License. + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. */ import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; @@ -20,22 +20,32 @@ import DetailsCatalogView from 'sdc-app/onboarding/onboard/DetailsCatalogView.js import VendorCatalogView from './VendorCatalogView.jsx'; import { tabsMapping} from './OnboardingCatalogConstants.js'; import {tabsMapping as WCTabsMapping} from 'sdc-app/onboarding/onboard/OnboardConstants.js'; +import featureToggle from 'sdc-app/features/featureToggle.js'; +import {featureToggleNames} from 'sdc-app/features/FeaturesConstants.js'; + +const Separator = () => ( + <div className='tab-separator'/> +); -const CatalogHeaderTabs = ({onTabPress, activeTab}) => ( +const Tab = ({onTabPress, title, dataTestId, activeTab, tabMapping}) => ( + <div + className={classnames('catalog-header-tab', {'active': activeTab === tabMapping })} + onClick={() => onTabPress(tabMapping)} + data-test-id={dataTestId}> + {title} + </div> +); + +const ArchiveTab = featureToggle(featureToggleNames.ARCHIVE_ITEM)(Tab); +const ArchiveTabSeparator = featureToggle(featureToggleNames.ARCHIVE_ITEM)(Separator); + +const CatalogHeaderTabs = (props) => ( <div className='catalog-header-tabs'> - <div - className={classnames('catalog-header-tab', {'active': activeTab === tabsMapping.ALL })} - onClick={() => onTabPress(tabsMapping.ALL)} - data-test-id='catalog-all-tab'> - {i18n('ALL')} - </div> - <div className='tab-separator'/> - <div - className={classnames('catalog-header-tab', {'active': activeTab === tabsMapping.BY_VENDOR })} - onClick={() => onTabPress(tabsMapping.BY_VENDOR)} - data-test-id='catalog-by-vendor-tab'> - {i18n('BY VENDOR')} - </div> + <Tab {...props} title={i18n('ACTIVE')} dataTestId='catalog-all-tab' tabMapping={tabsMapping.ACTIVE}/> + <Separator/> + <Tab {...props} title={i18n('BY VENDOR')} dataTestId='catalog-header-tab' tabMapping={tabsMapping.BY_VENDOR}/> + <ArchiveTabSeparator/> + <ArchiveTab {...props} title={i18n('ARCHIVE')} dataTestId='catalog-archive-tab' tabMapping={tabsMapping.ARCHIVE}/> </div> ); @@ -45,13 +55,38 @@ const CatalogHeader = ({activeTab, onTabPress}) => ( </div> ); +const FilterCatalogHeader = () => ( + <div className='catalog-header'> + <div className='catalog-header-tabs'> + <div className='catalog-header-tab active'> + {i18n('ONBOARD CATALOG')} + </div> + </div> + </div> +); + + +const FeaturedCatalogHeader = featureToggle(featureToggleNames.FILTER)({AComp: FilterCatalogHeader, BComp: CatalogHeader}); + class OnboardingCatalogView extends React.Component { renderViewByTab(activeTab){ const {finalizedLicenseModelList: licenseModelList, fullLicenseModelList, users, vspOverlay, finalizedSoftwareProductList: softwareProductList, onSelectLicenseModel, onSelectSoftwareProduct, - onAddLicenseModelClick, onAddSoftwareProductClick, onVspOverlayChange, onVendorSelect, selectedVendor, searchValue, onMigrate} = this.props; + onAddLicenseModelClick, onAddSoftwareProductClick, onVspOverlayChange, onVendorSelect, selectedVendor, searchValue, onMigrate, + archivedSoftwareProductList, archivedLicenseModelList} = this.props; switch (activeTab){ - case tabsMapping.ALL: + case tabsMapping.ARCHIVE: + return ( + <DetailsCatalogView + VLMList={archivedLicenseModelList} + VSPList={archivedSoftwareProductList} + users={users} + onSelectVLM={(item, users) => onSelectLicenseModel(item, users, WCTabsMapping.CATALOG)} + onSelectVSP={(item, users) => onSelectSoftwareProduct(item, users, WCTabsMapping.CATALOG)} + filter={searchValue} + onMigrate={onMigrate}/> + ); + case tabsMapping.ACTIVE: return ( <DetailsCatalogView VLMList={licenseModelList} @@ -88,7 +123,7 @@ class OnboardingCatalogView extends React.Component { const {selectedVendor, catalogActiveTab: activeTab, onCatalogTabClick, onSearch, searchValue} = this.props; return ( <div className='catalog-wrapper'> - {!selectedVendor && <CatalogHeader + {!selectedVendor && <FeaturedCatalogHeader onSearch={event => onSearch(event.target.value)} activeTab={activeTab} onTabPress={tab => onCatalogTabClick(tab)} |