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 --- openecomp-ui/src/sdc-app/flows/FlowsActions.js | 321 ++++++++++++--------- openecomp-ui/src/sdc-app/flows/FlowsConstants.js | 32 +- openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js | 77 +++-- .../src/sdc-app/flows/FlowsEditorModalView.jsx | 101 ++++--- openecomp-ui/src/sdc-app/flows/FlowsListEditor.js | 66 +++-- .../src/sdc-app/flows/FlowsListEditorView.jsx | 261 +++++++++-------- openecomp-ui/src/sdc-app/flows/FlowsListReducer.js | 162 ++++++----- openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx | 97 ++++--- openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js | 4 +- openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx | 58 ++-- openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx | 54 ++-- .../sdc-app/flows/SequenceDiagramModelHelper.js | 77 ++--- 12 files changed, 718 insertions(+), 592 deletions(-) (limited to 'openecomp-ui/src/sdc-app/flows') diff --git a/openecomp-ui/src/sdc-app/flows/FlowsActions.js b/openecomp-ui/src/sdc-app/flows/FlowsActions.js index 61a419b314..9fb65f37d4 100644 --- a/openecomp-ui/src/sdc-app/flows/FlowsActions.js +++ b/openecomp-ui/src/sdc-app/flows/FlowsActions.js @@ -15,171 +15,204 @@ */ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; import Configuration from 'sdc-app/config/Configuration.js'; -import {actionTypes, enums} from './FlowsConstants.js'; +import { actionTypes, enums } from './FlowsConstants.js'; import SequenceDiagramModelHelper from './SequenceDiagramModelHelper.js'; - function baseUrl(serviceId, artifactId = '') { - const restCatalogPrefix = Configuration.get('restCatalogPrefix'); - return `${restCatalogPrefix}/v1/catalog/services/${serviceId}/artifacts/${artifactId}`; + const restCatalogPrefix = Configuration.get('restCatalogPrefix'); + return `${restCatalogPrefix}/v1/catalog/services/${serviceId}/artifacts/${artifactId}`; } function encodeDataToBase64(dataAsString) { - return window.btoa(dataAsString); + return window.btoa(dataAsString); } function decodeDataToBase64(encodedData) { - return window.atob(encodedData); + return window.atob(encodedData); } function encodeContent(flowData) { - let data = { - VERSION: { - major: 1, - minor: 0 - }, - description: flowData.description, - sequenceDiagramModel: flowData.sequenceDiagramModel - }; - - return encodeDataToBase64(JSON.stringify(data)); + let data = { + VERSION: { + major: 1, + minor: 0 + }, + description: flowData.description, + sequenceDiagramModel: flowData.sequenceDiagramModel + }; + + return encodeDataToBase64(JSON.stringify(data)); } function decodeContent(base64Contents) { - let description, sequenceDiagramModel; - let payload = JSON.parse(decodeDataToBase64(base64Contents)); - - if (payload.VERSION === undefined) { - description = payload.description || 'Please, provide description...'; - sequenceDiagramModel = payload.data || payload; - sequenceDiagramModel = sequenceDiagramModel.model || sequenceDiagramModel; - - } - else if (payload.VERSION.major === 1) { - description = payload.description; - sequenceDiagramModel = payload.sequenceDiagramModel; - } - - return { - description, - sequenceDiagramModel - }; + let description, sequenceDiagramModel; + let payload = JSON.parse(decodeDataToBase64(base64Contents)); + + if (payload.VERSION === undefined) { + description = payload.description || 'Please, provide description...'; + sequenceDiagramModel = payload.data || payload; + sequenceDiagramModel = + sequenceDiagramModel.model || sequenceDiagramModel; + } else if (payload.VERSION.major === 1) { + description = payload.description; + sequenceDiagramModel = payload.sequenceDiagramModel; + } + + return { + description, + sequenceDiagramModel + }; } function createOrUpdate(flowData) { - let createOrUpdateRequest = { - payloadData: encodeContent(flowData), - artifactLabel: flowData.artifactLabel || flowData.artifactName, - artifactName: flowData.artifactName, - artifactType: flowData.artifactType, - artifactGroupType: enums.INFORMATIONAL, - description: flowData.description - }; - - return RestAPIUtil.post( - baseUrl(flowData.serviceID, flowData.uniqueId), - createOrUpdateRequest, - {md5: true} - ); + let createOrUpdateRequest = { + payloadData: encodeContent(flowData), + artifactLabel: flowData.artifactLabel || flowData.artifactName, + artifactName: flowData.artifactName, + artifactType: flowData.artifactType, + artifactGroupType: enums.INFORMATIONAL, + description: flowData.description + }; + + return RestAPIUtil.post( + baseUrl(flowData.serviceID, flowData.uniqueId), + createOrUpdateRequest, + { md5: true } + ); } const FlowsActions = Object.freeze({ - - fetchFlowArtifacts(dispatch, {artifacts, diagramType, participants, serviceID, readonly}) { - let results = []; - if (!Object.keys(artifacts).length) { - dispatch({type: actionTypes.FLOW_LIST_LOADED, results, participants, serviceID, diagramType, readonly}); - if (!readonly) { - FlowsActions.openFlowDetailsEditor(dispatch); - } - } - else { - Object.keys(artifacts).forEach(artifact => results.push({ - artifactType: diagramType, - participants, - serviceID, - ...artifacts[artifact] - })); - dispatch({type: actionTypes.FLOW_LIST_LOADED, results, participants, serviceID, diagramType, readonly}); - } - }, - - fetchArtifact(dispatch, {flow}){ - let {serviceID, uniqueId, participants} = flow; - return RestAPIUtil.fetch(baseUrl(serviceID, uniqueId)).then(response => { - - let {artifactName, base64Contents} = response; - let {sequenceDiagramModel, ...other} = decodeContent(base64Contents); - - if (!sequenceDiagramModel) { - sequenceDiagramModel = SequenceDiagramModelHelper.createModel({ - id: uniqueId, - name: artifactName, - lifelines: participants - }); - } - else { - sequenceDiagramModel = SequenceDiagramModelHelper.updateModel(sequenceDiagramModel, { - name: artifactName, - lifelines: participants - }); - } - - flow = { - ...flow, - ...other, - uniqueId, - artifactName, - sequenceDiagramModel - }; - - dispatch({type: actionTypes.ARTIFACT_LOADED, flow}); - FlowsActions.openFlowDiagramEditor(dispatch, {flow}); - }); - }, - - createOrUpdateFlow(dispatch, {flow}, isNew) { - if (!isNew && flow.sequenceDiagramModel) { - flow.sequenceDiagramModel = SequenceDiagramModelHelper.updateModel(flow.sequenceDiagramModel, { - name: flow.artifactName - }); - } - return createOrUpdate(flow).then(response => { - let {uniqueId, artifactLabel} = response; - flow = {...flow, uniqueId, artifactLabel}; - if (isNew) { - flow.sequenceDiagramModel = SequenceDiagramModelHelper.createModel({id: uniqueId, name: flow.artifactName}); - } - dispatch({type: actionTypes.ADD_OR_UPDATE_FLOW, flow}); - }); - }, - - deleteFlow(dispatch, {flow}) { - return RestAPIUtil.destroy(baseUrl(flow.serviceID, flow.uniqueId)).then(() => dispatch({ - type: actionTypes.DELETE_FLOW, - flow - })); - }, - - openFlowDetailsEditor(dispatch, flow) { - dispatch({type: actionTypes.OPEN_FLOW_DETAILS_EDITOR, flow}); - }, - - closeFlowDetailsEditor(dispatch) { - dispatch({type: actionTypes.CLOSE_FLOW_DETAILS_EDITOR}); - }, - - openFlowDiagramEditor(dispatch, {flow}) { - dispatch({type: actionTypes.OPEN_FLOW_DIAGRAM_EDITOR, flow}); - }, - - closeFlowDiagramEditor(dispatch) { - dispatch({type: actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR}); - }, - - reset(dispatch) { - dispatch({type: actionTypes.RESET}); - } + fetchFlowArtifacts( + dispatch, + { artifacts, diagramType, participants, serviceID, readonly } + ) { + let results = []; + if (!Object.keys(artifacts).length) { + dispatch({ + type: actionTypes.FLOW_LIST_LOADED, + results, + participants, + serviceID, + diagramType, + readonly + }); + if (!readonly) { + FlowsActions.openFlowDetailsEditor(dispatch); + } + } else { + Object.keys(artifacts).forEach(artifact => + results.push({ + artifactType: diagramType, + participants, + serviceID, + ...artifacts[artifact] + }) + ); + dispatch({ + type: actionTypes.FLOW_LIST_LOADED, + results, + participants, + serviceID, + diagramType, + readonly + }); + } + }, + + fetchArtifact(dispatch, { flow }) { + let { serviceID, uniqueId, participants } = flow; + return RestAPIUtil.fetch(baseUrl(serviceID, uniqueId)).then( + response => { + let { artifactName, base64Contents } = response; + let { sequenceDiagramModel, ...other } = decodeContent( + base64Contents + ); + + if (!sequenceDiagramModel) { + sequenceDiagramModel = SequenceDiagramModelHelper.createModel( + { + id: uniqueId, + name: artifactName, + lifelines: participants + } + ); + } else { + sequenceDiagramModel = SequenceDiagramModelHelper.updateModel( + sequenceDiagramModel, + { + name: artifactName, + lifelines: participants + } + ); + } + + flow = { + ...flow, + ...other, + uniqueId, + artifactName, + sequenceDiagramModel + }; + + dispatch({ type: actionTypes.ARTIFACT_LOADED, flow }); + FlowsActions.openFlowDiagramEditor(dispatch, { flow }); + } + ); + }, + + createOrUpdateFlow(dispatch, { flow }, isNew) { + if (!isNew && flow.sequenceDiagramModel) { + flow.sequenceDiagramModel = SequenceDiagramModelHelper.updateModel( + flow.sequenceDiagramModel, + { + name: flow.artifactName + } + ); + } + return createOrUpdate(flow).then(response => { + let { uniqueId, artifactLabel } = response; + flow = { ...flow, uniqueId, artifactLabel }; + if (isNew) { + flow.sequenceDiagramModel = SequenceDiagramModelHelper.createModel( + { + id: uniqueId, + name: flow.artifactName + } + ); + } + dispatch({ type: actionTypes.ADD_OR_UPDATE_FLOW, flow }); + }); + }, + + deleteFlow(dispatch, { flow }) { + return RestAPIUtil.destroy(baseUrl(flow.serviceID, flow.uniqueId)).then( + () => + dispatch({ + type: actionTypes.DELETE_FLOW, + flow + }) + ); + }, + + openFlowDetailsEditor(dispatch, flow) { + dispatch({ type: actionTypes.OPEN_FLOW_DETAILS_EDITOR, flow }); + }, + + closeFlowDetailsEditor(dispatch) { + dispatch({ type: actionTypes.CLOSE_FLOW_DETAILS_EDITOR }); + }, + + openFlowDiagramEditor(dispatch, { flow }) { + dispatch({ type: actionTypes.OPEN_FLOW_DIAGRAM_EDITOR, flow }); + }, + + closeFlowDiagramEditor(dispatch) { + dispatch({ type: actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR }); + }, + + reset(dispatch) { + dispatch({ type: actionTypes.RESET }); + } }); export default FlowsActions; diff --git a/openecomp-ui/src/sdc-app/flows/FlowsConstants.js b/openecomp-ui/src/sdc-app/flows/FlowsConstants.js index 2b3d86bae2..4dcd840ff3 100644 --- a/openecomp-ui/src/sdc-app/flows/FlowsConstants.js +++ b/openecomp-ui/src/sdc-app/flows/FlowsConstants.js @@ -16,30 +16,28 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionTypes = keyMirror({ + OPEN_FLOW_DETAILS_EDITOR: null, + CLOSE_FLOW_DETAILS_EDITOR: null, - OPEN_FLOW_DETAILS_EDITOR: null, - CLOSE_FLOW_DETAILS_EDITOR: null, + OPEN_FLOW_DIAGRAM_EDITOR: null, + CLOSE_FLOW_DIAGRAM_EDITOR: null, - OPEN_FLOW_DIAGRAM_EDITOR: null, - CLOSE_FLOW_DIAGRAM_EDITOR: null, + FLOW_LIST_LOADED: null, + ADD_OR_UPDATE_FLOW: null, + ARTIFACT_LOADED: null, + DELETE_FLOW: null, - FLOW_LIST_LOADED: null, - ADD_OR_UPDATE_FLOW: null, - ARTIFACT_LOADED: null, - DELETE_FLOW: null, - - CURRENT_FLOW_DATA_CHANGED: null, - - RESET: null + CURRENT_FLOW_DATA_CHANGED: null, + RESET: null }); export const enums = { - WORKFLOW: 'WORKFLOW', - NETWORK: 'NETWORK_CALL_FLOW', - INFORMATIONAL: 'INFORMATIONAL', - INSTANTIATION_FLOWS: 'instantiationflows', - MESSAGE_FLOWS: 'messageflows' + WORKFLOW: 'WORKFLOW', + NETWORK: 'NETWORK_CALL_FLOW', + INFORMATIONAL: 'INFORMATIONAL', + INSTANTIATION_FLOWS: 'instantiationflows', + MESSAGE_FLOWS: 'messageflows' }; export const FLOWS_EDITOR_FORM = 'FLOWS_FORM'; diff --git a/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js b/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js index f9585f985f..b45a9fc54e 100644 --- a/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js +++ b/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js @@ -13,44 +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 FlowsEditorModalView from './FlowsEditorModalView.jsx'; import FlowsActions from './FlowsActions.js'; -import {FLOWS_EDITOR_FORM} from './FlowsConstants.js'; +import { FLOWS_EDITOR_FORM } from './FlowsConstants.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; -export const mapStateToProps = ({flows}) => { +export const mapStateToProps = ({ flows }) => { + let { + data = { artifactName: '', description: '' }, + serviceID, + diagramType, + flowParticipants, + genericFieldInfo, + formReady + } = flows; + if (!data.serviceID) { + data.serviceID = serviceID; + } + if (!data.artifactType) { + data.artifactType = diagramType; + } + if (!data.participants) { + data.participants = flowParticipants; + } + let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); - let {data = {artifactName: '', description: ''}, serviceID, diagramType, flowParticipants, genericFieldInfo, formReady} = flows; - if(!data.serviceID){ - data.serviceID = serviceID; - } - if(!data.artifactType){ - data.artifactType = diagramType; - } - if(!data.participants){ - data.participants = flowParticipants; - } - let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo); - - return { - currentFlow: data, - genericFieldInfo, - isFormValid, - formReady - }; + return { + currentFlow: data, + genericFieldInfo, + isFormValid, + formReady + }; }; -const mapActionsToProps = (dispatch, {isNewArtifact}) => { - return { - onSubmit: flow => { - FlowsActions.closeFlowDetailsEditor(dispatch); - FlowsActions.createOrUpdateFlow(dispatch, {flow}, isNewArtifact); - }, - onCancel: () => FlowsActions.closeFlowDetailsEditor(dispatch), - onDataChanged: deltaData => ValidationHelper.dataChanged(dispatch, {deltaData, formName: FLOWS_EDITOR_FORM}), - onValidateForm: () => ValidationHelper.validateForm(dispatch, FLOWS_EDITOR_FORM) - }; +const mapActionsToProps = (dispatch, { isNewArtifact }) => { + return { + onSubmit: flow => { + FlowsActions.closeFlowDetailsEditor(dispatch); + FlowsActions.createOrUpdateFlow(dispatch, { flow }, isNewArtifact); + }, + onCancel: () => FlowsActions.closeFlowDetailsEditor(dispatch), + onDataChanged: deltaData => + ValidationHelper.dataChanged(dispatch, { + deltaData, + formName: FLOWS_EDITOR_FORM + }), + onValidateForm: () => + ValidationHelper.validateForm(dispatch, FLOWS_EDITOR_FORM) + }; }; -export default connect(mapStateToProps, mapActionsToProps)(FlowsEditorModalView); +export default connect(mapStateToProps, mapActionsToProps)( + FlowsEditorModalView +); diff --git a/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx b/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx index 1250a0b58e..8c805cca9c 100644 --- a/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx +++ b/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx @@ -13,52 +13,73 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Input from 'nfvo-components/input/validation/Input.jsx'; import Form from 'nfvo-components/input/validation/Form.jsx'; class FlowsEditorModalView extends Component { + render() { + let { + onCancel, + onDataChanged, + currentFlow, + genericFieldInfo, + formReady, + isFormValid, + onValidateForm + } = this.props; + let { artifactName, description } = currentFlow; + return ( +
+ {genericFieldInfo && ( +
this.onSaveClicked()} + onReset={onCancel} + formReady={formReady} + isValid={isFormValid} + onValidateForm={() => onValidateForm()}> + + onDataChanged({ artifactName }) + } + /> + + onDataChanged({ description }) + } + /> +
+ )} +
+ ); + } - render() { - let {onCancel, onDataChanged, currentFlow, genericFieldInfo, formReady, isFormValid, onValidateForm} = this.props; - let {artifactName, description} = currentFlow; - return ( -
- {genericFieldInfo &&
this.onSaveClicked()} - onReset={onCancel} formReady={formReady} isValid={isFormValid} onValidateForm={() => onValidateForm()} > - onDataChanged({artifactName})}/> - onDataChanged({description})}/> -
} -
- ); - } - - onSaveClicked() { - let {currentFlow, onSubmit} = this.props; - if (onSubmit) { - onSubmit(currentFlow); - } - } - + onSaveClicked() { + let { currentFlow, onSubmit } = this.props; + if (onSubmit) { + onSubmit(currentFlow); + } + } } export default FlowsEditorModalView; diff --git a/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js b/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js index 642c578eb7..2718c19aaa 100644 --- a/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js +++ b/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js @@ -13,40 +13,50 @@ * 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 FlowsActions from './FlowsActions.js'; import FlowsListEditorView from './FlowsListEditorView.jsx'; -export const mapStateToProps = ({flows}) => { - let {flowList = [], isDisplayModal, isModalInEditMode, shouldShowWorkflowsEditor = true, data = undefined, readonly} = flows; - let isCheckedOut = !readonly; - if(data && data.readonly){ - isCheckedOut = !data.readonly; - } +export const mapStateToProps = ({ flows }) => { + let { + flowList = [], + isDisplayModal, + isModalInEditMode, + shouldShowWorkflowsEditor = true, + data = undefined, + readonly + } = flows; + let isCheckedOut = !readonly; + if (data && data.readonly) { + isCheckedOut = !data.readonly; + } - return { - flowList, - isDisplayModal, - isCheckedOut, - isModalInEditMode, - shouldShowWorkflowsEditor, - currentFlow: data, - readonly - }; + return { + flowList, + isDisplayModal, + isCheckedOut, + isModalInEditMode, + shouldShowWorkflowsEditor, + currentFlow: data, + readonly + }; }; -const mapActionsToProps = (dispatch) => { - return { - onAddWorkflowClick: () => FlowsActions.openFlowDetailsEditor(dispatch), - onEditFlowDetailsClick: flow => FlowsActions.openFlowDetailsEditor(dispatch, flow), - onEditFlowDiagramClick: flow => FlowsActions.fetchArtifact(dispatch, {flow}), - onDeleteFlowClick: flow => FlowsActions.deleteFlow(dispatch, {flow}), - onSequenceDiagramSaveClick: flow => { - FlowsActions.closeFlowDiagramEditor(dispatch); - FlowsActions.createOrUpdateFlow(dispatch, {flow}); - }, - onSequenceDiagramCloseClick: () => FlowsActions.closeFlowDiagramEditor(dispatch) - }; +const mapActionsToProps = dispatch => { + return { + onAddWorkflowClick: () => FlowsActions.openFlowDetailsEditor(dispatch), + onEditFlowDetailsClick: flow => + FlowsActions.openFlowDetailsEditor(dispatch, flow), + onEditFlowDiagramClick: flow => + FlowsActions.fetchArtifact(dispatch, { flow }), + onDeleteFlowClick: flow => FlowsActions.deleteFlow(dispatch, { flow }), + onSequenceDiagramSaveClick: flow => { + FlowsActions.closeFlowDiagramEditor(dispatch); + FlowsActions.createOrUpdateFlow(dispatch, { flow }); + }, + onSequenceDiagramCloseClick: () => + FlowsActions.closeFlowDiagramEditor(dispatch) + }; }; export default connect(mapStateToProps, mapActionsToProps)(FlowsListEditorView); diff --git a/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx b/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx index 365b7f1bdf..3b2ff0619c 100644 --- a/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx +++ b/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx @@ -13,7 +13,7 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Modal from 'nfvo-components/modal/Modal.jsx'; @@ -25,125 +25,146 @@ import FlowsEditorModal from './FlowsEditorModal.js'; import SequenceDiagram from './SequenceDiagram.jsx'; class FlowsListEditorView extends Component { - - static propTypes = { - flowList: PropTypes.array, - currentFlow: PropTypes.object, - isDisplayModal: PropTypes.bool, - isModalInEditMode: PropTypes.bool, - isCheckedOut: PropTypes.bool, - shouldShowWorkflowsEditor: PropTypes.bool, - readonly: PropTypes.bool, - - onAddWorkflowClick: PropTypes.func, - onEditFlowDetailsClick: PropTypes.func, - onEditFlowDiagramClick: PropTypes.func, - onDeleteFlowClick: PropTypes.func, - onSequenceDiagramSaveClick: PropTypes.func, - onSequenceDiagramCloseClick: PropTypes.func - }; - - state = { - localFilter: '' - }; - - render() { - let CurrentView = null; - if (this.props.shouldShowWorkflowsEditor) { - CurrentView = this.renderWorkflowsEditor(); - } - else { - CurrentView = this.renderSequenceDiagramTool(); - } - - return CurrentView; - } - - renderWorkflowsEditor() { - let {isDisplayModal, onAddWorkflowClick, isCheckedOut} = this.props; - const {localFilter} = this.state; - - return ( -
- - this.setState({localFilter: filter})} - isReadOnlyMode={!isCheckedOut}> - {this.filterList().map(flow => this.renderWorkflowListItem(flow, isCheckedOut))} - - - {isDisplayModal && this.renderWorkflowEditorModal()} - -
- ); - } - - renderWorkflowEditorModal() { - let { isDisplayModal, isModalInEditMode} = this.props; - return ( - - - - {`${isModalInEditMode ? i18n('Edit Workflow') : i18n('Create New Workflow')}`} - - - - - - - ); - } - - renderSequenceDiagramTool() { - let {onSequenceDiagramSaveClick, onSequenceDiagramCloseClick, currentFlow} = this.props; - return ( - onSequenceDiagramSaveClick({...currentFlow, sequenceDiagramModel})} - onClose={onSequenceDiagramCloseClick} - model={currentFlow.sequenceDiagramModel}/> - ); - } - - filterList() { - let {flowList} = this.props; - let {localFilter} = this.state; - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return flowList.filter(({name = '', description = ''}) => { - return escape(name).match(filter) || escape(description).match(filter); - }); - } - else { - return flowList; - } - } - - renderWorkflowListItem(flow, isCheckedOut) { - let {uniqueId, artifactName, description} = flow; - let {onEditFlowDetailsClick, onEditFlowDiagramClick, onDeleteFlowClick} = this.props; - return ( - onEditFlowDetailsClick(flow)} - onDelete={() => onDeleteFlowClick(flow)} - onEdit={() => onEditFlowDiagramClick(flow)} - className='list-editor-item-view' - isCheckedOut={isCheckedOut}> -
-
{i18n('Name')}
-
{artifactName}
-
-
-
{i18n('Description')}
-
{description}
-
- - ); - } - + static propTypes = { + flowList: PropTypes.array, + currentFlow: PropTypes.object, + isDisplayModal: PropTypes.bool, + isModalInEditMode: PropTypes.bool, + isCheckedOut: PropTypes.bool, + shouldShowWorkflowsEditor: PropTypes.bool, + readonly: PropTypes.bool, + + onAddWorkflowClick: PropTypes.func, + onEditFlowDetailsClick: PropTypes.func, + onEditFlowDiagramClick: PropTypes.func, + onDeleteFlowClick: PropTypes.func, + onSequenceDiagramSaveClick: PropTypes.func, + onSequenceDiagramCloseClick: PropTypes.func + }; + + state = { + localFilter: '' + }; + + render() { + let CurrentView = null; + if (this.props.shouldShowWorkflowsEditor) { + CurrentView = this.renderWorkflowsEditor(); + } else { + CurrentView = this.renderSequenceDiagramTool(); + } + + return CurrentView; + } + + renderWorkflowsEditor() { + let { isDisplayModal, onAddWorkflowClick, isCheckedOut } = this.props; + const { localFilter } = this.state; + + return ( +
+ + this.setState({ localFilter: filter })} + isReadOnlyMode={!isCheckedOut}> + {this.filterList().map(flow => + this.renderWorkflowListItem(flow, isCheckedOut) + )} + + + {isDisplayModal && this.renderWorkflowEditorModal()} +
+ ); + } + + renderWorkflowEditorModal() { + let { isDisplayModal, isModalInEditMode } = this.props; + return ( + + + + {`${ + isModalInEditMode + ? i18n('Edit Workflow') + : i18n('Create New Workflow') + }`} + + + + + + + ); + } + + renderSequenceDiagramTool() { + let { + onSequenceDiagramSaveClick, + onSequenceDiagramCloseClick, + currentFlow + } = this.props; + return ( + + onSequenceDiagramSaveClick({ + ...currentFlow, + sequenceDiagramModel + }) + } + onClose={onSequenceDiagramCloseClick} + model={currentFlow.sequenceDiagramModel} + /> + ); + } + + filterList() { + let { flowList } = this.props; + let { localFilter } = this.state; + if (localFilter.trim()) { + const filter = new RegExp(escape(localFilter), 'i'); + return flowList.filter(({ name = '', description = '' }) => { + return ( + escape(name).match(filter) || + escape(description).match(filter) + ); + }); + } else { + return flowList; + } + } + + renderWorkflowListItem(flow, isCheckedOut) { + let { uniqueId, artifactName, description } = flow; + let { + onEditFlowDetailsClick, + onEditFlowDiagramClick, + onDeleteFlowClick + } = this.props; + return ( + onEditFlowDetailsClick(flow)} + onDelete={() => onDeleteFlowClick(flow)} + onEdit={() => onEditFlowDiagramClick(flow)} + className="list-editor-item-view" + isCheckedOut={isCheckedOut}> +
+
{i18n('Name')}
+
{artifactName}
+
+
+
{i18n('Description')}
+
{description}
+
+ + ); + } } export default FlowsListEditorView; diff --git a/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js b/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js index 14bf595050..0279824ac4 100644 --- a/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js +++ b/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js @@ -13,87 +13,91 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {actionTypes, FLOWS_EDITOR_FORM} from './FlowsConstants.js'; +import { actionTypes, FLOWS_EDITOR_FORM } from './FlowsConstants.js'; export default (state = {}, action) => { - switch (action.type) { - case actionTypes.FLOW_LIST_LOADED: - return { - ...state, - flowList: action.results, - flowParticipants: action.participants, - serviceID: action.serviceID, - diagramType: action.diagramType, - readonly: action.readonly - }; - case actionTypes.ADD_OR_UPDATE_FLOW: - case actionTypes.ARTIFACT_LOADED: - let flowList = state.flowList || []; - let index = flowList.findIndex(flow => flow.uniqueId === action.flow.uniqueId); - if (index === -1) { - index = flowList.length; - } - let flowToBeUpdated = flowList[index]; - flowList = [ - ...flowList.slice(0, index), - {...flowToBeUpdated, ...action.flow}, - ...flowList.slice(index + 1) - ]; - return { - ...state, - flowList, - serviceID: action.flow.serviceID, - diagramType: action.flow.artifactType || state.diagramType - }; - case actionTypes.DELETE_FLOW: - return { - ...state, - flowList: state.flowList.filter(flow => flow.uniqueId !== action.flow.uniqueId) - }; - case actionTypes.OPEN_FLOW_DETAILS_EDITOR: - return { - ...state, - formName: FLOWS_EDITOR_FORM, - formReady: null, - genericFieldInfo: { - artifactName : { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}] - }, - description: { - isValid: true, - errorText: '', - validations: [{type: 'required', data: true}] - } - }, - data: action.flow, - isDisplayModal: true, - isModalInEditMode: Boolean(action.flow && action.flow.uniqueId) - }; + switch (action.type) { + case actionTypes.FLOW_LIST_LOADED: + return { + ...state, + flowList: action.results, + flowParticipants: action.participants, + serviceID: action.serviceID, + diagramType: action.diagramType, + readonly: action.readonly + }; + case actionTypes.ADD_OR_UPDATE_FLOW: + case actionTypes.ARTIFACT_LOADED: + let flowList = state.flowList || []; + let index = flowList.findIndex( + flow => flow.uniqueId === action.flow.uniqueId + ); + if (index === -1) { + index = flowList.length; + } + let flowToBeUpdated = flowList[index]; + flowList = [ + ...flowList.slice(0, index), + { ...flowToBeUpdated, ...action.flow }, + ...flowList.slice(index + 1) + ]; + return { + ...state, + flowList, + serviceID: action.flow.serviceID, + diagramType: action.flow.artifactType || state.diagramType + }; + case actionTypes.DELETE_FLOW: + return { + ...state, + flowList: state.flowList.filter( + flow => flow.uniqueId !== action.flow.uniqueId + ) + }; + case actionTypes.OPEN_FLOW_DETAILS_EDITOR: + return { + ...state, + formName: FLOWS_EDITOR_FORM, + formReady: null, + genericFieldInfo: { + artifactName: { + isValid: true, + errorText: '', + validations: [{ type: 'required', data: true }] + }, + description: { + isValid: true, + errorText: '', + validations: [{ type: 'required', data: true }] + } + }, + data: action.flow, + isDisplayModal: true, + isModalInEditMode: Boolean(action.flow && action.flow.uniqueId) + }; - case actionTypes.CLOSE_FLOW_DETAILS_EDITOR: - return { - ...state, - data: undefined, - isDisplayModal: false, - isModalInEditMode: false - }; - case actionTypes.OPEN_FLOW_DIAGRAM_EDITOR: - return { - ...state, - data: action.flow, - shouldShowWorkflowsEditor: false - }; - case actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR: - return { - ...state, - data: undefined, - shouldShowWorkflowsEditor: true - }; - case actionTypes.RESET: - return {}; - } + case actionTypes.CLOSE_FLOW_DETAILS_EDITOR: + return { + ...state, + data: undefined, + isDisplayModal: false, + isModalInEditMode: false + }; + case actionTypes.OPEN_FLOW_DIAGRAM_EDITOR: + return { + ...state, + data: action.flow, + shouldShowWorkflowsEditor: false + }; + case actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR: + return { + ...state, + data: undefined, + shouldShowWorkflowsEditor: true + }; + case actionTypes.RESET: + return {}; + } - return state; + return state; }; diff --git a/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx b/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx index a2a5554203..7d302444e4 100644 --- a/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx +++ b/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx @@ -22,57 +22,66 @@ import FlowsListEditor from './FlowsListEditor.js'; import FlowsActions from './FlowsActions.js'; class FlowsListEditorPunchOutWrapper extends React.Component { + componentDidMount() { + let element = ReactDOM.findDOMNode(this); + element.addEventListener('click', event => { + if (event.target.tagName === 'A') { + event.preventDefault(); + } + }); + ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType => + element.addEventListener(eventType, event => + event.stopPropagation() + ) + ); + } - componentDidMount() { - let element = ReactDOM.findDOMNode(this); - element.addEventListener('click', event => { - if (event.target.tagName === 'A') { - event.preventDefault(); - } - }); - ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType => - element.addEventListener(eventType, event => event.stopPropagation()) - ); - } - - render() { - return ; - } + render() { + return ; + } } export default class DiagramPunchOut { + render({ options: { data, apiRoot, apiHeaders }, onEvent }, element) { + if (!this.isConfigSet) { + Configuration.setCatalogApiRoot(apiRoot); + Configuration.setCatalogApiHeaders(apiHeaders); + this.isConfigSet = true; + } - render({options: {data, apiRoot, apiHeaders}, onEvent}, element) { - - if (!this.isConfigSet) { - Configuration.setCatalogApiRoot(apiRoot); - Configuration.setCatalogApiHeaders(apiHeaders); - this.isConfigSet = true; - } - - this.onEvent = onEvent; - this.handleData(data); + this.onEvent = onEvent; + this.handleData(data); - if (!this.rendered) { - ReactDOM.render(
, element); - this.rendered = true; - } - } + if (!this.rendered) { + ReactDOM.render( + +
+ +
+ , + element + ); + this.rendered = true; + } + } - unmount(element) { - let dispatch = action => store.dispatch(action); - ReactDOM.unmountComponentAtNode(element); - FlowsActions.reset(dispatch); - } + unmount(element) { + let dispatch = action => store.dispatch(action); + ReactDOM.unmountComponentAtNode(element); + FlowsActions.reset(dispatch); + } - handleData(data) { - let {serviceID, diagramType} = data; - let dispatch = action => store.dispatch(action); + handleData(data) { + let { serviceID, diagramType } = data; + let dispatch = action => store.dispatch(action); - if (serviceID !== this.prevServiceID || diagramType !== this.prevDiagramType) { - this.prevServiceID = serviceID; - this.prevDiagramType = diagramType; - FlowsActions.fetchFlowArtifacts(dispatch, {...data}); - } - } + if ( + serviceID !== this.prevServiceID || + diagramType !== this.prevDiagramType + ) { + this.prevServiceID = serviceID; + this.prevDiagramType = diagramType; + FlowsActions.fetchFlowArtifacts(dispatch, { ...data }); + } + } } diff --git a/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js b/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js index 54043498f0..c037f3eefd 100644 --- a/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js +++ b/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js @@ -15,8 +15,8 @@ */ import flowListReducer from './FlowsListReducer.js'; -import {createPlainDataReducer} from 'sdc-app/common/reducers/PlainDataReducer.js'; +import { createPlainDataReducer } from 'sdc-app/common/reducers/PlainDataReducer.js'; export default { - flows: createPlainDataReducer(flowListReducer) + flows: createPlainDataReducer(flowListReducer) }; diff --git a/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx b/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx index d0a5bf3251..8a634915ac 100644 --- a/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx +++ b/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx @@ -13,27 +13,31 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import md5 from 'md5'; class ImportantLogic extends Component { + state = { + whatToDisplay: false + }; - state = { - whatToDisplay: false - }; + componentWillReceiveProps(nextProps) { + this.setState({ + whatToDisplay: + md5(nextProps.display) === 'a55899b341525123628776dbf5755d51' + }); + } - componentWillReceiveProps(nextProps) { - this.setState({whatToDisplay: md5(nextProps.display) === 'a55899b341525123628776dbf5755d51'}); - } + render() { + if (this.state.whatToDisplay) { + setTimeout(() => this.setState({ whatToDisplay: false }), 5000); + } - render() { - if (this.state.whatToDisplay) { - setTimeout(() => this.setState({whatToDisplay: false}), 5000); - } - - return ( -
- -
- {} - {} -
-
- ); - } + }' + } + +
+ {} + {} +
+ + ); + } } export default ImportantLogic; diff --git a/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx b/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx index c128083774..ca24964472 100644 --- a/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx +++ b/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx @@ -13,7 +13,7 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Button from 'sdc-ui/lib/react/Button.js'; import Sequencer from 'dox-sequence-diagram-ui'; @@ -21,31 +21,37 @@ import Sequencer from 'dox-sequence-diagram-ui'; import i18n from 'nfvo-utils/i18n/i18n.js'; class SequenceDiagram extends Component { + static propTypes = { + onSave: PropTypes.func.isRequired, + onClose: PropTypes.func, + model: PropTypes.object.isRequired + }; - static propTypes = { - onSave: PropTypes.func.isRequired, - onClose: PropTypes.func, - model: PropTypes.object.isRequired - }; - - onSave() { - this.props.onSave(this.refs.sequencer.getModel()); - } - - render() { - return ( -
-
- -
-
- - -
-
- ); - } + onSave() { + this.props.onSave(this.refs.sequencer.getModel()); + } + render() { + return ( +
+
+ +
+
+ + +
+
+ ); + } } export default SequenceDiagram; diff --git a/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js b/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js index c83fdc91f0..23723dc91d 100644 --- a/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js +++ b/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js @@ -16,51 +16,54 @@ import emptyModel from './emptyModel.json'; function mergeLifelines(oldLifelines, newLifelines) { - let oldLifelinesMap = new Map(oldLifelines.map(lifeline => [lifeline.id, lifeline])); - let newLifelinesMap = new Map(newLifelines.map(lifeline => [lifeline.id, lifeline])); + let oldLifelinesMap = new Map( + oldLifelines.map(lifeline => [lifeline.id, lifeline]) + ); + let newLifelinesMap = new Map( + newLifelines.map(lifeline => [lifeline.id, lifeline]) + ); - let updatedLifelines = oldLifelines.map(lifeline => { - let newLifeline = newLifelinesMap.get(lifeline.id); - return { - ...lifeline, - name: newLifeline ? newLifeline.name : lifeline.name - }; - }); + let updatedLifelines = oldLifelines.map(lifeline => { + let newLifeline = newLifelinesMap.get(lifeline.id); + return { + ...lifeline, + name: newLifeline ? newLifeline.name : lifeline.name + }; + }); - let addedLifelines = newLifelines.filter(lifeline => !oldLifelinesMap.has(lifeline.id)); + let addedLifelines = newLifelines.filter( + lifeline => !oldLifelinesMap.has(lifeline.id) + ); - return [ - ...updatedLifelines, - ...addedLifelines - ]; + return [...updatedLifelines, ...addedLifelines]; } - const SequenceDiagramModelHelper = Object.freeze({ + createModel(options) { + return SequenceDiagramModelHelper.updateModel(emptyModel, options); + }, - createModel(options) { - return SequenceDiagramModelHelper.updateModel(emptyModel, options); - }, - - updateModel(model, options) { - const diagram = model.diagram; - const metadata = diagram.metadata || model.metadata; - const id = options.id || metadata.id; - const name = options.name || metadata.name; - const lifelines = options.lifelines ? mergeLifelines(diagram.lifelines, options.lifelines) : diagram.lifelines; + updateModel(model, options) { + const diagram = model.diagram; + const metadata = diagram.metadata || model.metadata; + const id = options.id || metadata.id; + const name = options.name || metadata.name; + const lifelines = options.lifelines + ? mergeLifelines(diagram.lifelines, options.lifelines) + : diagram.lifelines; - return { - diagram: { - ...diagram, - metadata: { - ...metadata, - id, - name - }, - lifelines - } - }; - } + return { + diagram: { + ...diagram, + metadata: { + ...metadata, + id, + name + }, + lifelines + } + }; + } }); export default SequenceDiagramModelHelper; -- cgit 1.2.3-korg