Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4985 from Hyperkid123/replace-service-form
Replace service form
- Loading branch information
Showing
9 changed files
with
178 additions
and
192 deletions.
There are no files selected for viewing
54 changes: 0 additions & 54 deletions
54
app/assets/javascripts/controllers/service/service_form_controller.js
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import React, { Component } from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { Grid } from 'patternfly-react'; | ||
import createSchema from './schema'; | ||
import MiqFormRenderer from '../../forms/data-driven-form'; | ||
import { http } from '../../http_api'; | ||
import { cleanVirtualDom } from '../../miq-component/helpers'; | ||
|
||
class ServiceForm extends Component { | ||
constructor(props) { | ||
super(props); | ||
this.state = { | ||
schema: createSchema(props.maxNameLen, props.maxDescLen), | ||
}; | ||
} | ||
componentDidMount() { | ||
cleanVirtualDom(); | ||
miqSparkleOn(); | ||
http.get(`/service/service_form_fields/${this.props.serviceFormId}`) | ||
.then(data => this.setState({ initialValues: { ...data } }, miqSparkleOff())); | ||
} | ||
render() { | ||
const { serviceFormId } = this.props; | ||
const cancelUrl = `/service/service_edit/${serviceFormId}?button=cancel`; | ||
const submitUrl = `/service/service_edit/${serviceFormId}?button=save`; | ||
return ( | ||
<Grid fluid style={{ paddingTop: 20 }}> | ||
<MiqFormRenderer | ||
initialValues={this.state.initialValues} | ||
schema={this.state.schema} | ||
onSubmit={values => miqAjaxButton(submitUrl, values)} | ||
onCancel={() => miqAjaxButton(cancelUrl)} | ||
onReset={() => add_flash(__('All changes have been reset'), 'warn')} | ||
canReset | ||
buttonsLabels={{ | ||
submitLabel: __('Save'), | ||
resetLabel: __('Reset'), | ||
cancelLabel: __('Cancel'), | ||
}} | ||
/> | ||
</Grid> | ||
); | ||
} | ||
} | ||
|
||
ServiceForm.propTypes = { | ||
maxNameLen: PropTypes.number.isRequired, | ||
maxDescLen: PropTypes.number.isRequired, | ||
serviceFormId: PropTypes.number.isRequired, | ||
}; | ||
|
||
export default ServiceForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
function createSchema(maxNameLen, maxDescLen) { | ||
return { | ||
fields: [{ | ||
component: 'text-field', | ||
name: 'name', | ||
maxLength: maxNameLen, | ||
label: __('Name'), | ||
validateOnMount: true, | ||
autoFocus: true, | ||
validate: [{ | ||
type: 'required-validator', | ||
}], | ||
}, { | ||
component: 'text-field', | ||
name: 'description', | ||
maxLength: maxDescLen, | ||
label: __('Description'), | ||
validateOnMount: true, | ||
autoFocus: true, | ||
validate: [{ | ||
type: 'required-validator', | ||
}], | ||
}], | ||
}; | ||
} | ||
|
||
export default createSchema; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -10,5 +10,4 @@ const MiqFormRenderer = props => ( | |
{...props} | ||
/> | ||
); | ||
|
||
export default MiqFormRenderer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
import React from 'react'; | ||
import { mount } from 'enzyme'; | ||
import fetchMock from 'fetch-mock'; | ||
import FormRender from '@data-driven-forms/react-form-renderer'; | ||
import ServiceForm from '../../components/service-form'; | ||
|
||
describe('Cloud tenant form component', () => { | ||
let initialProps; | ||
let submitSpy; | ||
let flashSpy; | ||
|
||
beforeEach(() => { | ||
initialProps = { | ||
maxNameLen: 1, | ||
maxDescLen: 2, | ||
serviceFormId: 3, | ||
}; | ||
submitSpy = jest.spyOn(window, 'miqAjaxButton'); | ||
flashSpy = jest.spyOn(window, 'add_flash'); | ||
}); | ||
|
||
afterEach(() => { | ||
fetchMock.reset(); | ||
fetchMock.restore(); | ||
submitSpy.mockRestore(); | ||
}); | ||
|
||
it('should request data after mount and set to state', (done) => { | ||
fetchMock | ||
.getOnce('/service/service_form_fields/3', { | ||
foo: 'bar', | ||
}); | ||
const wrapper = mount(<ServiceForm {...initialProps} />); | ||
expect(fetchMock.lastUrl()).toEqual('/service/service_form_fields/3'); | ||
setImmediate(() => { | ||
wrapper.update(); | ||
expect(wrapper.state().initialValues).toEqual({ foo: 'bar' }); | ||
done(); | ||
}); | ||
}); | ||
|
||
it('should call cancel action', (done) => { | ||
fetchMock | ||
.getOnce('/service/service_form_fields/3', { | ||
name: 'foo', | ||
description: 'bar', | ||
}); | ||
const wrapper = mount(<ServiceForm {...initialProps} />); | ||
|
||
setImmediate(() => { | ||
wrapper.find('button').last().simulate('click'); | ||
expect(submitSpy).toHaveBeenCalledWith('/service/service_edit/3?button=cancel'); | ||
done(); | ||
}); | ||
}); | ||
|
||
it('should enable reset button and call reset callback', (done) => { | ||
fetchMock | ||
.getOnce('/service/service_form_fields/3', {}); | ||
const wrapper = mount(<ServiceForm {...initialProps} />); | ||
|
||
setImmediate(() => { | ||
// reset should be disabled | ||
wrapper.find('button').at(1).simulate('click'); | ||
expect(flashSpy).not.toHaveBeenCalled(); | ||
// change value of some input to enable reset button | ||
wrapper.find('input').first().simulate('change', { | ||
target: { | ||
value: 'foo', | ||
}, | ||
}); | ||
wrapper.find('button').at(1).simulate('click'); | ||
expect(flashSpy).toHaveBeenCalledWith(expect.any(String), 'warn'); | ||
done(); | ||
}); | ||
}); | ||
|
||
it('should enable submit button and call submit callback', (done) => { | ||
fetchMock | ||
.getOnce('/service/service_form_fields/3', {}); | ||
const wrapper = mount(<ServiceForm {...initialProps} />); | ||
|
||
setImmediate(() => { | ||
// reset should be disabled | ||
wrapper.find('button').at(0).simulate('click'); | ||
// change form state to enable reset button | ||
wrapper.find(FormRender).childAt(0).instance().form.change('name', 'foo'); | ||
wrapper.find(FormRender).childAt(0).instance().form.change('description', 'bar'); | ||
wrapper.find('button').at(0).simulate('click'); | ||
expect(submitSpy).toHaveBeenCalledWith('/service/service_edit/3?button=save', { name: 'foo', description: 'bar' }); | ||
done(); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,43 +1,2 @@ | ||
- @angular_form = true | ||
|
||
%form.form-horizontal#form_div{"name" => "angularForm", | ||
"ng-controller" => "serviceFormController as vm", | ||
"ng-show" => "vm.afterGet", | ||
"model" => "vm.serviceModel", | ||
"model-copy" => "vm.modelCopy", | ||
"miq-form" => true, | ||
"form-changed" => true} | ||
= render :partial => "layouts/flash_msg" | ||
%div | ||
%div | ||
.form-group{"ng-class" => "{'has-error': angularForm.name.$invalid}"} | ||
%div | ||
%div | ||
.form-group{"ng-class" => "{'has-error': angularForm.name.$invalid}"} | ||
%label.col-md-2.control-label{"for" => "name"} | ||
= _("Name") | ||
.col-md-8 | ||
%input.form-control{"type" => "text", | ||
"id" => "name", | ||
"name" => "name", | ||
"ng-model" => "vm.serviceModel.name", | ||
"maxlength" => "#{ViewHelper::MAX_NAME_LEN}", | ||
"required" => true, | ||
"auto-focus" => ""} | ||
%span.help-block{"ng-show" => "angularForm.name.$error.miqrequired"} | ||
= _("Required") | ||
.form-group{"ng-class" => "{'has-error': angularForm.description.$invalid}"} | ||
%label.col-md-2.control-label{"for" => "description"} | ||
= _("Description") | ||
.col-md-8 | ||
%input.form-control{"type" => "text", | ||
"id" => "description", | ||
"name" => "description", | ||
"ng-model" => "vm.serviceModel.description", | ||
"maxlength" => "#{ViewHelper::MAX_DESC_LEN}", | ||
"required" => true} | ||
= render :partial => "layouts/angular/generic_form_buttons" | ||
|
||
:javascript | ||
ManageIQ.angular.app.value('serviceFormId', '#{@service.id}'); | ||
miq_bootstrap('#form_div'); | ||
= render :partial => "layouts/flash_msg" | ||
= react('ServiceForm', { :maxNameLen => ViewHelper::MAX_NAME_LEN, :maxDescLen => ViewHelper::MAX_DESC_LEN, :serviceFormId => @service.id}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.