Onboarding filter

Issue-ID: SDC-1187
Change-Id: I74ce464c8ee4060c381b094d26d1ded270cdf40d
Signed-off-by: svishnev <shlomo-stanisla.vishnevetskiy@amdocs.com>

16 files changed, 619 insertions, 182 deletions

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', () => (
     <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 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 => (
+        <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 @@ class DetailsCatalogView extends React.Component {
         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 @@ class DetailsCatalogView extends React.Component {
         } = this.props;
         return (
             <CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}>
-                {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 }) => (
     <div className="onboard-header-tabs">
         <div
@@ -47,6 +50,16 @@ const OnboardHeaderTabs = ({ onTabClick, activeTab }) => (
     </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 @@ class OnboardView extends React.Component {
     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 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
-}) => (
-    <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 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 }) => (
+    <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 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 = () => (
+    <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 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 {
                     </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 0000000000..eec59622b3
--- /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;