openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   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
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React from 'react';
  17 import VersionList from './components/VersionList.jsx';
  18 import PermissionsView from './components/PermissionsView.jsx';
  19 import Tree from 'nfvo-components/tree/Tree.jsx';
  20 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
  21 import i18n from 'nfvo-utils/i18n/i18n.js';
  22
  23 class VersionsPage extends React.Component {
  24         state = {
  25                 showExpanded : false
  26         }
  27         render() {
  28                 let { versions, owner, contributors, currentUser, isCollaborator, itemName = '', viewers, onSelectVersion, onNavigateToVersion,
  29                 onTreeFullScreen, onManagePermissions, onCreateVersion, selectedVersion, onModalNodeClick, isManual} = this.props;
  30                 return (
  31                         <div className='versions-page-view'>
  32                                 <div className='versions-page-title'>{i18n('Available Versions - {itemName}', {itemName: itemName})}</div>
  33                                 <PermissionsView
  34                                         owner={owner}
  35                                         contributors={contributors}
  36                                         viewers={viewers}
  37                                         currentUser={currentUser}
  38                                         isManual={isManual}
  39                                         onManagePermissions={onManagePermissions}/>
  40                                 <div className='versions-page-list-and-tree'>
  41                                         <div className='version-tree-wrapper'>
  42                                                 <div className='version-tree-title-container'>
  43                                                         <div className='version-tree-title'>{i18n('Version Tree')}</div>
  44                                                         {this.state.showExpanded && <SVGIcon name='expand' className='version-tree-full-screen' onClick={() => onTreeFullScreen({
  45                                                                 name: 'versions-tree-popup',
  46                                                                 width: 798,
  47                                                                 height: 500,
  48                                                                 nodes: versions.map(version => ({id: version.id, name: version.name, parent: version.baseId || ''})),
  49                                                                 onNodeClick: (version) => onModalNodeClick({version}),
  50                                                                 selectedNodeId: selectedVersion,
  51                                                                 scrollable: true,
  52                                                                 toWiden: true
  53                                                         })} />}
  54                                                 </div>
  55                                                 <Tree
  56                                                         name={'versions-tree'}
  57                                                         width={200}
  58                                                         allowScaleWidth={false}
  59                                                         nodes={versions.map(version => ({id: version.id, name: version.name, parent: version.baseId || ''}))}
  60                                                         onNodeClick={version => onSelectVersion({version})}
  61                                                         onRenderedBeyondWidth={() => {this.setState({showExpanded : true});}}
  62                                                         selectedNodeId={selectedVersion}/>
  63                                         </div>
  64                                         <VersionList
  65                                                 versions={versions}
  66                                                 onSelectVersion={onSelectVersion}
  67                                                 onNavigateToVersion={onNavigateToVersion}
  68                                                 onCreateVersion={onCreateVersion}
  69                                                 selectedVersion={selectedVersion}
  70                                                 isCollaborator={isCollaborator} />
  71                                 </div>
  72                         </div>
  73                 );
  74         }
  75 }
  76
  77 export default VersionsPage;