Improve UX when adding new records to a table with a NOT NULL column

[seancolsen]

Reproduce

1. Set up a table with a NOT NULL column that doesn't have a default value.
2. Click "New Record".
3. Observe new row with yellow background, spinner that spins several seconds, finally a "Couldn't save changes" error.

I'm not sure what the expected behavior would be here. I think we need some more clarity around that from a UX perspective. @ghislaineguerin @pavish would you like to weight in?

[pavish]

@mathemancer I believe Sean's talking about adding a new record to a table that already has a column with a not null constraint.

@seancolsen Filling in the column with the not null constraint will save the record. From the db standpoint, We cannot create/update a record when it doesn't satisfy all the constraints associated with it.

As for the UX, we initially decided to show a red background with a message only on the particular cell, but considering that the whole record isn't saved, we found it better to show it on the whole record. However, we need to show a message on the cell using a popover, saying that it is mandatory, similar to how we do it for form validations.

Reference: Figma prototype for row warnings.

The prototype does not exactly cover cell level warnings. We can move ahead and improvise it during development

In cases where we improvise designs, we attach a video to the PR explaining the flow. @ghislaineguerin would review it and raise any red flags with regards to the UX. If it looks okay, we would merge it and then come back to it in the UI/UX sync.

[seancolsen]

@pavish said:

Filling in the column with the not null constraint will save the record

I see. I'm confirming that now. I can add the new record, thankfully. But the current behavior does not make it clear to the user how to add the new record. I've updated the ticket title to reflect that this is a UX issue only.

[pavish]

@seancolsen As mentioned in the previous comment, we can improvise this during the development of the allow empty PR. My suggestion would be to show a small warning icon inside the cell and a validation popover when the user hovers it (This is similar to how it is on the figma prototype, except we show the warning only on the cell and not on the row).

[seancolsen]

I'm marking this as blocked by #859 because we'll need more granular error info from the API before we're able to display a warning inside the cell

[seancolsen]

This should be ready to implement now that #859 is closed

[seancolsen]

This is now blocked by #1051

[kgodey]

@seancolsen Is this unblocked since we decided on client side validation (#1057)?

[seancolsen]

@kgodey Indeed! Thanks for the follow-up. I've marked this ticket as unblocked now. Although I'll also mention that before resuming work on this ticket, I'd like to complete our (hopefully quick) planned synchronous discussion on "UX for failure to save a cell" at this Wednesday's meeting.