Onboarding filter

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

3 files changed, 151 insertions, 4 deletions

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}>