openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx

   1 /*
   2  * Copyright © 2016-2018 European Support Limited
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *      http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16 import React from 'react';
  17 import PropTypes from 'prop-types';
  18 import OnboardingCatalogView from './onboardingCatalog/OnboardingCatalogView.jsx';
  19 import WorkspaceView from './workspace/WorkspaceView.jsx';
  20 import { tabsMapping } from './OnboardConstants.js';
  21 import i18n from 'nfvo-utils/i18n/i18n.js';
  22 import classnames from 'classnames';
  23 import ExpandableInput from 'nfvo-components/input/ExpandableInput.jsx';
  24 import objectValues from 'lodash/values.js';
  25 import { catalogItemTypes } from './onboardingCatalog/OnboardingCatalogConstants.js';
  26 import NotificationsView from 'sdc-app/onboarding/userNotifications/NotificationsView.jsx';
  27 import Filter from 'sdc-app/onboarding/onboard/filter/Filter.jsx';
  28 const OnboardHeaderTabs = ({ onTabClick, activeTab }) => (
  29     <div className="onboard-header-tabs">
  30         <div
  31             className={classnames('onboard-header-tab', {
  32                 active: activeTab === tabsMapping.WORKSPACE
  33             })}
  34             onClick={() => onTabClick(tabsMapping.WORKSPACE)}
  35             data-test-id="onboard-workspace-tab">
  36             {i18n('WORKSPACE')}
  37         </div>
  38         <div
  39             className={classnames('onboard-header-tab', {
  40                 active: activeTab === tabsMapping.CATALOG
  41             })}
  42             onClick={() => onTabClick(tabsMapping.CATALOG)}
  43             data-test-id="onboard-onboard-tab">
  44             {i18n('ONBOARD CATALOG')}
  45         </div>
  46     </div>
  47 );
  48
  49 const OnboardHeader = ({ onSearch, activeTab, onTabClick, searchValue }) => (
  50     <div className="onboard-header">
  51         <OnboardHeaderTabs activeTab={activeTab} onTabClick={onTabClick} />
  52         <ExpandableInput
  53             onChange={onSearch}
  54             iconType="search"
  55             value={searchValue}
  56         />
  57         <NotificationsView />
  58     </div>
  59 );
  60
  61 class OnboardView extends React.Component {
  62     static propTypes = {
  63         licenseModelList: PropTypes.array,
  64         softwareProductList: PropTypes.array,
  65         finalizedLicenseModelList: PropTypes.array,
  66         finalizedSoftwareProductList: PropTypes.array,
  67         archivedSoftwareProductList: PropTypes.array,
  68         archivedLicenseModelList: PropTypes.array,
  69         modalToShow: PropTypes.oneOf(objectValues(catalogItemTypes)),
  70         onSelectLicenseModel: PropTypes.func.isRequired,
  71         onSelectSoftwareProduct: PropTypes.func.isRequired,
  72         onAddLicenseModelClick: PropTypes.func.isRequired,
  73         onAddSoftwareProductClick: PropTypes.func.isRequired,
  74         closeVspOverlay: PropTypes.func.isRequired,
  75         onVspOverlayChange: PropTypes.func.isRequired,
  76         onTabClick: PropTypes.func.isRequired,
  77         onCatalogTabClick: PropTypes.func.isRequired,
  78         onSearch: PropTypes.func.isRequired,
  79         activeTab: PropTypes.number.isRequired,
  80         catalogActiveTab: PropTypes.number.isRequired,
  81         searchValue: PropTypes.object.isRequired,
  82         onMigrate: PropTypes.func.isRequired
  83     };
  84     renderViewByTab(activeTab) {
  85         switch (activeTab) {
  86             case tabsMapping.WORKSPACE:
  87                 return <WorkspaceView {...this.props} />;
  88             case tabsMapping.CATALOG:
  89                 return <OnboardingCatalogView {...this.props} />;
  90             default:
  91                 return <WorkspaceView {...this.props} />;
  92         }
  93     }
  94
  95     render() {
  96         let {
  97             activeTab,
  98             activeTabName,
  99             onTabClick,
 100             onSearch,
 101             searchValue
 102         } = this.props;
 103         return (
 104             <div className="catalog-view">
 105                 <Filter />
 106                 <div className="catalog-parts">
 107                     <OnboardHeader
 108                         activeTab={activeTab}
 109                         onTabClick={onTabClick}
 110                         searchValue={searchValue[activeTabName]}
 111                         onSearch={value => onSearch(value, activeTabName)}
 112                     />
 113                     {this.renderViewByTab(activeTab)}
 114                 </div>
 115             </div>
 116         );
 117     }
 118 }
 119
 120 export default OnboardView;