Adding Prettier and fixing up eslint version
Issue-ID: SDC-1094
Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd
Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx
index 345c91e..7f361d2 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();
+ }
+ };
- 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>
- );
-
+ 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 156adfc..d01b9d0 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 10d855c..b00ceeb 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 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 1ef9c82..90496c9 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 ea6cf5e..771c0eb 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 9535147..a1e0018 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;
+ }
- 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
- };
-
+ 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 8920568..87ec2d1 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 41128bf..6fbf265 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 b2e7b04..39ceb31 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 c045a37..dcaeaa7 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 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 d8d04f2..c80232d 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 d944cb0..edfe592 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 963226c..f1e8574 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 a85c79e..aebb829 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 239ae45..f0cefdc 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 3f8a833..9796cf8 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 7825825..d1e401f 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 8ae8549..2cc32c2 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 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 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 ArchiveTabSeparator = featureToggle(featureToggleNames.ARCHIVE_ITEM)(
+ Separator
);
-const CatalogHeader = ({activeTab, onTabPress}) => (
- <div className='catalog-header'>
- <CatalogHeaderTabs activeTab={activeTab} onTabPress={onTabPress} />
- </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 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 80d9b07..2f00bf9 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 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 a2852e5..c2eb825 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 dd8b41b..2d22a2d 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 9914ea2..02f8d50 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 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 158282c..bef47d5 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);
+ }
- 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);
- }
-
+ 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 a937c11..2f17867 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;