ui filter component for catalog filter

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

10 files changed, 238 insertions, 12 deletions

diff --git a/openecomp-ui/resources/scss/_components.scss b/openecomp-ui/resources/scss/_components.scss
index 13af5984e3..5579762fd3 100644
--- a/openecomp-ui/resources/scss/_components.scss
+++ b/openecomp-ui/resources/scss/_components.scss
@@ -21,6 +21,7 @@
 @import "components/commitModal";
 @import "components/userNotifications";
 @import "components/overlay";
+@import "components/accordion";
 
 %noselect {
   -webkit-touch-callout: none;
diff --git a/openecomp-ui/resources/scss/components/_accordion.scss b/openecomp-ui/resources/scss/components/_accordion.scss
new file mode 100644
index 0000000000..c96bc71be5
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_accordion.scss
@@ -0,0 +1,28 @@
+.accordion {
+    display: flex;
+    flex-direction: column;
+    .accordion-header {
+        display: flex;
+        flex-direction: row;
+        cursor: pointer;
+        margin-bottom: 10px;
+        .svg-icon-wrapper {
+            margin-right: 20px;
+            transition: transform .4s;
+            &.down {
+                transform: rotate(180deg);
+            }
+        }
+    }
+    .accordion-body {
+        padding-left: 10px;                
+        opacity: 0;
+        overflow-y: hidden;
+        max-height: 0;
+        transition: max-height .3s cubic-bezier(0, 1.18, 1, 1), opacity 0.33s linear;
+        &.open {                       
+            opacity: 1;
+            max-height: 100%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
index 1201d4a34d..39f7636e79 100644
--- a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
+++ b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
@@ -4,8 +4,13 @@ $transitionLength: 0.6s;
 	background-color: $background-gray;
 	overflow: hidden;
 	height: 100%;
-	@import "onboardingCatalog/onboardHeader";
-	@import "onboardingCatalog/catalogHeader";
+	display: flex;
+	@import "onboardingCatalog/catalogFilter.scss";
+	.catalog-parts {
+		width: 100%;
+		@import "onboardingCatalog/onboardHeader";
+		@import "onboardingCatalog/catalogHeader";
+	}	
 	@import "onboardingCatalog/vendorPageHeader";
 	@import "onboardingCatalog/catalogList";
 	@import "onboardingCatalog/vspOverlay";
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
new file mode 100644
index 0000000000..84657b1317
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
@@ -0,0 +1,11 @@
+.catalog-filter {
+    width: 242px;
+    overflow-y: auto;    
+    height: 100%;
+    box-shadow: 1px 0px 4px 0px rgba(24, 24, 25, 0.17);
+    background-color: $white;
+    padding: 12px 18px;    
+    .form-group {
+        margin-bottom: 10px;
+    }
+}
\ No newline at end of file
diff --git a/openecomp-ui/src/nfvo-components/accordion/Accordion.jsx b/openecomp-ui/src/nfvo-components/accordion/Accordion.jsx
new file mode 100644
index 0000000000..ac19072307
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/accordion/Accordion.jsx
@@ -0,0 +1,52 @@
+/*
+ * 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 SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
+import PropTypes from 'prop-types';
+
+
+class Accordion extends React.Component {
+
+	static propTypes = {
+		title: PropTypes.string,
+		children: PropTypes.node
+	}
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			open: false
+		};
+	}
+	render() {
+		const {children, title} = this.props; 
+		const {open} = this.state;
+		return (
+			<div className='accordion'>
+				<div onClick={()=>this.setState({open: !open})} className='accordion-header'>
+					<SVGIcon name='chevronUp' iconClassName={open ? 'down' : ''}/>		
+					<div className='title'>{title}</div>
+				</div>
+				<div className={`accordion-body ${open ? 'open' : ''}`}>
+					{children}
+				</div>
+			</div>
+		);
+	}
+}
+
+export default Accordion;
\ No newline at end of file
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js
index 72145015db..b2e7b0479b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js
@@ -16,9 +16,11 @@
 import {actionTypes, tabsMapping} from './OnboardConstants.js';
 import {combineReducers} from 'redux';
 import onboardingCatalogReducer from './onboardingCatalog/OnboardingCatalogReducer.js';
+import filterReducer from './filter/FilterReducer.js';
 
 const onboardReducer = combineReducers({
 	onboardingCatalog: onboardingCatalogReducer,
+	filter: filterReducer,
 	activeTab: (state = tabsMapping.WORKSPACE, action) => action.type === actionTypes.CHANGE_ACTIVE_ONBOARD_TAB ? action.activeTab : state,
 	searchValue: (state = '', action) => action.type === actionTypes.CHANGE_SEARCH_VALUE ? action.searchValue : state
 });
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx
index f31ce4c805..f64c1e55fa 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx
@@ -1,17 +1,17 @@
-/*!
- * 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 React from 'react';
 import PropTypes from 'prop-types';
@@ -24,6 +24,7 @@ import ExpandableInput from 'nfvo-components/input/ExpandableInput.jsx';
 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';
 
 const OnboardHeaderTabs = ({onTabClick, activeTab}) => (
 	<div className='onboard-header-tabs'>
@@ -88,8 +89,11 @@ class OnboardView extends React.Component {
 		let {activeTab, onTabClick, onSearch, searchValue} = this.props;
 		return (
 			<div className='catalog-view'>
-				<OnboardHeader activeTab={activeTab} onTabClick={onTabClick} searchValue={searchValue} onSearch={value => onSearch(value)}/>
-				{this.renderViewByTab(activeTab)}
+				<Filter/>
+				<div className='catalog-parts'>
+					<OnboardHeader activeTab={activeTab} onTabClick={onTabClick} searchValue={searchValue} onSearch={value => onSearch(value)}/>
+					{this.renderViewByTab(activeTab)}
+				</div>			
 			</div>
 		);
 	}
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx
new file mode 100644
index 0000000000..bf1927d2c5
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx
@@ -0,0 +1,74 @@
+/*
+ * 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 {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';
+
+const mapStateToProps = ({onboard: {filter}}) => {
+	return {
+		data: filter
+	};
+};
+
+const mapActionsToProps = (dispatch) => {
+	return {
+		onDataChanged: (deltaData) => 
+			dispatch({
+				type: actionTypes.FILTER_DATA_CHANGED,
+				deltaData
+			})		
+	};
+};
+
+const Filter = ({onDataChanged, data: {entityTypeVsp, entityTypeVlm, roleOwner, roleContributor, roleViewer,
+		 procedureNetwork, procedureManual, recentlyUpdated}}) => (
+    <div className='catalog-filter'>        
+        <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>
+);
+
+Filter.PropTypes = {
+	onDataChanged: PropTypes.func,
+	data: PropTypes.object
+};
+
+export default featureToggle('ONBOARDING_FILTER')(connect(mapStateToProps, mapActionsToProps)(Filter));
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js
new file mode 100644
index 0000000000..36a415cd4f
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js
@@ -0,0 +1,21 @@
+/*
+ * 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 keyMirror from 'nfvo-utils/KeyMirror.js';
+
+export const actionTypes = keyMirror({
+	FILTER_DATA_CHANGED: null
+});
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js
new file mode 100644
index 0000000000..963226cd38
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js
@@ -0,0 +1,28 @@
+/*
+ * 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 = {}, action) => {	
+	switch (action.type) {
+		case actionTypes.FILTER_DATA_CHANGED:						
+			return {				
+				...state,
+				...action.deltaData
+			};			
+		default:
+			return state;
+	}   	
+};