From 7fdf733a64670fceefc3ded35cfa581e1c458179 Mon Sep 17 00:00:00 2001 From: Einav Weiss Keidar Date: Tue, 20 Mar 2018 14:45:40 +0200 Subject: Adding Prettier and fixing up eslint version Issue-ID: SDC-1094 Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd Signed-off-by: Einav Weiss Keidar --- .../onboarding/onboard/CatalogItemDetails.jsx | 137 ++++++----- .../onboard/CatalogItemDetails.stories.js | 55 +++-- .../src/sdc-app/onboarding/onboard/CatalogList.jsx | 78 ++++-- .../sdc-app/onboarding/onboard/CatalogModal.jsx | 75 +++--- .../onboarding/onboard/DetailsCatalogView.jsx | 88 ++++--- .../src/sdc-app/onboarding/onboard/Onboard.js | 184 +++++++------- .../onboarding/onboard/OnboardActionHelper.js | 219 +++++++++------- .../sdc-app/onboarding/onboard/OnboardConstants.js | 12 +- .../sdc-app/onboarding/onboard/OnboardReducer.js | 26 +- .../src/sdc-app/onboarding/onboard/OnboardView.jsx | 150 +++++------ .../sdc-app/onboarding/onboard/filter/Filter.jsx | 205 ++++++++++----- .../onboarding/onboard/filter/FilterConstants.js | 8 +- .../onboarding/onboard/filter/FilterReducer.js | 22 +- .../OnboardingCatalogActionHelper.js | 131 +++++----- .../OnboardingCatalogConstants.js | 38 +-- .../onboardingCatalog/OnboardingCatalogReducer.js | 19 +- .../onboardingCatalog/OnboardingCatalogUtils.js | 6 +- .../onboardingCatalog/OnboardingCatalogView.jsx | 274 +++++++++++++-------- .../onboard/onboardingCatalog/Tooltip.jsx | 24 +- .../onboard/onboardingCatalog/VSPOverlay.jsx | 68 +++-- .../onboardingCatalog/VendorCatalogReducer.js | 40 +-- .../onboardingCatalog/VendorCatalogView.jsx | 134 ++++++---- .../onboard/onboardingCatalog/VendorItem.jsx | 158 ++++++------ .../onboarding/onboard/workspace/WorkspaceView.jsx | 58 +++-- 24 files changed, 1335 insertions(+), 874 deletions(-) (limited to 'openecomp-ui/src/sdc-app/onboarding/onboard') 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 ( - - - {vendorName && - - {vendorName} - - } - - {name} - - - - {owner && - Owner - {owner} - } - - - ); + let onClick = e => { + e.stopPropagation(); + e.preventDefault(); + if ( + catalogItemData.isOldVersion && + catalogItemData.isOldVersion === migrationStatusMapper.OLD_VERSION + ) { + onMigrate({ softwareProduct: catalogItemData }); + } else { + onSelect(); + } + }; + return ( + + + {vendorName && ( + + + {vendorName} + + + )} + + + {name} + + + + + {owner && Owner - {owner}} + + + ); }; 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', () => ( -
-
-
- - -
-
-
- )); +stories.add('preview', () => ( +
+
+
+ + +
+
+
+)); 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}) => ( -
- -
-
{selectedVendor.name}
-
+const SoftwareProductListHeader = ({ selectedVendor, onBack }) => ( +
+ +
+
{selectedVendor.name}
+
); -const CatalogList = ({children, onAddVLM, onAddVSP, vendorPageOptions}) => ( -
- {vendorPageOptions && } -
- { (onAddVLM || onAddVSP) && -
- {onAddVLM && } - {onAddVSP && onAddVSP()} dataTestId={'catalog-add-new-vsp'} className='vsp-type' title={i18n('CREATE NEW VSP')}/>} -
- } - {children} -
-
+const CatalogList = ({ children, onAddVLM, onAddVSP, vendorPageOptions }) => ( +
+ {vendorPageOptions && ( + + )} +
+ {(onAddVLM || onAddVSP) && ( +
+ {onAddVLM && ( + + )} + {onAddVSP && ( + onAddVSP()} + dataTestId={'catalog-add-new-vsp'} + className="vsp-type" + title={i18n('CREATE NEW VSP')} + /> + )} +
+ )} + {children} +
+
); -const CreateItemTile = ({onClick, dataTestId, title, className = ''}) => { - //TODO check for buttons - return ( -
-
-
{title}
-
- ); +const CreateItemTile = ({ onClick, dataTestId, title, className = '' }) => { + //TODO check for buttons + return ( +
+
+ +
+
{title}
+
+ ); }; 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: + }; + case catalogItemTypes.SOFTWARE_PRODUCT: + return { + title: i18n('New Software Product'), + element: + }; + } + } - getModalDetails(){ - const {modalToShow} = this.props; - switch (modalToShow) { - case catalogItemTypes.LICENSE_MODEL: - return { - title: i18n('New License Model'), - element: - }; - case catalogItemTypes.SOFTWARE_PRODUCT: - return { - title: i18n('New Software Product'), - element: - }; - } - } + render() { + const { modalToShow } = this.props; + const modalDetails = this.getModalDetails(modalToShow); - render(){ - const {modalToShow} = this.props; - const modalDetails = this.getModalDetails(modalToShow); - - return ( - - - {modalDetails && modalDetails.title} - - - { - modalDetails && modalDetails.element - } - - - ); - } + return ( + + + + {modalDetails && modalDetails.title} + + + {modalDetails && modalDetails.element} + + ); + } } 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 => ( + onSelect(item, users)} + /> + )); + } - renderCatalogItems({items, type, filter, onSelect, onMigrate, users}){ - return filterCatalogItemsByType({items, filter}).map(item => - onSelect(item, users)} /> - ); - } - - render() { - let {VLMList, VSPList, users, onAddVSP, onAddVLM, onSelectVLM, onSelectVSP, filter = '', onMigrate} = this.props; - return ( - - {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})} - - ); - } + render() { + let { + VLMList, + VSPList, + users, + onAddVSP, + onAddVLM, + onSelectVLM, + onSelectVSP, + filter = '', + onMigrate + } = this.props; + return ( + + {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 + })} + + ); + } } 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}) => ( -
-
onTabClick(tabsMapping.WORKSPACE)} - data-test-id='onboard-workspace-tab'> - {i18n('WORKSPACE')} -
-
onTabClick(tabsMapping.CATALOG)} - data-test-id='onboard-onboard-tab'> - {i18n('ONBOARD CATALOG')} -
-
+const OnboardHeaderTabs = ({ onTabClick, activeTab }) => ( +
+
onTabClick(tabsMapping.WORKSPACE)} + data-test-id="onboard-workspace-tab"> + {i18n('WORKSPACE')} +
+
onTabClick(tabsMapping.CATALOG)} + data-test-id="onboard-onboard-tab"> + {i18n('ONBOARD CATALOG')} +
+
); -const OnboardHeader = ({onSearch, activeTab, onTabClick, searchValue}) => ( -
- - - -
+const OnboardHeader = ({ onSearch, activeTab, onTabClick, searchValue }) => ( +
+ + + +
); 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 ; - case tabsMapping.CATALOG: - return ; - default: - return ; - } - } + 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 ; + case tabsMapping.CATALOG: + return ; + default: + return ; + } + } - render() { - let {activeTab, onTabClick, onSearch, searchValue} = this.props; - return ( -
- -
- onSearch(value)}/> - {this.renderViewByTab(activeTab)} -
-
- ); - } + render() { + let { activeTab, onTabClick, onSearch, searchValue } = this.props; + return ( +
+ +
+ onSearch(value)} + /> + {this.renderViewByTab(activeTab)} +
+
+ ); + } } 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}) => ( -
- {activeTab === onboardTabsMapping.CATALOG && onDataChanged({itemsType: e.target.value})}> - - - } - {activeTab === onboardTabsMapping.CATALOG && onDataChanged({byVendorView})} - data-test-id='filter-by-vendor-view' value='' /> - } - onDataChanged({recentlyUpdated})} data-test-id='filter-recently-updated' value='' /> +const Filter = ({ + onDataChanged, + data: { + entityTypeVsp, + entityTypeVlm, + roleOwner, + roleContributor, + roleViewer, + procedureNetwork, + procedureManual, + recentlyUpdated, + byVendorView, + itemsType + }, + activeTab +}) => ( +
+ {activeTab === onboardTabsMapping.CATALOG && ( + onDataChanged({ itemsType: e.target.value })}> + + + + )} + {activeTab === onboardTabsMapping.CATALOG && ( + onDataChanged({ byVendorView })} + data-test-id="filter-by-vendor-view" + value="" + /> + )} + onDataChanged({ recentlyUpdated })} + data-test-id="filter-recently-updated" + value="" + /> - - onDataChanged({entityTypeVsp})} data-test-id='filter-type-vsp' value='' /> - onDataChanged({entityTypeVlm})} data-test-id='filter-type-vlm' value='' /> - + + onDataChanged({ entityTypeVsp })} + data-test-id="filter-type-vsp" + value="" + /> + onDataChanged({ entityTypeVlm })} + data-test-id="filter-type-vlm" + value="" + /> + - - onDataChanged({roleOwner})} data-test-id='filter-role-owner' value='' /> - onDataChanged({roleContributor})} data-test-id='filter-role-contributor' value='' /> - onDataChanged({roleViewer})} data-test-id='filter-role-viewr' value='' /> - - - - onDataChanged({procedureNetwork})} data-test-id='filter-procedure-network' value='' /> - onDataChanged({procedureManual})} data-test-id='filter-procedure-manual' value='' /> - + + onDataChanged({ roleOwner })} + data-test-id="filter-role-owner" + value="" + /> + onDataChanged({ roleContributor })} + data-test-id="filter-role-contributor" + value="" + /> + onDataChanged({ roleViewer })} + data-test-id="filter-role-viewr" + value="" + /> + + + + + onDataChanged({ procedureNetwork }) + } + data-test-id="filter-procedure-network" + value="" + /> + onDataChanged({ procedureManual })} + data-test-id="filter-procedure-manual" + value="" + /> +
); 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 ( -
-
{i18n('{name} needs to be updated. Click ‘Checkout & Update’, to proceed.', {name: name})}
-
{i18n('Please don’t forget to submit afterwards')}
-
- ); + return ( +
+
+ {i18n( + '{name} needs to be updated. Click ‘Checkout & Update’, to proceed.', + { name: name } + )} +
+
{i18n('Please don’t forget to submit afterwards')}
+
+ ); } 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 = () => ( -
-); +const Separator = () =>
; -const Tab = ({onTabPress, title, dataTestId, activeTab, tabMapping}) => ( -
onTabPress(tabMapping)} - data-test-id={dataTestId}> - {title} -
+const Tab = ({ onTabPress, title, dataTestId, activeTab, tabMapping }) => ( +
onTabPress(tabMapping)} + data-test-id={dataTestId}> + {title} +
); const ArchiveTab = featureToggle(featureToggleNames.ARCHIVE_ITEM)(Tab); -const ArchiveTabSeparator = featureToggle(featureToggleNames.ARCHIVE_ITEM)(Separator); +const ArchiveTabSeparator = featureToggle(featureToggleNames.ARCHIVE_ITEM)( + Separator +); -const CatalogHeaderTabs = (props) => ( -
- - - - - -
+const CatalogHeaderTabs = props => ( +
+ + + + + +
); -const CatalogHeader = ({activeTab, onTabPress}) => ( -
- -
+const CatalogHeader = ({ activeTab, onTabPress }) => ( +
+ +
); const FilterCatalogHeader = () => ( -
-
-
- {i18n('ONBOARD CATALOG')} -
-
-
+
+
+
+ {i18n('ONBOARD CATALOG')} +
+
+
); - -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 ( - onSelectLicenseModel(item, users, WCTabsMapping.CATALOG)} - onSelectVSP={(item, users) => onSelectSoftwareProduct(item, users, WCTabsMapping.CATALOG)} - filter={searchValue} - onMigrate={onMigrate}/> - ); - case tabsMapping.ACTIVE: - return ( - onSelectLicenseModel(item, users, WCTabsMapping.CATALOG)} - onSelectVSP={(item, users) => onSelectSoftwareProduct(item, users, WCTabsMapping.CATALOG)} - filter={searchValue} - onMigrate={onMigrate}/> - ); - case tabsMapping.BY_VENDOR: - default: - return ( - 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 ( + + onSelectLicenseModel( + item, + users, + WCTabsMapping.CATALOG + ) + } + onSelectVSP={(item, users) => + onSelectSoftwareProduct( + item, + users, + WCTabsMapping.CATALOG + ) + } + filter={searchValue} + onMigrate={onMigrate} + /> + ); + case tabsMapping.ACTIVE: + return ( + + onSelectLicenseModel( + item, + users, + WCTabsMapping.CATALOG + ) + } + onSelectVSP={(item, users) => + onSelectSoftwareProduct( + item, + users, + WCTabsMapping.CATALOG + ) + } + filter={searchValue} + onMigrate={onMigrate} + /> + ); + case tabsMapping.BY_VENDOR: + default: + return ( + + 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 ( -
- {!selectedVendor && onSearch(event.target.value)} - activeTab={activeTab} - onTabPress={tab => onCatalogTabClick(tab)} - searchValue={searchValue}/>} - {this.renderViewByTab(activeTab)} -
- ); - } + render() { + const { + selectedVendor, + catalogActiveTab: activeTab, + onCatalogTabClick, + onSearch, + searchValue + } = this.props; + return ( +
+ {!selectedVendor && ( + onSearch(event.target.value)} + activeTab={activeTab} + onTabPress={tab => onCatalogTabClick(tab)} + searchValue={searchValue} + /> + )} + {this.renderViewByTab(activeTab)} +
+ ); + } } 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 = '') => ( - {msg} + + {msg} + ); -export const TooltipWrapper = ({placement = 'top', className = '', tooltipClassName = '', dataTestId, delayShow = 0, children}) => ( - -
{children}
- +export const TooltipWrapper = ({ + placement = 'top', + className = '', + tooltipClassName = '', + dataTestId, + delayShow = 0, + children +}) => ( + +
+ {children} +
+ ); 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}) => ( -
{ - e.stopPropagation(); - e.preventDefault(); - }}> -
-
-
{i18n('Recently Edited')}
-
- {VSPList.slice(0, 5).map(vsp =>
{ - if (vsp.isOldVersion && vsp.isOldVersion === migrationStatusMapper.OLD_VERSION) { - onMigrate({ - softwareProduct: vsp - }); - } else { - onSelectVSP(vsp); - } - } - }>{i18n(vsp.name)}
)} -
- {VSPList.length > 5 &&
{i18n('See More')}
} -
-
+const VSPOverlay = ({ VSPList, onSelectVSP, onSeeMore, onMigrate }) => ( +
{ + e.stopPropagation(); + e.preventDefault(); + }}> +
+
+
{i18n('Recently Edited')}
+
+ {VSPList.slice(0, 5).map(vsp => ( +
{ + if ( + vsp.isOldVersion && + vsp.isOldVersion === + migrationStatusMapper.OLD_VERSION + ) { + onMigrate({ + softwareProduct: vsp + }); + } else { + onSelectVSP(vsp); + } + }}> + {i18n(vsp.name)} +
+ ))} +
+ {VSPList.length > 5 && ( +
+ {i18n('See More')} +
+ )} +
+
); 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( - - { - filterCatalogItemsByType({items: licenseModelList, filter}).map(vlm => - onSelectVSP(vsp, users)} - shouldShowOverlay={currentOverlay === vlm.id} - onVSPButtonClick={(hasVSP) => onVspOverlayChange(vlm.id === currentOverlay || !hasVSP ? null : vlm)} - onVendorSelect={onVendorSelect} - onMigrate={onMigrate} - vendor={vlm}/>) - } - - ); +const VendorList = ({ + onAddVLM, + onAddVSP, + onSelectVSP, + licenseModelList = [], + vspOverlay: currentOverlay, + onVspOverlayChange, + onVendorSelect, + filter, + onMigrate, + users +}) => { + return ( + + {filterCatalogItemsByType({ items: licenseModelList, filter }).map( + vlm => ( + onSelectVSP(vsp, users)} + shouldShowOverlay={currentOverlay === vlm.id} + onVSPButtonClick={hasVSP => + onVspOverlayChange( + vlm.id === currentOverlay || !hasVSP + ? null + : vlm + ) + } + onVendorSelect={onVendorSelect} + onMigrate={onMigrate} + vendor={vlm} + /> + ) + )} + + ); }; -const SoftwareProductListByVendor = ({onAddVSP, selectedVendor, onVendorSelect, onSelectVSP, onSelectVLM, filter, onMigrate, users}) => { - return( -
- {onAddVSP(selectedVendor.id);}} vendorPageOptions={{selectedVendor, onBack: () => onVendorSelect(false)}}> - onSelectVLM(selectedVendor, users)} - catalogItemTypeClass={catalogItemTypes.LICENSE_MODEL} - onMigrate={onMigrate} - catalogItemData={selectedVendor}/> - { - filterCatalogItemsByType({items: selectedVendor.softwareProductList, filter}).map(vsp => - onSelectVSP(vsp, users)} - catalogItemData={vsp}/> - ) - } - -
- ); +const SoftwareProductListByVendor = ({ + onAddVSP, + selectedVendor, + onVendorSelect, + onSelectVSP, + onSelectVLM, + filter, + onMigrate, + users +}) => { + return ( +
+ { + onAddVSP(selectedVendor.id); + }} + vendorPageOptions={{ + selectedVendor, + onBack: () => onVendorSelect(false) + }}> + onSelectVLM(selectedVendor, users)} + catalogItemTypeClass={catalogItemTypes.LICENSE_MODEL} + onMigrate={onMigrate} + catalogItemData={selectedVendor} + /> + {filterCatalogItemsByType({ + items: selectedVendor.softwareProductList, + filter + }).map(vsp => ( + onSelectVSP(vsp, users)} + catalogItemData={vsp} + /> + ))} + +
+ ); }; class VendorCatalogView extends React.Component { - render() { - let {selectedVendor} = this.props; - return( selectedVendor ? : ); - } + render() { + let { selectedVendor } = this.props; + return selectedVendor ? ( + + ) : ( + + ); + } } 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 ( + onVendorSelect(vendor)}> + + + + {name} + + + + + {shouldShowOverlay && + softwareProductList.length > 0 && ( + onVendorSelect(vendor)} + /> + )} + + + + + + + + + ); + } - render() { - let {vendor, onSelectVSP, shouldShowOverlay, onVendorSelect, onMigrate} = this.props; - let {softwareProductList = [], name} = vendor; - return ( - onVendorSelect(vendor)}> - - - {name} - - - - {shouldShowOverlay && softwareProductList.length > 0 && - onVendorSelect(vendor)} /> - } - - - - - - - - - ); - } - - 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 ( -
-
- {i18n('WORKSPACE')} -
- onSelectLicenseModel(item, users, tabsMapping.WORKSPACE)} - onSelectVSP={(item, users) => onSelectSoftwareProduct(item, users, tabsMapping.WORKSPACE)} - onMigrate={onMigrate} - filter={searchValue} /> -
- ); + return ( +
+
+ {i18n('WORKSPACE')} +
+ + onSelectLicenseModel(item, users, tabsMapping.WORKSPACE) + } + onSelectVSP={(item, users) => + onSelectSoftwareProduct(item, users, tabsMapping.WORKSPACE) + } + onMigrate={onMigrate} + filter={searchValue} + /> +
+ ); }; export default WorkspaceView; -- cgit 1.2.3-korg