"Create Product" page

[josemigallas]

What this PR does / why we need it:

Adds a page component for Products > New.

Which issue(s) this PR fixes
THREESCALE-5636: Component for "Create product" page

Verification steps

Go to /products/new

1. Check validation works as expected (onblur effects, etc)
2. Submit wrong data and check errors are shown (no product is created)
3. Submit correct data and check product is created in porta (also it should navigate to products/:id)

[didierofrivia]

So validationErrors are not provided in the data object, but within error and not always. We might want to leverage this inside the http module. Then, would be easy to check that if erroris true, data will be validationErrors. Since the parsing of this can't be done without modifying useAsync

[josemigallas]

No, error can be anything, including a validation error we're gonna need to check for it either way. Consider as if Object.prototype.hasOwnProperty.call(error, 'validationErrors') were typeof error === 'ValidationException'...
There's no way to work around this. It's either check the error for validationErrors or the data, but I think it belongs to error.

[didierofrivia]

maybe we can simplify the API with something like:

Suggested change

	validation: 'default' | 'success' | 'error',
	validation?: boolean,

thus, if undefined means is not yet validated, and the boolean will define if it was success or error.

[josemigallas]

It's given by PF I'm afraid https://www.patternfly.org/v4/documentation/react/components/textinput#props
(minus warning because apparently we don't want to use it)

[didierofrivia]

I like it more than the switch case version, good!

I was thinking that maybe we can pass the Validator factory a validation rules object like:

Suggested change

	const validator = Validator()
	.for('name', () => (name.length > 0 ? 'success' : 'error'))
	// eslint-disable-next-line no-nested-ternary
	.for('system_name', () => (!systemName ? 'default' : (systemName.length > 0 ? 'success' : 'error')))
	.for('description', () => (description.length > 0 ? 'success' : 'default'))
	const validator = Validator({
	name: () => (name.length > 0 ? 'success' : 'error'),
	'system_name': () => (!systemName ? 'default' : (systemName.length > 0 ? 'success' : 'error')),
	description: () => (description.length > 0 ? 'success' : 'default'))
	})

then in the implementation you could assert the case with Object.prototype.hasOwnProperty and execute the fn

[josemigallas]

But isn't that how it works already? Only with a sugar coating on top of it https://github.com/3scale/porta/pull/2037/files#diff-9d8e17e1d9797344cd149b6d58dc6377