diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/components')
9 files changed, 49 insertions, 40 deletions
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> |