diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx')
| -rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx | 251 |
1 files changed, 160 insertions, 91 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx index 47255eb9dc..d74805eccc 100644 --- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx @@ -20,108 +20,177 @@ import Tooltip from 'react-bootstrap/lib/Tooltip.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; -const formatTime = (time) => { - if (!time) { return ''; } +const formatTime = time => { + if (!time) { + return ''; + } - const date = new Date(time); - const options = { - year: 'numeric', - month: 'short', - day: 'numeric', - hour: '2-digit', - minute: '2-digit' - }; - const newDate = date.toLocaleTimeString('en-US', options); + const date = new Date(time); + const options = { + year: 'numeric', + month: 'short', + day: 'numeric', + hour: '2-digit', + minute: '2-digit' + }; + const newDate = date.toLocaleTimeString('en-US', options); - return newDate; + return newDate; }; const DescriptionField = ({ className, text, useTooltip }) => { - if (useTooltip) { - return ( - <div className={className}> - <OverlayTrigger - placement='bottom' - overlay={<Tooltip className='version-description-tooltip' id='version-description-tooltip'>{text}</Tooltip>}> - <div className='description-text'>{text}</div> - </OverlayTrigger> - </div> - ); - } - return <div className={className}>{text}</div>; + if (useTooltip) { + return ( + <div className={className}> + <OverlayTrigger + placement="bottom" + overlay={ + <Tooltip + className="version-description-tooltip" + id="version-description-tooltip"> + {text} + </Tooltip> + }> + <div className="description-text">{text}</div> + </OverlayTrigger> + </div> + ); + } + return <div className={className}>{text}</div>; }; -const VersionListItem = ({ data, onSelectVersion, onNavigateToVersion, onCreateVersion, isHeader, isSelected, isCollaborator }) => { +const VersionListItem = ({ + data, + onSelectVersion, + onNavigateToVersion, + onCreateVersion, + isHeader, + isSelected, + isCollaborator +}) => { + let { modificationTime, name, status, description, additionalInfo } = data; + const modificationText = !isHeader + ? formatTime(modificationTime) + : i18n('Last Edited On'); - let {modificationTime, name, status, description, additionalInfo} = data; - const modificationText = !isHeader ? formatTime(modificationTime) : i18n('Last Edited On'); - - return ( - <div - data-test-id='version-item-row' - className={`version-item-row ${isHeader ? 'header-row' : 'clickable'} ${isSelected ? 'selected' : ''}`} - onClick={e => { - e.stopPropagation(); - onSelectVersion(); - onNavigateToVersion(); - }}> - <div className={`version-item-field ${isHeader ? 'header-field item-version' : 'item-version'}`}>{name}</div> - <div className={`version-item-field ${isHeader ? 'header-field item-status' : 'item-status'}`}>{status}</div> - <div className={`version-item-field ${isHeader ? 'header-field' : 'item-last-edited'}`}>{modificationText}</div> - <DescriptionField - className={`version-item-field ${isHeader ? 'header-field header-description' : 'item-description'}`} - useTooltip={!isHeader && description} - text={description} /> - - { - isHeader ? - <div className='version-item-field header-field actions'>{i18n('Actions')}</div> - : - <div className='version-item-field item-actions'> - <div className='version-item-field item-select'> - <SVGIcon - name='check-circle' - data-test-id='versions-page-select-version' - onClick={e => {e.stopPropagation(); onNavigateToVersion();}} - label={i18n('Go to this Version')} - labelPosition='right' /> - </div> - <div className='version-item-field item-create'> - {!isHeader && isCollaborator && additionalInfo.OptionalCreationMethods.length > 0 && onCreateVersion && - <SVGIcon - name='plus-circle' - data-test-id='versions-page-create-version' - onClick={e => { e.stopPropagation(); onCreateVersion(); }} - label={i18n('Create New Version')} - labelPosition='right' - disabled={!isCollaborator || !onCreateVersion} /> - } - </div> - </div> - } - </div> - ); + return ( + <div + data-test-id="version-item-row" + className={`version-item-row ${ + isHeader ? 'header-row' : 'clickable' + } ${isSelected ? 'selected' : ''}`} + onClick={e => { + e.stopPropagation(); + onSelectVersion(); + onNavigateToVersion(); + }}> + <div + className={`version-item-field ${ + isHeader ? 'header-field item-version' : 'item-version' + }`}> + {name} + </div> + <div + className={`version-item-field ${ + isHeader ? 'header-field item-status' : 'item-status' + }`}> + {status} + </div> + <div + className={`version-item-field ${ + isHeader ? 'header-field' : 'item-last-edited' + }`}> + {modificationText} + </div> + <DescriptionField + className={`version-item-field ${ + isHeader + ? 'header-field header-description' + : 'item-description' + }`} + useTooltip={!isHeader && description} + text={description} + /> + {isHeader ? ( + <div className="version-item-field header-field actions"> + {i18n('Actions')} + </div> + ) : ( + <div className="version-item-field item-actions"> + <div className="version-item-field item-select"> + <SVGIcon + name="check-circle" + data-test-id="versions-page-select-version" + onClick={e => { + e.stopPropagation(); + onNavigateToVersion(); + }} + label={i18n('Go to this Version')} + labelPosition="right" + /> + </div> + <div className="version-item-field item-create"> + {!isHeader && + isCollaborator && + additionalInfo.OptionalCreationMethods.length > 0 && + onCreateVersion && ( + <SVGIcon + name="plus-circle" + data-test-id="versions-page-create-version" + onClick={e => { + e.stopPropagation(); + onCreateVersion(); + }} + label={i18n('Create New Version')} + labelPosition="right" + disabled={ + !isCollaborator || !onCreateVersion + } + /> + )} + </div> + </div> + )} + </div> + ); }; -const VersionList = ({ versions, onSelectVersion, onNavigateToVersion, onCreateVersion, selectedVersion, isCollaborator }) => ( - <div className='version-list'> - <VersionListItem - data={{ name: i18n('Version'), status: i18n('Status'), description: i18n('Description') }} - isHeader /> - <div className='version-list-items'> - {versions.map(version => - <VersionListItem - key={version.id} - data={version} - onSelectVersion={() => onSelectVersion({version})} - onNavigateToVersion={() => onNavigateToVersion({version})} - onCreateVersion={onCreateVersion ? () => onCreateVersion({version}) : false} - isSelected={selectedVersion === version.id} - isCollaborator={isCollaborator} /> - )} - </div> - </div> +const VersionList = ({ + versions, + onSelectVersion, + onNavigateToVersion, + onCreateVersion, + selectedVersion, + isCollaborator +}) => ( + <div className="version-list"> + <VersionListItem + data={{ + name: i18n('Version'), + status: i18n('Status'), + description: i18n('Description') + }} + isHeader + /> + <div className="version-list-items"> + {versions.map(version => ( + <VersionListItem + key={version.id} + data={version} + onSelectVersion={() => onSelectVersion({ version })} + onNavigateToVersion={() => onNavigateToVersion({ version })} + onCreateVersion={ + onCreateVersion + ? () => onCreateVersion({ version }) + : false + } + isSelected={selectedVersion === version.id} + isCollaborator={isCollaborator} + /> + ))} + </div> + </div> ); export default VersionList; |