Onboarding filter
Issue-ID: SDC-1187
Change-Id: I74ce464c8ee4060c381b094d26d1ded270cdf40d
Signed-off-by: svishnev <shlomo-stanisla.vishnevetskiy@amdocs.com>
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 d01b9d0..c0de0ee 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 { 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 @@
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', () => (
<div className="catalog-view">
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx
index 771c0eb..b535595 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 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 => (
+ <CatalogItemDetails
+ key={item.id}
+ catalogItemData={item}
+ catalogItemTypeClass={type}
+ onMigrate={onMigrate}
+ onSelect={() => onSelect(item, users)}
+ />
+ ));
+}
+
class DetailsCatalogView extends React.Component {
static propTypes = {
VLMList: PropTypes.array,
@@ -31,18 +54,14 @@
filter: PropTypes.string.isRequired
};
- renderCatalogItems({ items, type, filter, onSelect, onMigrate, users }) {
- return filterCatalogItemsByType({ items, filter }).map(item => (
- <CatalogItemDetails
- key={item.id}
- catalogItemData={item}
- catalogItemTypeClass={type}
- onMigrate={onMigrate}
- onSelect={() => onSelect(item, users)}
- />
- ));
+ 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 @@
} = this.props;
return (
<CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}>
- {this.renderCatalogItems({
+ {renderCatalogItems({
items: VLMList,
type: catalogItemTypes.LICENSE_MODEL,
filter,
@@ -65,7 +84,7 @@
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 a1e0018..ea70f9c 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 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 @@
archivedSoftwareProductList,
finalizedLicenseModelList,
softwareProductList,
- finalizedSoftwareProductList
+ finalizedSoftwareProductList,
+ filteredItems
}) => {
const fullSoftwareProducts = softwareProductList
.filter(
@@ -50,6 +51,23 @@
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 @@
} = 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 @@
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 87ec2d1..2826e32 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 @@
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 @@
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 @@
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 dcaeaa7..0fc64b3 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 { 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 }) => (
<div className="onboard-header-tabs">
<div
@@ -47,6 +50,16 @@
</div>
);
+const ToggledOnboardingCatalogView = featureToggle(featureToggleNames.FILTER)({
+ OnComp: OnboardingCatalogViewWithFilter,
+ OffComp: OnboardingCatalogView
+});
+
+const ToggledWorkspaceView = featureToggle(featureToggleNames.FILTER)({
+ OnComp: WorkspaceViewWithFilter,
+ OffComp: WorkspaceView
+});
+
const OnboardHeader = ({ onSearch, activeTab, onTabClick, searchValue }) => (
<div className="onboard-header">
<OnboardHeaderTabs activeTab={activeTab} onTabClick={onTabClick} />
@@ -85,11 +98,11 @@
renderViewByTab(activeTab) {
switch (activeTab) {
case tabsMapping.WORKSPACE:
- return <WorkspaceView {...this.props} />;
+ return <ToggledWorkspaceView {...this.props} />;
case tabsMapping.CATALOG:
- return <OnboardingCatalogView {...this.props} />;
+ return <ToggledOnboardingCatalogView {...this.props} />;
default:
- return <WorkspaceView {...this.props} />;
+ return <ToggledWorkspaceView {...this.props} />;
}
}
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 c80232d..a00357c 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 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
-}) => (
- <div className="catalog-filter">
- {activeTab === onboardTabsMapping.CATALOG && (
- <Input
- type="select"
- className="catalog-filter-items-type"
- data-test-id="catalog-filter-items-type"
- disabled={byVendorView}
- value={itemsType}
- onChange={e => onDataChanged({ itemsType: e.target.value })}>
- <option
- key={itemsTypeConstants.ACTIVE}
- value={itemsTypeConstants.ACTIVE}>
- Active Items
- </option>
- <option
- key={itemsTypeConstants.ARCHIVED}
- value={itemsTypeConstants.ARCHIVED}>
- Archived Items
- </option>
- </Input>
- )}
- {activeTab === onboardTabsMapping.CATALOG && (
- <Input
- label={i18n('By Vendor View')}
- type="checkbox"
- disabled={itemsType === itemsTypeConstants.ARCHIVED}
- checked={byVendorView}
- onChange={byVendorView => onDataChanged({ byVendorView })}
- data-test-id="filter-by-vendor-view"
- value=""
- />
- )}
- <Input
- label={i18n('Recently Updated')}
- type="checkbox"
- checked={recentlyUpdated}
- onChange={recentlyUpdated => onDataChanged({ recentlyUpdated })}
- data-test-id="filter-recently-updated"
- value=""
- />
-
- <Accordion title={i18n('ENTITY TYPE')}>
- <Input
- label={i18n('VSP')}
- type="checkbox"
- checked={entityTypeVsp}
- onChange={entityTypeVsp => onDataChanged({ entityTypeVsp })}
- data-test-id="filter-type-vsp"
- value=""
- />
- <Input
- label={i18n('VLM')}
- type="checkbox"
- checked={entityTypeVlm}
- onChange={entityTypeVlm => onDataChanged({ entityTypeVlm })}
- data-test-id="filter-type-vlm"
- value=""
- />
- </Accordion>
-
- <Accordion title={i18n('ROLE')}>
- <Input
- label={i18n('Owner')}
- type="checkbox"
- checked={roleOwner}
- onChange={roleOwner => onDataChanged({ roleOwner })}
- data-test-id="filter-role-owner"
- value=""
- />
- <Input
- label={i18n('Contributer')}
- type="checkbox"
- checked={roleContributor}
- onChange={roleContributor => onDataChanged({ roleContributor })}
- data-test-id="filter-role-contributor"
- value=""
- />
- <Input
- label={i18n('Viewer')}
- type="checkbox"
- checked={roleViewer}
- onChange={roleViewer => onDataChanged({ roleViewer })}
- data-test-id="filter-role-viewr"
- value=""
- />
- </Accordion>
-
- <Accordion title={i18n('ONBOARDING PROCEDURE')}>
- <Input
- label={i18n('Network Package')}
- type="checkbox"
- checked={procedureNetwork}
- onChange={procedureNetwork =>
- onDataChanged({ procedureNetwork })
- }
- data-test-id="filter-procedure-network"
- value=""
- />
- <Input
- label={i18n('Manual')}
- type="checkbox"
- checked={procedureManual}
- onChange={procedureManual => onDataChanged({ procedureManual })}
- data-test-id="filter-procedure-manual"
- value=""
- />
- </Accordion>
- </div>
-);
+const Filter = ({ onDataChanged, data, activeTab }) => {
+ return (
+ <Panel className="catalog-filter">
+ <ItemStatus data={data} onDataChanged={onDataChanged} />
+ <EntityType data={data} onDataChanged={onDataChanged} />
+ <Permissions data={data} onDataChanged={onDataChanged} />
+ <OnboardingProcedure data={data} onDataChanged={onDataChanged} />
+ {activeTab === onboardTabsMapping.CATALOG && (
+ <ByVendorView data={data} onDataChanged={onDataChanged} />
+ )}
+ </Panel>
+ );
+};
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 0000000..f8155df
--- /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 0000000..65ec733
--- /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 }) => (
+ <Input
+ type="select"
+ className="catalog-filter-items-type"
+ data-test-id="catalog-filter-items-type"
+ disabled={byVendorView}
+ value={data.itemStatus}
+ onChange={e => onDataChanged({ itemStatus: e.target.value }, data)}>
+ <option key={itemStatus.ACTIVE} value={itemStatus.ACTIVE}>
+ {i18n('Active Items')}
+ </option>
+ <option key={itemStatus.ARCHIVED} value={itemStatus.ARCHIVED}>
+ {i18n('Archived Items')}
+ </option>
+ </Input>
+);
+
+const FilterList = ({ title, items, groupKey, onDataChanged, data }) => {
+ let onChange = value => {
+ let obj = {};
+ obj[groupKey] = { ...data[groupKey], ...value };
+ onDataChanged(obj);
+ };
+ return (
+ <Accordion title={title}>
+ <Checklist items={items} onChange={onChange} />
+ </Accordion>
+ );
+};
+
+export const ByVendorView = ({ data, onDataChanged }) => (
+ <Checkbox
+ label={i18n('By Vendor View')}
+ className="catalog-filter-by-vendor-view"
+ disabled={data.itemsType === itemStatus.ARCHIVED}
+ checked={data.byVendorView}
+ onChange={byVendorView => 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 (
+ <FilterList
+ title={i18n('ENTITY TYPE')}
+ items={items}
+ onDataChanged={onDataChanged}
+ data={data}
+ groupKey="itemType"
+ />
+ );
+};
+
+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 (
+ <FilterList
+ title={i18n('PERMISSIONS')}
+ items={items}
+ onDataChanged={onDataChanged}
+ data={data}
+ groupKey="permission"
+ />
+ );
+};
+
+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 (
+ <FilterList
+ title={i18n('ONBOARDING PROCEDURE')}
+ items={items}
+ onDataChanged={onDataChanged}
+ data={data}
+ groupKey="onboardingMethod"
+ />
+ );
+};
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 edfe592..9dce52d 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 0000000..8490bfe
--- /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 f1e8574..28b3475 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 0000000..fa1528d
--- /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 2cc32c2..a416d36 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 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 0000000..86c437d
--- /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 = () => (
+ <div className="catalog-header">
+ <div className="catalog-header-tabs">
+ <div className="catalog-header-tab active">
+ {i18n('ONBOARD CATALOG')}
+ </div>
+ </div>
+ </div>
+);
+
+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 (
+ <DetailsCatalogView
+ VLMList={vlmList}
+ VSPList={vspList}
+ users={users}
+ onSelectVLM={(item, users) =>
+ onSelectLicenseModel(
+ item,
+ users,
+ WCTabsMapping.CATALOG
+ )
+ }
+ onSelectVSP={(item, users) =>
+ onSelectSoftwareProduct(
+ item,
+ users,
+ WCTabsMapping.CATALOG
+ )
+ }
+ filter={searchValue}
+ onMigrate={onMigrate}
+ />
+ );
+ case tabsMapping.ACTIVE:
+ return (
+ <DetailsCatalogView
+ VLMList={vlmList}
+ VSPList={vspList}
+ users={users}
+ onAddVLM={onAddLicenseModelClick}
+ onAddVSP={onAddSoftwareProductClick}
+ onSelectVLM={(item, users) =>
+ onSelectLicenseModel(
+ item,
+ users,
+ WCTabsMapping.CATALOG
+ )
+ }
+ onSelectVSP={(item, users) =>
+ onSelectSoftwareProduct(
+ item,
+ users,
+ WCTabsMapping.CATALOG
+ )
+ }
+ filter={searchValue}
+ onMigrate={onMigrate}
+ />
+ );
+ case tabsMapping.BY_VENDOR:
+ default:
+ return (
+ <VendorCatalogView
+ licenseModelList={vlmList}
+ users={users}
+ onAddVSP={onAddSoftwareProductClick}
+ onAddVLM={onAddLicenseModelClick}
+ onSelectVSP={(item, users) =>
+ onSelectSoftwareProduct(
+ item,
+ users,
+ WCTabsMapping.CATALOG
+ )
+ }
+ onSelectVLM={(item, users) =>
+ onSelectLicenseModel(
+ item,
+ users,
+ WCTabsMapping.CATALOG
+ )
+ }
+ vspOverlay={vspOverlay}
+ onVendorSelect={onVendorSelect}
+ selectedVendor={selectedVendor}
+ onVspOverlayChange={onVspOverlayChange}
+ onMigrate={onMigrate}
+ filter={searchValue}
+ />
+ );
+ }
+ }
+
+ render() {
+ const { selectedVendor, catalogActiveTab: activeTab } = this.props;
+ return (
+ <div className="catalog-wrapper">
+ {!selectedVendor && <CatalogHeader />}
+ {this.renderViewByTab(activeTab)}
+ </div>
+ );
+ }
+}
+
+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 bef47d5..12beff7 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 @@
</TileInfoLine>
<TileInfoLine>
<Button
- btnType="outline-rounded"
- color="dark-gray"
+ btnType="secondary"
+ className="venodor-tile-btn"
onClick={e => this.handleVspCountClick(e)}
data-test-id="catalog-vsp-count"
disabled={!softwareProductList.length}>
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceViewWithFilter.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceViewWithFilter.jsx
new file mode 100644
index 0000000..eec5962
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceViewWithFilter.jsx
@@ -0,0 +1,57 @@
+/*
+ * 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 DetailsCatalogView from '../DetailsCatalogView.jsx';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import { tabsMapping } from 'sdc-app/onboarding/onboard/OnboardConstants.js';
+
+const WorkspaceView = props => {
+ let {
+ onAddLicenseModelClick,
+ users,
+ onAddSoftwareProductClick,
+ onSelectLicenseModel,
+ onSelectSoftwareProduct,
+ searchValue,
+ onMigrate,
+ filteredItems: { vspList, vlmList }
+ } = props;
+
+ return (
+ <div className="catalog-wrapper workspace-view">
+ <div className="catalog-header workspace-header">
+ {i18n('WORKSPACE')}
+ </div>
+ <DetailsCatalogView
+ VLMList={vlmList}
+ VSPList={vspList}
+ users={users}
+ onAddVLM={onAddLicenseModelClick}
+ onAddVSP={onAddSoftwareProductClick}
+ onSelectVLM={(item, users) =>
+ onSelectLicenseModel(item, users, tabsMapping.WORKSPACE)
+ }
+ onSelectVSP={(item, users) =>
+ onSelectSoftwareProduct(item, users, tabsMapping.WORKSPACE)
+ }
+ onMigrate={onMigrate}
+ filter={searchValue}
+ />
+ </div>
+ );
+};
+
+export default WorkspaceView;