From ea5e43cc939f2010b4f4c97cb8d346c91348fbba Mon Sep 17 00:00:00 2001 From: svishnev Date: Sun, 15 Apr 2018 09:06:57 +0300 Subject: Onboarding filter Issue-ID: SDC-1187 Change-Id: I74ce464c8ee4060c381b094d26d1ded270cdf40d Signed-off-by: svishnev --- .../onboard/CatalogItemDetails.stories.js | 10 +- .../onboarding/onboard/DetailsCatalogView.jsx | 45 ++++-- .../src/sdc-app/onboarding/onboard/Onboard.js | 27 +++- .../onboarding/onboard/OnboardActionHelper.js | 39 +++-- .../src/sdc-app/onboarding/onboard/OnboardView.jsx | 21 ++- .../sdc-app/onboarding/onboard/filter/Filter.jsx | 165 ++++----------------- .../onboard/filter/FilterActionHelper.js | 60 ++++++++ .../onboarding/onboard/filter/FilterComponents.jsx | 145 ++++++++++++++++++ .../onboarding/onboard/filter/FilterConstants.js | 8 +- .../onboarding/onboard/filter/FilterMiddleware.js | 32 ++++ .../onboarding/onboard/filter/FilterReducer.js | 13 +- .../onboarding/onboard/filter/ItemsReducer.js | 24 +++ .../onboardingCatalog/OnboardingCatalogView.jsx | 4 +- .../OnboardingCatalogViewWithFilter.jsx | 147 ++++++++++++++++++ .../onboard/onboardingCatalog/VendorItem.jsx | 4 +- .../onboard/workspace/WorkspaceViewWithFilter.jsx | 57 +++++++ 16 files changed, 619 insertions(+), 182 deletions(-) create mode 100644 openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterActionHelper.js create mode 100644 openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterComponents.jsx create mode 100644 openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterMiddleware.js create mode 100644 openecomp-ui/src/sdc-app/onboarding/onboard/filter/ItemsReducer.js create mode 100644 openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogViewWithFilter.jsx create mode 100644 openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceViewWithFilter.jsx (limited to 'openecomp-ui/src/sdc-app/onboarding/onboard') 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 d01b9d0d04..c0de0eeb79 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.stories.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.stories.js @@ -2,11 +2,9 @@ import React from 'react'; 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 { catalogItemTypes } from './onboardingCatalog/OnboardingCatalogConstants.js'; import { FinalizedLicenseModelFactory } from 'test-utils/factories/licenseModel/LicenseModelFactories.js'; +import { versionStatus } from 'sdc-app/common/helpers/ItemsHelperConstants.js'; const stories = storiesOf('CatalogTiles', module); stories.addDecorator(withKnobs); @@ -22,9 +20,9 @@ function selectType() { let vlm = { ...FinalizedLicenseModelFactory.build({ name: 'Test-VLM' }), - itemStatus: catalogItemStatuses.DRAFT + itemStatus: versionStatus.DRAFT }; -let certifiedVlm = { ...vlm, itemStatus: catalogItemStatuses.CERTIFIED }; +let certifiedVlm = { ...vlm, itemStatus: versionStatus.CERTIFIED }; stories.add('preview', () => (
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx index 771c0eb6c1..b535595355 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx @@ -13,6 +13,7 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ +import isEqual from 'lodash/isEqual.js'; import React from 'react'; import PropTypes from 'prop-types'; import { catalogItemTypes } from './onboardingCatalog/OnboardingCatalogConstants.js'; @@ -20,6 +21,28 @@ import { filterCatalogItemsByType } from './onboardingCatalog/OnboardingCatalogU import CatalogList from './CatalogList.jsx'; import CatalogItemDetails from './CatalogItemDetails.jsx'; +function renderCatalogItems({ + items, + type, + filter, + onSelect, + onMigrate, + users +}) { + const filteredItems = items.length + ? filterCatalogItemsByType({ items, filter }) + : []; + return filteredItems.map(item => ( + onSelect(item, users)} + /> + )); +} + class DetailsCatalogView extends React.Component { static propTypes = { VLMList: PropTypes.array, @@ -31,18 +54,14 @@ class DetailsCatalogView extends React.Component { filter: PropTypes.string.isRequired }; - renderCatalogItems({ items, type, filter, onSelect, onMigrate, users }) { - return filterCatalogItemsByType({ items, filter }).map(item => ( - onSelect(item, users)} - /> - )); + shouldComponentUpdate(nextProps) { + const shouldUpdate = + isEqual(nextProps.VLMList, this.props.VLMList) && + isEqual(nextProps.VSPList, this.props.VSPList) && + isEqual(nextProps.users, this.props.users) && + isEqual(nextProps.filter, this.props.filter); + return !shouldUpdate; } - render() { let { VLMList, @@ -57,7 +76,7 @@ class DetailsCatalogView extends React.Component { } = this.props; return ( - {this.renderCatalogItems({ + {renderCatalogItems({ items: VLMList, type: catalogItemTypes.LICENSE_MODEL, filter, @@ -65,7 +84,7 @@ class DetailsCatalogView extends React.Component { onMigrate, users })} - {this.renderCatalogItems({ + {renderCatalogItems({ items: VSPList, type: catalogItemTypes.SOFTWARE_PRODUCT, filter, diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js b/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js index a1e0018114..ea70f9c0b8 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js @@ -22,7 +22,7 @@ import LicenseModelCreationActionHelper from '../licenseModel/creation/LicenseMo 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 { itemStatus } from 'sdc-app/common/helpers/ItemsHelperConstants.js'; export const mapStateToProps = ({ onboard: { onboardingCatalog, activeTab, searchValue, filter }, @@ -32,7 +32,8 @@ export const mapStateToProps = ({ archivedSoftwareProductList, finalizedLicenseModelList, softwareProductList, - finalizedSoftwareProductList + finalizedSoftwareProductList, + filteredItems }) => { const fullSoftwareProducts = softwareProductList .filter( @@ -50,6 +51,23 @@ export const mapStateToProps = ({ return accum; }; + const reduceFilteredLicenseModelList = (accum, vlm) => { + let currentSoftwareProductList = sortByStringProperty( + filteredItems.vspList.filter(vsp => vsp.vendorId === vlm.id), + 'name' + ); + accum.push({ ...vlm, softwareProductList: currentSoftwareProductList }); + return accum; + }; + + const updatedFilteredItems = { + vspList: [...filteredItems.vspList], + vlmList: sortByStringProperty( + filteredItems.vlmList.reduce(reduceFilteredLicenseModelList, []), + 'name' + ) + }; + licenseModelList = sortByStringProperty( licenseModelList.reduce(reduceLicenseModelList, []), 'name' @@ -72,7 +90,7 @@ export const mapStateToProps = ({ } = onboardingCatalog; if (filter.byVendorView) { catalogActiveTab = tabsMapping.BY_VENDOR; - } else if (filter.itemsType && filter.itemsType === itemsType.ARCHIVED) { + } else if (filter.itemStatus && filter.itemStatus === itemStatus.ARCHIVED) { catalogActiveTab = tabsMapping.ARCHIVE; } @@ -89,7 +107,8 @@ export const mapStateToProps = ({ searchValue, vspOverlay, selectedVendor, - users: users.usersList + users: users.usersList, + filteredItems: updatedFilteredItems }; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js index 87ec2d148e..2826e324b3 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js @@ -1,25 +1,30 @@ -/*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. +/* + * Copyright © 2016-2018 European Support Limited * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * + * + * http://www.apache.org/licenses/LICENSE-2.0 + * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing - * permissions and limitations under the License. + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. */ import { tabsMapping, actionTypes } from './OnboardConstants.js'; import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.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 PermissionsActionHelper from 'sdc-app/onboarding/permissions/PermissionsActionHelper.js'; +import { actionTypes as filterActionTypes } from './filter/FilterConstants.js'; +import { + versionStatus, + itemStatus +} from 'sdc-app/common/helpers/ItemsHelperConstants.js'; const OnboardActionHelper = { resetOnboardStore(dispatch) { @@ -33,6 +38,18 @@ const OnboardActionHelper = { type: actionTypes.CHANGE_ACTIVE_ONBOARD_TAB, activeTab }); + dispatch({ + type: filterActionTypes.FILTER_DATA_CHANGED, + deltaData: + activeTab === tabsMapping.WORKSPACE + ? { + versionStatus: versionStatus.DRAFT, + itemStatus: itemStatus.ACTIVE + } + : { + versionStatus: versionStatus.CERTIFIED + } + }); }, changeSearchValue(dispatch, searchValue) { dispatch({ @@ -54,7 +71,7 @@ const OnboardActionHelper = { itemType: itemTypes.LICENSE_MODEL }).then(({ results }) => { results = results.filter( - version => version.status === catalogItemStatuses.DRAFT + version => version.status === versionStatus.DRAFT ); if (results.length !== 1) { ScreensHelper.loadScreen(dispatch, { @@ -104,7 +121,7 @@ const OnboardActionHelper = { itemType: itemTypes.SOFTWARE_PRODUCT }).then(({ results }) => { results = results.filter( - version => version.status === catalogItemStatuses.DRAFT + version => version.status === versionStatus.DRAFT ); if (results.length !== 1) { ScreensHelper.loadScreen(dispatch, { diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx index dcaeaa787d..0fc64b328c 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx @@ -16,7 +16,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import OnboardingCatalogView from './onboardingCatalog/OnboardingCatalogView.jsx'; +import OnboardingCatalogViewWithFilter from './onboardingCatalog/OnboardingCatalogViewWithFilter.jsx'; import WorkspaceView from './workspace/WorkspaceView.jsx'; +import WorkspaceViewWithFilter from './workspace/WorkspaceViewWithFilter.jsx'; import { tabsMapping } from './OnboardConstants.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import classnames from 'classnames'; @@ -25,7 +27,8 @@ import objectValues from 'lodash/values.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'; - +import featureToggle from 'sdc-app/features/featureToggle.js'; +import { featureToggleNames } from 'sdc-app/features/FeaturesConstants.js'; const OnboardHeaderTabs = ({ onTabClick, activeTab }) => (
(
); +const ToggledOnboardingCatalogView = featureToggle(featureToggleNames.FILTER)({ + OnComp: OnboardingCatalogViewWithFilter, + OffComp: OnboardingCatalogView +}); + +const ToggledWorkspaceView = featureToggle(featureToggleNames.FILTER)({ + OnComp: WorkspaceViewWithFilter, + OffComp: WorkspaceView +}); + const OnboardHeader = ({ onSearch, activeTab, onTabClick, searchValue }) => (
@@ -85,11 +98,11 @@ class OnboardView extends React.Component { renderViewByTab(activeTab) { switch (activeTab) { case tabsMapping.WORKSPACE: - return ; + return ; case tabsMapping.CATALOG: - return ; + return ; default: - return ; + return ; } } 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 c80232de0a..a00357c7b9 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx @@ -17,14 +17,19 @@ 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 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 { actionTypes } from './FilterConstants.js'; + +import Panel from 'sdc-ui/lib/react/Panel.js'; +import { + ItemStatus, + ByVendorView, + EntityType, + Permissions, + OnboardingProcedure +} from './FilterComponents.jsx'; const mapStateToProps = ({ onboard: { filter, activeTab } }) => { return { @@ -35,145 +40,39 @@ const mapStateToProps = ({ onboard: { filter, activeTab } }) => { const mapActionsToProps = dispatch => { return { - onDataChanged: deltaData => + 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="" - /> - - - 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="" - /> - -
-); +const Filter = ({ onDataChanged, data, activeTab }) => { + return ( + + + + + + {activeTab === onboardTabsMapping.CATALOG && ( + + )} + + ); +}; Filter.PropTypes = { onDataChanged: PropTypes.func, - data: PropTypes.object + data: PropTypes.object, + activeTab: PropTypes.number }; export default featureToggle(featureToggleNames.FILTER)( connect(mapStateToProps, mapActionsToProps)(Filter) ); + +export const ConnectedFilter = connect(mapStateToProps, mapActionsToProps)( + Filter +); diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterActionHelper.js new file mode 100644 index 0000000000..f8155df49d --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterActionHelper.js @@ -0,0 +1,60 @@ +/* + * Copyright © 2016-2018 European Support Limited + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { default as ItemsHelper } from 'sdc-app/common/helpers/ItemsHelper.js'; +import { + itemType, + versionStatus +} from 'sdc-app/common/helpers/ItemsHelperConstants.js'; +import { actionTypes } from './FilterConstants.js'; + +const FilterActionHelper = { + async updateFilteredItems(dispatch, filter) { + let permission = { ...filter.permission }; + if ( + filter.versionStatus === versionStatus.DRAFT && + !permission.Owner && + !permission.Contributor + ) { + permission.Owner = true; + permission.Contributor = true; + } + const items = await ItemsHelper.fetchItems({ + ...filter, + permission + }); + let vspList = []; + let vlmList = []; + items.results.map(item => { + if (item.type === itemType.VSP) { + const { properties, ...all } = item; + vspList.push({ ...all, ...properties }); + } else { + vlmList.push(item); + } + }); + + dispatch({ + type: actionTypes.UPDATE_FILTERED_LIST, + data: { + vspList, + vlmList + } + }); + } +}; + +export default FilterActionHelper; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterComponents.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterComponents.jsx new file mode 100644 index 0000000000..65ec733fd5 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterComponents.jsx @@ -0,0 +1,145 @@ +/* + * Copyright © 2016-2018 European Support Limited + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import Input from 'nfvo-components/input/validation/Input.jsx'; +import i18n from 'nfvo-utils/i18n/i18n.js'; +import { itemStatus } from 'sdc-app/common/helpers/ItemsHelperConstants.js'; +import Accordion from 'sdc-ui/lib/react/Accordion.js'; +import Checklist from 'sdc-ui/lib/react/Checklist.js'; +import Checkbox from 'sdc-ui/lib/react/Checkbox.js'; + +export const ItemStatus = ({ data, onDataChanged, byVendorView }) => ( + onDataChanged({ itemStatus: e.target.value }, data)}> + + + +); + +const FilterList = ({ title, items, groupKey, onDataChanged, data }) => { + let onChange = value => { + let obj = {}; + obj[groupKey] = { ...data[groupKey], ...value }; + onDataChanged(obj); + }; + return ( + + + + ); +}; + +export const ByVendorView = ({ data, onDataChanged }) => ( + onDataChanged({ byVendorView }, data)} + data-test-id="filter-by-vendor-view" + value="" + /> +); + +export const EntityType = ({ data, onDataChanged }) => { + const items = [ + { + label: i18n('VSP'), + dataTestId: 'catalog-filter-type-vsp', + value: 'vsp', + checked: data.itemType && data.itemType.vsp + }, + { + label: i18n('VLM'), + dataTestId: 'catalog-ilter-type-vlm', + value: 'vlm', + checked: data.itemType && data.itemType.vlm + } + ]; + return ( + + ); +}; + +export const Permissions = ({ data, onDataChanged }) => { + const items = [ + { + label: i18n('Owner'), + dataTestId: 'catalog-filter-permission-owner', + value: 'Owner', + checked: data.permission && data.permission.Owner + }, + { + label: i18n('Contributor'), + dataTestId: 'catalog-filter-permission-contributor', + value: 'Contributor', + checked: data.permission && data.permission.Contributor + } + ]; + + return ( + + ); +}; + +export const OnboardingProcedure = ({ data, onDataChanged }) => { + const items = [ + { + label: i18n('Network Package'), + dataTestId: 'catalog-filter-procedure-network', + value: 'NetworkPackage', + checked: + data.onboardingMethod && data.onboardingMethod.NetworkPackage + }, + { + label: i18n('Manual'), + dataTestId: 'catalog-filter-procedure-manual', + value: 'Manual', + checked: data.onboardingMethod && data.onboardingMethod.Manual + } + ]; + + return ( + + ); +}; 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 edfe592877..9dce52dfd6 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,6 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionTypes = keyMirror({ - FILTER_DATA_CHANGED: null + FILTER_DATA_CHANGED: null, + UPDATE_FILTERED_LIST: null }); - -export const itemsType = { - ACTIVE: '1', - ARCHIVED: '2' -}; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterMiddleware.js b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterMiddleware.js new file mode 100644 index 0000000000..8490bfe675 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterMiddleware.js @@ -0,0 +1,32 @@ +/* + * Copyright © 2016-2018 European Support Limited + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import FilterActionHelper from './FilterActionHelper.js'; +import { actionTypes } from './FilterConstants.js'; + +const filterUpdater = store => next => action => { + if (action.type === actionTypes.FILTER_DATA_CHANGED) { + const filter = store.getState().onboard.filter; + + FilterActionHelper.updateFilteredItems(store.dispatch, { + ...filter, + ...action.deltaData + }); + } + return next(action); +}; + +export default filterUpdater; 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 f1e857498a..28b34753a5 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js @@ -14,8 +14,19 @@ * limitations under the License. */ import { actionTypes } from './FilterConstants.js'; +import { + itemStatus, + versionStatus +} from 'sdc-app/common/helpers/ItemsHelperConstants.js'; -export default (state = {}, action) => { +const defaultState = { + itemStatus: itemStatus.ACTIVE, + versionStatus: versionStatus.DRAFT, + entityType: {}, + permission: {}, + onboardingMethod: {} +}; +export default (state = defaultState, action) => { switch (action.type) { case actionTypes.FILTER_DATA_CHANGED: return { diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/ItemsReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/ItemsReducer.js new file mode 100644 index 0000000000..fa1528d8d9 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/ItemsReducer.js @@ -0,0 +1,24 @@ +/* + * Copyright © 2016-2018 European Support Limited + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { actionTypes } from './FilterConstants.js'; +export default (state = { vspList: [], vlmList: [] }, action) => { + switch (action.type) { + case actionTypes.UPDATE_FILTERED_LIST: + return action.data; + default: + return state; + } +}; 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 2cc32c2936..a416d36075 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx @@ -83,8 +83,8 @@ const FilterCatalogHeader = () => ( ); const FeaturedCatalogHeader = featureToggle(featureToggleNames.FILTER)({ - AComp: FilterCatalogHeader, - BComp: CatalogHeader + OnComp: FilterCatalogHeader, + OffComp: CatalogHeader }); class OnboardingCatalogView extends React.Component { diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogViewWithFilter.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogViewWithFilter.jsx new file mode 100644 index 0000000000..86c437d888 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogViewWithFilter.jsx @@ -0,0 +1,147 @@ +/* + * Copyright © 2016-2018 European Support Limited + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import i18n from 'nfvo-utils/i18n/i18n.js'; +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'; + +const CatalogHeader = () => ( +
+
+
+ {i18n('ONBOARD CATALOG')} +
+
+
+); + +class OnboardingCatalogView extends React.Component { + renderViewByTab(activeTab) { + const { + users, + vspOverlay, + onSelectLicenseModel, + onSelectSoftwareProduct, + onAddLicenseModelClick, + onAddSoftwareProductClick, + onVspOverlayChange, + onVendorSelect, + selectedVendor, + searchValue, + onMigrate, + filteredItems + } = this.props; + + const { vlmList, vspList } = filteredItems; + + 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 } = this.props; + return ( +
+ {!selectedVendor && } + {this.renderViewByTab(activeTab)} +
+ ); + } +} + +export default OnboardingCatalogView; 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 bef47d5acf..12beff7a30 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx @@ -60,8 +60,8 @@ class VendorItem extends React.Component {