Delete option for complex renderers

[mohitk05]

Is your feature request related to a problem? Please describe.
Currently it is not possible to delete a property represented by a complex renderer, i.e. one cannot delete a complete object/array from the JSON data. This is a useful feature in forms.

Describe the solution you'd like
A simple solution for this would be to include a Delete component inside every complex renderer that would set the property value to undefined.

const deleteProperty = () => {
    props.handleChange(props.path, undefined);
}
.
.
.
return (
    <Delete onDelete={deleteProperty} />
    // Renderer JSX code
)

Describe alternatives you've considered
The first approach seems straightforward, haven't thought of any alternatives yet.

Describe for which setup you like to have the improvement
Framework: React
RendererSet: Material, Vanilla

Additional context
I have successfully implemented this by writing a custom renderer, and hence this can be integrated into the default ones too. Let me know if the suggested implementation looks right, I'll create a PR for this then.

[sdirix]

Hi @mohitk05 thank you very much for this suggestion. This is certainly useful for some applications. How did you solve it visually in your renderers?

[mohitk05]

@sdirix For now a bin icon appears above the complex renderer.

The exact code looks like this:

return <Hidden xsUp={!visible}>
		<div className={styles.removeContainer}>
			<IconButton onClick={openModal} aria-label="delete" title="Delete">
				<DeleteIcon />
			</IconButton>
		</div>
		<Modal
			open={modalOpen}
			onClose={closeModal}
		>
			<div className={styles.modalContainer}>
				<h2>Confirm</h2>
				<p>This will delete the {} property from data.</p>
				<div className={styles.modalButtons}>
					<Button onClick={closeModal} color="secondary">Cancel</Button>
					<Button onClick={deleteProperty} color="primary">Remove</Button>
				</div>
			</div>
		</Modal>
		<JsonFormsDispatch
			visible={visible}
			enabled={enabled}
			schema={schema}
			uischema={detailUiSchema}
			path={path}
			renderers={renderers}
			cells={cells}
		/>
	</Hidden>

The modal can be replaced by the already existing DeleteDialog.

[mohitk05]

@sdirix You may see the implementation here: mohitk05@edd84d9
Once the required renderers are covered I'll open a PR to the main repo. Here's how the array renderer looks:

The Delete icon to the right of add (+) deletes the whole array.

[sdirix]

I meet with the team and we came to the following conclusion: We very much like the idea of being able to "undefine" objects and arrays. For a proper support we would like to see the following requirements fulfilled:

• The "undefine" icon should be placed in a sensible way. For example next to the + in the array renderer makes sense, for an object renderer it should probably be placed next to the title (instead of above)
• The icon should be consistent: Within fields we are currently using the X icon for undefining values. We should test whether that also makes sense for the complex renderers or if that introduces confusion.
• The UI also needs to offer to create the value again. This is natural for arrays, however for objects we need to add the + icon.
• The UI needs to clearly indicate whether a value is empty (e.g. empty array, empty object) versus undefined. For example with a message "Value is unset. Click here to add an item / instantiate the value".

[sdirix]

@mohitk05 We would be happy about a contribution covering these requirements for one or more of the complex renderers if you'd still like to do one 😄

[mohitk05]

@sdirix Sure, as I posted in my previous comment, I have implemented the required UI for the array renderer. I can make necessary changes in the object one too. Would be happy to contribute.

Regarding the 3rd point you've mentioned, right now for a value that does not exist in the data but is present in the schema, a blank field is shown in the form. And when someone types into it, the value is set to that path. What would be the significance of showing a + sign when the fields are already visible? Or do you want to change this default behaviour where blank fields are shown, and instead show a prompt to add the field?

[sdirix]

@sdirix Sure, as I posted in my previous comment, I have implemented the required UI for the array renderer. I can make necessary changes in the object one too. Would be happy to contribute.

That's great! Once you want us to take a look at the code just open a PR ;)

Regarding the 3rd point you've mentioned, right now for a value that does not exist in the data but is present in the schema, a blank field is shown in the form. And when someone types into it, the value is set to that path. What would be the significance of showing a + sign when the fields are already visible? Or do you want to change this default behaviour where blank fields are shown, and instead show a prompt to add the field?

Our idea was to not show any fields but for example just the message "Value is unset, click here to instantiate the value". Once the user then clicks on + the message will be cleared and the fields are shown.

However we're definitely open for other suggestions. The suggested flow might be clear but also annoying. It probably depends on the use case. For example when in your data you don't care about empty vs undefined this will be more cumbersome than before.

Maybe a message on top / next to the fields would be enough and then implicitly create the object like you suggested.