* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React from 'react';
+import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Input, Button } from 'sdc-ui/lib/react';
import { I18n } from 'react-redux-i18n';
import Description from 'shared/components/Description';
-const CreateWorkflowView = props => {
- const {
- workflowInputChange,
- workflowDescription,
- workflowName,
- submitWorkflow,
- closeCreateWorkflowModal,
- workflowParams,
- history,
- errorMessage,
- putNameError
- } = props;
+class CreateWorkflowView extends Component {
+ static propTypes = {
+ submitWorkflow: PropTypes.func,
+ workflowInputChange: PropTypes.func,
+ workflowDescription: PropTypes.string,
+ workflowName: PropTypes.string,
+ closeCreateWorkflowModal: PropTypes.func,
+ workflowParams: PropTypes.object,
+ history: PropTypes.object,
+ errorMessage: PropTypes.string,
+ clearValidationError: PropTypes.func,
+ clearWorkflow: PropTypes.func
+ };
- function handleSubmitForm(e) {
- e.preventDefault();
- if (workflowParams.name) {
- submitWorkflow({ ...workflowParams, history });
- } else {
- putNameError();
- }
+ componentDidMount() {
+ const { clearValidationError, clearWorkflow } = this.props;
+ clearValidationError();
+ clearWorkflow();
}
+ handleSubmitForm = e => {
+ e.preventDefault();
+ const { workflowParams, history, submitWorkflow } = this.props;
+ submitWorkflow({ ...workflowParams, history });
+ };
- return (
- <form onSubmit={handleSubmitForm}>
- <div className="new-workflow-page custom-modal-wrapper">
- <div className="form-custom-modal">
- <Input
- name="workflowName"
- value={workflowName || ''}
- type="text"
- label={I18n.t('workflow.general.name')}
- onChange={val =>
- workflowInputChange({
- name: val
- })
- }
- errorMessage={errorMessage}
- isRequired
- />
- <Description
- value={workflowDescription || ''}
- label={I18n.t('workflow.general.description')}
- onDataChange={workflowInputChange}
- />
+ render() {
+ const {
+ workflowInputChange,
+ workflowDescription,
+ workflowName,
+ closeCreateWorkflowModal,
+ errorMessage
+ } = this.props;
+ return (
+ <form onSubmit={this.handleSubmitForm} autoComplete="off">
+ <div className="new-workflow-page custom-modal-wrapper">
+ <div className="form-custom-modal">
+ <Input
+ name="workflowName"
+ value={workflowName || ''}
+ type="text"
+ label={I18n.t('workflow.general.name')}
+ onChange={val =>
+ workflowInputChange({
+ name: val
+ })
+ }
+ errorMessage={errorMessage}
+ isRequired
+ />
+ <Description
+ value={workflowDescription || ''}
+ label={I18n.t('workflow.general.description')}
+ onDataChange={workflowInputChange}
+ />
+ </div>
+ <div className="modal-action-bar sdc-modal__footer">
+ <Button btnType="primary">
+ {I18n.t('buttons.createBtn')}
+ </Button>
+ <Button
+ btnType="secondary"
+ onClick={closeCreateWorkflowModal}>
+ {I18n.t('buttons.closeBtn')}
+ </Button>
+ </div>
</div>
- <div className="modal-action-bar sdc-modal__footer">
- <Button btnType="primary">
- {I18n.t('buttons.createBtn')}
- </Button>
- <Button
- btnType="secondary"
- onClick={closeCreateWorkflowModal}>
- {I18n.t('buttons.closeBtn')}
- </Button>
- </div>
- </div>
- </form>
- );
-};
-
-CreateWorkflowView.propTypes = {
- submitWorkflow: PropTypes.func,
- workflowInputChange: PropTypes.func,
- workflowDescription: PropTypes.string,
- workflowName: PropTypes.string,
- closeCreateWorkflowModal: PropTypes.func,
- workflowParams: PropTypes.object,
- history: PropTypes.object,
- errorMessage: PropTypes.string,
- putNameError: PropTypes.func
-};
+ </form>
+ );
+ }
+}
CreateWorkflowView.defaultProps = {
submitWorkflow: () => {},
workflowInputChange: () => {},
- closeCreateWorkflowModal: () => {}
+ closeCreateWorkflowModal: () => {},
+ clearWorkflow: () => {}
};
export default CreateWorkflowView;
* limitations under the License.
*/
import { takeEvery, call, put } from 'redux-saga/effects';
-import { SUBMIT_WORKFLOW } from 'features/workflow/create/createWorkflowConstants';
+import { I18n } from 'react-redux-i18n';
+
+import {
+ SUBMIT_WORKFLOW,
+ NEW_VERSION,
+ MAX_NAME_LENGTH,
+ MIN_NAME_LENGTH,
+ CHARS_VALIDATION_EXP,
+ putValidationError
+} from 'features/workflow/create/createWorkflowConstants';
import {
setWorkflowAction,
clearWorkflowAction
} from 'features/workflow/workflowConstants';
+import { hideModalAction } from 'shared/modal/modalWrapperActions';
import newWorkflowApi from 'features/workflow/create/createWorkflowApi';
import { genericNetworkErrorAction } from 'wfapp/appConstants';
import { submitVersionAction } from 'features/version/create/createVersionConstants';
-import { NEW_VERSION } from 'features/workflow/create/createWorkflowConstants';
export function* watchSubmitWorkflow(action) {
try {
- const workflow = yield call(
- newWorkflowApi.createNewWorkflow,
- action.payload
- );
- //Calling to create empty version
- const workflowId = workflow.id;
- const { history } = action.payload;
- yield put(submitVersionAction({ history, workflowId, ...NEW_VERSION }));
- yield put(setWorkflowAction(workflow));
+ const { name } = action.payload;
+ const validationError = yield validateNameField(name);
+ if (validationError) {
+ yield put(putValidationError(validationError));
+ } else {
+ const workflow = yield call(
+ newWorkflowApi.createNewWorkflow,
+ action.payload
+ );
+ //Calling to create empty version
+ const workflowId = workflow.id;
+ const { history } = action.payload;
+ yield put(
+ submitVersionAction({ history, workflowId, ...NEW_VERSION })
+ );
+ yield put(setWorkflowAction(workflow));
+ yield put(hideModalAction());
+ }
} catch (error) {
yield put(clearWorkflowAction);
yield put(genericNetworkErrorAction(error));
}
}
+export function validateNameField(name) {
+ let errorMessage;
+ if (!name) {
+ errorMessage = I18n.t('workflow.errorMessages.emptyName');
+ } else if (!CHARS_VALIDATION_EXP.test(name)) {
+ errorMessage = I18n.t('workflow.errorMessages.invalidCharacters');
+ } else if (name.length < MIN_NAME_LENGTH || name.length > MAX_NAME_LENGTH) {
+ errorMessage = I18n.t('workflow.errorMessages.nameFieldLength', {
+ minValue: 6,
+ maxValue: 40
+ });
+ }
+ return errorMessage;
+}
+
export function* watchWorkflow() {
yield takeEvery(SUBMIT_WORKFLOW, watchSubmitWorkflow);
}
Code Review / sdc / sdc-workflow-designer.git / commitdiff