diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/versionsPage/components')
| -rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx | 82 | ||||
| -rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx | 129 |
2 files changed, 211 insertions, 0 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx new file mode 100644 index 0000000000..26f8450f4c --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx @@ -0,0 +1,82 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ + +import React from 'react'; +import i18n from 'nfvo-utils/i18n/i18n.js'; +import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; +import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; +import Tooltip from 'react-bootstrap/lib/Tooltip.js'; + +const maxContributors = 6; + +function extraUsersTooltip (extraUsers) { + return ( + <Tooltip className='extra-users-tooltip' id='extra-users-tooltip-id'> + {extraUsers.map(extraUser => <div key={extraUser.userId} className='extra-user'>{extraUser.fullName}</div>)} + </Tooltip> + ); +} + +const User = ({user, isCurrentUser, dataTestId}) => ( + <SVGIcon className={`user-view ${isCurrentUser ? 'current-user' : ''}`} name='user' label={user.fullName} labelPosition='right' color='primary' + data-test-id={dataTestId}/> +); + +const Owner = ({owner, isCurrentUser}) => ( + <div className='owner-view'> + <div className='permissions-view-title'>{i18n('Owner')}</div> + <User user={owner} isCurrentUser={isCurrentUser} dataTestId='owner'/> + </div> +); + +const Contributors = ({contributors, owner, currentUser, onManagePermissions, isManual}) => { + let extraUsers = contributors.length - maxContributors; + return ( + <div className='contributors-view'> + <div className='permissions-view-title'>{i18n('Contributors')}</div> + {contributors.slice(0, maxContributors).map(contributor => + <User key={contributor.userId} user={contributor} isCurrentUser={contributor.userId === currentUser.userId} dataTestId='contributor'/> + )} + {extraUsers > 0 && + <OverlayTrigger placement='bottom' overlay={extraUsersTooltip(contributors.slice(maxContributors))}> + <div className='extra-contributors'>{`+${extraUsers}`}</div> + </OverlayTrigger> + } + {currentUser.userId === owner.userId && !isManual && + <span + className='manage-permissions' + onClick={onManagePermissions} + data-test-id='versions-page-manage-permissions'> + {i18n('Manage Permissions')} + </span> + } + </div> + ); +}; + +const PermissionsView = ({owner, contributors, currentUser = {}, onManagePermissions, isManual}) => ( + <div className='versions-page-permissions-view-wrapper'> + <div className='permissions-view-wrapper-title'>{i18n('Permissions')}</div> + <div className='permissions-view-content'> + <div className='permissions-view'> + <Owner owner={owner} isCurrentUser={owner.userId === currentUser.userId} /> + <Contributors owner={owner} contributors={contributors} currentUser={currentUser} onManagePermissions={onManagePermissions} isManual={isManual}/> + </div> + </div> + </div> +); + +export default PermissionsView; diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx new file mode 100644 index 0000000000..f209d80125 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx @@ -0,0 +1,129 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ + +import React from 'react'; +import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; +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 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; +}; + +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>; +}; + +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'); + + 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 && + <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} /> + } + </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({version})} + isSelected={selectedVersion === version.id} + isCollaborator={isCollaborator} /> + )} + </div> + </div> +); + +export default VersionList; |