summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes
diff options
context:
space:
mode:
authorEinav Weiss Keidar <einavw@amdocs.com>2018-03-20 14:45:40 +0200
committerAvi Gaffa <avi.gaffa@amdocs.com>2018-03-20 13:52:31 +0000
commit7fdf733a64670fceefc3ded35cfa581e1c458179 (patch)
treeb3623ac9a331473830cb0167c0b487f2a176427c /openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes
parentc7916a4e5955ccc5f0f5252307363b791ec5c7b9 (diff)
Adding Prettier and fixing up eslint version
Issue-ID: SDC-1094 Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes')
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx140
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js71
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js218
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js22
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js73
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx341
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js78
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx16
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js34
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx88
10 files changed, 612 insertions, 469 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx
index aa39c87dd0..cee46abc69 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx
@@ -20,80 +20,86 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
-
class SoftwareProductProcessesListView extends React.Component {
+ state = {
+ localFilter: ''
+ };
- state = {
- localFilter: ''
- };
-
- static propTypes = {
- onAddProcess: PropTypes.func.isRequired,
- onEditProcess: PropTypes.func.isRequired,
- onDeleteProcess: PropTypes.func.isRequired,
- isReadOnlyMode: PropTypes.bool.isRequired,
- currentSoftwareProduct:PropTypes.object,
- addButtonTitle: PropTypes.string
- };
-
- render() {
- const {localFilter} = this.state;
- let {onAddProcess, isReadOnlyMode, addButtonTitle} = this.props;
+ static propTypes = {
+ onAddProcess: PropTypes.func.isRequired,
+ onEditProcess: PropTypes.func.isRequired,
+ onDeleteProcess: PropTypes.func.isRequired,
+ isReadOnlyMode: PropTypes.bool.isRequired,
+ currentSoftwareProduct: PropTypes.object,
+ addButtonTitle: PropTypes.string
+ };
- return (
- <ListEditorView
- plusButtonTitle={addButtonTitle}
- filterValue={localFilter}
- placeholder={i18n('Filter Process')}
- onAdd={onAddProcess}
- isReadOnlyMode={isReadOnlyMode}
- title={i18n('Process Details')}
- onFilter={value => this.setState({localFilter: value})}>
- {this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))}
- </ListEditorView>);
- }
+ render() {
+ const { localFilter } = this.state;
+ let { onAddProcess, isReadOnlyMode, addButtonTitle } = this.props;
- renderProcessListItem(process, isReadOnlyMode) {
- let {id, name, description, artifactName = ''} = process;
- let {currentSoftwareProduct: {version}, onEditProcess, onDeleteProcess} = this.props;
- return (
- <ListEditorItemView
- key={id}
- className='list-editor-item-view'
- isReadOnlyMode={isReadOnlyMode}
- onSelect={() => onEditProcess(process)}
- onDelete={() => onDeleteProcess(process, version)}>
+ return (
+ <ListEditorView
+ plusButtonTitle={addButtonTitle}
+ filterValue={localFilter}
+ placeholder={i18n('Filter Process')}
+ onAdd={onAddProcess}
+ isReadOnlyMode={isReadOnlyMode}
+ title={i18n('Process Details')}
+ onFilter={value => this.setState({ localFilter: value })}>
+ {this.filterList().map(processes =>
+ this.renderProcessListItem(processes, isReadOnlyMode)
+ )}
+ </ListEditorView>
+ );
+ }
- <div className='list-editor-item-view-field'>
- <div className='title'>{i18n('Name')}</div>
- <div className='name'>{name}</div>
- </div>
- <div className='list-editor-item-view-field'>
- <div className='title'>{i18n('Artifact name')}</div>
- <div className='artifact-name'>{artifactName}</div>
- </div>
- <div className='list-editor-item-view-field'>
- <div className='title'>{i18n('Notes')}</div>
- <div className='description'>{description}</div>
- </div>
- </ListEditorItemView>
- );
- }
+ renderProcessListItem(process, isReadOnlyMode) {
+ let { id, name, description, artifactName = '' } = process;
+ let {
+ currentSoftwareProduct: { version },
+ onEditProcess,
+ onDeleteProcess
+ } = this.props;
+ return (
+ <ListEditorItemView
+ key={id}
+ className="list-editor-item-view"
+ isReadOnlyMode={isReadOnlyMode}
+ onSelect={() => onEditProcess(process)}
+ onDelete={() => onDeleteProcess(process, version)}>
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Name')}</div>
+ <div className="name">{name}</div>
+ </div>
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Artifact name')}</div>
+ <div className="artifact-name">{artifactName}</div>
+ </div>
+ <div className="list-editor-item-view-field">
+ <div className="title">{i18n('Notes')}</div>
+ <div className="description">{description}</div>
+ </div>
+ </ListEditorItemView>
+ );
+ }
- filterList() {
- let {processesList} = this.props;
- let {localFilter} = this.state;
+ filterList() {
+ let { processesList } = this.props;
+ let { localFilter } = this.state;
- if (localFilter.trim()) {
- const filter = new RegExp(escape(localFilter), 'i');
- return processesList.filter(({name = '', description = ''}) => {
- return escape(name).match(filter) || escape(description).match(filter);
- });
- }
- else {
- return processesList;
- }
- }
+ if (localFilter.trim()) {
+ const filter = new RegExp(escape(localFilter), 'i');
+ return processesList.filter(({ name = '', description = '' }) => {
+ return (
+ escape(name).match(filter) ||
+ escape(description).match(filter)
+ );
+ });
+ } else {
+ return processesList;
+ }
+ }
}
export default SoftwareProductProcessesListView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
index b0403abde5..fb44530dae 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
@@ -13,40 +13,57 @@
* 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 SoftwareProductProcessesActionHelper from './SoftwareProductProcessesActionHelper.js';
import SoftwareProductProcessesView from './SoftwareProductProcessesView.jsx';
-export const mapStateToProps = ({softwareProduct}) => {
- let {softwareProductEditor: {data: currentSoftwareProduct = {}}, softwareProductProcesses: {processesList, processesEditor}} = softwareProduct;
- let {data} = processesEditor;
+export const mapStateToProps = ({ softwareProduct }) => {
+ let {
+ softwareProductEditor: { data: currentSoftwareProduct = {} },
+ softwareProductProcesses: { processesList, processesEditor }
+ } = softwareProduct;
+ let { data } = processesEditor;
- return {
- currentSoftwareProduct,
- processesList,
- isDisplayEditor: Boolean(data),
- isModalInEditMode: Boolean(data && data.id)
- };
+ return {
+ currentSoftwareProduct,
+ processesList,
+ isDisplayEditor: Boolean(data),
+ isModalInEditMode: Boolean(data && data.id)
+ };
};
-const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
- return {
- onAddProcess: () => SoftwareProductProcessesActionHelper.openEditor(dispatch),
- onEditProcess: (process) => SoftwareProductProcessesActionHelper.openEditor(dispatch, process),
- onDeleteProcess: (process) => dispatch({
- type: modalActionTypes.GLOBAL_MODAL_WARNING,
- data:{
- msg: i18n('Are you sure you want to delete "{name}"?', {name: process.name}),
- confirmationButtonText: i18n('Delete'),
- title: i18n('Delete'),
- onConfirmed: ()=> SoftwareProductProcessesActionHelper.deleteProcess(dispatch,
- {process, softwareProductId, version})
- }
- })
- };
+const mapActionsToProps = (dispatch, { softwareProductId, version }) => {
+ return {
+ onAddProcess: () =>
+ SoftwareProductProcessesActionHelper.openEditor(dispatch),
+ onEditProcess: process =>
+ SoftwareProductProcessesActionHelper.openEditor(dispatch, process),
+ onDeleteProcess: process =>
+ dispatch({
+ type: modalActionTypes.GLOBAL_MODAL_WARNING,
+ data: {
+ msg: i18n('Are you sure you want to delete "{name}"?', {
+ name: process.name
+ }),
+ confirmationButtonText: i18n('Delete'),
+ title: i18n('Delete'),
+ onConfirmed: () =>
+ SoftwareProductProcessesActionHelper.deleteProcess(
+ dispatch,
+ {
+ process,
+ softwareProductId,
+ version
+ }
+ )
+ }
+ })
+ };
};
-export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductProcessesView);
+export default connect(mapStateToProps, mapActionsToProps, null, {
+ withRef: true
+})(SoftwareProductProcessesView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js
index 8fd370b6cc..7c72c5b892 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js
@@ -13,127 +13,145 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './SoftwareProductProcessesConstants.js';
+import { actionTypes } from './SoftwareProductProcessesConstants.js';
import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
import Configuration from 'sdc-app/config/Configuration.js';
function baseUrl(vspId, version) {
- let {id: versionId} = version;
- const restPrefix = Configuration.get('restPrefix');
- return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/processes`;
+ let { id: versionId } = version;
+ const restPrefix = Configuration.get('restPrefix');
+ return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/processes`;
}
function putProcess(softwareProductId, version, process) {
- return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${process.id}`, {
- name: process.name,
- description: process.description,
- type: process.type === '' ? null : process.type
- });
+ return RestAPIUtil.put(
+ `${baseUrl(softwareProductId, version)}/${process.id}`,
+ {
+ name: process.name,
+ description: process.description,
+ type: process.type === '' ? null : process.type
+ }
+ );
}
function postProcess(softwareProductId, version, process) {
- return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
- name: process.name,
- description: process.description,
- type: process.type === '' ? null : process.type
- });
+ return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
+ name: process.name,
+ description: process.description,
+ type: process.type === '' ? null : process.type
+ });
}
function deleteProcess(softwareProductId, version, processId) {
- return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version)}/${processId}`);
+ return RestAPIUtil.destroy(
+ `${baseUrl(softwareProductId, version)}/${processId}`
+ );
}
-function uploadFileToProcess(softwareProductId, version, processId, formData)
-{
- return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}/${processId}/upload`, formData);
+function uploadFileToProcess(softwareProductId, version, processId, formData) {
+ return RestAPIUtil.post(
+ `${baseUrl(softwareProductId, version)}/${processId}/upload`,
+ formData
+ );
}
function fetchProcesses(softwareProductId, version) {
- return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
+ return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
}
const SoftwareProductActionHelper = {
-
- fetchProcessesList(dispatch, {softwareProductId, version}) {
-
- dispatch({
- type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES,
- processesList: []
- });
-
- return fetchProcesses(softwareProductId, version).then(response => {
- dispatch({
- type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES,
- processesList: response.results
- });
- });
- },
- openEditor(dispatch, process = {}) {
- dispatch({
- type: actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN,
- process
- });
- },
-
- deleteProcess(dispatch, {process, softwareProductId, version}) {
- return deleteProcess(softwareProductId, version, process.id).then(() => {
- dispatch({
- type: actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS,
- processId: process.id
- });
- });
-
- },
-
- closeEditor(dispatch) {
- dispatch({
- type:actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE
- });
- },
-
- saveProcess(dispatch, {softwareProductId, version, previousProcess, process}) {
- if (previousProcess) {
- return putProcess(softwareProductId, version, process).then(() => {
- if (process.formData){
- uploadFileToProcess(softwareProductId, version, process.id, process.formData);
- }
- dispatch({
- type: actionTypes.EDIT_SOFTWARE_PRODUCT_PROCESS,
- process
- });
- });
- }
- else {
- return postProcess(softwareProductId, version, process).then(response => {
- if (process.formData) {
- uploadFileToProcess(softwareProductId, version, response.value, process.formData);
- }
- dispatch({
- type: actionTypes.ADD_SOFTWARE_PRODUCT_PROCESS,
- process: {
- ...process,
- id: response.value
- }
- });
- });
- }
- },
-
- hideDeleteConfirm(dispatch) {
- dispatch({
- type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM,
- processToDelete: false
- });
- },
-
- openDeleteProcessesConfirm(dispatch, {process} ) {
- dispatch({
- type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM,
- processToDelete: process
- });
- }
-
+ fetchProcessesList(dispatch, { softwareProductId, version }) {
+ dispatch({
+ type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES,
+ processesList: []
+ });
+
+ return fetchProcesses(softwareProductId, version).then(response => {
+ dispatch({
+ type: actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES,
+ processesList: response.results
+ });
+ });
+ },
+ openEditor(dispatch, process = {}) {
+ dispatch({
+ type: actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN,
+ process
+ });
+ },
+
+ deleteProcess(dispatch, { process, softwareProductId, version }) {
+ return deleteProcess(softwareProductId, version, process.id).then(
+ () => {
+ dispatch({
+ type: actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS,
+ processId: process.id
+ });
+ }
+ );
+ },
+
+ closeEditor(dispatch) {
+ dispatch({
+ type: actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE
+ });
+ },
+
+ saveProcess(
+ dispatch,
+ { softwareProductId, version, previousProcess, process }
+ ) {
+ if (previousProcess) {
+ return putProcess(softwareProductId, version, process).then(() => {
+ if (process.formData) {
+ uploadFileToProcess(
+ softwareProductId,
+ version,
+ process.id,
+ process.formData
+ );
+ }
+ dispatch({
+ type: actionTypes.EDIT_SOFTWARE_PRODUCT_PROCESS,
+ process
+ });
+ });
+ } else {
+ return postProcess(softwareProductId, version, process).then(
+ response => {
+ if (process.formData) {
+ uploadFileToProcess(
+ softwareProductId,
+ version,
+ response.value,
+ process.formData
+ );
+ }
+ dispatch({
+ type: actionTypes.ADD_SOFTWARE_PRODUCT_PROCESS,
+ process: {
+ ...process,
+ id: response.value
+ }
+ });
+ }
+ );
+ }
+ },
+
+ hideDeleteConfirm(dispatch) {
+ dispatch({
+ type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM,
+ processToDelete: false
+ });
+ },
+
+ openDeleteProcessesConfirm(dispatch, { process }) {
+ dispatch({
+ type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM,
+ processToDelete: process
+ });
+ }
};
export default SoftwareProductActionHelper;
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js
index 6eee24cdde..7f09ea8e73 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js
@@ -16,20 +16,20 @@
import keyMirror from 'nfvo-utils/KeyMirror.js';
export const actionTypes = keyMirror({
- ADD_SOFTWARE_PRODUCT_PROCESS: null,
- EDIT_SOFTWARE_PRODUCT_PROCESS: null,
- DELETE_SOFTWARE_PRODUCT_PROCESS: null,
- SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN: null,
- SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE: null,
- FETCH_SOFTWARE_PRODUCT_PROCESSES: null,
- SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM: null
+ ADD_SOFTWARE_PRODUCT_PROCESS: null,
+ EDIT_SOFTWARE_PRODUCT_PROCESS: null,
+ DELETE_SOFTWARE_PRODUCT_PROCESS: null,
+ SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN: null,
+ SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE: null,
+ FETCH_SOFTWARE_PRODUCT_PROCESSES: null,
+ SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM: null
});
export const optionsInputValues = {
- PROCESS_TYPE: [
- {title: 'Select...', enum: ''},
- {title: 'Other', enum: 'Other'}
- ]
+ PROCESS_TYPE: [
+ { title: 'Select...', enum: '' },
+ { title: 'Other', enum: 'Other' }
+ ]
};
export const VSP_PROCESS_FORM = 'VSPPROCESSFORM';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
index fc194fac13..58cc894a21 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
@@ -13,41 +13,56 @@
* 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 SoftwareProductProcessesActionHelper from './SoftwareProductProcessesActionHelper';
import SoftwareProductProcessesEditorView from './SoftwareProductProcessesEditorView.jsx';
-import {VSP_PROCESS_FORM} from './SoftwareProductProcessesConstants.js';
+import { VSP_PROCESS_FORM } from './SoftwareProductProcessesConstants.js';
-export const mapStateToProps = ({softwareProduct}) => {
- let {softwareProductProcesses: {processesList, processesEditor}} = softwareProduct;
- let {data, genericFieldInfo, formReady} = processesEditor;
- let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
- let previousData;
- const processId = data ? data.id : null;
- if(processId) {
- previousData = processesList.find(process => process.id === processId);
- }
+export const mapStateToProps = ({ softwareProduct }) => {
+ let {
+ softwareProductProcesses: { processesList, processesEditor }
+ } = softwareProduct;
+ let { data, genericFieldInfo, formReady } = processesEditor;
+ let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
+ let previousData;
+ const processId = data ? data.id : null;
+ if (processId) {
+ previousData = processesList.find(process => process.id === processId);
+ }
- return {
- data,
- genericFieldInfo,
- previousData,
- isFormValid,
- formReady
- };
+ return {
+ data,
+ genericFieldInfo,
+ previousData,
+ isFormValid,
+ formReady
+ };
};
-const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
- return {
- onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: VSP_PROCESS_FORM}),
- onSubmit: ({previousProcess, process}) => {
- SoftwareProductProcessesActionHelper.closeEditor(dispatch);
- SoftwareProductProcessesActionHelper.saveProcess(dispatch, {softwareProductId, version, previousProcess, process});
- },
- onCancel: () => SoftwareProductProcessesActionHelper.closeEditor(dispatch),
- onValidateForm: () => ValidationHelper.validateForm(dispatch, VSP_PROCESS_FORM)
- };
+const mapActionsToProps = (dispatch, { softwareProductId, version }) => {
+ return {
+ onDataChanged: deltaData =>
+ ValidationHelper.dataChanged(dispatch, {
+ deltaData,
+ formName: VSP_PROCESS_FORM
+ }),
+ onSubmit: ({ previousProcess, process }) => {
+ SoftwareProductProcessesActionHelper.closeEditor(dispatch);
+ SoftwareProductProcessesActionHelper.saveProcess(dispatch, {
+ softwareProductId,
+ version,
+ previousProcess,
+ process
+ });
+ },
+ onCancel: () =>
+ SoftwareProductProcessesActionHelper.closeEditor(dispatch),
+ onValidateForm: () =>
+ ValidationHelper.validateForm(dispatch, VSP_PROCESS_FORM)
+ };
};
-export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductProcessesEditorView);
+export default connect(mapStateToProps, mapActionsToProps)(
+ SoftwareProductProcessesEditorView
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
index d1bd602683..6e8254f65b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
@@ -25,157 +25,212 @@ import GridSection from 'nfvo-components/grid/GridSection.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';
const SoftwareProductProcessEditorPropType = PropTypes.shape({
- id: PropTypes.string,
- name: PropTypes.string,
- description: PropTypes.string,
- artifactName: PropTypes.string,
- type: PropTypes.string
+ id: PropTypes.string,
+ name: PropTypes.string,
+ description: PropTypes.string,
+ artifactName: PropTypes.string,
+ type: PropTypes.string
});
-
-
class SoftwareProductProcessesEditorForm extends React.Component {
+ static propTypes = {
+ data: SoftwareProductProcessEditorPropType,
+ previousData: SoftwareProductProcessEditorPropType,
+ isReadOnlyMode: PropTypes.bool,
+ onDataChanged: PropTypes.func,
+ onSubmit: PropTypes.func,
+ onCancel: PropTypes.func
+ };
+ state = {
+ dragging: false,
+ files: []
+ };
+ render() {
+ let {
+ data = {},
+ isReadOnlyMode,
+ onDataChanged,
+ onCancel,
+ genericFieldInfo,
+ optionsInputValues
+ } = this.props;
+ let { name, description, artifactName, type } = data;
- static propTypes = {
- data: SoftwareProductProcessEditorPropType,
- previousData: SoftwareProductProcessEditorPropType,
- isReadOnlyMode: PropTypes.bool,
- onDataChanged: PropTypes.func,
- onSubmit: PropTypes.func,
- onCancel: PropTypes.func
- };
- state = {
- dragging: false,
- files: []
- };
-
- render() {
- let {data = {}, isReadOnlyMode, onDataChanged, onCancel, genericFieldInfo, optionsInputValues} = this.props;
- let {name, description, artifactName, type} = data;
-
- return (
- <div>
- {genericFieldInfo && <Form
- ref='validationForm'
- hasButtons={true}
- labledButtons={true}
- isReadOnlyMode={isReadOnlyMode}
- onSubmit={ () => this.submit() }
- onReset={ () => onCancel() }
- isValid={this.props.isFormValid}
- formReady={this.props.formReady}
- onValidateForm={() => this.props.onValidateForm() }
- className='vsp-processes-editor'>
- <div className={`vsp-processes-editor-data${isReadOnlyMode ? ' disabled' : '' }`}>
- <Dropzone
- className={`vsp-process-dropzone-view ${this.state.dragging ? 'active-dragging' : ''}`}
- onDrop={(acceptedFiles, rejectedFiles) => this.handleImportSubmit(acceptedFiles, rejectedFiles)}
- onDragEnter={() => this.setState({dragging: true})}
- onDragLeave={() => this.setState({dragging: false})}
- multiple={false}
- disableClick={true}
- ref='processEditorFileInput'
- name='processEditorFileInput'>
- <GridSection hasLastColSet={true}>
- <GridItem colSpan={2}>
- <Input
- onChange={name => onDataChanged({name})}
- isValid={genericFieldInfo.name.isValid}
- isRequired={true}
- data-test-id='name'
- errorText={genericFieldInfo.name.errorText}
- label={i18n('Name')}
- value={name}
- type='text'/>
- </GridItem>
- <GridItem colSpan={2} lastColInRow={true}>
- <label>&nbsp;</label>
- <DraggableUploadFileBox className='process-editor-file-box' isReadOnlyMode={isReadOnlyMode} onClick={() => this.refs.processEditorFileInput.open()}/>
- </GridItem>
- </GridSection>
- <GridSection hasLastColSet={true}>
- <GridItem colSpan={2}>
- <Input
- name='vsp-process-description'
- groupClassName='vsp-process-description'
- onChange={description => onDataChanged({description})}
- isValid={genericFieldInfo.description.isValid}
- errorText={genericFieldInfo.description.errorText}
- label={i18n('Notes')}
- value={description}
- data-test-id='vsp-process-description'
- type='textarea'/>
- </GridItem>
- <GridItem colSpan={2} lastColInRow={true}>
- <Input
- label={i18n('Artifacts')}
- value={artifactName}
- type='text'
- disabled/>
- <Input
- onChange={e => {
- // setting the unit to the correct value
- const selectedIndex = e.target.selectedIndex;
- const val = e.target.options[selectedIndex].value;
- onDataChanged({type: val});}
- }
- value={type}
- label={i18n('Process Type')}
- className='process-type'
- data-test-id='process-type'
- isValid={genericFieldInfo.type.isValid}
- errorText={genericFieldInfo.type.errorText}
- type='select'>
- {optionsInputValues.PROCESS_TYPE.map(mtype =>
- <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
- </Input>
- </GridItem>
- </GridSection>
- </Dropzone>
- </div>
- </Form>}
- </div>
- );
- }
-
- submit() {
- const {data: process, previousData: previousProcess} = this.props;
- let {files} = this.state;
- let formData = false;
- if (files.length) {
- let file = files[0];
- formData = new FormData();
- formData.append('upload', file);
- }
+ return (
+ <div>
+ {genericFieldInfo && (
+ <Form
+ ref="validationForm"
+ hasButtons={true}
+ labledButtons={true}
+ isReadOnlyMode={isReadOnlyMode}
+ onSubmit={() => this.submit()}
+ onReset={() => onCancel()}
+ isValid={this.props.isFormValid}
+ formReady={this.props.formReady}
+ onValidateForm={() => this.props.onValidateForm()}
+ className="vsp-processes-editor">
+ <div
+ className={`vsp-processes-editor-data${
+ isReadOnlyMode ? ' disabled' : ''
+ }`}>
+ <Dropzone
+ className={`vsp-process-dropzone-view ${
+ this.state.dragging ? 'active-dragging' : ''
+ }`}
+ onDrop={(acceptedFiles, rejectedFiles) =>
+ this.handleImportSubmit(
+ acceptedFiles,
+ rejectedFiles
+ )
+ }
+ onDragEnter={() =>
+ this.setState({ dragging: true })
+ }
+ onDragLeave={() =>
+ this.setState({ dragging: false })
+ }
+ multiple={false}
+ disableClick={true}
+ ref="processEditorFileInput"
+ name="processEditorFileInput">
+ <GridSection hasLastColSet={true}>
+ <GridItem colSpan={2}>
+ <Input
+ onChange={name =>
+ onDataChanged({ name })
+ }
+ isValid={
+ genericFieldInfo.name.isValid
+ }
+ isRequired={true}
+ data-test-id="name"
+ errorText={
+ genericFieldInfo.name.errorText
+ }
+ label={i18n('Name')}
+ value={name}
+ type="text"
+ />
+ </GridItem>
+ <GridItem colSpan={2} lastColInRow={true}>
+ <label>&nbsp;</label>
+ <DraggableUploadFileBox
+ className="process-editor-file-box"
+ isReadOnlyMode={isReadOnlyMode}
+ onClick={() =>
+ this.refs.processEditorFileInput.open()
+ }
+ />
+ </GridItem>
+ </GridSection>
+ <GridSection hasLastColSet={true}>
+ <GridItem colSpan={2}>
+ <Input
+ name="vsp-process-description"
+ groupClassName="vsp-process-description"
+ onChange={description =>
+ onDataChanged({ description })
+ }
+ isValid={
+ genericFieldInfo.description
+ .isValid
+ }
+ errorText={
+ genericFieldInfo.description
+ .errorText
+ }
+ label={i18n('Notes')}
+ value={description}
+ data-test-id="vsp-process-description"
+ type="textarea"
+ />
+ </GridItem>
+ <GridItem colSpan={2} lastColInRow={true}>
+ <Input
+ label={i18n('Artifacts')}
+ value={artifactName}
+ type="text"
+ disabled
+ />
+ <Input
+ onChange={e => {
+ // setting the unit to the correct value
+ const selectedIndex =
+ e.target.selectedIndex;
+ const val =
+ e.target.options[
+ selectedIndex
+ ].value;
+ onDataChanged({ type: val });
+ }}
+ value={type}
+ label={i18n('Process Type')}
+ className="process-type"
+ data-test-id="process-type"
+ isValid={
+ genericFieldInfo.type.isValid
+ }
+ errorText={
+ genericFieldInfo.type.errorText
+ }
+ type="select">
+ {optionsInputValues.PROCESS_TYPE.map(
+ mtype => (
+ <option
+ key={mtype.enum}
+ value={mtype.enum}>{`${
+ mtype.title
+ }`}</option>
+ )
+ )}
+ </Input>
+ </GridItem>
+ </GridSection>
+ </Dropzone>
+ </div>
+ </Form>
+ )}
+ </div>
+ );
+ }
- let updatedProcess = {
- ...process,
- formData
- };
- this.props.onSubmit({process: updatedProcess, previousProcess});
- }
+ submit() {
+ const { data: process, previousData: previousProcess } = this.props;
+ let { files } = this.state;
+ let formData = false;
+ if (files.length) {
+ let file = files[0];
+ formData = new FormData();
+ formData.append('upload', file);
+ }
+ let updatedProcess = {
+ ...process,
+ formData
+ };
+ this.props.onSubmit({ process: updatedProcess, previousProcess });
+ }
- handleImportSubmit(files, rejectedFiles) {
- if (files.length > 0) {
- let {onDataChanged} = this.props;
- this.setState({
- dragging: false,
- complete: '0',
- files
- });
- onDataChanged({artifactName: files[0].name});
- }
- else if (rejectedFiles.length > 0) {
- this.setState({
- dragging: false
- });
- if (DEBUG) {
- console.log('file was rejected.' + rejectedFiles[0].name);
- }
- }
- }
+ handleImportSubmit(files, rejectedFiles) {
+ if (files.length > 0) {
+ let { onDataChanged } = this.props;
+ this.setState({
+ dragging: false,
+ complete: '0',
+ files
+ });
+ onDataChanged({ artifactName: files[0].name });
+ } else if (rejectedFiles.length > 0) {
+ this.setState({
+ dragging: false
+ });
+ if (DEBUG) {
+ console.log('file was rejected.' + rejectedFiles[0].name);
+ }
+ }
+ }
}
export default SoftwareProductProcessesEditorForm;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js
index 11b89b17c2..a8731fd163 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js
@@ -13,43 +13,49 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes, VSP_PROCESS_FORM} from './SoftwareProductProcessesConstants.js';
+import {
+ actionTypes,
+ VSP_PROCESS_FORM
+} from './SoftwareProductProcessesConstants.js';
export default (state = {}, action) => {
- switch (action.type) {
- case actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN:
- return {
- ...state,
- formReady: null,
- formName: VSP_PROCESS_FORM,
- genericFieldInfo: {
- 'name' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}]
- },
- 'description' : {
- isValid: true,
- errorText: '',
- validations: [{type: 'maxLength', data: 1000}]
- },
- 'artifactName' : {
- isValid: true,
- errorText: '',
- validations: []
- },
- 'type' : {
- isValid: true,
- errorText: '',
- validations: []
- }
- },
- data: action.process
- };
- case actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE:
- return {};
+ switch (action.type) {
+ case actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN:
+ return {
+ ...state,
+ formReady: null,
+ formName: VSP_PROCESS_FORM,
+ genericFieldInfo: {
+ name: {
+ isValid: true,
+ errorText: '',
+ validations: [
+ { type: 'required', data: true },
+ { type: 'maxLength', data: 120 }
+ ]
+ },
+ description: {
+ isValid: true,
+ errorText: '',
+ validations: [{ type: 'maxLength', data: 1000 }]
+ },
+ artifactName: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ },
+ type: {
+ isValid: true,
+ errorText: '',
+ validations: []
+ }
+ },
+ data: action.process
+ };
+ case actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE:
+ return {};
- default:
- return state;
- }
+ default:
+ return state;
+ }
};
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 9ce690a1ca..867090bb31 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
@@ -15,16 +15,18 @@
*/
import React from 'react';
-import {optionsInputValues as ProcessesOptionsInputValues} from './SoftwareProductProcessesConstants.js';
+import { optionsInputValues as ProcessesOptionsInputValues } from './SoftwareProductProcessesConstants.js';
import SoftwareProductProcessesEditorForm from './SoftwareProductProcessesEditorForm.jsx';
-
class SoftwareProductProcessesEditorView extends React.Component {
- render() {
- return (
- <SoftwareProductProcessesEditorForm optionsInputValues={ProcessesOptionsInputValues} {...this.props}/>
- );
- }
+ render() {
+ return (
+ <SoftwareProductProcessesEditorForm
+ optionsInputValues={ProcessesOptionsInputValues}
+ {...this.props}
+ />
+ );
+ }
}
export default SoftwareProductProcessesEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js
index 20390d1f60..0e4d94650e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js
@@ -13,20 +13,26 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import {actionTypes} from './SoftwareProductProcessesConstants.js';
+import { actionTypes } from './SoftwareProductProcessesConstants.js';
export default (state = [], action) => {
- switch (action.type) {
- case actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES:
- return [...action.processesList];
- case actionTypes.EDIT_SOFTWARE_PRODUCT_PROCESS:
- const indexForEdit = state.findIndex(process => process.id === action.process.id);
- return [...state.slice(0, indexForEdit), action.process, ...state.slice(indexForEdit + 1)];
- case actionTypes.ADD_SOFTWARE_PRODUCT_PROCESS:
- return [...state, action.process];
- case actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS:
- return state.filter(process => process.id !== action.processId);
- default:
- return state;
- }
+ switch (action.type) {
+ case actionTypes.FETCH_SOFTWARE_PRODUCT_PROCESSES:
+ return [...action.processesList];
+ case actionTypes.EDIT_SOFTWARE_PRODUCT_PROCESS:
+ const indexForEdit = state.findIndex(
+ process => process.id === action.process.id
+ );
+ return [
+ ...state.slice(0, indexForEdit),
+ action.process,
+ ...state.slice(indexForEdit + 1)
+ ];
+ case actionTypes.ADD_SOFTWARE_PRODUCT_PROCESS:
+ return [...state, action.process];
+ case actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS:
+ return state.filter(process => process.id !== action.processId);
+ default:
+ return state;
+ }
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
index b0da767a2b..1357c31e12 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
@@ -20,45 +20,63 @@ import Modal from 'nfvo-components/modal/Modal.jsx';
import SoftwareProductProcessesEditor from './SoftwareProductProcessesEditor.js';
import SoftwareProductProcessListView from './SoftwareProductProcessListView.jsx';
-
class SoftwareProductProcessesView extends React.Component {
+ state = {
+ localFilter: ''
+ };
- state = {
- localFilter: ''
- };
-
- static propTypes = {
- onAddProcess: PropTypes.func.isRequired,
- onEditProcess: PropTypes.func.isRequired,
- onDeleteProcess: PropTypes.func.isRequired,
- isDisplayEditor: PropTypes.bool.isRequired,
- isReadOnlyMode: PropTypes.bool.isRequired,
- currentSoftwareProduct:PropTypes.object
- };
-
- render() {
- return (
- <div className='software-product-landing-view-right-side vsp-processes-page'>
- {this.renderEditor()}
- <SoftwareProductProcessListView addButtonTitle={i18n('Add Process Details')} {...this.props}/>
- </div>
- );
- }
+ static propTypes = {
+ onAddProcess: PropTypes.func.isRequired,
+ onEditProcess: PropTypes.func.isRequired,
+ onDeleteProcess: PropTypes.func.isRequired,
+ isDisplayEditor: PropTypes.bool.isRequired,
+ isReadOnlyMode: PropTypes.bool.isRequired,
+ currentSoftwareProduct: PropTypes.object
+ };
- renderEditor() {
- let {currentSoftwareProduct: {id}, version, isModalInEditMode, isReadOnlyMode, isDisplayEditor} = this.props;
- return (
+ render() {
+ return (
+ <div className="software-product-landing-view-right-side vsp-processes-page">
+ {this.renderEditor()}
+ <SoftwareProductProcessListView
+ addButtonTitle={i18n('Add Process Details')}
+ {...this.props}
+ />
+ </div>
+ );
+ }
- <Modal show={isDisplayEditor} bsSize='large' animation={true} className='onborading-modal'>
- <Modal.Header>
- <Modal.Title>{isModalInEditMode ? i18n('Edit Process Details') : i18n('Create New Process Details')}</Modal.Title>
- </Modal.Header>
- <Modal.Body className='edit-process-modal'>
- <SoftwareProductProcessesEditor softwareProductId={id} version={version} isReadOnlyMode={isReadOnlyMode}/>
- </Modal.Body>
- </Modal>
- );
- }
+ renderEditor() {
+ let {
+ currentSoftwareProduct: { id },
+ version,
+ isModalInEditMode,
+ isReadOnlyMode,
+ isDisplayEditor
+ } = this.props;
+ return (
+ <Modal
+ show={isDisplayEditor}
+ bsSize="large"
+ animation={true}
+ className="onborading-modal">
+ <Modal.Header>
+ <Modal.Title>
+ {isModalInEditMode
+ ? i18n('Edit Process Details')
+ : i18n('Create New Process Details')}
+ </Modal.Title>
+ </Modal.Header>
+ <Modal.Body className="edit-process-modal">
+ <SoftwareProductProcessesEditor
+ softwareProductId={id}
+ version={version}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ </Modal.Body>
+ </Modal>
+ );
+ }
}
export default SoftwareProductProcessesView;