Display null while editing a null cell

[gagan2005]

Fixes #939

The cells which have null values will now show null when we edit the value in the cell.Previously the cell will show up as empty when we start editing it

Technical details
I added a flag to check whether NULL needs to be displayed or not. When we need to display null , we shift the Input behind the null element. If user enters any input the flag is set to false and the input element shifts back to in front of null element

Screenshots

Checklist

• My pull request has a descriptive title (not a vague title like Update index.md).
• My pull request targets the master branch of the repository
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no
  visible errors.

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[seancolsen]

Thanks for this PR, @gagan2005. I'll review it sometime within the next few days.

[seancolsen]

@kgodey can you help troubleshoot the failing test in this PR?

[kgodey]

@seancolsen It looks like the automatic add-to-project failed because this is based on a fork. I updated the GitHub action event to compensate in master e90460b and merged it in.

[seancolsen]

@gagan2005 Thanks for this PR!

Using the placeholder attribute is a clever quick-fix, but this approach has some shortcomings particular to our needs here.

• In step 6 of the desired behavior in Display NULL while editing a NULL cell #939, we need to show an empty cell instead of the placeholder. Your changes effectively satisfy that goal, but only as a consequence of Wait until user is done editing a cell before saving #928 still being unresolved. You can simulate the behavior we're aiming for with that fix by commenting out the contents of debounceAndSet within RowCell.svelte. When the cell doesn't auto-save itself, then the placeholder continues to display after typing text into a NULL cell and then subsequently deleting that text.
• On a slightly lower-priority stylistic note, I'd like to style the NULL value the same during edit mode as it is styled during select mode. Apologies that I did not include a note about that in the original ticket. I've edited it now to mention this additional goal, and I've linked to a What's the best terminology to use in our UI for the concept of NULL? #778 where we discussed some of the reasons to display NULL as stylized wherever possible.

With the above two considerations in-mind. I'd recommend that instead of using the placeholder attribute, we conditionally render a Null component (already exists) and absolutely position it within the cell. Would you be up for taking another stab at this issue using that approach?

[gagan2005]

ok , I will make changes and Update this PR

[seancolsen]

@gagan2005 How's it going on this? Are you still planning to work on it? Can I help with anything?

[gagan2005]

Sorry, could not work on it as I have been busy last few days. I will resume the work today and inform you if I need any help

[gagan2005]

@seancolsen Earlier everything was fine but Now I can't get docker-compose up to work. It says arrow module not found. I checked the dockerfile, it is using requirements.txt and the file has arrow module listed. I am unable to figure out what might be causing the issue

[seancolsen]

@gagan2005 You might need to run docker-compose up --build

Sometimes (though rarely) you'll need to re-build the container if after pulling in other changes.

If you're still having trouble, post a message in the "Code - General" Matrix channel with the specific error message you're seeing.

[gagan2005]

@seancolsen Please take a look and inform me if any other changes are required.

[codecov-commenter]

Codecov Report

Merging #961 (332043e) into master (3b7c26b) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #961   +/-   ##
=======================================
  Coverage   92.46%   92.46%           
=======================================
  Files          89       89           
  Lines        3200     3200           
=======================================
  Hits         2959     2959           
  Misses        241      241           

Flag	Coverage Δ
pytest-backend	92.46% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3b7c26b...332043e. Read the comment docs.

[seancolsen]

@gagan2005 Thanks for continuing to work on this.

I like that I can see NULL stylized now during edit mode. However, we still need to address a few more things before merging this.

Even though we're not using the placeholder functionality (like you originally did), we're essentially trying to mimic it with a stylized placeholder that permanently disappears once the user has modified the value of the input. In other respects though, we are aiming for a UX that mirrors the placeholder behavior because users are familiar with it. As such, we need to make the following changes to this PR:

• Keep the NULL placeholder when the user presses a key that does not modify the value of the input.

  For example, if the user presses a key like Up, Home, PgDown, Delete, Shift when the placeholder is shown, the placeholder will disappear. There are a lot of keys like that, and we don't want to have to list them all. Instead of the keydown event, we should probably be listening to the input event to determine the appropriate point at which we can remove the placeholder.

• Display the user's cursor before the placeholder, not after.

  Instead of shifting the input with left: 54px;, I'd recommend that we keep its current position and conditionally render an additional <Null /> component absolutely positioned on top of the input.

[seancolsen]

Thanks @gagan2005

This is working well now.

I added 0a60b17 to simplify the hideNullElement function for better readability, and I've set this PR to merge when all the tests pass.