openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.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
  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 Button from 'sdc-ui/lib/react/Button.js';
  22 import i18n from 'nfvo-utils/i18n/i18n.js';
  23 import featureToggle from 'sdc-app/features/featureToggle.js';
  24
  25 const DepricateButton = ({ depricateAction, title }) => (
  26     <div className="depricate-btn-wrapper">
  27         <Button
  28             data-test-id="depricate-action-btn"
  29             className="depricate-btn"
  30             onClick={depricateAction}>
  31             {title}
  32         </Button>
  33     </div>
  34 );
  35
  36 const FeatureDepricatedButton = featureToggle('ARCHIVE_ITEM')(DepricateButton);
  37
  38 const VersionPageTitle = ({
  39     itemName,
  40     depricatedTitle,
  41     isArchived,
  42     onRestore,
  43     onArchive
  44 }) => {
  45     return (
  46         <div className="version-page-header">
  47             <div className="versions-page-title">{`${i18n(
  48                 'Available Versions'
  49             )} - ${itemName}  ${depricatedTitle}`}</div>
  50             <FeatureDepricatedButton
  51                 depricateAction={
  52                     isArchived ? () => onRestore() : () => onArchive()
  53                 }
  54                 title={i18n(isArchived ? 'RESTORE' : 'ARCHIVE')}
  55             />
  56         </div>
  57     );
  58 };
  59
  60 class VersionsPage extends React.Component {
  61     state = {
  62         showExpanded: false
  63     };
  64     render() {
  65         let {
  66             versions,
  67             owner,
  68             contributors,
  69             currentUser,
  70             isCollaborator,
  71             itemName = '',
  72             viewers,
  73             onSelectVersion,
  74             onNavigateToVersion,
  75             onTreeFullScreen,
  76             onManagePermissions,
  77             onCreateVersion,
  78             selectedVersion,
  79             onModalNodeClick,
  80             isManual,
  81             isArchived,
  82             onArchive,
  83             onRestore
  84         } = this.props;
  85         const depricatedTitle = isArchived ? i18n('(Archived)') : '';
  86         return (
  87             <div className="versions-page-view">
  88                 <VersionPageTitle
  89                     itemName={itemName}
  90                     depricatedTitle={depricatedTitle}
  91                     onArchive={onArchive}
  92                     isArchived={isArchived}
  93                     onRestore={onRestore}
  94                 />
  95                 <PermissionsView
  96                     owner={owner}
  97                     contributors={contributors}
  98                     viewers={viewers}
  99                     currentUser={currentUser}
 100                     isManual={isManual}
 101                     onManagePermissions={onManagePermissions}
 102                 />
 103                 <div className="versions-page-list-and-tree">
 104                     <div className="version-tree-wrapper">
 105                         <div className="version-tree-title-container">
 106                             <div className="version-tree-title">
 107                                 {i18n('Version Tree')}
 108                             </div>
 109                             {this.state.showExpanded && (
 110                                 <SVGIcon
 111                                     name="expand"
 112                                     className="version-tree-full-screen"
 113                                     onClick={() =>
 114                                         onTreeFullScreen({
 115                                             name: 'versions-tree-popup',
 116                                             width: 798,
 117                                             height: 500,
 118                                             nodes: versions.map(version => ({
 119                                                 id: version.id,
 120                                                 name: version.name,
 121                                                 parent: version.baseId || ''
 122                                             })),
 123                                             onNodeClick: version =>
 124                                                 onModalNodeClick({ version }),
 125                                             selectedNodeId: selectedVersion,
 126                                             scrollable: true,
 127                                             toWiden: true
 128                                         })
 129                                     }
 130                                 />
 131                             )}
 132                         </div>
 133                         <Tree
 134                             name={'versions-tree'}
 135                             width={200}
 136                             allowScaleWidth={false}
 137                             nodes={versions.map(version => ({
 138                                 id: version.id,
 139                                 name: version.name,
 140                                 parent: version.baseId || ''
 141                             }))}
 142                             onNodeClick={version =>
 143                                 onSelectVersion({ version })
 144                             }
 145                             onRenderedBeyondWidth={() => {
 146                                 this.setState({ showExpanded: true });
 147                             }}
 148                             selectedNodeId={selectedVersion}
 149                         />
 150                     </div>
 151                     <VersionList
 152                         versions={versions}
 153                         onSelectVersion={onSelectVersion}
 154                         onNavigateToVersion={onNavigateToVersion}
 155                         onCreateVersion={isArchived ? false : onCreateVersion}
 156                         selectedVersion={selectedVersion}
 157                         isCollaborator={isCollaborator}
 158                     />
 159                 </div>
 160             </div>
 161         );
 162     }
 163 }
 164
 165 export default VersionsPage;