diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct')
15 files changed, 120 insertions, 118 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js index 90a2bb8f2e..d4bee0a876 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js @@ -409,6 +409,7 @@ const SoftwareProductActionHelper = { } }); const newVersionId = adjustMajorVersion(version.label, 1); + OnboardingActionHelper.updateCurrentScreenVersion(dispatch, {label: newVersionId, id: newVersionId}); SoftwareProductActionHelper.fetchSoftwareProduct(dispatch,{softwareProductId, version: {id: newVersionId}}); return Promise.resolve({newVersion: {id: newVersionId}}); }); @@ -438,6 +439,7 @@ const SoftwareProductActionHelper = { newVersionId = adjustMinorVersion(version.label, -1); break; } + OnboardingActionHelper.updateCurrentScreenVersion(dispatch, {label: newVersionId, id: newVersionId}); SoftwareProductActionHelper.fetchSoftwareProduct(dispatch,{softwareProductId, version:{id: newVersionId}}); return Promise.resolve({newVersion: {id: newVersionId}}); }); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx index ef4aecf568..3da26cc20f 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx @@ -18,7 +18,7 @@ import Tabs from 'react-bootstrap/lib/Tabs.js'; import Tab from 'react-bootstrap/lib/Tab.js'; import {tabsMapping} from './SoftwareProductAttachmentsConstants.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import Icon from 'nfvo-components/icon/Icon.jsx'; +import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import HeatValidation from './validation/HeatValidation.js'; class HeatScreenView extends Component { @@ -38,27 +38,32 @@ class HeatScreenView extends Component { <div className='vsp-attachments-view'> <div className='attachments-view-controllers'> {(this.state.activeTab === tabsMapping.SETUP) && - <Icon - iconClassName={heatDataExist ? '' : 'disabled'} - className={heatDataExist ? '' : 'disabled'} - image='download' + <SVGIcon + disabled={heatDataExist ? false : true} + name='download' + className='icon-component' label={i18n('Download HEAT')} + labelPosition='right' + color='secondary' onClick={heatDataExist ? () => onDownload({heatCandidate: heatSetup, isReadOnlyMode, version}) : undefined} data-test-id='download-heat'/>} {(this.state.activeTab === tabsMapping.VALIDATION && softwareProductId) && - <Icon - iconClassName={this.props.goToOverview ? '' : 'disabled'} - className={`go-to-overview-icon ${this.props.goToOverview ? '' : 'disabled'}`} - labelClassName='go-to-overview-label' + <SVGIcon + disabled={this.props.goToOverview !== true} onClick={this.props.goToOverview ? () => onGoToOverview({version}) : undefined} - image='go-to-overview' + name='proceedToOverview' + className='icon-component' label={i18n('Go to Overview')} + labelPosition='right' + color={this.props.goToOverview ? 'primary' : 'secondary'} data-test-id='go-to-overview'/>} - <Icon - image='upload' + <SVGIcon + name='upload' + className='icon-component' label={i18n('Upload New HEAT')} - className={isReadOnlyMode ? 'disabled' : ''} - iconClassName={isReadOnlyMode ? 'disabled' : ''} + labelPosition='right' + color='secondary' + disabled={isReadOnlyMode} onClick={evt => {this.refs.hiddenImportFileInput.click(evt);}} data-test-id='upload-heat'/> <input @@ -87,9 +92,9 @@ class HeatScreenView extends Component { } handleTabPress(key) { - let {heatSetup, heatSetupCache, onProcessAndValidate, isReadOnlyMode, version} = this.props; + let {heatSetup, heatSetupCache, onProcessAndValidate, isReadOnlyMode, version} = this.props; switch (key) { - case tabsMapping.VALIDATION: + case tabsMapping.VALIDATION: onProcessAndValidate({heatData: heatSetup, heatDataCache: heatSetupCache, isReadOnlyMode, version}).then( () => this.setState({activeTab: tabsMapping.VALIDATION}) ); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx index 901a583e24..17b3179d01 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx @@ -20,7 +20,6 @@ import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; import FormControl from 'react-bootstrap/lib/FormControl.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import SelectInput from 'nfvo-components/input/SelectInput.jsx'; -import Icon from 'nfvo-components/icon/Icon.jsx'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import {fileTypes} from './HeatSetupConstants.js'; import {tabsMapping} from '../SoftwareProductAttachmentsConstants.js'; @@ -52,7 +51,7 @@ class SortableModuleFileList extends Component { render() { - let {unassigned, onModuleRename, onModuleDelete, onModuleAdd, onBaseAdd, onModuleFileTypeChange, isBaseExist} = this.props; + let {unassigned, onModuleRename, onModuleDelete, onModuleAdd, onBaseAdd, onModuleFileTypeChange, isBaseExist, isReadOnlyMode} = this.props; const childProps = module => ({ module, onModuleRename, @@ -68,19 +67,17 @@ class SortableModuleFileList extends Component { items={this.state.data} draggingIndex={this.state.draggingIndex} sortId={i} - outline='list'><ModuleFile {...childProps(item)} /></SortableListItem> + outline='list'><ModuleFile {...childProps(item)} isReadOnlyMode={this.props.isReadOnlyMode} /></SortableListItem> ); }, this); return ( - <div className='modules-list-wrapper'> + <div className={`modules-list-wrapper ${(listItems.length > 0) ? 'modules-list-wrapper-divider' : ''}`}> <div className='modules-list-header'> - <div className='modules-list-controllers'> - {!isBaseExist && <Button btnType='link' onClick={onBaseAdd} disabled={unassigned.length === 0}>{i18n('Add Base')}</Button>} - <Button btnType='link' onClick={onModuleAdd} disabled={unassigned.length === 0}>{i18n('Add Module')}</Button> - </div> + {!isBaseExist && <div><Button btnType='link' onClick={onBaseAdd} disabled={isReadOnlyMode || unassigned.length === 0}>{i18n('Add Base')}</Button></div>} + <div><Button btnType='link' onClick={onModuleAdd} disabled={isReadOnlyMode || unassigned.length === 0}>{i18n('Add Module')}</Button></div> </div> - <ul>{listItems}</ul> + {(listItems.length > 0) && <ul>{listItems}</ul>} </div> ); } @@ -89,20 +86,24 @@ class SortableModuleFileList extends Component { const tooltip = (name) => <Tooltip id='tooltip-bottom'>{name}</Tooltip>; const UnassignedFileList = (props) => { return ( - <div className='unassigned-files'> + <div> + <div className='modules-list-header'/> + <div className='unassigned-files'> <div className='unassigned-files-title'>{i18n('UNASSIGNED FILES')}</div> <div className='unassigned-files-list'>{props.children}</div> + </div> </div> ); }; const EmptyListContent = props => { - let {onClick, heatDataExist} = props; + let {onClick, heatDataExist, isReadOnlyMode} = props; let displayText = heatDataExist ? 'All Files Are Assigned' : ''; return ( <div className='go-to-validation-button-wrapper'> <div className='all-files-assigned'>{i18n(displayText)}</div> - {heatDataExist && <div className={'link'} onClick={onClick} data-test-id='go-to-validation'>{i18n('Proceed To Validation')}<SVGIcon name='angleRight'/></div>} + {heatDataExist && <SVGIcon disabled={isReadOnlyMode} name='angleRight' onClick={onClick} + data-test-id='go-to-validation' label={i18n('Proceed To Validation')} labelPosition='left' color='primary'/>} </div> ); }; @@ -112,14 +113,11 @@ const UnassignedFile = (props) => ( </OverlayTrigger> ); -const AddOrDeleteVolumeFiels = ({add = true, onAdd, onDelete}) => { +const AddOrDeleteVolumeFiles = ({add = true, onAdd, onDelete, isReadOnlyMode}) => { const displayText = add ? 'Add Volume Files' : 'Delete Volume Files'; const action = add ? onAdd : onDelete; return ( - <div className='add-or-delete-volumes' onClick={action}> - <SVGIcon name={add ? 'plus' : 'close'} /> - <span>{i18n(displayText)}</span> - </div> + <Button disabled={isReadOnlyMode} onClick={action} btnType='link' className='add-or-delete-volumes' iconName={add ? 'plus' : 'close'}>{i18n(displayText)}</Button> ); }; @@ -195,14 +193,14 @@ class ModuleFile extends Component { } render() { - const {module: {name, isBase, yaml, env, vol, volEnv}, onModuleDelete, files, onModuleFileTypeChange} = this.props; + const {module: {name, isBase, yaml, env, vol, volEnv}, onModuleDelete, files, onModuleFileTypeChange, isReadOnlyMode} = this.props; const {displayVolumes} = this.state; const moduleType = isBase ? 'BASE' : 'MODULE'; return ( <div className='modules-list-item' data-test-id='module-item'> <div className='modules-list-item-controllers'> <div className='modules-list-item-filename'> - <Icon image={isBase ? 'base' : 'module'} iconClassName='heat-setup-module-icon' /> + <SVGIcon name={isBase ? 'base' : 'module'} color='primary' iconClassName='heat-setup-module-icon' /> <span className='module-title-by-type'>{`${moduleType}: `}</span> <div className={`text-and-icon ${this.state.isInNameEdit ? 'in-edit' : ''}`}> {this.renderNameAccordingToEditState()} @@ -235,7 +233,7 @@ class ModuleFile extends Component { files={files} selected={volEnv} onChange={onModuleFileTypeChange}/>} - <AddOrDeleteVolumeFiels onAdd={() => this.setState({displayVolumes: true})} onDelete={() => this.deleteVolumeFiles()} add={!displayVolumes}/> + <AddOrDeleteVolumeFiles isReadOnlyMode={isReadOnlyMode} onAdd={() => this.setState({displayVolumes: true})} onDelete={() => this.deleteVolumeFiles()} add={!displayVolumes}/> </div> </div> ); @@ -245,15 +243,15 @@ class ModuleFile extends Component { class ArtifactOrNestedFileList extends Component { render() { - let {type, title, selected, options, onSelectChanged, onAddAllUnassigned} = this.props; + let {type, title, selected, options, onSelectChanged, onAddAllUnassigned, isReadOnlyMode, headerClassName} = this.props; return ( - <div className={`artifact-files ${type === 'nested' ? 'nested' : ''}`}> + <div className={`artifact-files ${type === 'nested' ? 'nested' : ''} ${headerClassName} `}> <div className='artifact-files-header'> <span> - {type === 'artifact' && (<Icon image='artifacts' iconClassName='heat-setup-module-icon' />)} + {type === 'artifact' && (<SVGIcon color='primary' name='artifacts' iconClassName='heat-setup-module-icon' />)} {`${title}`} </span> - {type === 'artifact' && <span className='add-all-unassigned' onClick={onAddAllUnassigned}>{i18n('Add All Unassigned Files')}</span>} + {type === 'artifact' && <Button disabled={isReadOnlyMode} btnType='link' className='add-all-unassigned' onClick={onAddAllUnassigned}>{i18n('Add All Unassigned Files')}</Button>} </div> {type === 'nested' ? ( <ul className='nested-list'>{selected.map(nested => @@ -294,6 +292,7 @@ class SoftwareProductHeatSetupView extends Component { <div className='heat-setup-view-modules-and-artifacts'> <SortableModuleFileList {...this.props} + isReadOnlyMode={this.props.isReadOnlyMode} artifacts={formattedArtifacts} unassigned={formattedUnassigned}/> <ArtifactOrNestedFileList @@ -302,11 +301,14 @@ class SoftwareProductHeatSetupView extends Component { options={formattedUnassigned} selected={formattedArtifacts} onSelectChanged={onArtifactListChange} + isReadOnlyMode={this.props.isReadOnlyMode} + headerClassName={(modules && modules.length > 0) ? 'with-list-items' : ''} onAddAllUnassigned={onAddAllUnassigned}/> <ArtifactOrNestedFileList type={'nested'} title={i18n('NESTED HEAT FILES')} options={[]} + isReadOnlyMode={this.props.isReadOnlyMode} selected={nested}/> </div> <UnassignedFileList> @@ -316,6 +318,7 @@ class SoftwareProductHeatSetupView extends Component { : (<EmptyListContent heatDataExist={heatDataExist} + isReadOnlyMode={this.props.isReadOnlyMode} onClick={() => this.processAndValidateHeat({modules, unassigned, artifacts, nested}, heatSetupCache)}/>) } </UnassignedFileList> diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx index f2d5de4dff..62dcb82db1 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx @@ -16,19 +16,18 @@ import React, {Component, PropTypes} from 'react'; import classNames from 'classnames'; import Collapse from 'react-bootstrap/lib/Collapse.js'; -import Icon from 'nfvo-components/icon/Icon.jsx'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import {mouseActions, errorLevels, nodeFilters} from './HeatValidationConstants.js'; const leftPanelWidth = 250; const typeToIcon = Object.freeze({ - heat: 'heat', - volume: 'volume', + heat: 'nestedHeat', + volume: 'base', network: 'network', - artifact: 'validation-artifacts', + artifact: 'artifacts', env: 'env', - other: 'validation-other' + other: 'other' }); @@ -74,7 +73,7 @@ function HeatFileTreeRow(props) { { <span className='tree-node-icon'> - <Icon image={typeToIcon[node.type]} iconClassName={selectedNode === node.name ? 'selected' : ''}/> + <SVGIcon name={typeToIcon[node.type]} color={selectedNode === node.name ? 'primary' : 'secondary'}/> </span> } { @@ -94,7 +93,7 @@ function HeatFileTreeHeader(props) { <div onClick={() => props.selectNode(nodeFilters.ALL)} className={classNames({'attachments-tree-header': true, 'header-selected' : props.selectedNode === nodeFilters.ALL})} data-test-id='validation-tree-header'> <div className='tree-header-title' > - <Icon image='zip' iconClassName={classNames(props.selectedNode === nodeFilters.ALL ? 'selected' : '', 'header-icon')} /> + <SVGIcon name='zip' color={props.selectedNode === nodeFilters.ALL ? 'primary' : ''} iconClassName='header-icon' /> <span className={classNames({'tree-header-title-text' : true, 'tree-header-title-selected' : props.selectedNode === nodeFilters.ALL})}>{i18n(`HEAT${hasErrors ? ' (Draft)' : ''}`)}</span> </div> @@ -200,12 +199,13 @@ class HeatMessageBoard extends Component { } renderError(error) { let rand = Math.random() * (3000 - 1) + 1; + console.log(this.props.selectedNode ); return ( <div key={error.name + error.errorMessage + error.parentName + rand} className='error-item' data-test-id='validation-error'> {error.level === errorLevels.WARNING ? - <SVGIcon name='exclamationTriangleLine' iconClassName='large' /> : <Icon image='error-lg' /> } + <SVGIcon name='exclamationTriangleLine' iconClassName='large' color='warning' /> : <SVGIcon iconClassName='large' color='negative' /> } <span className='error-item-file-type'> { (this.props.selectedNode === nodeFilters.ALL) ? @@ -217,7 +217,7 @@ class HeatMessageBoard extends Component { {i18n(error.errorMessage)} </span> </span> : - i18n(error.errorMesage) + i18n(error.errorMessage) } </span> </div> @@ -234,18 +234,14 @@ class ErrorsAndWarningsCount extends Component { if (!errors) { return null; } - let errIcon = 'error'; let {size} = this.props; - if (size && size === 'large') { - errIcon += '-lg'; - } return (<div className='counters'> {(errors.errorCount > 0) && <div className='counter'> - <Icon image={errIcon} iconClassName='counter-icon'/> - <div className={'error-text ' + (size ? size : '')} data-test-id='validation-error-count'>{errors.errorCount}</div> + <SVGIcon name='error' color='negative' iconClassName={size}/> + <div className={'error-text ' + (size ? size : '')} data-test-id='validation-error-count'>={errors.errorCount}</div> </div>} {(errors.warningCount > 0) && <div className='counter'> - <SVGIcon name='exclamationTriangleLine' iconClassName={size} /> + <SVGIcon name='exclamationTriangleLine' iconClassName={size} color='warning'/> <div className={'warning-text ' + (size ? size : '')} data-test-id='validation-warning-count'>{errors.warningCount}</div> </div>} </div>); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js new file mode 100644 index 0000000000..2483d0aaa2 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js @@ -0,0 +1,6 @@ + +import Validator from 'nfvo-utils/Validator.js'; + +export const imageCustomValidations = { + 'version': value => Validator.validate('version', value, [{type: 'required', data: true}]) +}; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js index 49d891c9df..5c81f05e80 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js @@ -54,9 +54,12 @@ const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.IMAGE_EDIT_FORM}), onSubmit: ({data, qdata}) => SoftwareProductComponentsImageActionHelper.saveImageDataAndQuestionnaire(dispatch, {softwareProductId, componentId, version, data, qdata}), onCancel: () => SoftwareProductComponentsImageActionHelper.closeImageEditor(dispatch), - onValidateForm: () => ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM), - onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, - qName: IMAGE_QUESTIONNAIRE}), + onValidateForm: customValidations => { + ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM); + ValidationHelper.qValidateForm(dispatch, IMAGE_QUESTIONNAIRE, customValidations); + }, + onQDataChanged: (deltaData, customValidations) => ValidationHelper.qDataChanged(dispatch, {deltaData, + qName: IMAGE_QUESTIONNAIRE, customValidations}), }; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js index 0ab785a97f..7c357429e5 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js @@ -30,7 +30,7 @@ export default (state = {}, action) => { 'fileName' : { isValid: true, errorText: '', - validations: [{type: 'required', data: true}, {type: 'validateName', data: true}] + validations: [{type: 'required', data: true}] } }, formName: forms.IMAGE_EDIT_FORM diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx index 300f8edcc3..7c1a3f5b55 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx @@ -20,6 +20,7 @@ import Form from 'nfvo-components/input/validation/Form.jsx'; import FileDetails from './imagesEditorComponents/FileDetails.jsx'; import ImageDetails from './imagesEditorComponents/ImageDetails.jsx'; +import {imageCustomValidations} from './ImageValidations.js'; class SoftwareProductComponentsImageEditorView extends React.Component { static propTypes = { @@ -44,7 +45,7 @@ class SoftwareProductComponentsImageEditorView extends React.Component { isValid={isFormValid} formReady={formReady} submitButtonText={editingMode ? i18n('Save') : i18n('Create')} - onValidateForm={() => onValidateForm() } + onValidateForm={() => onValidateForm(imageCustomValidations) } className='vsp-components-image-editor'> <div className='editor-data'> <FileDetails @@ -56,7 +57,7 @@ class SoftwareProductComponentsImageEditorView extends React.Component { isManual={isManual} dataMap={dataMap} onQDataChanged={onQDataChanged}/> - {editingMode && <ImageDetails dataMap={dataMap}qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>} + {editingMode && <ImageDetails dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>} </div> </Form>} </div> diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx index ca58b697a2..2e9ab417d8 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx @@ -40,6 +40,7 @@ const FileDetails = ({editingMode, fileName, onDataChanged, isManual, dataMap, o type='text' className='image-filename'/> </GridItem> + {!editingMode && <div className='note-text'>{i18n('After image creation you must go to Edit Image and add File Version')}</div>} {editingMode && <Version isManual={isManual} dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>} {editingMode && <Format isManual={isManual} qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged}/>} </GridSection> diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx index 3cac9a51b8..7dd577b8c9 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx @@ -17,6 +17,7 @@ import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Input from 'nfvo-components/input/validation/Input.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; +import {imageCustomValidations} from '../ImageValidations.js'; const Version = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => { @@ -28,7 +29,8 @@ const Version = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => { type='text' className='image-version' label={i18n('Version')} - onChange={(version) => onQDataChanged({'version' : version})} + isRequired={true} + onChange={(version) => onQDataChanged({'version' : version}, {'version' : imageCustomValidations['version']})} isValid={qgenericFieldInfo['version'].isValid} errorText={qgenericFieldInfo['version'].errorText} value={dataMap['version']}/> diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx index 9ae9e359b0..8a82f54901 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx @@ -50,6 +50,7 @@ const pointers = [ added: 'Please describe.' } ]; +//TODO check for buttons const TextAreaItem = ({item, toggle, expanded, genericFieldInfo, dataMap, onQDataChanged}) => ( <GridItem colSpan={3} key={item.key} > diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx index 36c1728ef3..2d5a965c40 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx @@ -15,10 +15,8 @@ */ import React, {Component, PropTypes} from 'react'; import Dropzone from 'react-dropzone'; -import ButtonGroup from 'react-bootstrap/lib/ButtonGroup.js'; -import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar.js'; -import Button from 'react-bootstrap/lib/Button.js'; -import i18n from 'nfvo-utils/i18n/i18n.js'; +import Button from 'sdc-ui/lib/react/Button.js'; +import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx'; import {fileTypes, type2Title, type2Name} from './SoftwareProductComponentsMonitoringConstants.js'; @@ -59,7 +57,7 @@ class SoftwareProductComponentsMonitoringView extends Component { let typeDisplayName = type2Title[type]; return ( <Dropzone - className={`snmp-dropzone ${this.state.dragging ? 'active-dragging' : ''}`} + className={`dropzone ${this.state.dragging ? 'active-dragging' : ''}`} onDrop={(acceptedFiles, rejectedFiles) => this.handleImport(acceptedFiles, rejectedFiles, {isReadOnlyMode, type, refAndName})} onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)} onDragLeave={() => this.setState({dragging:false})} @@ -71,7 +69,7 @@ class SoftwareProductComponentsMonitoringView extends Component { disabled> <div className='draggable-wrapper'> <div className='section-title'>{typeDisplayName}</div> - {fileName ? this.renderUploadedFileName(fileName, type) : this.renderUploadButton(refAndName)} + {fileName ? this.renderUploadedFileName(fileName, type, isReadOnlyMode) : this.renderUploadButton(refAndName)} </div> </Dropzone> ); @@ -80,25 +78,32 @@ class SoftwareProductComponentsMonitoringView extends Component { renderUploadButton(refAndName) { let {isReadOnlyMode} = this.props; return ( - <div - className={`software-product-landing-view-top-block-col-upl${isReadOnlyMode ? ' disabled' : ''}`}> - <div className='drag-text'>{i18n('Drag & drop for upload')}</div> - <div className='or-text'>{i18n('or')}</div> - <div className='upload-btn primary-btn' data-test-id={`monitoring-upload-${refAndName}`} onClick={() => this.refs[refAndName].open()}> - <span className='primary-btn-text'>{i18n('Select file')}</span> - </div> - </div> + <DraggableUploadFileBox + dataTestId={`monitoring-upload-${refAndName}`} + className='software-product-landing-view-top-block-col-upl' + isReadOnlyMode={isReadOnlyMode} + onClick={() => this.refs[refAndName].open()}/> ); } - renderUploadedFileName(filename, type) { + renderUploadedFileName(filename, type, isReadOnlyMode) { return ( - <ButtonToolbar> - <ButtonGroup> - <Button disabled>{filename}</Button> - <Button data-test-id={`monitoring-delete-${type}`} className='delete-button' onClick={()=>this.props.onDeleteFile(type)}>X</Button> - </ButtonGroup> - </ButtonToolbar> + <div className='monitoring-file'> + <Button + color='white' + disabled={true} + className='filename'> + {filename} + </Button> + + <Button + color='gray' + data-test-id={`monitoring-delete-${type}`} + disabled={isReadOnlyMode} + onClick={()=>this.props.onDeleteFile(type)} + iconName='close' + className='delete'/> + </div> ); } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx index 18f2ee129c..87abaf4978 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx @@ -17,6 +17,7 @@ import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Dropzone from 'react-dropzone'; +import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx'; import {optionsInputValues as ComponentProcessesOptionsInputValues} from './SoftwareProductComponentProcessesConstants.js'; import Form from 'nfvo-components/input/validation/Form.jsx'; import Input from 'nfvo-components/input/validation/Input.jsx'; @@ -31,17 +32,6 @@ const SoftwareProductProcessEditorPropType = React.PropTypes.shape({ type: React.PropTypes.string }); -const FileUploadBox = ({onClick}) => { - return ( - <div className='file-upload-box'> - <div className='drag-text'>{i18n('Drag & drop for upload')}</div> - <div className='or-text'>{i18n('or')}</div> - <div className='upload-btn primary-btn' onClick={onClick}> - <span className='primary-btn-text'>{i18n('Select file')}</span> - </div> - </div> - ); -}; class SoftwareProductProcessesEditorView extends React.Component { @@ -99,7 +89,7 @@ class SoftwareProductProcessesEditorView extends React.Component { type='text'/> </GridItem> <GridItem colSpan={2}> - <FileUploadBox onClick={() => this.refs.processEditorFileInput.open()} /> + <DraggableUploadFileBox isReadOnlyMode={isReadOnlyMode} className='file-upload-box' onClick={() => this.refs.processEditorFileInput.open()} /> </GridItem> </GridSection> <GridSection> diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx index d3738e3ea4..7ffbeda4dc 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx @@ -19,7 +19,7 @@ import Dropzone from 'react-dropzone'; import i18n from 'nfvo-utils/i18n/i18n.js'; - +import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import SoftwareProductComponentsList from '../components/SoftwareProductComponentsList.js'; @@ -128,14 +128,11 @@ class SoftwareProductLandingPageView extends React.Component { </div> </div> </div> - <div - className={classnames('software-product-landing-view-top-block-col-upl', {'disabled': isReadOnlyMode})}> - <div className='drag-text'>{i18n('Drag & drop for upload')}</div> - <div className='or-text'>{i18n('or')}</div> - <div data-test-id='upload-btn' className='upload-btn primary-btn' onClick={() => this.refs.fileInput.open()}> - <span className='primary-btn-text'>{i18n('Select file')}</span> - </div> - </div> + <DraggableUploadFileBox + dataTestId='upload-btn' + isReadOnlyMode={isReadOnlyMode} + className={classnames('software-product-landing-view-top-block-col-upl', {'disabled': isReadOnlyMode})} + onClick={() => this.refs.fileInput.open()}/> </div> </div> ); @@ -229,7 +226,7 @@ const ProductSummary = ({currentSoftwareProduct, onDetailsSelect}) => { const LicenseAgreement = ({licenseAgreementName}) => { if (!licenseAgreementName) { - return (<div className='missing-license'><SVGIcon name='exclamationTriangleFull'/><div className='warning-text'>{i18n('Missing')}</div></div>); + return (<div className='missing-license'><SVGIcon color='warning' name='exclamationTriangleFull'/><div className='warning-text'>{i18n('Missing')}</div></div>); } return <div>{licenseAgreementName}</div>; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx index 137e4a2b4e..0df36cf65d 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx @@ -17,6 +17,7 @@ import React from 'react'; import Dropzone from 'react-dropzone'; import classnames from 'classnames'; +import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx'; import i18n from 'nfvo-utils/i18n/i18n.js'; import {optionsInputValues as ProcessesOptionsInputValues} from './SoftwareProductProcessesConstants.js'; import Form from 'nfvo-components/input/validation/Form.jsx'; @@ -32,17 +33,6 @@ const SoftwareProductProcessEditorPropType = React.PropTypes.shape({ type: React.PropTypes.string }); -const FileUploadBox = ({onClick}) => { - return ( - <div className='file-upload-box'> - <div className='drag-text'>{i18n('Drag & drop for upload')}</div> - <div className='or-text'>{i18n('or')}</div> - <div className='upload-btn primary-btn' onClick={onClick}> - <span className='primary-btn-text'>{i18n('Select file')}</span> - </div> - </div> - ); -}; class SoftwareProductProcessesEditorView extends React.Component { @@ -101,7 +91,7 @@ class SoftwareProductProcessesEditorView extends React.Component { type='text'/> </GridItem> <GridItem colSpan={2}> - <FileUploadBox onClick={() => this.refs.processEditorFileInput.open()}/> + <DraggableUploadFileBox isReadOnlyMode={isReadOnlyMode} className='file-upload-box' onClick={() => this.refs.processEditorFileInput.open()}/> </GridItem> </GridSection> <GridSection> |