openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.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
  17 import React from 'react';
  18 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
  19 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
  20 import i18n from 'nfvo-utils/i18n/i18n.js';
  21 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
  22
  23 const formatTime = (time) => {
  24         if (!time) { return ''; }
  25
  26         const date = new Date(time);
  27         const options = {
  28                 year: 'numeric',
  29                 month: 'short',
  30                 day: 'numeric',
  31                 hour: '2-digit',
  32                 minute: '2-digit'
  33         };
  34         const newDate = date.toLocaleTimeString('en-US', options);
  35
  36         return newDate;
  37 };
  38
  39 const DescriptionField = ({ className, text, useTooltip }) => {
  40         if (useTooltip) {
  41                 return (
  42                         <div className={className}>
  43                                 <OverlayTrigger
  44                                         placement='bottom'
  45                                         overlay={<Tooltip className='version-description-tooltip' id='version-description-tooltip'>{text}</Tooltip>}>
  46                                         <div className='description-text'>{text}</div>
  47                                 </OverlayTrigger>
  48                         </div>
  49                 );
  50         }
  51         return <div className={className}>{text}</div>;
  52 };
  53
  54 const VersionListItem = ({ data, onSelectVersion, onNavigateToVersion, onCreateVersion, isHeader, isSelected, isCollaborator }) => {
  55
  56         let {modificationTime, name, status, description, additionalInfo} = data;
  57         const modificationText = !isHeader ? formatTime(modificationTime) : i18n('Last Edited On');
  58
  59         return (
  60                 <div
  61                         data-test-id='version-item-row'
  62                         className={`version-item-row ${isHeader ? 'header-row' : 'clickable'} ${isSelected ? 'selected' : ''}`}
  63                         onClick={e => {
  64                                 e.stopPropagation();
  65                                 onSelectVersion();
  66                                 onNavigateToVersion();
  67                         }}>
  68                         <div className={`version-item-field ${isHeader ? 'header-field item-version' : 'item-version'}`}>{name}</div>
  69                         <div className={`version-item-field ${isHeader ? 'header-field item-status' : 'item-status'}`}>{status}</div>
  70                         <div className={`version-item-field ${isHeader ? 'header-field' : 'item-last-edited'}`}>{modificationText}</div>
  71                         <DescriptionField
  72                                 className={`version-item-field ${isHeader ? 'header-field header-description' : 'item-description'}`}
  73                                 useTooltip={!isHeader && description}
  74                                 text={description} />
  75
  76                                 {
  77                                         isHeader ?
  78                                                 <div className='version-item-field header-field actions'>{i18n('Actions')}</div>
  79                                         :
  80                                                 <div className='version-item-field item-actions'>
  81                                                         <div className='version-item-field item-select'>
  82                                                                 <SVGIcon
  83                                                                         name='check-circle'
  84                                                                         data-test-id='versions-page-select-version'
  85                                                                         onClick={e => {e.stopPropagation(); onNavigateToVersion();}}
  86                                                                         label={i18n('Go to this Version')}
  87                                                                         labelPosition='right' />
  88                                                         </div>
  89                                                         <div className='version-item-field item-create'>
  90                                                                 {!isHeader && isCollaborator && additionalInfo.OptionalCreationMethods.length > 0 &&
  91                                                                         <SVGIcon
  92                                                                                 name='plus-circle'
  93                                                                                 data-test-id='versions-page-create-version'
  94                                                                                 onClick={e => { e.stopPropagation(); onCreateVersion(); }}
  95                                                                                 label={i18n('Create New Version')}
  96                                                                                 labelPosition='right'
  97                                                                                 disabled={!isCollaborator} />
  98                                                                 }
  99                                                         </div>
 100                                                 </div>
 101                                 }
 102
 103
 104                 </div>
 105         );
 106
 107 };
 108
 109 const VersionList = ({ versions, onSelectVersion, onNavigateToVersion, onCreateVersion, selectedVersion, isCollaborator }) => (
 110         <div className='version-list'>
 111                 <VersionListItem
 112                         data={{ name: i18n('Version'), status: i18n('Status'), description: i18n('Description') }}
 113                         isHeader />
 114                 <div className='version-list-items'>
 115                         {versions.map(version =>
 116                                 <VersionListItem
 117                                         key={version.id}
 118                                         data={version}
 119                                         onSelectVersion={() => onSelectVersion({version})}
 120                                         onNavigateToVersion={() => onNavigateToVersion({version})}
 121                                         onCreateVersion={() => onCreateVersion({version})}
 122                                         isSelected={selectedVersion === version.id}
 123                                         isCollaborator={isCollaborator} />
 124                         )}
 125                 </div>
 126         </div>
 127 );
 128
 129 export default VersionList;