From 7fdf733a64670fceefc3ded35cfa581e1c458179 Mon Sep 17 00:00:00 2001 From: Einav Weiss Keidar Date: Tue, 20 Mar 2018 14:45:40 +0200 Subject: Adding Prettier and fixing up eslint version Issue-ID: SDC-1094 Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd Signed-off-by: Einav Weiss Keidar --- .../components/images/ImageValidations.js | 6 +- .../SoftwareProductComponentsImageActionHelper.js | 375 +++++++++++++-------- .../SoftwareProductComponentsImageConstants.js | 10 +- .../images/SoftwareProductComponentsImageEditor.js | 119 ++++--- .../SoftwareProductComponentsImageEditorReducer.js | 47 ++- .../SoftwareProductComponentsImageEditorView.jsx | 116 ++++--- .../images/SoftwareProductComponentsImageList.js | 161 ++++++--- .../SoftwareProductComponentsImageListReducer.js | 15 +- .../SoftwareProductComponentsImageListView.jsx | 237 +++++++------ .../images/imagesEditorComponents/FileDetails.jsx | 78 +++-- .../images/imagesEditorComponents/Format.jsx | 54 +-- .../images/imagesEditorComponents/ImageDetails.jsx | 33 +- .../images/imagesEditorComponents/Version.jsx | 42 +-- 13 files changed, 798 insertions(+), 495 deletions(-) (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images') 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 index 2483d0aaa2..900a9a1c46 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js @@ -1,6 +1,6 @@ - import Validator from 'nfvo-utils/Validator.js'; -export const imageCustomValidations = { - 'version': value => Validator.validate('version', value, [{type: 'required', data: true}]) +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/SoftwareProductComponentsImageActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js index 8d70d6f14c..3f661b76fe 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js @@ -17,157 +17,268 @@ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import Configuration from 'sdc-app/config/Configuration.js'; -import {modalContentMapper} from 'sdc-app/common/modal/ModalContentMapper.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; -import {IMAGE_QUESTIONNAIRE} from './SoftwareProductComponentsImageConstants.js'; -import {actionTypes} from './SoftwareProductComponentsImageConstants.js'; +import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; +import { IMAGE_QUESTIONNAIRE } from './SoftwareProductComponentsImageConstants.js'; +import { actionTypes } from './SoftwareProductComponentsImageConstants.js'; function baseUrl(softwareProductId, version, componentId) { - const versionId = version.id; - const restPrefix = Configuration.get('restPrefix'); - return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/images`; + const versionId = version.id; + const restPrefix = Configuration.get('restPrefix'); + return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/components/${componentId}/images`; } -function fetchImagesList({softwareProductId, componentId, version}) { - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}`); +function fetchImagesList({ softwareProductId, componentId, version }) { + return RestAPIUtil.fetch( + `${baseUrl(softwareProductId, version, componentId)}` + ); } -function fetchImage({softwareProductId, componentId, imageId, version}) { - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${imageId}`); +function fetchImage({ softwareProductId, componentId, imageId, version }) { + return RestAPIUtil.fetch( + `${baseUrl(softwareProductId, version, componentId)}/${imageId}` + ); } -function destroyImage({softwareProductId, componentId, version, imageId}) { - return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version, componentId)}/${imageId}`); +function destroyImage({ softwareProductId, componentId, version, imageId }) { + return RestAPIUtil.destroy( + `${baseUrl(softwareProductId, version, componentId)}/${imageId}` + ); } -function createImage({softwareProductId, componentId, version, data}) { - return RestAPIUtil.post(baseUrl(softwareProductId, version, componentId), { - fileName: data.fileName - }); +function createImage({ softwareProductId, componentId, version, data }) { + return RestAPIUtil.post(baseUrl(softwareProductId, version, componentId), { + fileName: data.fileName + }); } -function fetchImageQuestionnaire({softwareProductId, componentId, imageId, version}) { - return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version, componentId)}/${imageId}/questionnaire`); +function fetchImageQuestionnaire({ + softwareProductId, + componentId, + imageId, + version +}) { + return RestAPIUtil.fetch( + `${baseUrl( + softwareProductId, + version, + componentId + )}/${imageId}/questionnaire` + ); } -function saveImage({softwareProductId, version, componentId, image: {id, fileName}}) { - return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${id}`,{ - fileName - }); - +function saveImage({ + softwareProductId, + version, + componentId, + image: { id, fileName } +}) { + return RestAPIUtil.put( + `${baseUrl(softwareProductId, version, componentId)}/${id}`, + { + fileName + } + ); } -function saveImageQuestionnaire({softwareProductId, componentId, version, imageId, qdata}) { - return RestAPIUtil.put(`${baseUrl(softwareProductId, version, componentId)}/${imageId}/questionnaire`, qdata); +function saveImageQuestionnaire({ + softwareProductId, + componentId, + version, + imageId, + qdata +}) { + return RestAPIUtil.put( + `${baseUrl( + softwareProductId, + version, + componentId + )}/${imageId}/questionnaire`, + qdata + ); } const SoftwareProductComponentImagesActionHelper = { - fetchImagesList(dispatch, {softwareProductId, componentId, version}) { - dispatch({ - type: actionTypes.IMAGES_LIST_UPDATE, - response: [] - }); - - return fetchImagesList({softwareProductId, componentId, version}).then((response) => { - dispatch({ - type: actionTypes.IMAGES_LIST_UPDATE, - response: response.results, - componentId : componentId - }); - }); - }, - - deleteImage(dispatch, {softwareProductId, componentId, version, imageId}) { - return destroyImage({softwareProductId, componentId, version, imageId}).then(() => { - return SoftwareProductComponentImagesActionHelper.fetchImagesList(dispatch, {softwareProductId, componentId, version}); - }); - }, - - loadImageData({softwareProductId, componentId, imageId, version}) { - return fetchImage({softwareProductId, componentId, imageId, version}); - }, - - openEditImageEditor(dispatch, {image, softwareProductId, componentId, version, isReadOnlyMode}) { - return SoftwareProductComponentImagesActionHelper.loadImageData({softwareProductId, componentId, imageId: image.id, version}).then(({data}) => { - SoftwareProductComponentImagesActionHelper.loadImageQuestionnaire(dispatch, { - softwareProductId, - componentId, - imageId: image.id, - version - }).then(() => { - SoftwareProductComponentImagesActionHelper.openImageEditor(dispatch, { - softwareProductId, - componentId, - version, - isReadOnlyMode, - image, - data - }); - }); - }); - }, - - openImageEditor(dispatch, {image = {}, data = {}, softwareProductId, componentId, version, isReadOnlyMode}) { - - let {id} = image; - let title = id ? i18n('Edit Image') : i18n('Create New Image'); - let className = id ? 'image-modal-edit' : 'image-modal-new'; - - dispatch({ - type: actionTypes.ImageEditor.OPEN, - image: {...data, id} - }); - - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_SHOW, - data: { - modalComponentName: modalContentMapper.SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR, - title: title, - modalClassName: className, - modalComponentProps: {softwareProductId, componentId, version, isReadOnlyMode} - } - }); - - }, - - closeImageEditor(dispatch) { - - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_CLOSE - }); - - dispatch({ - type: actionTypes.ImageEditor.CLOSE - }); - - }, - - loadImageQuestionnaire(dispatch, {softwareProductId, componentId, imageId, version}) { - return fetchImageQuestionnaire({softwareProductId, componentId, imageId, version}).then((response) => { - ValidationHelper.qDataLoaded(dispatch, {qName: IMAGE_QUESTIONNAIRE ,response: { - qdata: response.data ? JSON.parse(response.data) : {}, - qschema: JSON.parse(response.schema) - }}); - }); - }, - - saveImageDataAndQuestionnaire(dispatch, {softwareProductId, componentId, version, data, qdata}) { - SoftwareProductComponentImagesActionHelper.closeImageEditor(dispatch); - if (data !== null && data.id) { - // editor in edit mode - return Promise.all([ - saveImageQuestionnaire({softwareProductId, version, componentId, imageId: data.id, qdata}), - saveImage({softwareProductId, version, componentId, image: data}).then(() => { - return SoftwareProductComponentImagesActionHelper.fetchImagesList(dispatch, {softwareProductId, componentId, version}); - }) - ]); - } else { - // editor in create mode - createImage({softwareProductId, componentId, version, data}).then(() => { - return SoftwareProductComponentImagesActionHelper.fetchImagesList(dispatch, {softwareProductId, componentId, version}); - }); - } - } + fetchImagesList(dispatch, { softwareProductId, componentId, version }) { + dispatch({ + type: actionTypes.IMAGES_LIST_UPDATE, + response: [] + }); + + return fetchImagesList({ + softwareProductId, + componentId, + version + }).then(response => { + dispatch({ + type: actionTypes.IMAGES_LIST_UPDATE, + response: response.results, + componentId: componentId + }); + }); + }, + + deleteImage( + dispatch, + { softwareProductId, componentId, version, imageId } + ) { + return destroyImage({ + softwareProductId, + componentId, + version, + imageId + }).then(() => { + return SoftwareProductComponentImagesActionHelper.fetchImagesList( + dispatch, + { softwareProductId, componentId, version } + ); + }); + }, + + loadImageData({ softwareProductId, componentId, imageId, version }) { + return fetchImage({ softwareProductId, componentId, imageId, version }); + }, + + openEditImageEditor( + dispatch, + { image, softwareProductId, componentId, version, isReadOnlyMode } + ) { + return SoftwareProductComponentImagesActionHelper.loadImageData({ + softwareProductId, + componentId, + imageId: image.id, + version + }).then(({ data }) => { + SoftwareProductComponentImagesActionHelper.loadImageQuestionnaire( + dispatch, + { + softwareProductId, + componentId, + imageId: image.id, + version + } + ).then(() => { + SoftwareProductComponentImagesActionHelper.openImageEditor( + dispatch, + { + softwareProductId, + componentId, + version, + isReadOnlyMode, + image, + data + } + ); + }); + }); + }, + + openImageEditor( + dispatch, + { + image = {}, + data = {}, + softwareProductId, + componentId, + version, + isReadOnlyMode + } + ) { + let { id } = image; + let title = id ? i18n('Edit Image') : i18n('Create New Image'); + let className = id ? 'image-modal-edit' : 'image-modal-new'; + + dispatch({ + type: actionTypes.ImageEditor.OPEN, + image: { ...data, id } + }); + + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_SHOW, + data: { + modalComponentName: + modalContentMapper.SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR, + title: title, + modalClassName: className, + modalComponentProps: { + softwareProductId, + componentId, + version, + isReadOnlyMode + } + } + }); + }, + + closeImageEditor(dispatch) { + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_CLOSE + }); + + dispatch({ + type: actionTypes.ImageEditor.CLOSE + }); + }, + + loadImageQuestionnaire( + dispatch, + { softwareProductId, componentId, imageId, version } + ) { + return fetchImageQuestionnaire({ + softwareProductId, + componentId, + imageId, + version + }).then(response => { + ValidationHelper.qDataLoaded(dispatch, { + qName: IMAGE_QUESTIONNAIRE, + response: { + qdata: response.data ? JSON.parse(response.data) : {}, + qschema: JSON.parse(response.schema) + } + }); + }); + }, + + saveImageDataAndQuestionnaire( + dispatch, + { softwareProductId, componentId, version, data, qdata } + ) { + SoftwareProductComponentImagesActionHelper.closeImageEditor(dispatch); + if (data !== null && data.id) { + // editor in edit mode + return Promise.all([ + saveImageQuestionnaire({ + softwareProductId, + version, + componentId, + imageId: data.id, + qdata + }), + saveImage({ + softwareProductId, + version, + componentId, + image: data + }).then(() => { + return SoftwareProductComponentImagesActionHelper.fetchImagesList( + dispatch, + { softwareProductId, componentId, version } + ); + }) + ]); + } else { + // editor in create mode + createImage({ softwareProductId, componentId, version, data }).then( + () => { + return SoftwareProductComponentImagesActionHelper.fetchImagesList( + dispatch, + { softwareProductId, componentId, version } + ); + } + ); + } + } }; export default SoftwareProductComponentImagesActionHelper; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js index 6b6c9a30e5..300b2898e1 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageConstants.js @@ -16,12 +16,12 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionTypes = keyMirror({ - IMAGES_LIST_UPDATE: null, + IMAGES_LIST_UPDATE: null, - ImageEditor: { - CLOSE: null, - OPEN: null - } + ImageEditor: { + CLOSE: null, + OPEN: null + } }); export const IMAGE_QUESTIONNAIRE = 'image'; 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 c5f23e7681..0243a38f1b 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 @@ -13,56 +13,93 @@ * 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 ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import SoftwareProductComponentsImageActionHelper from './SoftwareProductComponentsImageActionHelper.js'; import SoftwareProductComponentsImageEditorView from './SoftwareProductComponentsImageEditorView.jsx'; -import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js'; -import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; -import {IMAGE_QUESTIONNAIRE} from './SoftwareProductComponentsImageConstants.js'; +import { onboardingMethod as onboardingMethodTypes } from '../../SoftwareProductConstants.js'; +import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; +import { IMAGE_QUESTIONNAIRE } from './SoftwareProductComponentsImageConstants.js'; export const mapStateToProps = ({ - softwareProduct, - currentScreen: {props: {isReadOnlyMode}} + softwareProduct, + currentScreen: { props: { isReadOnlyMode } } }) => { + let { + softwareProductEditor: { + data: currentSoftwareProduct = {}, + isValidityData = true + }, + softwareProductComponents + } = softwareProduct; - let {softwareProductEditor: {data:currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct; - - let {images: {imageEditor = {}}} = softwareProductComponents; - let {data, qdata, genericFieldInfo, qgenericFieldInfo, dataMap, formReady} = imageEditor; - let {version, onboardingMethod} = currentSoftwareProduct; - let isManual = onboardingMethod === onboardingMethodTypes.MANUAL; - let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo) && ValidationHelper.checkFormValid(qgenericFieldInfo); - - return { - version, - currentSoftwareProduct, - isValidityData, - data, - qdata, - dataMap, - isFormValid, - formReady, - genericFieldInfo, - qgenericFieldInfo, - isReadOnlyMode, - isManual: isManual - }; + let { images: { imageEditor = {} } } = softwareProductComponents; + let { + data, + qdata, + genericFieldInfo, + qgenericFieldInfo, + dataMap, + formReady + } = imageEditor; + let { version, onboardingMethod } = currentSoftwareProduct; + let isManual = onboardingMethod === onboardingMethodTypes.MANUAL; + let isFormValid = + ValidationHelper.checkFormValid(genericFieldInfo) && + ValidationHelper.checkFormValid(qgenericFieldInfo); + return { + version, + currentSoftwareProduct, + isValidityData, + data, + qdata, + dataMap, + isFormValid, + formReady, + genericFieldInfo, + qgenericFieldInfo, + isReadOnlyMode, + isManual: isManual + }; }; -const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => { - return { - 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: 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}), - }; +const mapActionsToProps = ( + dispatch, + { softwareProductId, componentId, version } +) => { + return { + 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: 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 + }) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductComponentsImageEditorView); +export default connect(mapStateToProps, mapActionsToProps)( + SoftwareProductComponentsImageEditorView +); 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 7c357429e5..3846d45772 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 @@ -13,30 +13,29 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from './SoftwareProductComponentsImageConstants.js'; -import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; +import { actionTypes } from './SoftwareProductComponentsImageConstants.js'; +import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; export default (state = {}, action) => { - switch (action.type) { - case actionTypes.ImageEditor.CLOSE: - return {}; - case actionTypes.ImageEditor.OPEN: - return { - ...state, - data: { - ...action.image - }, - genericFieldInfo: { - 'fileName' : { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}] - } - }, - formName: forms.IMAGE_EDIT_FORM - }; - default: - return state; - } + switch (action.type) { + case actionTypes.ImageEditor.CLOSE: + return {}; + case actionTypes.ImageEditor.OPEN: + return { + ...state, + data: { + ...action.image + }, + genericFieldInfo: { + fileName: { + isValid: true, + errorText: '', + validations: [{ type: 'required', data: true }] + } + }, + formName: forms.IMAGE_EDIT_FORM + }; + default: + return state; + } }; - 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 a5ef152e01..3670ab910d 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 @@ -21,53 +21,81 @@ 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'; +import { imageCustomValidations } from './ImageValidations.js'; class SoftwareProductComponentsImageEditorView extends React.Component { - static propTypes = { - onDataChanged: PropTypes.func.isRequired, - onSubmit: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired - }; + static propTypes = { + onDataChanged: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired + }; - render() { - let {onCancel, onValidateForm, isReadOnlyMode, isFormValid, formReady, data = {}, genericFieldInfo, qgenericFieldInfo, dataMap, onDataChanged, isManual, onQDataChanged} = this.props; - let {id, fileName} = data; - let editingMode = Boolean(id); - return ( -
- {genericFieldInfo &&
{ this.form = form; }} - hasButtons={true} - onSubmit={ () => this.submit() } - onReset={ () => onCancel() } - labledButtons={true} - isReadOnlyMode={isReadOnlyMode} - isValid={isFormValid} - formReady={formReady} - submitButtonText={editingMode ? i18n('Save') : i18n('Create')} - onValidateForm={() => onValidateForm(imageCustomValidations) } - className='vsp-components-image-editor'> -
- - {editingMode && } -
-
} -
- ); - } - submit() { - let {data, qdata, onSubmit, version} = this.props; - onSubmit({data, qdata, version}); - } + render() { + let { + onCancel, + onValidateForm, + isReadOnlyMode, + isFormValid, + formReady, + data = {}, + genericFieldInfo, + qgenericFieldInfo, + dataMap, + onDataChanged, + isManual, + onQDataChanged + } = this.props; + let { id, fileName } = data; + let editingMode = Boolean(id); + return ( +
+ {genericFieldInfo && ( +
{ + this.form = form; + }} + hasButtons={true} + onSubmit={() => this.submit()} + onReset={() => onCancel()} + labledButtons={true} + isReadOnlyMode={isReadOnlyMode} + isValid={isFormValid} + formReady={formReady} + submitButtonText={ + editingMode ? i18n('Save') : i18n('Create') + } + onValidateForm={() => + onValidateForm(imageCustomValidations) + } + className="vsp-components-image-editor"> +
+ + {editingMode && ( + + )} +
+
+ )} +
+ ); + } + submit() { + let { data, qdata, onSubmit, version } = this.props; + onSubmit({ data, qdata, version }); + } } export default SoftwareProductComponentsImageEditorView; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js index d071647058..f3c39c3048 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageList.js @@ -13,73 +13,122 @@ * 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 i18n from 'nfvo-utils/i18n/i18n.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; import SoftwareProductComponentsImageListView from './SoftwareProductComponentsImageListView.jsx'; import ImageHelper from './SoftwareProductComponentsImageActionHelper.js'; import SoftwareProductComponentsImagesActionHelper from './SoftwareProductComponentsImageActionHelper.js'; import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js'; -import {COMPONENTS_QUESTIONNAIRE} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; +import { COMPONENTS_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; -import {onboardingMethod as onboardingMethodTypes} from '../../SoftwareProductConstants.js'; +import { onboardingMethod as onboardingMethodTypes } from '../../SoftwareProductConstants.js'; -export const mapStateToProps = ({softwareProduct}) => { +export const mapStateToProps = ({ softwareProduct }) => { + let { + softwareProductEditor: { + data: currentSoftwareProduct = {}, + isValidityData = true + }, + softwareProductComponents + } = softwareProduct; + let { + images: { imagesList = [] }, + componentEditor: { + data: componentData, + qdata, + dataMap, + qgenericFieldInfo + } + } = softwareProductComponents; + let { onboardingMethod } = currentSoftwareProduct; + let isManual = onboardingMethod === onboardingMethodTypes.MANUAL; - let {softwareProductEditor: {data: currentSoftwareProduct = {}, isValidityData = true}, softwareProductComponents} = softwareProduct; - let {images: {imagesList = []}, componentEditor: {data: componentData, qdata, dataMap, qgenericFieldInfo}} = softwareProductComponents; - let {onboardingMethod} = currentSoftwareProduct; - let isManual = onboardingMethod === onboardingMethodTypes.MANUAL; - - return { - componentData, - qdata, - dataMap, - qgenericFieldInfo, - isValidityData, - imagesList, - isManual : isManual - }; + return { + componentData, + qdata, + dataMap, + qgenericFieldInfo, + isValidityData, + imagesList, + isManual: isManual + }; }; -const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) => { - return { - onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, - qName: COMPONENTS_QUESTIONNAIRE}), - onAddImage: (isReadOnlyMode) => { - SoftwareProductComponentsImagesActionHelper.openImageEditor(dispatch, - {isReadOnlyMode, softwareProductId, - componentId, version} - );}, - onDeleteImage: (image) => { - let shortenedFileName = (image.fileName.length > 40) ? image.fileName.substr(0,40) + '...' : image.fileName; - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_WARNING, - data: { - msg: i18n('Are you sure you want to delete "{shortenedFileName}"?', {shortenedFileName: shortenedFileName}), - onConfirmed: () => ImageHelper.deleteImage(dispatch, { - softwareProductId, - componentId, - version, - imageId: image.id - }) - } - }); - }, - onEditImageClick: (image, isReadOnlyMode) => { - SoftwareProductComponentsImagesActionHelper.openEditImageEditor(dispatch, { - image, isReadOnlyMode, softwareProductId, componentId, version, modalClassName: 'image-modal-edit'} - ); - }, - onSubmit: (qdata) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire(dispatch, - {softwareProductId, - vspComponentId: componentId, - version, - qdata}); - } - }; +const mapActionsToProps = ( + dispatch, + { softwareProductId, componentId, version } +) => { + return { + onQDataChanged: deltaData => + ValidationHelper.qDataChanged(dispatch, { + deltaData, + qName: COMPONENTS_QUESTIONNAIRE + }), + onAddImage: isReadOnlyMode => { + SoftwareProductComponentsImagesActionHelper.openImageEditor( + dispatch, + { + isReadOnlyMode, + softwareProductId, + componentId, + version + } + ); + }, + onDeleteImage: image => { + let shortenedFileName = + image.fileName.length > 40 + ? image.fileName.substr(0, 40) + '...' + : image.fileName; + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_WARNING, + data: { + msg: i18n( + 'Are you sure you want to delete "{shortenedFileName}"?', + { + shortenedFileName: shortenedFileName + } + ), + onConfirmed: () => + ImageHelper.deleteImage(dispatch, { + softwareProductId, + componentId, + version, + imageId: image.id + }) + } + }); + }, + onEditImageClick: (image, isReadOnlyMode) => { + SoftwareProductComponentsImagesActionHelper.openEditImageEditor( + dispatch, + { + image, + isReadOnlyMode, + softwareProductId, + componentId, + version, + modalClassName: 'image-modal-edit' + } + ); + }, + onSubmit: qdata => { + return SoftwareProductComponentsActionHelper.updateSoftwareProductComponentQuestionnaire( + dispatch, + { + softwareProductId, + vspComponentId: componentId, + version, + qdata + } + ); + } + }; }; -export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsImageListView); +export default connect(mapStateToProps, mapActionsToProps, null, { + withRef: true +})(SoftwareProductComponentsImageListView); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js index 5dd2fb623b..a7c1bfafbe 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListReducer.js @@ -13,14 +13,13 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes} from './SoftwareProductComponentsImageConstants.js'; +import { actionTypes } from './SoftwareProductComponentsImageConstants.js'; export default (state = [], action) => { - switch (action.type) { - - case actionTypes.IMAGES_LIST_UPDATE: - return [...action.response]; - default: - return state; - } + switch (action.type) { + case actionTypes.IMAGES_LIST_UPDATE: + return [...action.response]; + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx index 004cbebe5d..cb67856caa 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageListView.jsx @@ -20,113 +20,152 @@ import Form from 'nfvo-components/input/validation/Form.jsx'; import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx'; -import Input from'nfvo-components/input/validation/Input.jsx'; +import Input from 'nfvo-components/input/validation/Input.jsx'; class SoftwareProductComponentsImageListView extends React.Component { - state = { - localFilter: '' - }; + state = { + localFilter: '' + }; - render() { - let {dataMap, onQDataChanged, isReadOnlyMode, qgenericFieldInfo} = this.props; - return( -
-
-
- { qgenericFieldInfo &&
this.save()} - isReadOnlyMode={isReadOnlyMode} - hasButtons={false}> - -

{i18n('Image')}

-
-
-
- { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({'general/image/providedBy' : val});} - }> - - { qgenericFieldInfo['general/image/providedBy'].enum.map(proto => - ) } - -
-
-
-
- - } -
-
- {this.renderImagesList()} + render() { + let { + dataMap, + onQDataChanged, + isReadOnlyMode, + qgenericFieldInfo + } = this.props; + return ( +
+
+
+ {qgenericFieldInfo && ( +
this.save()} + isReadOnlyMode={isReadOnlyMode} + hasButtons={false}> +

+ {i18n('Image')} +

+
+
+
+ { + const selectedIndex = + e.target.selectedIndex; + const val = + e.target.options[ + selectedIndex + ].value; + onQDataChanged({ + 'general/image/providedBy': val + }); + }}> + + {qgenericFieldInfo[ + 'general/image/providedBy' + ].enum.map(proto => ( + + ))} + +
+
+
+
+ + )} +
+
+ {this.renderImagesList()}
- ); - }; - - renderImagesList() { - const {localFilter} = this.state; - let {isReadOnlyMode, onAddImage, isManual} = this.props; - - return ( - this.setState({localFilter: value})} - onAdd={isManual ? () => onAddImage(isReadOnlyMode) : null} - plusButtonTitle={i18n('Add Image')} - twoColumns> - {this.filterList().map(image => this.renderImagesListItem(image, isReadOnlyMode))} - - ); - }; + ); + } + renderImagesList() { + const { localFilter } = this.state; + let { isReadOnlyMode, onAddImage, isManual } = this.props; - renderImagesListItem(image, isReadOnlyMode) { - let {id, fileName} = image; - let {onEditImageClick, isManual, onDeleteImage} = this.props; - return ( - onEditImageClick(image, isReadOnlyMode)} - onDelete={isManual ? () => onDeleteImage(image) : null}> + return ( + this.setState({ localFilter: value })} + onAdd={isManual ? () => onAddImage(isReadOnlyMode) : null} + plusButtonTitle={i18n('Add Image')} + twoColumns> + {this.filterList().map(image => + this.renderImagesListItem(image, isReadOnlyMode) + )} + + ); + } - -
{fileName}
- - - ); - } + renderImagesListItem(image, isReadOnlyMode) { + let { id, fileName } = image; + let { onEditImageClick, isManual, onDeleteImage } = this.props; + return ( + onEditImageClick(image, isReadOnlyMode)} + onDelete={isManual ? () => onDeleteImage(image) : null}> + +
+ {fileName} +
+ + + ); + } - filterList() { - let {imagesList} = this.props; - let {localFilter} = this.state; - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return imagesList.filter(({fileName = ''}) => { - return escape(fileName).match(filter); - }); - } - else { - return imagesList; - } - } + filterList() { + let { imagesList } = this.props; + let { localFilter } = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return imagesList.filter(({ fileName = '' }) => { + return escape(fileName).match(filter); + }); + } else { + return imagesList; + } + } - save() { - let {onSubmit, qdata} = this.props; - return onSubmit(qdata); - } + save() { + let { onSubmit, qdata } = this.props; + return onSubmit(qdata); + } } export default SoftwareProductComponentsImageListView; 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 64367c00f2..ec173cd988 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 @@ -18,32 +18,64 @@ import i18n from 'nfvo-utils/i18n/i18n.js'; import Input from 'nfvo-components/input/validation/Input.jsx'; import GridSection from 'nfvo-components/grid/GridSection.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; -import {forms} from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; +import { forms } from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponentsConstants.js'; import Format from './Format.jsx'; import Version from './Version.jsx'; -const FileDetails = ({editingMode, fileName, onDataChanged, isManual, dataMap, onQDataChanged, genericFieldInfo, qgenericFieldInfo}) => { - let fileNameCols = (editingMode) ? 3 : 4; - return( - - - onDataChanged({fileName}, forms.IMAGE_EDIT_FORM)} - label={i18n('Image Name')} - data-test-id='image-filename' - value={fileName} - isValid={genericFieldInfo.fileName.isValid} - errorText={genericFieldInfo.fileName.errorText} - isRequired={true} - type='text' - className='image-filename'/> - - {!editingMode &&
{i18n('After image creation you must go to Edit Image and add File Version')}
} - {editingMode && } - {editingMode && } - - ); +const FileDetails = ({ + editingMode, + fileName, + onDataChanged, + isManual, + dataMap, + onQDataChanged, + genericFieldInfo, + qgenericFieldInfo +}) => { + let fileNameCols = editingMode ? 3 : 4; + return ( + + + + onDataChanged({ fileName }, forms.IMAGE_EDIT_FORM) + } + label={i18n('Image Name')} + data-test-id="image-filename" + value={fileName} + isValid={genericFieldInfo.fileName.isValid} + errorText={genericFieldInfo.fileName.errorText} + isRequired={true} + type="text" + className="image-filename" + /> + + {!editingMode && ( +
+ {i18n( + 'After image creation you must go to Edit Image and add File Version' + )} +
+ )} + {editingMode && ( + + )} + {editingMode && ( + + )} + + ); }; export default FileDetails; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx index 1f71c6b277..0ee8fb76d0 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Format.jsx @@ -18,30 +18,34 @@ 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'; - -const Format = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => { - return( - - { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onQDataChanged({'format' : val});} - }> - - {qgenericFieldInfo['format'].enum.map(hv => )} - - - ); +const Format = ({ isManual, dataMap, qgenericFieldInfo, onQDataChanged }) => { + return ( + + { + const selectedIndex = e.target.selectedIndex; + const val = e.target.options[selectedIndex].value; + onQDataChanged({ format: val }); + }}> + + {qgenericFieldInfo['format'].enum.map(hv => ( + + ))} + + + ); }; export default Format; - diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx index 24e54bbbcb..ccf94bc860 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/ImageDetails.jsx @@ -19,21 +19,22 @@ import Input from 'nfvo-components/input/validation/Input.jsx'; import GridSection from 'nfvo-components/grid/GridSection.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; -const ImageDetails = ({dataMap, qgenericFieldInfo, onQDataChanged}) => { - return( - - - onQDataChanged({'md5' : md5})} - isValid={qgenericFieldInfo['md5'].isValid} - errorText={qgenericFieldInfo['md5'].errorText} - value={dataMap['md5']}/> - - - ); +const ImageDetails = ({ dataMap, qgenericFieldInfo, onQDataChanged }) => { + return ( + + + onQDataChanged({ md5: md5 })} + isValid={qgenericFieldInfo['md5'].isValid} + errorText={qgenericFieldInfo['md5'].errorText} + value={dataMap['md5']} + /> + + + ); }; export default ImageDetails; 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 bd55c5ba91..60454c52e7 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,25 +17,29 @@ 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'; +import { imageCustomValidations } from '../ImageValidations.js'; - -const Version = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => { - return( - - onQDataChanged({'version' : version}, {'version' : imageCustomValidations['version']})} - isValid={qgenericFieldInfo['version'].isValid} - errorText={qgenericFieldInfo['version'].errorText} - value={dataMap['version']}/> - - ); +const Version = ({ isManual, dataMap, qgenericFieldInfo, onQDataChanged }) => { + return ( + + + onQDataChanged( + { version: version }, + { version: imageCustomValidations['version'] } + ) + } + isValid={qgenericFieldInfo['version'].isValid} + errorText={qgenericFieldInfo['version'].errorText} + value={dataMap['version']} + /> + + ); }; export default Version; - -- cgit 1.2.3-korg