diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/onboard')
24 files changed, 1335 insertions, 874 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx index 345c91e01b..7f361d2742 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx @@ -16,71 +16,96 @@ import React from 'react'; import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {catalogItemTypes, migrationStatusMapper} from './onboardingCatalog/OnboardingCatalogConstants.js'; -import {Tile, TileInfo, TileInfoLine, TileFooter, TileFooterCell} from 'sdc-ui/lib/react'; -import {TooltipWrapper} from './onboardingCatalog/Tooltip.jsx'; +import { + catalogItemTypes, + migrationStatusMapper +} from './onboardingCatalog/OnboardingCatalogConstants.js'; +import { + Tile, + TileInfo, + TileInfoLine, + TileFooter, + TileFooterCell +} from 'sdc-ui/lib/react'; +import { TooltipWrapper } from './onboardingCatalog/Tooltip.jsx'; const ITEM_TYPE_MAP = { - [catalogItemTypes.LICENSE_MODEL]: { - headerText: i18n('VLM'), - contentIconName: 'vlm', - color: 'purple' - }, - [catalogItemTypes.SOFTWARE_PRODUCT]: { - headerText: i18n('VSP'), - contentIconName: 'vsp', - color: 'blue' - } + [catalogItemTypes.LICENSE_MODEL]: { + headerText: i18n('VLM'), + contentIconName: 'vlm', + color: 'purple' + }, + [catalogItemTypes.SOFTWARE_PRODUCT]: { + headerText: i18n('VSP'), + contentIconName: 'vsp', + color: 'blue' + } }; -const CatalogItemDetails = ({catalogItemData, catalogItemTypeClass, onSelect, onMigrate}) => { +const CatalogItemDetails = ({ + catalogItemData, + catalogItemTypeClass, + onSelect, + onMigrate +}) => { + let { vendorName, name, owner } = catalogItemData; + let { headerText, color, contentIconName } = ITEM_TYPE_MAP[ + catalogItemTypeClass + ]; - let {vendorName, name, owner} = catalogItemData; - let {headerText, color, contentIconName} = ITEM_TYPE_MAP[catalogItemTypeClass]; - - let onClick = (e) => { - e.stopPropagation(); - e.preventDefault(); - if (catalogItemData.isOldVersion && catalogItemData.isOldVersion === migrationStatusMapper.OLD_VERSION) { - onMigrate({softwareProduct: catalogItemData}); - } else { - onSelect(); - } - }; - - return ( - <Tile - headerText={headerText} - headerColor={color} - iconName={contentIconName} - iconColor={color} - onClick={onClick} - dataTestId={catalogItemTypeClass}> - <TileInfo data-test-id='catalog-item-content'> - {vendorName && - <TileInfoLine type='supertitle'> - <TooltipWrapper className='with-overlay' tooltipClassName='tile-super-info' dataTestId='catalog-item-vendor-name'>{vendorName}</TooltipWrapper> - </TileInfoLine> - } - <TileInfoLine type='title'> - <TooltipWrapper className='with-overlay' tooltipClassName='tile-title-info' dataTestId='catalog-item-name'>{name}</TooltipWrapper> - </TileInfoLine> - </TileInfo> - <TileFooter> - {owner && - <TileFooterCell>Owner - {owner}</TileFooterCell> - } - </TileFooter> - </Tile> - ); + let onClick = e => { + e.stopPropagation(); + e.preventDefault(); + if ( + catalogItemData.isOldVersion && + catalogItemData.isOldVersion === migrationStatusMapper.OLD_VERSION + ) { + onMigrate({ softwareProduct: catalogItemData }); + } else { + onSelect(); + } + }; + return ( + <Tile + headerText={headerText} + headerColor={color} + iconName={contentIconName} + iconColor={color} + onClick={onClick} + dataTestId={catalogItemTypeClass}> + <TileInfo data-test-id="catalog-item-content"> + {vendorName && ( + <TileInfoLine type="supertitle"> + <TooltipWrapper + className="with-overlay" + tooltipClassName="tile-super-info" + dataTestId="catalog-item-vendor-name"> + {vendorName} + </TooltipWrapper> + </TileInfoLine> + )} + <TileInfoLine type="title"> + <TooltipWrapper + className="with-overlay" + tooltipClassName="tile-title-info" + dataTestId="catalog-item-name"> + {name} + </TooltipWrapper> + </TileInfoLine> + </TileInfo> + <TileFooter> + {owner && <TileFooterCell>Owner - {owner}</TileFooterCell>} + </TileFooter> + </Tile> + ); }; CatalogItemDetails.PropTypes = { - catalogItemData: PropTypes.obj, - catalogItemTypeClass: PropTypes.string, - onSelect: PropTypes.func, - onMigrate: PropTypes.func + catalogItemData: PropTypes.obj, + catalogItemTypeClass: PropTypes.string, + onSelect: PropTypes.func, + onMigrate: PropTypes.func }; export default CatalogItemDetails; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.stories.js b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.stories.js index 156adfc5e7..d01b9d0d04 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.stories.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.stories.js @@ -1,33 +1,48 @@ import React from 'react'; -import {storiesOf, action} from '@kadira/storybook'; -import {select, withKnobs} from '@kadira/storybook-addon-knobs'; +import { storiesOf, action } from '@kadira/storybook'; +import { select, withKnobs } from '@kadira/storybook-addon-knobs'; import CatalogItemDetails from './CatalogItemDetails.jsx'; -import {catalogItemTypes, catalogItemStatuses} from './onboardingCatalog/OnboardingCatalogConstants.js'; -import {FinalizedLicenseModelFactory} from 'test-utils/factories/licenseModel/LicenseModelFactories.js'; +import { + catalogItemTypes, + catalogItemStatuses +} from './onboardingCatalog/OnboardingCatalogConstants.js'; +import { FinalizedLicenseModelFactory } from 'test-utils/factories/licenseModel/LicenseModelFactories.js'; const stories = storiesOf('CatalogTiles', module); stories.addDecorator(withKnobs); const types = [ - catalogItemTypes.LICENSE_MODEL, - catalogItemTypes.SOFTWARE_PRODUCT + catalogItemTypes.LICENSE_MODEL, + catalogItemTypes.SOFTWARE_PRODUCT ]; function selectType() { - return select('Item type' , types, types[0]); + return select('Item type', types, types[0]); } -let vlm = {...FinalizedLicenseModelFactory.build({name: 'Test-VLM'}), itemStatus: catalogItemStatuses.DRAFT}; -let certifiedVlm = {...vlm, itemStatus: catalogItemStatuses.CERTIFIED}; +let vlm = { + ...FinalizedLicenseModelFactory.build({ name: 'Test-VLM' }), + itemStatus: catalogItemStatuses.DRAFT +}; +let certifiedVlm = { ...vlm, itemStatus: catalogItemStatuses.CERTIFIED }; -stories - .add('preview', () => ( - <div className='catalog-view'> - <div className='catalog-list'> - <div className='catalog-items'> - <CatalogItemDetails catalogItemData={vlm} catalogItemTypeClass={selectType()} onSelect={action('onSelect')} onMigrate={action('onMigrate')}/> - <CatalogItemDetails catalogItemData={certifiedVlm} catalogItemTypeClass={selectType()} onSelect={action('onSelect')} onMigrate={action('onMigrate')}/> - </div> - </div> - </div> - )); +stories.add('preview', () => ( + <div className="catalog-view"> + <div className="catalog-list"> + <div className="catalog-items"> + <CatalogItemDetails + catalogItemData={vlm} + catalogItemTypeClass={selectType()} + onSelect={action('onSelect')} + onMigrate={action('onMigrate')} + /> + <CatalogItemDetails + catalogItemData={certifiedVlm} + catalogItemTypeClass={selectType()} + onSelect={action('onSelect')} + onMigrate={action('onMigrate')} + /> + </div> + </div> + </div> +)); diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx index 10d855c862..b00ceeb48f 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx @@ -17,37 +17,61 @@ import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; -const SoftwareProductListHeader = ({selectedVendor, onBack}) => ( - <div className='vendor-page-header'> - <SVGIcon name='back' onClick={onBack}/> - <div className='tab-separator' /> - <div className='vendor-name'>{selectedVendor.name}</div> - </div> +const SoftwareProductListHeader = ({ selectedVendor, onBack }) => ( + <div className="vendor-page-header"> + <SVGIcon name="back" onClick={onBack} /> + <div className="tab-separator" /> + <div className="vendor-name">{selectedVendor.name}</div> + </div> ); -const CatalogList = ({children, onAddVLM, onAddVSP, vendorPageOptions}) => ( - <div className='catalog-list'> - {vendorPageOptions && <SoftwareProductListHeader onBack={vendorPageOptions.onBack} selectedVendor={vendorPageOptions.selectedVendor}/>} - <div className='catalog-items'> - { (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> +const CatalogList = ({ children, onAddVLM, onAddVSP, vendorPageOptions }) => ( + <div className="catalog-list"> + {vendorPageOptions && ( + <SoftwareProductListHeader + onBack={vendorPageOptions.onBack} + selectedVendor={vendorPageOptions.selectedVendor} + /> + )} + <div className="catalog-items"> + {(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> ); -const CreateItemTile = ({onClick, dataTestId, title, className = ''}) => { - //TODO check for buttons - return ( - <div className={`create-catalog-item tile ${className}`} onClick={onClick} data-test-id={dataTestId}> - <div className='create-item-plus-icon'><SVGIcon name='plus' /></div> - <div className='create-item-text'>{title}</div> - </div> - ); +const CreateItemTile = ({ onClick, dataTestId, title, className = '' }) => { + //TODO check for buttons + return ( + <div + className={`create-catalog-item tile ${className}`} + onClick={onClick} + data-test-id={dataTestId}> + <div className="create-item-plus-icon"> + <SVGIcon name="plus" /> + </div> + <div className="create-item-text">{title}</div> + </div> + ); }; export default CatalogList; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx index 1ef9c82822..90496c9be4 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx @@ -14,49 +14,52 @@ * permissions and limitations under the License. */ import React from 'react'; -import {modalMapper, catalogItemTypes, catalogItemTypeClasses } from './onboardingCatalog/OnboardingCatalogConstants.js'; +import { + modalMapper, + catalogItemTypes, + catalogItemTypeClasses +} from './onboardingCatalog/OnboardingCatalogConstants.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Modal from 'nfvo-components/modal/Modal.jsx'; import LicenseModelCreation from '../licenseModel/creation/LicenseModelCreation.js'; import SoftwareProductCreation from '../softwareProduct/creation/SoftwareProductCreation.js'; -class CatalogModal extends React.Component{ +class CatalogModal extends React.Component { + getModalDetails() { + const { modalToShow } = this.props; + switch (modalToShow) { + case catalogItemTypes.LICENSE_MODEL: + return { + title: i18n('New License Model'), + element: <LicenseModelCreation /> + }; + case catalogItemTypes.SOFTWARE_PRODUCT: + return { + title: i18n('New Software Product'), + element: <SoftwareProductCreation /> + }; + } + } - getModalDetails(){ - const {modalToShow} = this.props; - switch (modalToShow) { - case catalogItemTypes.LICENSE_MODEL: - return { - title: i18n('New License Model'), - element: <LicenseModelCreation/> - }; - case catalogItemTypes.SOFTWARE_PRODUCT: - return { - title: i18n('New Software Product'), - element: <SoftwareProductCreation/> - }; - } - } + render() { + const { modalToShow } = this.props; + const modalDetails = this.getModalDetails(modalToShow); - render(){ - const {modalToShow} = this.props; - const modalDetails = this.getModalDetails(modalToShow); - - return ( - <Modal - show={Boolean(modalDetails)} - className={`${catalogItemTypeClasses[modalMapper[modalToShow]]}-modal`}> - <Modal.Header> - <Modal.Title>{modalDetails && modalDetails.title}</Modal.Title> - </Modal.Header> - <Modal.Body> - { - modalDetails && modalDetails.element - } - </Modal.Body> - </Modal> - ); - } + return ( + <Modal + show={Boolean(modalDetails)} + className={`${ + catalogItemTypeClasses[modalMapper[modalToShow]] + }-modal`}> + <Modal.Header> + <Modal.Title> + {modalDetails && modalDetails.title} + </Modal.Title> + </Modal.Header> + <Modal.Body>{modalDetails && modalDetails.element}</Modal.Body> + </Modal> + ); + } } export default CatalogModal; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx index ea6cf5e9bc..771c0eb6c1 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx @@ -15,42 +15,66 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import {catalogItemTypes} from './onboardingCatalog/OnboardingCatalogConstants.js'; -import {filterCatalogItemsByType} from './onboardingCatalog/OnboardingCatalogUtils.js'; +import { catalogItemTypes } from './onboardingCatalog/OnboardingCatalogConstants.js'; +import { filterCatalogItemsByType } from './onboardingCatalog/OnboardingCatalogUtils.js'; import CatalogList from './CatalogList.jsx'; import CatalogItemDetails from './CatalogItemDetails.jsx'; -class DetailsCatalogView extends React.Component{ +class DetailsCatalogView extends React.Component { + static propTypes = { + VLMList: PropTypes.array, + VSPList: PropTypes.array, + onSelectVLM: PropTypes.func.isRequired, + onSelectVSP: PropTypes.func.isRequired, + onAddVLM: PropTypes.func, + onAddVSP: PropTypes.func, + filter: PropTypes.string.isRequired + }; - static propTypes = { - VLMList: PropTypes.array, - VSPList: PropTypes.array, - onSelectVLM: PropTypes.func.isRequired, - onSelectVSP: PropTypes.func.isRequired, - onAddVLM: PropTypes.func, - onAddVSP: PropTypes.func, - filter: PropTypes.string.isRequired - }; + renderCatalogItems({ items, type, filter, onSelect, onMigrate, users }) { + return filterCatalogItemsByType({ items, filter }).map(item => ( + <CatalogItemDetails + key={item.id} + catalogItemData={item} + catalogItemTypeClass={type} + onMigrate={onMigrate} + onSelect={() => onSelect(item, users)} + /> + )); + } - renderCatalogItems({items, type, filter, onSelect, onMigrate, users}){ - return filterCatalogItemsByType({items, filter}).map(item => - <CatalogItemDetails - key={item.id} - catalogItemData={item} - catalogItemTypeClass={type} - onMigrate={onMigrate} - onSelect={() => onSelect(item, users)} /> - ); - } - - render() { - let {VLMList, VSPList, users, onAddVSP, onAddVLM, onSelectVLM, onSelectVSP, filter = '', onMigrate} = this.props; - return ( - <CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}> - {this.renderCatalogItems({items: VLMList, type: catalogItemTypes.LICENSE_MODEL, filter, onSelect: onSelectVLM, onMigrate, users})} - {this.renderCatalogItems({items: VSPList, type: catalogItemTypes.SOFTWARE_PRODUCT, filter, onSelect: onSelectVSP, onMigrate, users})} - </CatalogList> - ); - } + render() { + let { + VLMList, + VSPList, + users, + onAddVSP, + onAddVLM, + onSelectVLM, + onSelectVSP, + filter = '', + onMigrate + } = this.props; + return ( + <CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}> + {this.renderCatalogItems({ + items: VLMList, + type: catalogItemTypes.LICENSE_MODEL, + filter, + onSelect: onSelectVLM, + onMigrate, + users + })} + {this.renderCatalogItems({ + items: VSPList, + type: catalogItemTypes.SOFTWARE_PRODUCT, + filter, + onSelect: onSelectVSP, + onMigrate, + users + })} + </CatalogList> + ); + } } export default DetailsCatalogView; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js b/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js index 9535147a46..a1e0018114 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js @@ -14,109 +14,121 @@ * limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import OnboardView from './OnboardView.jsx'; import OnboardingCatalogActionHelper from './onboardingCatalog/OnboardingCatalogActionHelper.js'; 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'; +import { tabsMapping } from './onboardingCatalog/OnboardingCatalogConstants.js'; +import { itemsType } from './filter/FilterConstants.js'; export const mapStateToProps = ({ - onboard: { - onboardingCatalog, - activeTab, - searchValue, - filter - }, - licenseModelList, - users, - archivedLicenseModelList, - archivedSoftwareProductList, - finalizedLicenseModelList, - softwareProductList, - finalizedSoftwareProductList + onboard: { onboardingCatalog, activeTab, searchValue, filter }, + licenseModelList, + users, + archivedLicenseModelList, + archivedSoftwareProductList, + finalizedLicenseModelList, + softwareProductList, + finalizedSoftwareProductList }) => { + const fullSoftwareProducts = softwareProductList + .filter( + vsp => + !finalizedSoftwareProductList.find(fvsp => fvsp.id === vsp.id) + ) + .concat(finalizedSoftwareProductList); - const fullSoftwareProducts = softwareProductList.filter(vsp => - !finalizedSoftwareProductList - .find(fvsp => fvsp.id === vsp.id) - ).concat(finalizedSoftwareProductList); + const reduceLicenseModelList = (accum, vlm) => { + let currentSoftwareProductList = sortByStringProperty( + fullSoftwareProducts.filter(vsp => vsp.vendorId === vlm.id), + 'name' + ); + accum.push({ ...vlm, softwareProductList: currentSoftwareProductList }); + return accum; + }; - const reduceLicenseModelList = (accum, vlm) => { - let currentSoftwareProductList = sortByStringProperty( - fullSoftwareProducts - .filter(vsp => vsp.vendorId === vlm.id), - 'name' - ); - accum.push({...vlm, softwareProductList: currentSoftwareProductList}); - return accum; - }; + licenseModelList = sortByStringProperty( + licenseModelList.reduce(reduceLicenseModelList, []), + 'name' + ); - licenseModelList = sortByStringProperty( - licenseModelList - .reduce(reduceLicenseModelList, []), - 'name' - ); + finalizedLicenseModelList = sortByStringProperty( + finalizedLicenseModelList.reduce(reduceLicenseModelList, []), + 'name' + ); - finalizedLicenseModelList = sortByStringProperty( - finalizedLicenseModelList - .reduce(reduceLicenseModelList, []), - 'name' - ); + const fullLicenseModelList = licenseModelList + .filter( + vlm => !finalizedLicenseModelList.find(fvlm => fvlm.id === vlm.id) + ) + .concat(finalizedLicenseModelList); - const fullLicenseModelList = licenseModelList.filter(vlm => - !finalizedLicenseModelList - .find(fvlm => fvlm.id === vlm.id) - ).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, - searchValue, - vspOverlay, - selectedVendor, - users: users.usersList - }; + 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, + searchValue, + vspOverlay, + selectedVendor, + users: users.usersList + }; }; -const mapActionsToProps = (dispatch) => { - - return { - onSelectLicenseModel({id: licenseModelId, name}, users, tab) { - OnboardActionHelper.loadVLMScreen(dispatch, {id: licenseModelId, name}, users, tab); - }, - onSelectSoftwareProduct(softwareProduct, users, tab) { - OnboardActionHelper.loadVSPScreen(dispatch, softwareProduct, users, tab); - }, - onAddSoftwareProductClick: (vendorId) => SoftwareProductCreationActionHelper.open(dispatch, vendorId), - onAddLicenseModelClick: () => LicenseModelCreationActionHelper.open(dispatch), - onVspOverlayChange: (vendor) => OnboardingCatalogActionHelper.changeVspOverlay(dispatch, vendor), - closeVspOverlay: () => OnboardingCatalogActionHelper.closeVspOverlay(dispatch), - onCatalogTabClick: (tab) => OnboardingCatalogActionHelper.changeActiveTab(dispatch, tab), - onTabClick: (tab) => OnboardActionHelper.changeActiveTab(dispatch, tab), - onSearch: (searchValue) => OnboardActionHelper.changeSearchValue(dispatch, searchValue), - onVendorSelect: (vendor) => OnboardingCatalogActionHelper.onVendorSelect(dispatch, {vendor}), - onMigrate: ({softwareProduct}) => OnboardingCatalogActionHelper.onMigrate(dispatch, softwareProduct) - }; +const mapActionsToProps = dispatch => { + return { + onSelectLicenseModel({ id: licenseModelId, name }, users, tab) { + OnboardActionHelper.loadVLMScreen( + dispatch, + { id: licenseModelId, name }, + users, + tab + ); + }, + onSelectSoftwareProduct(softwareProduct, users, tab) { + OnboardActionHelper.loadVSPScreen( + dispatch, + softwareProduct, + users, + tab + ); + }, + onAddSoftwareProductClick: vendorId => + SoftwareProductCreationActionHelper.open(dispatch, vendorId), + onAddLicenseModelClick: () => + LicenseModelCreationActionHelper.open(dispatch), + onVspOverlayChange: vendor => + OnboardingCatalogActionHelper.changeVspOverlay(dispatch, vendor), + closeVspOverlay: () => + OnboardingCatalogActionHelper.closeVspOverlay(dispatch), + onCatalogTabClick: tab => + OnboardingCatalogActionHelper.changeActiveTab(dispatch, tab), + onTabClick: tab => OnboardActionHelper.changeActiveTab(dispatch, tab), + onSearch: searchValue => + OnboardActionHelper.changeSearchValue(dispatch, searchValue), + 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/OnboardActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js index 892056855f..87ec2d148e 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js @@ -13,97 +13,146 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {tabsMapping, actionTypes} from './OnboardConstants.js'; +import { tabsMapping, actionTypes } from './OnboardConstants.js'; import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js'; -import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js'; +import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js'; import VersionsPageActionHelper from 'sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js'; -import {catalogItemStatuses} from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js'; -import {itemTypes} from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js'; +import { catalogItemStatuses } from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js'; +import { itemTypes } from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js'; import PermissionsActionHelper from 'sdc-app/onboarding/permissions/PermissionsActionHelper.js'; const OnboardActionHelper = { - resetOnboardStore(dispatch) { - dispatch({ - type: actionTypes.RESET_ONBOARD_STORE - }); - }, - changeActiveTab(dispatch, activeTab) { - this.clearSearchValue(dispatch); - dispatch({ - type: actionTypes.CHANGE_ACTIVE_ONBOARD_TAB, - activeTab - }); - }, - changeSearchValue(dispatch, searchValue) { - dispatch({ - type: actionTypes.CHANGE_SEARCH_VALUE, - searchValue - }); - }, - clearSearchValue(dispatch) { - dispatch({ - type: actionTypes.CHANGE_SEARCH_VALUE, - searchValue: '' - }); - }, + resetOnboardStore(dispatch) { + dispatch({ + type: actionTypes.RESET_ONBOARD_STORE + }); + }, + changeActiveTab(dispatch, activeTab) { + this.clearSearchValue(dispatch); + dispatch({ + type: actionTypes.CHANGE_ACTIVE_ONBOARD_TAB, + activeTab + }); + }, + changeSearchValue(dispatch, searchValue) { + dispatch({ + type: actionTypes.CHANGE_SEARCH_VALUE, + searchValue + }); + }, + clearSearchValue(dispatch) { + dispatch({ + type: actionTypes.CHANGE_SEARCH_VALUE, + searchValue: '' + }); + }, - loadVLMScreen(dispatch, {id: licenseModelId, name}, users, tab) { - if (tab === tabsMapping.WORKSPACE) { - VersionsPageActionHelper.fetchVersions(dispatch, {itemId: licenseModelId, itemType: itemTypes.LICENSE_MODEL}).then(({results})=> { - results = results.filter((version) => version.status === catalogItemStatuses.DRAFT); - if (results.length !== 1) { - ScreensHelper.loadScreen(dispatch, { - screen: enums.SCREEN.VERSIONS_PAGE, screenType: screenTypes.LICENSE_MODEL, - props: {licenseModelId, licenseModel: {name}, usersList: users} - }); - } - else { - PermissionsActionHelper.fetchItemUsers(dispatch, {itemId: licenseModelId, allUsers: users}).then(() => - ScreensHelper.loadLandingScreen(dispatch, {screenType: screenTypes.LICENSE_MODEL, props: {licenseModelId, version: results[0]}}) - ); - } - }); - } - if (tab === tabsMapping.CATALOG) { - ScreensHelper.loadScreen(dispatch, { - screen: enums.SCREEN.VERSIONS_PAGE, screenType: screenTypes.LICENSE_MODEL, - props: {licenseModelId, licenseModel: {name}, usersList: users} - }); - } - }, - loadVSPScreen(dispatch, softwareProduct, users, tab) { - let {id: softwareProductId, vendorId: licenseModelId, licensingVersion, name} = softwareProduct; - if (tab === tabsMapping.WORKSPACE) { - VersionsPageActionHelper.fetchVersions(dispatch,{itemId: softwareProductId, itemType: itemTypes.SOFTWARE_PRODUCT}).then(({results})=> { - results = results.filter((version) => version.status === catalogItemStatuses.DRAFT); - if (results.length !== 1) { - ScreensHelper.loadScreen(dispatch, { - screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT, - props: { - softwareProductId, - softwareProduct: {name, vendorId: licenseModelId, licensingVersion}, - usersList: users - } - }); - } - else { - PermissionsActionHelper.fetchItemUsers(dispatch, {itemId: softwareProductId, allUsers: users}).then(() => - ScreensHelper.loadLandingScreen(dispatch, {screenType: screenTypes.SOFTWARE_PRODUCT, props: {softwareProductId, licenseModelId, version: results[0]}}) - ); - } - }); - } - if (tab === tabsMapping.CATALOG) { - ScreensHelper.loadScreen(dispatch, { - screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT, - props: { - softwareProductId, - softwareProduct: {name, vendorId: licenseModelId, licensingVersion}, - usersList: users - } - }); - } - } + loadVLMScreen(dispatch, { id: licenseModelId, name }, users, tab) { + if (tab === tabsMapping.WORKSPACE) { + VersionsPageActionHelper.fetchVersions(dispatch, { + itemId: licenseModelId, + itemType: itemTypes.LICENSE_MODEL + }).then(({ results }) => { + results = results.filter( + version => version.status === catalogItemStatuses.DRAFT + ); + if (results.length !== 1) { + ScreensHelper.loadScreen(dispatch, { + screen: enums.SCREEN.VERSIONS_PAGE, + screenType: screenTypes.LICENSE_MODEL, + props: { + licenseModelId, + licenseModel: { name }, + usersList: users + } + }); + } else { + PermissionsActionHelper.fetchItemUsers(dispatch, { + itemId: licenseModelId, + allUsers: users + }).then(() => + ScreensHelper.loadLandingScreen(dispatch, { + screenType: screenTypes.LICENSE_MODEL, + props: { licenseModelId, version: results[0] } + }) + ); + } + }); + } + if (tab === tabsMapping.CATALOG) { + ScreensHelper.loadScreen(dispatch, { + screen: enums.SCREEN.VERSIONS_PAGE, + screenType: screenTypes.LICENSE_MODEL, + props: { + licenseModelId, + licenseModel: { name }, + usersList: users + } + }); + } + }, + loadVSPScreen(dispatch, softwareProduct, users, tab) { + let { + id: softwareProductId, + vendorId: licenseModelId, + licensingVersion, + name + } = softwareProduct; + if (tab === tabsMapping.WORKSPACE) { + VersionsPageActionHelper.fetchVersions(dispatch, { + itemId: softwareProductId, + itemType: itemTypes.SOFTWARE_PRODUCT + }).then(({ results }) => { + results = results.filter( + version => version.status === catalogItemStatuses.DRAFT + ); + if (results.length !== 1) { + ScreensHelper.loadScreen(dispatch, { + screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE, + screenType: screenTypes.SOFTWARE_PRODUCT, + props: { + softwareProductId, + softwareProduct: { + name, + vendorId: licenseModelId, + licensingVersion + }, + usersList: users + } + }); + } else { + PermissionsActionHelper.fetchItemUsers(dispatch, { + itemId: softwareProductId, + allUsers: users + }).then(() => + ScreensHelper.loadLandingScreen(dispatch, { + screenType: screenTypes.SOFTWARE_PRODUCT, + props: { + softwareProductId, + licenseModelId, + version: results[0] + } + }) + ); + } + }); + } + if (tab === tabsMapping.CATALOG) { + ScreensHelper.loadScreen(dispatch, { + screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE, + screenType: screenTypes.SOFTWARE_PRODUCT, + props: { + softwareProductId, + softwareProduct: { + name, + vendorId: licenseModelId, + licensingVersion + }, + usersList: users + } + }); + } + } }; export default OnboardActionHelper; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardConstants.js b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardConstants.js index 41128bfb11..6fbf265afb 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardConstants.js @@ -16,13 +16,13 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const tabsMapping = { - 'WORKSPACE': 1, - 'CATALOG': 2 + WORKSPACE: 1, + CATALOG: 2 }; export const actionTypes = keyMirror({ - CHANGE_ACTIVE_ONBOARD_TAB: null, - CHANGE_SEARCH_VALUE: null, - RESET_ONBOARD_STORE: null, - VSP_MIGRATION: null + CHANGE_ACTIVE_ONBOARD_TAB: null, + CHANGE_SEARCH_VALUE: null, + RESET_ONBOARD_STORE: null, + VSP_MIGRATION: null }); diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js index b2e7b0479b..39ceb31b34 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js @@ -13,21 +13,27 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes, tabsMapping} from './OnboardConstants.js'; -import {combineReducers} from 'redux'; +import { actionTypes, tabsMapping } from './OnboardConstants.js'; +import { combineReducers } from 'redux'; import onboardingCatalogReducer from './onboardingCatalog/OnboardingCatalogReducer.js'; import filterReducer from './filter/FilterReducer.js'; const onboardReducer = combineReducers({ - onboardingCatalog: onboardingCatalogReducer, - filter: filterReducer, - activeTab: (state = tabsMapping.WORKSPACE, action) => action.type === actionTypes.CHANGE_ACTIVE_ONBOARD_TAB ? action.activeTab : state, - searchValue: (state = '', action) => action.type === actionTypes.CHANGE_SEARCH_VALUE ? action.searchValue : state + onboardingCatalog: onboardingCatalogReducer, + filter: filterReducer, + activeTab: (state = tabsMapping.WORKSPACE, action) => + action.type === actionTypes.CHANGE_ACTIVE_ONBOARD_TAB + ? action.activeTab + : state, + searchValue: (state = '', action) => + action.type === actionTypes.CHANGE_SEARCH_VALUE + ? action.searchValue + : state }); export default (state, action) => { - if (action.type === actionTypes.RESET_ONBOARD_STORE) { - state = undefined; - } - return onboardReducer(state, action); + if (action.type === actionTypes.RESET_ONBOARD_STORE) { + state = undefined; + } + return onboardReducer(state, action); }; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx index c045a3739a..dcaeaa787d 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx @@ -17,89 +17,99 @@ import React from 'react'; import PropTypes from 'prop-types'; import OnboardingCatalogView from './onboardingCatalog/OnboardingCatalogView.jsx'; import WorkspaceView from './workspace/WorkspaceView.jsx'; -import {tabsMapping} from './OnboardConstants.js'; +import { tabsMapping } from './OnboardConstants.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import classnames from 'classnames'; import ExpandableInput from 'nfvo-components/input/ExpandableInput.jsx'; import objectValues from 'lodash/values.js'; -import {catalogItemTypes} from './onboardingCatalog/OnboardingCatalogConstants.js'; +import { catalogItemTypes } from './onboardingCatalog/OnboardingCatalogConstants.js'; import NotificationsView from 'sdc-app/onboarding/userNotifications/NotificationsView.jsx'; import Filter from 'sdc-app/onboarding/onboard/filter/Filter.jsx'; -const OnboardHeaderTabs = ({onTabClick, activeTab}) => ( - <div className='onboard-header-tabs'> - <div - className={classnames('onboard-header-tab', {'active': activeTab === tabsMapping.WORKSPACE })} - onClick={() => onTabClick(tabsMapping.WORKSPACE)} - data-test-id='onboard-workspace-tab'> - {i18n('WORKSPACE')} - </div> - <div - className={classnames('onboard-header-tab', {'active': activeTab === tabsMapping.CATALOG })} - onClick={() => onTabClick(tabsMapping.CATALOG)} - data-test-id='onboard-onboard-tab'> - {i18n('ONBOARD CATALOG')} - </div> - </div> +const OnboardHeaderTabs = ({ onTabClick, activeTab }) => ( + <div className="onboard-header-tabs"> + <div + className={classnames('onboard-header-tab', { + active: activeTab === tabsMapping.WORKSPACE + })} + onClick={() => onTabClick(tabsMapping.WORKSPACE)} + data-test-id="onboard-workspace-tab"> + {i18n('WORKSPACE')} + </div> + <div + className={classnames('onboard-header-tab', { + active: activeTab === tabsMapping.CATALOG + })} + onClick={() => onTabClick(tabsMapping.CATALOG)} + data-test-id="onboard-onboard-tab"> + {i18n('ONBOARD CATALOG')} + </div> + </div> ); -const OnboardHeader = ({onSearch, activeTab, onTabClick, searchValue}) => ( - <div className='onboard-header'> - <OnboardHeaderTabs activeTab={activeTab} onTabClick={onTabClick} /> - <ExpandableInput - onChange={onSearch} - iconType='search' - value={searchValue}/> - <NotificationsView /> - </div> +const OnboardHeader = ({ onSearch, activeTab, onTabClick, searchValue }) => ( + <div className="onboard-header"> + <OnboardHeaderTabs activeTab={activeTab} onTabClick={onTabClick} /> + <ExpandableInput + onChange={onSearch} + iconType="search" + value={searchValue} + /> + <NotificationsView /> + </div> ); class OnboardView extends React.Component { - static propTypes = { - licenseModelList: PropTypes.array, - 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, - onAddLicenseModelClick: PropTypes.func.isRequired, - onAddSoftwareProductClick: PropTypes.func.isRequired, - closeVspOverlay: PropTypes.func.isRequired, - onVspOverlayChange: PropTypes.func.isRequired, - onTabClick: PropTypes.func.isRequired, - onCatalogTabClick: PropTypes.func.isRequired, - onSearch: PropTypes.func.isRequired, - activeTab: PropTypes.number.isRequired, - catalogActiveTab: PropTypes.number.isRequired, - searchValue: PropTypes.string.isRequired, - onMigrate: PropTypes.func.isRequired, - }; - renderViewByTab(activeTab){ - switch (activeTab){ - case tabsMapping.WORKSPACE: - return <WorkspaceView {...this.props} />; - case tabsMapping.CATALOG: - return <OnboardingCatalogView {...this.props} />; - default: - return <WorkspaceView {...this.props} />; - } - } + static propTypes = { + licenseModelList: PropTypes.array, + 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, + onAddLicenseModelClick: PropTypes.func.isRequired, + onAddSoftwareProductClick: PropTypes.func.isRequired, + closeVspOverlay: PropTypes.func.isRequired, + onVspOverlayChange: PropTypes.func.isRequired, + onTabClick: PropTypes.func.isRequired, + onCatalogTabClick: PropTypes.func.isRequired, + onSearch: PropTypes.func.isRequired, + activeTab: PropTypes.number.isRequired, + catalogActiveTab: PropTypes.number.isRequired, + searchValue: PropTypes.string.isRequired, + onMigrate: PropTypes.func.isRequired + }; + renderViewByTab(activeTab) { + switch (activeTab) { + case tabsMapping.WORKSPACE: + return <WorkspaceView {...this.props} />; + case tabsMapping.CATALOG: + return <OnboardingCatalogView {...this.props} />; + default: + return <WorkspaceView {...this.props} />; + } + } - render() { - let {activeTab, onTabClick, onSearch, searchValue} = this.props; - return ( - <div className='catalog-view'> - <Filter/> - <div className='catalog-parts'> - <OnboardHeader activeTab={activeTab} onTabClick={onTabClick} searchValue={searchValue} onSearch={value => onSearch(value)}/> - {this.renderViewByTab(activeTab)} - </div> - </div> - ); - } + render() { + let { activeTab, onTabClick, onSearch, searchValue } = this.props; + return ( + <div className="catalog-view"> + <Filter /> + <div className="catalog-parts"> + <OnboardHeader + activeTab={activeTab} + onTabClick={onTabClick} + searchValue={searchValue} + onSearch={value => onSearch(value)} + /> + {this.renderViewByTab(activeTab)} + </div> + </div> + ); + } } export default OnboardView; 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 d8d04f242b..c80232de0a 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx @@ -14,83 +14,166 @@ * limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import React from 'react'; import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Input from 'nfvo-components/input/validation/Input.jsx'; import Accordion from 'nfvo-components/accordion/Accordion.jsx'; -import {actionTypes} from './FilterConstants.js'; +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'; +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, activeTab}}) => { - return { - data: filter, - activeTab - }; +const mapStateToProps = ({ onboard: { filter, activeTab } }) => { + return { + data: filter, + activeTab + }; }; -const mapActionsToProps = (dispatch) => { - return { - onDataChanged: (deltaData) => - dispatch({ - type: actionTypes.FILTER_DATA_CHANGED, - deltaData - }) - }; +const mapActionsToProps = dispatch => { + return { + onDataChanged: deltaData => + dispatch({ + type: actionTypes.FILTER_DATA_CHANGED, + deltaData + }) + }; }; -const Filter = ({onDataChanged, data: {entityTypeVsp, entityTypeVlm, roleOwner, roleContributor, roleViewer, - 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='' /> +const Filter = ({ + onDataChanged, + data: { + entityTypeVsp, + entityTypeVlm, + roleOwner, + roleContributor, + roleViewer, + 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')}> - <Input label={i18n('VSP')} type='checkbox' checked={entityTypeVsp} onChange={entityTypeVsp => onDataChanged({entityTypeVsp})} data-test-id='filter-type-vsp' value='' /> - <Input label={i18n('VLM')} type='checkbox' checked={entityTypeVlm} onChange={entityTypeVlm => onDataChanged({entityTypeVlm})} data-test-id='filter-type-vlm' value='' /> - </Accordion> + <Accordion title={i18n('ENTITY TYPE')}> + <Input + label={i18n('VSP')} + type="checkbox" + checked={entityTypeVsp} + onChange={entityTypeVsp => onDataChanged({ entityTypeVsp })} + data-test-id="filter-type-vsp" + value="" + /> + <Input + label={i18n('VLM')} + type="checkbox" + checked={entityTypeVlm} + onChange={entityTypeVlm => onDataChanged({ entityTypeVlm })} + data-test-id="filter-type-vlm" + value="" + /> + </Accordion> - <Accordion title={i18n('ROLE')}> - <Input label={i18n('Owner')} type='checkbox' checked={roleOwner} onChange={roleOwner => onDataChanged({roleOwner})} data-test-id='filter-role-owner' value='' /> - <Input label={i18n('Contributer')} type='checkbox' checked={roleContributor} - onChange={roleContributor => onDataChanged({roleContributor})} data-test-id='filter-role-contributor' value='' /> - <Input label={i18n('Viewer')} type='checkbox' checked={roleViewer} onChange={roleViewer => onDataChanged({roleViewer})} data-test-id='filter-role-viewr' value='' /> - </Accordion> - - <Accordion title={i18n('ONBOARDING PROCEDURE')}> - <Input label={i18n('Network Package')} type='checkbox' checked={procedureNetwork} - onChange={procedureNetwork => onDataChanged({procedureNetwork})} data-test-id='filter-procedure-network' value='' /> - <Input label={i18n('Manual')} type='checkbox' checked={procedureManual} - onChange={procedureManual => onDataChanged({procedureManual})} data-test-id='filter-procedure-manual' value='' /> - </Accordion> + <Accordion title={i18n('ROLE')}> + <Input + label={i18n('Owner')} + type="checkbox" + checked={roleOwner} + onChange={roleOwner => onDataChanged({ roleOwner })} + data-test-id="filter-role-owner" + value="" + /> + <Input + label={i18n('Contributer')} + type="checkbox" + checked={roleContributor} + onChange={roleContributor => onDataChanged({ roleContributor })} + data-test-id="filter-role-contributor" + value="" + /> + <Input + label={i18n('Viewer')} + type="checkbox" + checked={roleViewer} + onChange={roleViewer => onDataChanged({ roleViewer })} + data-test-id="filter-role-viewr" + value="" + /> + </Accordion> + + <Accordion title={i18n('ONBOARDING PROCEDURE')}> + <Input + label={i18n('Network Package')} + type="checkbox" + checked={procedureNetwork} + onChange={procedureNetwork => + onDataChanged({ procedureNetwork }) + } + data-test-id="filter-procedure-network" + value="" + /> + <Input + label={i18n('Manual')} + type="checkbox" + checked={procedureManual} + onChange={procedureManual => onDataChanged({ procedureManual })} + data-test-id="filter-procedure-manual" + value="" + /> + </Accordion> </div> ); Filter.PropTypes = { - onDataChanged: PropTypes.func, - data: PropTypes.object + onDataChanged: PropTypes.func, + data: PropTypes.object }; -export default featureToggle(featureToggleNames.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 d944cb02fb..edfe592877 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js @@ -17,10 +17,10 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionTypes = keyMirror({ - FILTER_DATA_CHANGED: null + FILTER_DATA_CHANGED: null }); export const itemsType = { - ACTIVE: '1', - ARCHIVED: '2' -};
\ No newline at end of file + ACTIVE: '1', + ARCHIVED: '2' +}; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js index 963226cd38..f1e857498a 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js @@ -13,16 +13,16 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import {actionTypes} from './FilterConstants.js'; +import { actionTypes } from './FilterConstants.js'; -export default (state = {}, action) => { - switch (action.type) { - case actionTypes.FILTER_DATA_CHANGED: - return { - ...state, - ...action.deltaData - }; - default: - return state; - } +export default (state = {}, action) => { + switch (action.type) { + case actionTypes.FILTER_DATA_CHANGED: + return { + ...state, + ...action.deltaData + }; + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js index a85c79edd9..aebb829a88 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js @@ -15,69 +15,88 @@ */ import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {actionTypes} from './OnboardingCatalogConstants.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes } from './OnboardingCatalogConstants.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; import OnboardActionHelper from '../OnboardActionHelper.js'; import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js'; - function getMessageForMigration(name) { - return ( - <div> - <div>{i18n('{name} needs to be updated. Click ‘Checkout & Update’, to proceed.', {name: name})}</div> - <div>{i18n('Please don’t forget to submit afterwards')}</div> - </div> - ); + return ( + <div> + <div> + {i18n( + '{name} needs to be updated. Click ‘Checkout & Update’, to proceed.', + { name: name } + )} + </div> + <div>{i18n('Please don’t forget to submit afterwards')}</div> + </div> + ); } const OnboardingCatalogActionHelper = { - changeVspOverlay(dispatch, vendor) { - dispatch({ - type: actionTypes.CHANGE_VSP_OVERLAY, - vendorId: vendor ? vendor.id : null - }); - }, - closeVspOverlay(dispatch) { - dispatch({ - type: actionTypes.CLOSE_VSP_OVERLAY - }); - }, - changeActiveTab(dispatch, activeTab) { - OnboardActionHelper.clearSearchValue(dispatch); - dispatch({ - type: actionTypes.CHANGE_ACTIVE_CATALOG_TAB, - activeTab - }); - }, - onVendorSelect(dispatch, {vendor}) { - OnboardActionHelper.clearSearchValue(dispatch); - dispatch({ - type: actionTypes.ONBOARDING_CATALOG_OPEN_VENDOR_PAGE, - selectedVendor: vendor - }); - }, - onMigrate(dispatch, softwareProduct) { - const {name, lockingUser} = softwareProduct; - if (NaN === NaN) { // TODO - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_WARNING, - data: { - title: 'WARNING', - msg: i18n('{name} is locked by user {lockingUser} for self-healing', {name: name, lockingUser: lockingUser}) - } - }); - } else { - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_WARNING, - data:{ - title: 'WARNING', - msg: getMessageForMigration(softwareProduct.name.toUpperCase()), - confirmationButtonText: i18n('Checkout & Update'), - onConfirmed: ()=>SoftwareProductActionHelper.migrateSoftwareProduct(dispatch, {softwareProduct}) - } - }); - } - } + changeVspOverlay(dispatch, vendor) { + dispatch({ + type: actionTypes.CHANGE_VSP_OVERLAY, + vendorId: vendor ? vendor.id : null + }); + }, + closeVspOverlay(dispatch) { + dispatch({ + type: actionTypes.CLOSE_VSP_OVERLAY + }); + }, + changeActiveTab(dispatch, activeTab) { + OnboardActionHelper.clearSearchValue(dispatch); + dispatch({ + type: actionTypes.CHANGE_ACTIVE_CATALOG_TAB, + activeTab + }); + }, + onVendorSelect(dispatch, { vendor }) { + OnboardActionHelper.clearSearchValue(dispatch); + dispatch({ + type: actionTypes.ONBOARDING_CATALOG_OPEN_VENDOR_PAGE, + selectedVendor: vendor + }); + }, + onMigrate(dispatch, softwareProduct) { + const { name, lockingUser } = softwareProduct; + if (NaN === NaN) { + // TODO + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_WARNING, + data: { + title: 'WARNING', + msg: i18n( + '{name} is locked by user {lockingUser} for self-healing', + { + name: name, + lockingUser: lockingUser + } + ) + } + }); + } else { + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_WARNING, + data: { + title: 'WARNING', + msg: getMessageForMigration( + softwareProduct.name.toUpperCase() + ), + confirmationButtonText: i18n('Checkout & Update'), + onConfirmed: () => + SoftwareProductActionHelper.migrateSoftwareProduct( + dispatch, + { + softwareProduct + } + ) + } + }); + } + } }; export default OnboardingCatalogActionHelper; 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 239ae4545f..f0cefdcde3 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js @@ -16,41 +16,41 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const catalogItemTypes = Object.freeze({ - LICENSE_MODEL: 'license-model', - SOFTWARE_PRODUCT: 'software-product' + LICENSE_MODEL: 'license-model', + SOFTWARE_PRODUCT: 'software-product' }); export const catalogItemTypeClasses = { - LICENSE_MODEL: 'license-model-type', - SOFTWARE_PRODUCT: 'software-product-type', - VENDOR: 'vendor-type' + LICENSE_MODEL: 'license-model-type', + SOFTWARE_PRODUCT: 'software-product-type', + VENDOR: 'vendor-type' }; export const catalogItemStatuses = { - DRAFT: 'Draft', - CERTIFIED: 'Certified', - ARCHIVED: 'ARCHIVED' + DRAFT: 'Draft', + CERTIFIED: 'Certified', + ARCHIVED: 'ARCHIVED' }; export const modalMapper = { - 'license-model': 'LICENSE_MODEL', - 'software-product': 'SOFTWARE_PRODUCT' + 'license-model': 'LICENSE_MODEL', + 'software-product': 'SOFTWARE_PRODUCT' }; export const tabsMapping = { - 'BY_VENDOR': 1, - 'ACTIVE': 2, - 'ARCHIVE': 3 + BY_VENDOR: 1, + ACTIVE: 2, + ARCHIVE: 3 }; export const migrationStatusMapper = { - OLD_VERSION: 'True', + OLD_VERSION: 'True' }; export const actionTypes = keyMirror({ - ONBOARDING_CATALOG_OPEN_VENDOR_PAGE: null, - CHANGE_ACTIVE_CATALOG_TAB: null, - CHANGE_SEARCH_VALUE: null, - CHANGE_VSP_OVERLAY: null, - CLOSE_VSP_OVERLAY: null + ONBOARDING_CATALOG_OPEN_VENDOR_PAGE: null, + CHANGE_ACTIVE_CATALOG_TAB: null, + CHANGE_SEARCH_VALUE: null, + CHANGE_VSP_OVERLAY: null, + CLOSE_VSP_OVERLAY: null }); 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 3f8a833074..9796cf8918 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js @@ -13,18 +13,21 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import {actionTypes, tabsMapping} from './OnboardingCatalogConstants.js'; -import {combineReducers} from 'redux'; +import { actionTypes, tabsMapping } from './OnboardingCatalogConstants.js'; +import { combineReducers } from 'redux'; import vendorCatalogReducer from './VendorCatalogReducer.js'; const onboardingCatalogReducer = combineReducers({ - vendorCatalog: vendorCatalogReducer, - activeTab: (state = tabsMapping.ACTIVE, action) => action.type === actionTypes.CHANGE_ACTIVE_CATALOG_TAB ? action.activeTab : state + vendorCatalog: vendorCatalogReducer, + activeTab: (state = tabsMapping.ACTIVE, action) => + action.type === actionTypes.CHANGE_ACTIVE_CATALOG_TAB + ? action.activeTab + : state }); export default (state, action) => { - if (action.type === actionTypes.RESET_ONBOARDING_CATALOG_STORE) { - state = undefined; - } - return onboardingCatalogReducer(state, action); + if (action.type === actionTypes.RESET_ONBOARDING_CATALOG_STORE) { + state = undefined; + } + return onboardingCatalogReducer(state, action); }; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js index 78258255ec..d1e401f57d 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js @@ -14,6 +14,8 @@ * permissions and limitations under the License. */ -export const filterCatalogItemsByType = ({items, filter}) => { - return items.filter(item => item.name.toLowerCase().indexOf(filter.toLowerCase()) > -1); +export const filterCatalogItemsByType = ({ items, filter }) => { + return items.filter( + item => item.name.toLowerCase().indexOf(filter.toLowerCase()) > -1 + ); }; 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 8ae8549688..2cc32c2936 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx @@ -18,120 +18,202 @@ import i18n from 'nfvo-utils/i18n/i18n.js'; import classnames from 'classnames'; import DetailsCatalogView from 'sdc-app/onboarding/onboard/DetailsCatalogView.jsx'; import VendorCatalogView from './VendorCatalogView.jsx'; -import { tabsMapping} from './OnboardingCatalogConstants.js'; -import {tabsMapping as WCTabsMapping} from 'sdc-app/onboarding/onboard/OnboardConstants.js'; +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'; +import { featureToggleNames } from 'sdc-app/features/FeaturesConstants.js'; -const Separator = () => ( - <div className='tab-separator'/> -); +const Separator = () => <div className="tab-separator" />; -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 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 ArchiveTabSeparator = featureToggle(featureToggleNames.ARCHIVE_ITEM)( + Separator +); -const CatalogHeaderTabs = (props) => ( - <div className='catalog-header-tabs'> - <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> +const CatalogHeaderTabs = props => ( + <div className="catalog-header-tabs"> + <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> ); -const CatalogHeader = ({activeTab, onTabPress}) => ( - <div className='catalog-header'> - <CatalogHeaderTabs activeTab={activeTab} onTabPress={onTabPress} /> - </div> +const CatalogHeader = ({ activeTab, onTabPress }) => ( + <div className="catalog-header"> + <CatalogHeaderTabs activeTab={activeTab} onTabPress={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> + <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}); +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, - archivedSoftwareProductList, archivedLicenseModelList} = this.props; + renderViewByTab(activeTab) { + const { + finalizedLicenseModelList: licenseModelList, + fullLicenseModelList, + users, + vspOverlay, + finalizedSoftwareProductList: softwareProductList, + onSelectLicenseModel, + onSelectSoftwareProduct, + onAddLicenseModelClick, + onAddSoftwareProductClick, + onVspOverlayChange, + onVendorSelect, + selectedVendor, + searchValue, + onMigrate, + archivedSoftwareProductList, + archivedLicenseModelList + } = this.props; - switch (activeTab){ - 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} - VSPList={softwareProductList} - users={users} - onAddVLM={onAddLicenseModelClick} - onAddVSP={onAddSoftwareProductClick} - onSelectVLM={(item, users) => onSelectLicenseModel(item, users, WCTabsMapping.CATALOG)} - onSelectVSP={(item, users) => onSelectSoftwareProduct(item, users, WCTabsMapping.CATALOG)} - filter={searchValue} - onMigrate={onMigrate}/> - ); - case tabsMapping.BY_VENDOR: - default: - return ( - <VendorCatalogView - licenseModelList={fullLicenseModelList} - users={users} - onAddVSP={onAddSoftwareProductClick} - onAddVLM={onAddLicenseModelClick} - onSelectVSP={(item, users) => onSelectSoftwareProduct(item, users, WCTabsMapping.CATALOG)} - onSelectVLM={(item, users) => onSelectLicenseModel(item, users, WCTabsMapping.CATALOG)} - vspOverlay={vspOverlay} - onVendorSelect={onVendorSelect} - selectedVendor={selectedVendor} - onVspOverlayChange={onVspOverlayChange} - onMigrate={onMigrate} - filter={searchValue}/> - ); - } - } + switch (activeTab) { + 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} + VSPList={softwareProductList} + users={users} + onAddVLM={onAddLicenseModelClick} + onAddVSP={onAddSoftwareProductClick} + onSelectVLM={(item, users) => + onSelectLicenseModel( + item, + users, + WCTabsMapping.CATALOG + ) + } + onSelectVSP={(item, users) => + onSelectSoftwareProduct( + item, + users, + WCTabsMapping.CATALOG + ) + } + filter={searchValue} + onMigrate={onMigrate} + /> + ); + case tabsMapping.BY_VENDOR: + default: + return ( + <VendorCatalogView + licenseModelList={fullLicenseModelList} + users={users} + onAddVSP={onAddSoftwareProductClick} + onAddVLM={onAddLicenseModelClick} + onSelectVSP={(item, users) => + onSelectSoftwareProduct( + item, + users, + WCTabsMapping.CATALOG + ) + } + onSelectVLM={(item, users) => + onSelectLicenseModel( + item, + users, + WCTabsMapping.CATALOG + ) + } + vspOverlay={vspOverlay} + onVendorSelect={onVendorSelect} + selectedVendor={selectedVendor} + onVspOverlayChange={onVspOverlayChange} + onMigrate={onMigrate} + filter={searchValue} + /> + ); + } + } - render() { - const {selectedVendor, catalogActiveTab: activeTab, onCatalogTabClick, onSearch, searchValue} = this.props; - return ( - <div className='catalog-wrapper'> - {!selectedVendor && <FeaturedCatalogHeader - onSearch={event => onSearch(event.target.value)} - activeTab={activeTab} - onTabPress={tab => onCatalogTabClick(tab)} - searchValue={searchValue}/>} - {this.renderViewByTab(activeTab)} - </div> - ); - } + render() { + const { + selectedVendor, + catalogActiveTab: activeTab, + onCatalogTabClick, + onSearch, + searchValue + } = this.props; + return ( + <div className="catalog-wrapper"> + {!selectedVendor && ( + <FeaturedCatalogHeader + onSearch={event => onSearch(event.target.value)} + activeTab={activeTab} + onTabPress={tab => onCatalogTabClick(tab)} + searchValue={searchValue} + /> + )} + {this.renderViewByTab(activeTab)} + </div> + ); + } } export default OnboardingCatalogView; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx index 80d9b07ac9..2f00bf95ed 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx @@ -19,13 +19,27 @@ import Tooltip from 'react-bootstrap/lib/Tooltip.js'; import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; const tooltip = (msg, className = '') => ( - <Tooltip className={className} id={className}>{msg}</Tooltip> + <Tooltip className={className} id={className}> + {msg} + </Tooltip> ); -export const TooltipWrapper = ({placement = 'top', className = '', tooltipClassName = '', dataTestId, delayShow = 0, children}) => ( - <OverlayTrigger placement={placement} overlay={tooltip(children, tooltipClassName)} delayShow={delayShow}> - <div className={className} data-test-id={dataTestId}>{children}</div> - </OverlayTrigger> +export const TooltipWrapper = ({ + placement = 'top', + className = '', + tooltipClassName = '', + dataTestId, + delayShow = 0, + children +}) => ( + <OverlayTrigger + placement={placement} + overlay={tooltip(children, tooltipClassName)} + delayShow={delayShow}> + <div className={className} data-test-id={dataTestId}> + {children} + </div> + </OverlayTrigger> ); export default tooltip; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx index a2852e5afa..c2eb8250f8 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx @@ -16,36 +16,52 @@ import React from 'react'; import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {migrationStatusMapper} from './OnboardingCatalogConstants.js'; +import { migrationStatusMapper } from './OnboardingCatalogConstants.js'; -const VSPOverlay = ({VSPList, onSelectVSP, onSeeMore, onMigrate}) => ( - <div className='vsp-overlay-wrapper' onClick={(e) => { - e.stopPropagation(); - e.preventDefault(); - }}> - <div className='vsp-overlay-arrow'></div> - <div className='vsp-overlay'> - <div className='vsp-overlay-title'>{i18n('Recently Edited')}</div> - <div className='vsp-overlay-list'> - {VSPList.slice(0, 5).map(vsp => <div key={vsp.id} className='vsp-overlay-detail' onClick={() => { - if (vsp.isOldVersion && vsp.isOldVersion === migrationStatusMapper.OLD_VERSION) { - onMigrate({ - softwareProduct: vsp - }); - } else { - onSelectVSP(vsp); - } - } - }>{i18n(vsp.name)}</div>)} - </div> - {VSPList.length > 5 && <div className='vsp-overlay-see-more' onClick={onSeeMore}>{i18n('See More')}</div>} - </div> - </div> +const VSPOverlay = ({ VSPList, onSelectVSP, onSeeMore, onMigrate }) => ( + <div + className="vsp-overlay-wrapper" + onClick={e => { + e.stopPropagation(); + e.preventDefault(); + }}> + <div className="vsp-overlay-arrow" /> + <div className="vsp-overlay"> + <div className="vsp-overlay-title">{i18n('Recently Edited')}</div> + <div className="vsp-overlay-list"> + {VSPList.slice(0, 5).map(vsp => ( + <div + key={vsp.id} + className="vsp-overlay-detail" + onClick={() => { + if ( + vsp.isOldVersion && + vsp.isOldVersion === + migrationStatusMapper.OLD_VERSION + ) { + onMigrate({ + softwareProduct: vsp + }); + } else { + onSelectVSP(vsp); + } + }}> + {i18n(vsp.name)} + </div> + ))} + </div> + {VSPList.length > 5 && ( + <div className="vsp-overlay-see-more" onClick={onSeeMore}> + {i18n('See More')} + </div> + )} + </div> + </div> ); VSPOverlay.PropTypes = { - VSPList: PropTypes.array, - onSelectVSP: PropTypes.func + VSPList: PropTypes.array, + onSelectVSP: PropTypes.func }; export default VSPOverlay; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js index dd8b41bd22..2d22a2db90 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js @@ -13,26 +13,26 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from './OnboardingCatalogConstants.js'; +import { actionTypes } from './OnboardingCatalogConstants.js'; export default (state = {}, action) => { - switch(action.type) { - case actionTypes.ONBOARDING_CATALOG_OPEN_VENDOR_PAGE: - return { - ...state, - selectedVendor: action.selectedVendor - }; - case actionTypes.CHANGE_VSP_OVERLAY: - return { - ...state, - vspOverlay: action.vendorId - }; - case actionTypes.CLOSE_VSP_OVERLAY: - return { - ...state, - vspOverlay: null - }; - default: - return state; - } + switch (action.type) { + case actionTypes.ONBOARDING_CATALOG_OPEN_VENDOR_PAGE: + return { + ...state, + selectedVendor: action.selectedVendor + }; + case actionTypes.CHANGE_VSP_OVERLAY: + return { + ...state, + vspOverlay: action.vendorId + }; + case actionTypes.CLOSE_VSP_OVERLAY: + return { + ...state, + vspOverlay: null + }; + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx index 9914ea2154..02f8d50c5c 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx @@ -17,58 +17,100 @@ import React from 'react'; import VendorItem from './VendorItem.jsx'; import CatalogList from '../CatalogList.jsx'; import CatalogItemDetails from '../CatalogItemDetails.jsx'; -import {catalogItemTypes} from './OnboardingCatalogConstants.js'; -import {filterCatalogItemsByType} from './OnboardingCatalogUtils.js'; +import { catalogItemTypes } from './OnboardingCatalogConstants.js'; +import { filterCatalogItemsByType } from './OnboardingCatalogUtils.js'; -const VendorList = ({onAddVLM, onAddVSP, onSelectVSP, licenseModelList = [], vspOverlay: currentOverlay, onVspOverlayChange, onVendorSelect, filter, onMigrate, users}) => { - return( - <CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}> - { - filterCatalogItemsByType({items: licenseModelList, filter}).map(vlm => - <VendorItem - key={vlm.id} - onAddVSP={onAddVSP} - onSelectVSP={(vsp) => onSelectVSP(vsp, users)} - shouldShowOverlay={currentOverlay === vlm.id} - onVSPButtonClick={(hasVSP) => onVspOverlayChange(vlm.id === currentOverlay || !hasVSP ? null : vlm)} - onVendorSelect={onVendorSelect} - onMigrate={onMigrate} - vendor={vlm}/>) - } - </CatalogList> - ); +const VendorList = ({ + onAddVLM, + onAddVSP, + onSelectVSP, + licenseModelList = [], + vspOverlay: currentOverlay, + onVspOverlayChange, + onVendorSelect, + filter, + onMigrate, + users +}) => { + return ( + <CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}> + {filterCatalogItemsByType({ items: licenseModelList, filter }).map( + vlm => ( + <VendorItem + key={vlm.id} + onAddVSP={onAddVSP} + onSelectVSP={vsp => onSelectVSP(vsp, users)} + shouldShowOverlay={currentOverlay === vlm.id} + onVSPButtonClick={hasVSP => + onVspOverlayChange( + vlm.id === currentOverlay || !hasVSP + ? null + : vlm + ) + } + onVendorSelect={onVendorSelect} + onMigrate={onMigrate} + vendor={vlm} + /> + ) + )} + </CatalogList> + ); }; -const SoftwareProductListByVendor = ({onAddVSP, selectedVendor, onVendorSelect, onSelectVSP, onSelectVLM, filter, onMigrate, users}) => { - return( - <div> - <CatalogList onAddVSP={()=>{onAddVSP(selectedVendor.id);}} vendorPageOptions={{selectedVendor, onBack: () => onVendorSelect(false)}}> - <CatalogItemDetails - key={selectedVendor.id} - onSelect={() => onSelectVLM(selectedVendor, users)} - catalogItemTypeClass={catalogItemTypes.LICENSE_MODEL} - onMigrate={onMigrate} - catalogItemData={selectedVendor}/> - { - filterCatalogItemsByType({items: selectedVendor.softwareProductList, filter}).map(vsp => - <CatalogItemDetails - key={vsp.id} - catalogItemTypeClass={catalogItemTypes.SOFTWARE_PRODUCT} - onMigrate={onMigrate} - onSelect={() => onSelectVSP(vsp, users)} - catalogItemData={vsp}/> - ) - } - </CatalogList> - </div> - ); +const SoftwareProductListByVendor = ({ + onAddVSP, + selectedVendor, + onVendorSelect, + onSelectVSP, + onSelectVLM, + filter, + onMigrate, + users +}) => { + return ( + <div> + <CatalogList + onAddVSP={() => { + onAddVSP(selectedVendor.id); + }} + vendorPageOptions={{ + selectedVendor, + onBack: () => onVendorSelect(false) + }}> + <CatalogItemDetails + key={selectedVendor.id} + onSelect={() => onSelectVLM(selectedVendor, users)} + catalogItemTypeClass={catalogItemTypes.LICENSE_MODEL} + onMigrate={onMigrate} + catalogItemData={selectedVendor} + /> + {filterCatalogItemsByType({ + items: selectedVendor.softwareProductList, + filter + }).map(vsp => ( + <CatalogItemDetails + key={vsp.id} + catalogItemTypeClass={catalogItemTypes.SOFTWARE_PRODUCT} + onMigrate={onMigrate} + onSelect={() => onSelectVSP(vsp, users)} + catalogItemData={vsp} + /> + ))} + </CatalogList> + </div> + ); }; class VendorCatalogView extends React.Component { - render() { - let {selectedVendor} = this.props; - return( selectedVendor ? <SoftwareProductListByVendor {...this.props}/> : <VendorList {...this.props}/>); - } + render() { + let { selectedVendor } = this.props; + return selectedVendor ? ( + <SoftwareProductListByVendor {...this.props} /> + ) : ( + <VendorList {...this.props} /> + ); + } } export default VendorCatalogView; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx index 158282cc48..bef47d5acf 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx @@ -16,82 +16,102 @@ import React from 'react'; import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {Tile, TileInfo, TileInfoLine, TileFooter, TileFooterCell, Button} from 'sdc-ui/lib/react'; +import { + Tile, + TileInfo, + TileInfoLine, + TileFooter, + TileFooterCell, + Button +} from 'sdc-ui/lib/react'; import VSPOverlay from './VSPOverlay.jsx'; -import {TooltipWrapper} from './Tooltip.jsx'; +import { TooltipWrapper } from './Tooltip.jsx'; class VendorItem extends React.Component { + static PropTypes = { + softwareProductList: PropTypes.array, + vendor: PropTypes.object, + shouldShowOverlay: PropTypes.bool, + onSelectVSP: PropTypes.func, + onVendorSelect: PropTypes.func, + onAddVSP: PropTypes.func, + onVSPButtonClick: PropTypes.func + }; - static PropTypes = { - softwareProductList: PropTypes.array, - vendor: PropTypes.object, - shouldShowOverlay: PropTypes.bool, - onSelectVSP: PropTypes.func, - onVendorSelect: PropTypes.func, - onAddVSP: PropTypes.func, - onVSPButtonClick: PropTypes.func - }; + render() { + let { + vendor, + onSelectVSP, + shouldShowOverlay, + onVendorSelect, + onMigrate + } = this.props; + let { softwareProductList = [], name } = vendor; + return ( + <Tile iconName="vendor" onClick={() => onVendorSelect(vendor)}> + <TileInfo align="center"> + <TileInfoLine type="title"> + <TooltipWrapper + className="with-overlay" + dataTestId="catalog-item-name"> + {name} + </TooltipWrapper> + </TileInfoLine> + <TileInfoLine> + <Button + btnType="outline-rounded" + color="dark-gray" + onClick={e => this.handleVspCountClick(e)} + data-test-id="catalog-vsp-count" + disabled={!softwareProductList.length}> + {i18n('{length} VSPs', { + length: softwareProductList.length + })} + </Button> + {shouldShowOverlay && + softwareProductList.length > 0 && ( + <VSPOverlay + onMigrate={onMigrate} + VSPList={softwareProductList} + onSelectVSP={onSelectVSP} + onSeeMore={() => onVendorSelect(vendor)} + /> + )} + </TileInfoLine> + </TileInfo> + <TileFooter align="center"> + <TileFooterCell dataTestId="catalog-create-new-vsp-from-vendor"> + <Button + btnType="link" + color="primary" + iconName="plusThin" + onClick={e => this.onCreateVspClick(e)}> + {i18n('Create new VSP')} + </Button> + </TileFooterCell> + </TileFooter> + </Tile> + ); + } - render() { - let {vendor, onSelectVSP, shouldShowOverlay, onVendorSelect, onMigrate} = this.props; - let {softwareProductList = [], name} = vendor; - return ( - <Tile - iconName='vendor' - onClick={() => onVendorSelect(vendor)}> - <TileInfo align='center'> - <TileInfoLine type='title'> - <TooltipWrapper className='with-overlay' dataTestId='catalog-item-name'>{name}</TooltipWrapper> - </TileInfoLine> - <TileInfoLine> - <Button - btnType='outline-rounded' - color='dark-gray' - onClick={e => this.handleVspCountClick(e)} - data-test-id='catalog-vsp-count' - disabled={!softwareProductList.length}> - {i18n('{length} VSPs', {length: softwareProductList.length})} - </Button> - {shouldShowOverlay && softwareProductList.length > 0 && - <VSPOverlay - onMigrate={onMigrate} - VSPList={softwareProductList} - onSelectVSP={onSelectVSP} - onSeeMore={() => onVendorSelect(vendor)} /> - } - </TileInfoLine> - </TileInfo> - <TileFooter align='center'> - <TileFooterCell dataTestId='catalog-create-new-vsp-from-vendor'> - <Button - btnType='link' - color='primary' - iconName='plusThin' - onClick={e => this.onCreateVspClick(e)}> - {i18n('Create new VSP')} - </Button> - </TileFooterCell> - </TileFooter> - </Tile> - ); - } - - onCreateVspClick(e) { - e.stopPropagation(); - e.preventDefault(); - const {onAddVSP, vendor: {id}} = this.props; - onAddVSP(id); - } - - handleVspCountClick(e){ - e.stopPropagation(); - e.preventDefault(); - const {onVSPButtonClick, vendor: {softwareProductList}} = this.props; - const hasVSP = Boolean(softwareProductList.length); - onVSPButtonClick(hasVSP); - } + onCreateVspClick(e) { + e.stopPropagation(); + e.preventDefault(); + const { onAddVSP, vendor: { id } } = this.props; + onAddVSP(id); + } + handleVspCountClick(e) { + e.stopPropagation(); + e.preventDefault(); + const { + onVSPButtonClick, + vendor: { softwareProductList } + } = this.props; + const hasVSP = Boolean(softwareProductList.length); + onVSPButtonClick(hasVSP); + } } export default VendorItem; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceView.jsx index a937c11d85..2f17867af1 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceView.jsx @@ -16,31 +16,43 @@ import React from 'react'; import DetailsCatalogView from '../DetailsCatalogView.jsx'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {tabsMapping} from 'sdc-app/onboarding/onboard/OnboardConstants.js'; +import { tabsMapping } from 'sdc-app/onboarding/onboard/OnboardConstants.js'; -const WorkspaceView = (props) => { - let { - licenseModelList, softwareProductList, onAddLicenseModelClick, users, - onAddSoftwareProductClick, onSelectLicenseModel, onSelectSoftwareProduct, searchValue, onMigrate - } = props; +const WorkspaceView = props => { + let { + licenseModelList, + softwareProductList, + onAddLicenseModelClick, + users, + onAddSoftwareProductClick, + onSelectLicenseModel, + onSelectSoftwareProduct, + searchValue, + onMigrate + } = props; - return ( - <div className='catalog-wrapper workspace-view'> - <div className='catalog-header workspace-header'> - {i18n('WORKSPACE')} - </div> - <DetailsCatalogView - VLMList={licenseModelList} - VSPList={softwareProductList} - users={users} - onAddVLM={onAddLicenseModelClick} - onAddVSP={onAddSoftwareProductClick} - onSelectVLM={(item, users) => onSelectLicenseModel(item, users, tabsMapping.WORKSPACE)} - onSelectVSP={(item, users) => onSelectSoftwareProduct(item, users, tabsMapping.WORKSPACE)} - onMigrate={onMigrate} - filter={searchValue} /> - </div> - ); + return ( + <div className="catalog-wrapper workspace-view"> + <div className="catalog-header workspace-header"> + {i18n('WORKSPACE')} + </div> + <DetailsCatalogView + VLMList={licenseModelList} + VSPList={softwareProductList} + users={users} + onAddVLM={onAddLicenseModelClick} + onAddVSP={onAddSoftwareProductClick} + onSelectVLM={(item, users) => + onSelectLicenseModel(item, users, tabsMapping.WORKSPACE) + } + onSelectVSP={(item, users) => + onSelectSoftwareProduct(item, users, tabsMapping.WORKSPACE) + } + onMigrate={onMigrate} + filter={searchValue} + /> + </div> + ); }; export default WorkspaceView; |