Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(forms): switch to UIform if uischema is an array #1282

Merged
merged 17 commits into from
Apr 23, 2018

Conversation

jmfrancois
Copy link
Contributor

@jmfrancois jmfrancois commented Apr 17, 2018

What is the problem this PR is trying to solve?

  1. If I want to use directly the UIform I need to pass uiform=true props which force the moz props.
  2. With UIFrom, currently i can't used widgets
  3. the functions onChange and onSubmit have different parameters and currently we can't use the Form.container for UIForm because of that
  4. The implementations of onTrigger are Form and UIForm are different

What is the chosen solution to this problem?

  1. I would like to just use @talend/react-forms passing a UISchema v2 (which is an array) and see it as it is.
  2. Add props widget in Form.container
  3. [BREAKING CHANGE] Adapt the component Form.js to call onChange and onSubmit with the same number of parameter as UIForm component. First is the event or null (we don't have the event with RJSF).
Function Before After
onChange props.onChange(...args) props.onChange(null, ...args)
onSubmit props.onSubmit(changes) props.onSubmit(null, changes)
  1. delete the function onTrigger in Form.container and get it from props

This last change can impact projects using directly the component Form.js

To summarize : Now we can have three cases with usage of Form container

  1. with a uiSpec v0 without the props 'uiform'
  • that will use the RJSF as before
  1. with a uiSpec v0 with the props 'uiform'
  • that will use the UIForm with the merge.js function to adapt uiSpec
  1. with a uiSpec v1 (the props uiform is not needed)
  • that will use the UIForm without transformation

Please check if the PR fulfills these requirements

  • The PR commit message follows our guidelines
  • Tests for the changes have been added (for bug fixes / features) And non reg done before need review
  • Docs have been added / updated (for bug fixes / features)
  • Related design / discussions / pages (not in jira), if any, are all linked or available in the PR

[ ] This PR introduces a breaking change

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

1 similar comment
@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

@@ -44,7 +44,7 @@ export default class UIForm extends React.Component {
if (!this.props.onChange) {
return;
} else if (this.props.moz) {
this.props.onChange(payload);
this.props.onChange(null, payload);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here you have the event (which can be null), just pass it.
With that you can even remove this if/elseif/else by

if (this.props.onChange) {
    this.props.onChange(event, payload);
}

@@ -132,6 +132,9 @@ class Form extends React.Component {
}
return <UIForm {...props} />;
}
if (Array.isArray(this.props.data.uiSchema)) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a big deal, but isn't that the most determinant condition ? If so it should be the first test in the render method.

  1. if it's uiSpec v1 --> render directly the UIForm with all the props
  2. if we have the uiForm flag, it means that we have uiSpec v0 but we want to use UIForm --> widget adaptation and render UIForm
  3. else render RJSFForm

@@ -373,3 +375,17 @@ describe('<Form/>', () => {
});
});
});

describe('<UIForm/>', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need for another describe because you're still testing <Form>. Please move the test in the previous describe.

props = initProps();
});

it('should render uiform', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should render UIForm with uiSchema array format ?

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

Copy link
Contributor

@rmannibucau rmannibucau left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, works on catalog

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

@build-travis-ci
Copy link
Collaborator

:octocat: Demo is available here

const props = initProps();
// when
wrapper = shallow(<Form data={dataUIForm} {...props} />);
expect(wrapper.getElement()).toMatchSnapshot();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The shallow snapshot doesn't check that we have a UIForm.

  1. Don't forget to check the snapshot when you write/modify one
  2. Here you can check that without snapshot (which will log a lot more info than what you want to test)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My bad I will learn to read

@jsomsanith-tlnd jsomsanith-tlnd merged commit a65c995 into master Apr 23, 2018
@jsomsanith-tlnd jsomsanith-tlnd deleted the jmfrancois/fix/forms/better-switch-to-uiform branch April 23, 2018 09:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants