diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/versionsPage')
12 files changed, 813 insertions, 575 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.js index 0fd0eabd86..457d096219 100644 --- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.js +++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.js @@ -14,76 +14,100 @@ * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import VersionsPageActionHelper from './VersionsPageActionHelper.js'; import VersionsPageCreationActionHelper from './creation/VersionsPageCreationActionHelper.js'; import PermissionsActionHelper from '../permissions/PermissionsActionHelper.js'; -import {onboardingMethod as onboardingMethodType} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js'; +import { onboardingMethod as onboardingMethodType } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js'; import VersionsPageView from './VersionsPage.jsx'; export const mapStateToProps = ({ - users: {userInfo}, - versionsPage: {permissions, versionsList}, - currentScreen: {itemPermission: {isCollaborator, isArchived}, props: {itemId}}, - softwareProductList = [] + users: { userInfo }, + versionsPage: { permissions, versionsList }, + currentScreen: { + itemPermission: { isCollaborator, isArchived }, + props: { itemId } + }, + softwareProductList = [] }) => { + let { versions = [], selectedVersion } = versionsList; + let { owner, contributors, viewers } = permissions; - let {versions = [], selectedVersion} = versionsList; - let {owner, contributors, viewers} = permissions; - - // sorting the version list - versions.sort((a,b) => { - let statusCompare = b.status.localeCompare(a.status); - if (statusCompare === 0) { - return b.modificationTime - a.modificationTime; - } else { - return statusCompare; - } - - }); - const curentSoftwareProduct = softwareProductList.find(item => item.id === itemId); - return { - versions, - contributors, - viewers, - owner, - currentUser: userInfo, - selectedVersion, - isCollaborator, - isManual: curentSoftwareProduct && curentSoftwareProduct.onboardingMethod === onboardingMethodType.MANUAL, - isArchived - }; - + // sorting the version list + versions.sort((a, b) => { + let statusCompare = b.status.localeCompare(a.status); + if (statusCompare === 0) { + return b.modificationTime - a.modificationTime; + } else { + return statusCompare; + } + }); + const curentSoftwareProduct = softwareProductList.find( + item => item.id === itemId + ); + return { + versions, + contributors, + viewers, + owner, + currentUser: userInfo, + selectedVersion, + isCollaborator, + isManual: + curentSoftwareProduct && + curentSoftwareProduct.onboardingMethod === + onboardingMethodType.MANUAL, + isArchived + }; }; -export const mapActionsToProps = (dispatch, {itemType, itemId, additionalProps}) => { - return { - onNavigateToVersion({version}) { - VersionsPageActionHelper.onNavigateToVersion(dispatch, {version, itemId, itemType, additionalProps}); - }, +export const mapActionsToProps = ( + dispatch, + { itemType, itemId, additionalProps } +) => { + return { + onNavigateToVersion({ version }) { + VersionsPageActionHelper.onNavigateToVersion(dispatch, { + version, + itemId, + itemType, + additionalProps + }); + }, - onSelectVersion({version}) { - VersionsPageActionHelper.selectVersion(dispatch, {version}); - }, + onSelectVersion({ version }) { + VersionsPageActionHelper.selectVersion(dispatch, { version }); + }, - onCreateVersion({version}) { - VersionsPageCreationActionHelper.open(dispatch, {baseVersion: version, itemId, itemType, additionalProps}); - }, + onCreateVersion({ version }) { + VersionsPageCreationActionHelper.open(dispatch, { + baseVersion: version, + itemId, + itemType, + additionalProps + }); + }, - onManagePermissions() { - PermissionsActionHelper.openPermissonsManager(dispatch, {itemId, askForRights: false}); - }, + onManagePermissions() { + PermissionsActionHelper.openPermissonsManager(dispatch, { + itemId, + askForRights: false + }); + }, - onTreeFullScreen(treeProps) { - VersionsPageActionHelper.openTree(dispatch, treeProps); - }, + onTreeFullScreen(treeProps) { + VersionsPageActionHelper.openTree(dispatch, treeProps); + }, - onModalNodeClick({version}) { - VersionsPageActionHelper.selectVersionFromModal(dispatch, {version}); - }, - onArchive: () => VersionsPageActionHelper.archiveItem(dispatch, itemId), - onRestore: () => VersionsPageActionHelper.restoreItemFromArchive(dispatch, itemId) - }; + onModalNodeClick({ version }) { + VersionsPageActionHelper.selectVersionFromModal(dispatch, { + version + }); + }, + onArchive: () => VersionsPageActionHelper.archiveItem(dispatch, itemId), + onRestore: () => + VersionsPageActionHelper.restoreItemFromArchive(dispatch, itemId) + }; }; export default connect(mapStateToProps, mapActionsToProps)(VersionsPageView); diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx index f8417fafbf..7f7af8130f 100644 --- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx @@ -22,81 +22,144 @@ import Button from 'sdc-ui/lib/react/Button.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import featureToggle from 'sdc-app/features/featureToggle.js'; -const DepricateButton = ({depricateAction, title}) => ( - <div className='depricate-btn-wrapper'> - <Button data-test-id='depricate-action-btn' className='depricate-btn' onClick={depricateAction}>{title}</Button> - </div> +const DepricateButton = ({ depricateAction, title }) => ( + <div className="depricate-btn-wrapper"> + <Button + data-test-id="depricate-action-btn" + className="depricate-btn" + onClick={depricateAction}> + {title} + </Button> + </div> ); -const FeatureDepricatedButton = featureToggle('ARCHIVE_ITEM')(DepricateButton); +const FeatureDepricatedButton = featureToggle('ARCHIVE_ITEM')(DepricateButton); -const VersionPageTitle = ({itemName, depricatedTitle, isArchived, onRestore, onArchive}) => { - return ( - <div className='version-page-header'> - <div className='versions-page-title'>{`${i18n('Available Versions')} - ${itemName} ${depricatedTitle}`}</div> - <FeatureDepricatedButton depricateAction={isArchived ? () => onRestore() : () => onArchive() } title={i18n(isArchived ? 'RESTORE' : 'ARCHIVE')}/> - </div> - ); +const VersionPageTitle = ({ + itemName, + depricatedTitle, + isArchived, + onRestore, + onArchive +}) => { + return ( + <div className="version-page-header"> + <div className="versions-page-title">{`${i18n( + 'Available Versions' + )} - ${itemName} ${depricatedTitle}`}</div> + <FeatureDepricatedButton + depricateAction={ + isArchived ? () => onRestore() : () => onArchive() + } + title={i18n(isArchived ? 'RESTORE' : 'ARCHIVE')} + /> + </div> + ); }; class VersionsPage extends React.Component { - state = { - showExpanded : false - } - render() { - let { versions, owner, contributors, currentUser, isCollaborator, itemName = '', viewers, onSelectVersion, onNavigateToVersion, - onTreeFullScreen, onManagePermissions, onCreateVersion, selectedVersion, onModalNodeClick, isManual, isArchived, onArchive, onRestore} = this.props; - const depricatedTitle = isArchived ? i18n('(Archived)') : ''; - return ( - <div className='versions-page-view'> - <VersionPageTitle - itemName={itemName} - depricatedTitle={depricatedTitle} - onArchive={onArchive} - isArchived={isArchived} - onRestore={onRestore}/> - <PermissionsView - owner={owner} - contributors={contributors} - viewers={viewers} - currentUser={currentUser} - isManual={isManual} - onManagePermissions={onManagePermissions}/> - <div className='versions-page-list-and-tree'> - <div className='version-tree-wrapper'> - <div className='version-tree-title-container'> - <div className='version-tree-title'>{i18n('Version Tree')}</div> - {this.state.showExpanded && <SVGIcon name='expand' className='version-tree-full-screen' onClick={() => onTreeFullScreen({ - name: 'versions-tree-popup', - width: 798, - height: 500, - nodes: versions.map(version => ({id: version.id, name: version.name, parent: version.baseId || ''})), - onNodeClick: (version) => onModalNodeClick({version}), - selectedNodeId: selectedVersion, - scrollable: true, - toWiden: true - })} />} - </div> - <Tree - name={'versions-tree'} - width={200} - allowScaleWidth={false} - nodes={versions.map(version => ({id: version.id, name: version.name, parent: version.baseId || ''}))} - onNodeClick={version => onSelectVersion({version})} - onRenderedBeyondWidth={() => {this.setState({showExpanded : true});}} - selectedNodeId={selectedVersion}/> - </div> - <VersionList - versions={versions} - onSelectVersion={onSelectVersion} - onNavigateToVersion={onNavigateToVersion} - onCreateVersion={isArchived ? false : onCreateVersion} - selectedVersion={selectedVersion} - isCollaborator={isCollaborator} /> - </div> - </div> - ); - } + state = { + showExpanded: false + }; + render() { + let { + versions, + owner, + contributors, + currentUser, + isCollaborator, + itemName = '', + viewers, + onSelectVersion, + onNavigateToVersion, + onTreeFullScreen, + onManagePermissions, + onCreateVersion, + selectedVersion, + onModalNodeClick, + isManual, + isArchived, + onArchive, + onRestore + } = this.props; + const depricatedTitle = isArchived ? i18n('(Archived)') : ''; + return ( + <div className="versions-page-view"> + <VersionPageTitle + itemName={itemName} + depricatedTitle={depricatedTitle} + onArchive={onArchive} + isArchived={isArchived} + onRestore={onRestore} + /> + <PermissionsView + owner={owner} + contributors={contributors} + viewers={viewers} + currentUser={currentUser} + isManual={isManual} + onManagePermissions={onManagePermissions} + /> + <div className="versions-page-list-and-tree"> + <div className="version-tree-wrapper"> + <div className="version-tree-title-container"> + <div className="version-tree-title"> + {i18n('Version Tree')} + </div> + {this.state.showExpanded && ( + <SVGIcon + name="expand" + className="version-tree-full-screen" + onClick={() => + onTreeFullScreen({ + name: 'versions-tree-popup', + width: 798, + height: 500, + nodes: versions.map(version => ({ + id: version.id, + name: version.name, + parent: version.baseId || '' + })), + onNodeClick: version => + onModalNodeClick({ version }), + selectedNodeId: selectedVersion, + scrollable: true, + toWiden: true + }) + } + /> + )} + </div> + <Tree + name={'versions-tree'} + width={200} + allowScaleWidth={false} + nodes={versions.map(version => ({ + id: version.id, + name: version.name, + parent: version.baseId || '' + }))} + onNodeClick={version => + onSelectVersion({ version }) + } + onRenderedBeyondWidth={() => { + this.setState({ showExpanded: true }); + }} + selectedNodeId={selectedVersion} + /> + </div> + <VersionList + versions={versions} + onSelectVersion={onSelectVersion} + onNavigateToVersion={onNavigateToVersion} + onCreateVersion={isArchived ? false : onCreateVersion} + selectedVersion={selectedVersion} + isCollaborator={isCollaborator} + /> + </div> + </div> + ); + } } export default VersionsPage; diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js index d475c03c31..606b17b897 100644 --- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js @@ -14,94 +14,96 @@ * permissions and limitations under the License. */ import ItemsHelper from '../../common/helpers/ItemsHelper.js'; -import {actionTypes} from './VersionsPageConstants.js'; -import {itemTypes} from './VersionsPageConstants.js'; -import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes } from './VersionsPageConstants.js'; +import { itemTypes } from './VersionsPageConstants.js'; +import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js'; -import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js'; - +import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js'; const VersionsPageActionHelper = { - fetchVersions(dispatch, {itemType, itemId}) { - return ItemsHelper.fetchVersions({itemId}).then(response => { - dispatch({ - type: actionTypes.VERSIONS_LOADED, - versions: response.results, - itemType, - itemId - }); - return Promise.resolve(response); - }); - }, + fetchVersions(dispatch, { itemType, itemId }) { + return ItemsHelper.fetchVersions({ itemId }).then(response => { + dispatch({ + type: actionTypes.VERSIONS_LOADED, + versions: response.results, + itemType, + itemId + }); + return Promise.resolve(response); + }); + }, - selectVersion(dispatch, {version}) { - dispatch({ - type: actionTypes.SELECT_VERSION, - versionId: version.id - }); - }, + selectVersion(dispatch, { version }) { + dispatch({ + type: actionTypes.SELECT_VERSION, + versionId: version.id + }); + }, - selectNone(dispatch) { - dispatch({ type: actionTypes.SELECT_NONE }); - }, + selectNone(dispatch) { + dispatch({ type: actionTypes.SELECT_NONE }); + }, - onNavigateToVersion(dispatch, {version, itemId, itemType}) { - switch (itemType) { - case itemTypes.LICENSE_MODEL: - ScreensHelper.loadScreen(dispatch, { - screen: enums.SCREEN.LICENSE_MODEL_OVERVIEW, screenType: screenTypes.LICENSE_MODEL, - props: {licenseModelId: itemId, version} - }); - break; - case itemTypes.SOFTWARE_PRODUCT: - ScreensHelper.loadScreen(dispatch, { - screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT, - props: {softwareProductId: itemId, version} - }); - break; - } - }, + onNavigateToVersion(dispatch, { version, itemId, itemType }) { + switch (itemType) { + case itemTypes.LICENSE_MODEL: + ScreensHelper.loadScreen(dispatch, { + screen: enums.SCREEN.LICENSE_MODEL_OVERVIEW, + screenType: screenTypes.LICENSE_MODEL, + props: { licenseModelId: itemId, version } + }); + break; + case itemTypes.SOFTWARE_PRODUCT: + ScreensHelper.loadScreen(dispatch, { + screen: enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE, + screenType: screenTypes.SOFTWARE_PRODUCT, + props: { softwareProductId: itemId, version } + }); + break; + } + }, - openTree(dispatch, treeProps) { - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_SHOW, - data: { - modalComponentName: modalContentMapper.VERSION_TREE, - modalComponentProps: treeProps, - onDeclined: () => dispatch({ - type: modalActionTypes.GLOBAL_MODAL_CLOSE - }), - modalClassName: 'versions-tree-modal', - cancelButtonText: i18n('Close'), - title: i18n('Version Tree') - } - }); - }, + openTree(dispatch, treeProps) { + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_SHOW, + data: { + modalComponentName: modalContentMapper.VERSION_TREE, + modalComponentProps: treeProps, + onDeclined: () => + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_CLOSE + }), + modalClassName: 'versions-tree-modal', + cancelButtonText: i18n('Close'), + title: i18n('Version Tree') + } + }); + }, - selectVersionFromModal(dispatch, {version}) { - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_CLOSE - }); - this.selectVersion(dispatch, {version}); - }, + selectVersionFromModal(dispatch, { version }) { + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_CLOSE + }); + this.selectVersion(dispatch, { version }); + }, - archiveItem(dispatch, itemId) { - ItemsHelper.archiveItem(itemId).then(() => { - ScreensHelper.loadScreen(dispatch, { - screen: enums.SCREEN.ONBOARDING_CATALOG - }); - }); - }, + archiveItem(dispatch, itemId) { + ItemsHelper.archiveItem(itemId).then(() => { + ScreensHelper.loadScreen(dispatch, { + screen: enums.SCREEN.ONBOARDING_CATALOG + }); + }); + }, - restoreItemFromArchive(dispatch, itemId) { - ItemsHelper.restoreItem(itemId).then(() => { - ScreensHelper.loadScreen(dispatch, { - screen: enums.SCREEN.ONBOARDING_CATALOG - }); - }); - } + restoreItemFromArchive(dispatch, itemId) { + ItemsHelper.restoreItem(itemId).then(() => { + ScreensHelper.loadScreen(dispatch, { + screen: enums.SCREEN.ONBOARDING_CATALOG + }); + }); + } }; export default VersionsPageActionHelper; diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageConstants.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageConstants.js index 983ab79a14..3a3879ddb3 100644 --- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageConstants.js @@ -16,12 +16,12 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionTypes = keyMirror({ - VERSIONS_LOADED: null, - SELECT_VERSION: null, - SELECT_NONE: null + VERSIONS_LOADED: null, + SELECT_VERSION: null, + SELECT_NONE: null }); export const itemTypes = { - LICENSE_MODEL: 'vendor-license-models', - SOFTWARE_PRODUCT: 'vendor-software-products' + LICENSE_MODEL: 'vendor-license-models', + SOFTWARE_PRODUCT: 'vendor-software-products' }; diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageReducer.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageReducer.js index 9b6fa9f803..c270278f21 100644 --- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageReducer.js @@ -13,30 +13,34 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from './VersionsPageConstants.js'; -import {combineReducers} from 'redux'; +import { actionTypes } from './VersionsPageConstants.js'; +import { combineReducers } from 'redux'; import VersionsPageCreationReducer from './creation/VersionsPageCreationReducer.js'; import PermissionsReducer from '../permissions/PermissionsReducer.js'; -import {createPlainDataReducer} from 'sdc-app/common/reducers/PlainDataReducer.js'; +import { createPlainDataReducer } from 'sdc-app/common/reducers/PlainDataReducer.js'; function VersionsListReducer(state = {}, action) { - switch (action.type) { - case actionTypes.VERSIONS_LOADED: - let {versions, itemType = state.itemType, itemId} = action; - return {...state, versions, itemType, itemId}; - case actionTypes.SELECT_VERSION: - return {...state, selectedVersion: action.versionId === state.selectedVersion ? null : action.versionId}; - case actionTypes.SELECT_NONE: - return {...state, selectedVersion: null}; - default: - return state; - } -}; - - + switch (action.type) { + case actionTypes.VERSIONS_LOADED: + let { versions, itemType = state.itemType, itemId } = action; + return { ...state, versions, itemType, itemId }; + case actionTypes.SELECT_VERSION: + return { + ...state, + selectedVersion: + action.versionId === state.selectedVersion + ? null + : action.versionId + }; + case actionTypes.SELECT_NONE: + return { ...state, selectedVersion: null }; + default: + return state; + } +} export default combineReducers({ - versionCreation: createPlainDataReducer(VersionsPageCreationReducer), - versionsList: VersionsListReducer, - permissions: PermissionsReducer + versionCreation: createPlainDataReducer(VersionsPageCreationReducer), + versionsList: VersionsListReducer, + permissions: PermissionsReducer }); diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx index 26f8450f4c..74d88f0b52 100644 --- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx @@ -22,61 +22,108 @@ 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> - ); +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 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 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 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> +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 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; diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreation.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreation.js index 66c1c79be5..e0cb925df4 100644 --- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreation.js +++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreation.js @@ -13,32 +13,52 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import VersionsPageCreationActionHelper from './VersionsPageCreationActionHelper.js'; import VersionsPageActionHelper from '../VersionsPageActionHelper.js'; import VersionsPageCreationView from './VersionsPageCreationView.jsx'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; -import {VERSION_CREATION_FORM_NAME} from './VersionsPageCreationConstants.js'; +import { VERSION_CREATION_FORM_NAME } from './VersionsPageCreationConstants.js'; -export const mapStateToProps = ({versionsPage: {versionCreation}}) => { - let {genericFieldInfo} = versionCreation; - let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); +export const mapStateToProps = ({ versionsPage: { versionCreation } }) => { + let { genericFieldInfo } = versionCreation; + let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); - return {...versionCreation, isFormValid}; + return { ...versionCreation, isFormValid }; }; -export const mapActionsToProps = (dispatch, {itemId, itemType, additionalProps}) => { - return { - onDataChanged: (deltaData, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: VERSION_CREATION_FORM_NAME, customValidations}), - onCancel: () => VersionsPageCreationActionHelper.close(dispatch), - onSubmit: ({baseVersion, payload}) => { - VersionsPageCreationActionHelper.close(dispatch); - VersionsPageCreationActionHelper.createVersion(dispatch, {baseVersion, itemId, payload}).then(response => { - VersionsPageActionHelper.onNavigateToVersion(dispatch, {version: response, itemId, itemType, additionalProps}); - }); - }, - onValidateForm: () => ValidationHelper.validateForm(dispatch, VERSION_CREATION_FORM_NAME) - }; +export const mapActionsToProps = ( + dispatch, + { itemId, itemType, additionalProps } +) => { + return { + onDataChanged: (deltaData, customValidations) => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName: VERSION_CREATION_FORM_NAME, + customValidations + }), + onCancel: () => VersionsPageCreationActionHelper.close(dispatch), + onSubmit: ({ baseVersion, payload }) => { + VersionsPageCreationActionHelper.close(dispatch); + VersionsPageCreationActionHelper.createVersion(dispatch, { + baseVersion, + itemId, + payload + }).then(response => { + VersionsPageActionHelper.onNavigateToVersion(dispatch, { + version: response, + itemId, + itemType, + additionalProps + }); + }); + }, + onValidateForm: () => + ValidationHelper.validateForm(dispatch, VERSION_CREATION_FORM_NAME) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(VersionsPageCreationView); +export default connect(mapStateToProps, mapActionsToProps)( + VersionsPageCreationView +); diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationActionHelper.js index bc038689a4..6e3be705c0 100644 --- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationActionHelper.js @@ -15,65 +15,76 @@ */ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; -import {actionTypes} from './VersionsPageCreationConstants.js'; -import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes } from './VersionsPageCreationConstants.js'; +import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js'; -import {actionTypes as VersionsPageActionTypes} from '../VersionsPageConstants.js'; +import { actionTypes as VersionsPageActionTypes } from '../VersionsPageConstants.js'; -function baseUrl({itemId, baseVersion}) { - const restPrefix = Configuration.get('restPrefix'); - return `${restPrefix}/v1.0/items/${itemId}/versions/${baseVersion.id}/`; +function baseUrl({ itemId, baseVersion }) { + const restPrefix = Configuration.get('restPrefix'); + return `${restPrefix}/v1.0/items/${itemId}/versions/${baseVersion.id}/`; } -function createVersion({itemId, baseVersion, payload: {description, creationMethod} }) { - return RestAPIUtil.post(baseUrl({itemId, baseVersion}), {description, creationMethod}); +function createVersion({ + itemId, + baseVersion, + payload: { description, creationMethod } +}) { + return RestAPIUtil.post(baseUrl({ itemId, baseVersion }), { + description, + creationMethod + }); } - export default { + open(dispatch, { itemType, itemId, additionalProps, baseVersion }) { + dispatch({ + type: actionTypes.OPEN + }); - open(dispatch, {itemType, itemId, additionalProps, baseVersion}) { - dispatch({ - type: actionTypes.OPEN - }); - - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_SHOW, - data: { - modalComponentName: modalContentMapper.VERSION_CREATION, - modalComponentProps: {itemType, itemId, additionalProps, baseVersion}, - title: i18n('New Version - From {name}', {name: baseVersion.name}) - } - }); - }, - - close(dispatch){ - dispatch({ - type: actionTypes.CLOSE - }); + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_SHOW, + data: { + modalComponentName: modalContentMapper.VERSION_CREATION, + modalComponentProps: { + itemType, + itemId, + additionalProps, + baseVersion + }, + title: i18n('New Version - From {name}', { + name: baseVersion.name + }) + } + }); + }, - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_CLOSE - }); - }, + close(dispatch) { + dispatch({ + type: actionTypes.CLOSE + }); - createVersion(dispatch, {itemId, baseVersion, payload}){ - return createVersion({itemId, baseVersion, payload}).then(result => { - return ItemsHelper.fetchVersions({itemId}).then(response => { - dispatch({ - type: VersionsPageActionTypes.VERSIONS_LOADED, - versions: response.results, - itemId - }); - dispatch({ - type: actionTypes.VERSION_CREATED, - result - }); - return result; - }); - }); - } + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_CLOSE + }); + }, + createVersion(dispatch, { itemId, baseVersion, payload }) { + return createVersion({ itemId, baseVersion, payload }).then(result => { + return ItemsHelper.fetchVersions({ itemId }).then(response => { + dispatch({ + type: VersionsPageActionTypes.VERSIONS_LOADED, + versions: response.results, + itemId + }); + dispatch({ + type: actionTypes.VERSION_CREATED, + result + }); + return result; + }); + }); + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationConstants.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationConstants.js index 4ce381d4de..e761232443 100644 --- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationConstants.js @@ -16,13 +16,13 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionTypes = keyMirror({ - OPEN: null, - CLOSE: null, - VERSION_CREATED: null + OPEN: null, + CLOSE: null, + VERSION_CREATED: null }); export const VERSION_CREATION_FORM_NAME = 'VCREATIONFORM'; export const defaultState = { - creationMethod: 'major' -};
\ No newline at end of file + creationMethod: 'major' +}; diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationReducer.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationReducer.js index 620cf4717f..a762e4d338 100644 --- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationReducer.js @@ -13,32 +13,39 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes, VERSION_CREATION_FORM_NAME, defaultState} from './VersionsPageCreationConstants.js'; +import { + actionTypes, + VERSION_CREATION_FORM_NAME, + defaultState +} from './VersionsPageCreationConstants.js'; export default (state = {}, action) => { - switch (action.type) { - case actionTypes.OPEN: - return { - ...state, - formReady: null, - formName: VERSION_CREATION_FORM_NAME, - data: {...defaultState}, - genericFieldInfo: { - description: { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}] - }, - creationMethod: { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}] - } - } - }; - case actionTypes.CLOSE: - return {}; - default: - return state; - } + switch (action.type) { + case actionTypes.OPEN: + return { + ...state, + formReady: null, + formName: VERSION_CREATION_FORM_NAME, + data: { ...defaultState }, + genericFieldInfo: { + description: { + isValid: true, + errorText: '', + validations: [ + { type: 'required', data: true }, + { type: 'maxLength', data: 120 } + ] + }, + creationMethod: { + isValid: true, + errorText: '', + validations: [{ type: 'required', data: true }] + } + } + }; + case actionTypes.CLOSE: + return {}; + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx index caa85fe107..ba92d26067 100644 --- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx @@ -20,125 +20,116 @@ import Input from 'nfvo-components/input/validation/Input.jsx'; import Form from 'nfvo-components/input/validation/Form.jsx'; const VersionPropType = PropTypes.shape({ - name: PropTypes.string, - description: PropTypes.string, - creationMethod: PropTypes.string + name: PropTypes.string, + description: PropTypes.string, + creationMethod: PropTypes.string }); class VersionsPageCreationView extends React.Component { - - static propTypes = { - data: VersionPropType, - availableMethods: PropTypes.array, - onDataChanged: PropTypes.func.isRequired, - onSubmit: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired - }; - - render() { - let {data = {}, genericFieldInfo, baseVersion, onDataChanged, onCancel} = this.props; - let {additionalInfo: {OptionalCreationMethods}} = baseVersion; - let {description, creationMethod} = data; - - return ( - <div className='version-creation-page'> - { genericFieldInfo && <Form - ref={(validationForm) => this.validationForm = validationForm} - hasButtons={true} - onSubmit={() => this.submit()} - submitButtonText={i18n('Create')} - onReset={() => onCancel()} - labledButtons={true} - isValid={this.props.isFormValid} - formReady={this.props.formReady} - onValidateForm={() => this.validate()}> - - <div className='version-form-row'> - <Input - label={i18n('Version Category')} - value={creationMethod} - onChange={e => this.onSelectMethod(e)} - type='select' - overlayPos='bottom' - data-test-id='new-version-category' - isValid={genericFieldInfo.creationMethod.isValid} - errorText={genericFieldInfo.creationMethod.errorText} - isRequired> - <option key='' value=''>{i18n('Please select…')}</option> - {OptionalCreationMethods.map(method => <option key={method} value={method}>{i18n(method)}</option>)} - </Input> - </div> - - <div className='version-form-row'> - <Input - label={i18n('Description')} - value={description} - type='text' - overlayPos='bottom' - data-test-id='new-version-description' - isValid={genericFieldInfo.description.isValid} - errorText={genericFieldInfo.description.errorText} - onChange={description => onDataChanged({description})} - isRequired /> - </div> - - </Form> } - </div> - ); - } - - onSelectMethod(e) { - const selectedIndex = e.target.selectedIndex; - const creationMethod = e.target.options[selectedIndex].value; - this.props.onDataChanged({creationMethod}); - } - - submit() { - let {baseVersion, data: {description, creationMethod}} = this.props; - this.props.onSubmit({baseVersion, payload: {description, creationMethod}}); - } - - validate() { - this.props.onValidateForm(); - } - + static propTypes = { + data: VersionPropType, + availableMethods: PropTypes.array, + onDataChanged: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired + }; + + render() { + let { + data = {}, + genericFieldInfo, + baseVersion, + onDataChanged, + onCancel + } = this.props; + let { additionalInfo: { OptionalCreationMethods } } = baseVersion; + let { description, creationMethod } = data; + + return ( + <div className="version-creation-page"> + {genericFieldInfo && ( + <Form + ref={validationForm => + (this.validationForm = validationForm) + } + hasButtons={true} + onSubmit={() => this.submit()} + submitButtonText={i18n('Create')} + onReset={() => onCancel()} + labledButtons={true} + isValid={this.props.isFormValid} + formReady={this.props.formReady} + onValidateForm={() => this.validate()}> + <div className="version-form-row"> + <Input + label={i18n('Version Category')} + value={creationMethod} + onChange={e => this.onSelectMethod(e)} + type="select" + overlayPos="bottom" + data-test-id="new-version-category" + isValid={ + genericFieldInfo.creationMethod.isValid + } + errorText={ + genericFieldInfo.creationMethod.errorText + } + isRequired> + <option key="" value=""> + {i18n('Please select…')} + </option> + {OptionalCreationMethods.map(method => ( + <option key={method} value={method}> + {i18n(method)} + </option> + ))} + </Input> + </div> + + <div className="version-form-row"> + <Input + label={i18n('Description')} + value={description} + type="text" + overlayPos="bottom" + data-test-id="new-version-description" + isValid={genericFieldInfo.description.isValid} + errorText={ + genericFieldInfo.description.errorText + } + onChange={description => + onDataChanged({ description }) + } + isRequired + /> + </div> + </Form> + )} + </div> + ); + } + + onSelectMethod(e) { + const selectedIndex = e.target.selectedIndex; + const creationMethod = e.target.options[selectedIndex].value; + this.props.onDataChanged({ creationMethod }); + } + + submit() { + let { baseVersion, data: { description, creationMethod } } = this.props; + this.props.onSubmit({ + baseVersion, + payload: { description, creationMethod } + }); + } + + validate() { + this.props.onValidateForm(); + } } export default VersionsPageCreationView; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - /* <div className='software-product-inline-section'> <Input |