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