diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx')
| -rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx | 165 |
1 files changed, 32 insertions, 133 deletions
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 +); |