Record selector bug fixes and UX improvements #1856

seancolsen · 2022-10-20T21:00:50Z

This PR

Should hopefully make the Record Selector ready for live demo and release
Fixes Fix small bugs in Record Selector #1552
Fixes Improve Record Selector UX #1553
Fixes Creating a new record from the Record Selector does not select the record #1639
Fixes Bug with primary keys in Record Selector #1683

Demo of some notable design changes

2022-11-03.13-56-26.mp4

Remaining issues to handle later

01. Live Demo
- InvalidDatetimeFormat error when attempting to filter on a partially-entered date (back-end bug affecting Record Selector and table filtering)
03. Post-Release Improvements
- Keep records in store while fetching (We need this so that the Record Selector table doesn't change widths while the search is loading)
- Allow keyboard navigation for complex inputs elements within the Record Selector
- Re-focus table cell after opening record selector on that cell
- "Today" in date picker is confusing in the context of the Record Selector
2023 or later

What's next

After merging this PR, I'd like to invite the whole team to hammer at the Record Selector a bit to see if we can uncover any remaining bugs or UX issues. As such, I don't want to hold up this PR due to small things we can fix in that next phase of polish.

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
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 · 2022-11-03T18:20:15Z

@kgodey and @ghislaineguerin You can look at the demo video here for a tour of the UX design changes to the Record Selector.

kgodey · 2022-11-04T13:11:36Z

@seancolsen I don't think I'll be able to watch the video in full in the next couple of days (I don't yet have the necessary focus), but I skimmed through it and from what I see, the changes look great. I'm looking forward to playing around with it once it gets merged.

pavish · 2022-11-10T18:07:06Z

mathesar_ui/src/components/cell-fabric/data-types/boolean.ts

+    options: [null, true, false],
+    getLabel: (value?: boolean | null) => {
      if (isDefinedNonNullable(value)) {
        return value ? labels[0] : labels[1];
      }


Do we need to allow null here? If we do, we should represent Null using the NULL component instead of empty string.

While we can allow null, there's no way for any other components (checkbox, text boxes, textarea etc.,) to ever set null as a value, so this would be a special option allowed only by the Select menu within a cell.

Do we need to allow null here?

The reason for this change is to improve the behavior of the input for boolean columns within the record selector. Before this change, the input only had options for "true" and "false". The records selector needs to open with blank values for all inputs, and the user needs to be able to set a value and then set it back to some sort of blank value after setting it. If you can think of a better way to accomplish what I'm after, then I'm open to changing the approach here.

we should represent Null using the NULL component instead of empty string.

I'm not sure about this. I think that would look pretty weird.

I think that would look pretty weird.

I agree this would probably look weird in the context of record selector search. But we use the same component for the Cells in the table, and we represent nulls using the Null component in the Cell. The empty value looks odd in that context.

Either way, this is not a priority at the moment, and we can figure this out later.

I just tested a boolean column. The dropdown shows an empty option. When you select the empty option the cell value changes to NULL and displays stylized. I think that should suffice. It would be nice to hide the empty option of the column doesn't allow NULL, but I don't imagine that's a priority.

Though it's worth noting that I did uncover #1919 while checking this out, and I predict that's a regression from this PR too. But I think it's worth merging this in and fixing that subsequently.

pavish

@seancolsen Looks good! Nice work!

I'll leave reviewing of the UX to @kgodey and @ghislaineguerin, which can probably be done post merge.

I noticed a couple bugs while doing a quick local test:

Regression: Array type column styling is broken. Open Data Explorer and summarize any column so that it results in an Array type column. Notice that the css modifications result in this column being messed up. I'd like this to be fixed before merging the PR in.
Selection is not reset after opening & closing record selector. Click on a column that opens Record selector, and use the keyboard to pick a row. Notice that the record selector is closed. Move the mouse around without clicking and notice that the cells are being selected when the mouse is moved, which is not desired. Feel free to create an issue for this and handle it later if you do not wish to address it in this PR.

Screen.Recording.2022-11-11.at.12.02.10.AM.mov

pavish · 2022-11-10T18:15:16Z

...r_ui/src/components/cell-fabric/data-types/components/linked-record/LinkedRecordInput.svelte

+  function setRecordSelectorToAccompanyDropdown() {
+    const modal = document.querySelector<HTMLElement>('.modal-record-selector');
+    if (dropdownAccompanyingElements && modal) {
+      dropdownAccompanyingElements.add(modal);
+    }


The modal element that's added here is never removed. While the modal itself is removed from the DOM, it's reference will be held here until the parent AttachableDropdown is removed.

While this should cause no major problems, I'm certain we'd have to do similar operations in other places and it would be better if we ensure that we always remove stale references.

Not a priority. We can keep track of this to handle later.

it would be better if we ensure that we always remove stale references.

Fair enough. I added 4f01720 to address this.

pavish · 2022-11-10T18:46:52Z

@seancolsen I noticed another bug:

Screen.Recording.2022-11-11.at.12.12.14.AM.mov

Open the Record selector
Use keyboard to navigate to a column which inturn opens up another record selector modal
Pick a value by using the arrow keys and enter key, notice that it gets selected as expected, and the second modal closes
Notice that the first modal now has filtered values based on the selection
Use the arrow keys to highlight the row you'd like to pick and use enter key to select it
Expect the row to get selected and the modal to close, instead observe that the second modal opens up again

I'll leave it upto you to decide if you'd like to fix this in this PR, or separately (in which case, please create an issue), or maybe later during the post-release improvements.

seancolsen · 2022-11-10T19:55:33Z

@pavish this is ready for re-review.

1. Array type column styling - This should be fixed in e4a159d.
2. Selection is not reset - I opened Cell selection is stuck in drag mode after closing the record selector #1917 for this.
Bug with Enter key - I opened Be smarter about how to handle Enter key within the Record Selector #1918 for this.

seancolsen added 30 commits October 20, 2022 12:16

Improve naming of property

8165a56

Improve record selector window title

ae252b9

Use a button instead of the ghost row

db687f9

Improve grammar in record selector window title

72251f9

Switch some code between RS table and results

850d2e4

Show parent results while nested selector is open

4b45c56

Don't allow focusing UI inside LinkedRecordInput

fa31706

Clean up code in RecordSelectorInput

a891bd3

Improve component name

9cf509b

Combine Record Selector table and results

8553595

Fix handleKeydown when nested selector is open

e6bebd2

Move some code from table to content component

182d2cf

Clean up some type code

13c4156

Remove unused CSS class

834b3e6

Begin converting record selector markup to table

552326c

Improve vertical scroll behavior of table

b5c8f31

Improve horizontal scrolling in table

c330b36

Rename component

451eeb1

Style submit button and row selection

63337c5

Merge branch 'master' into record_selector_ux

2adcfd1

Fix duplication initialization loading spinner

bd75484

Add padding to column header cells

30724e4

Remove dropdown arrow in disabled LinkedRecordCell

20f9b1e

Don't render special PK cells in record selector

3ea5639

Improve input row aesthetics

384c91d

Sort imports

4633ac0

Show focus indicator on input cell

d316d4a

Improve shadows

4c4328e

Make minor adjustments to nested selector style

8ad64d7

Don't cut off horizontal edges of focus indicator

6aab805

Prevent focusing a data row hyperlink

4ece0dc

seancolsen changed the title ~~Record selector UX improvements~~ Record selector bug fixes and UX improvements Nov 3, 2022

seancolsen marked this pull request as ready for review November 3, 2022 18:17

seancolsen requested a review from pavish November 3, 2022 18:18

seancolsen assigned pavish Nov 3, 2022

seancolsen added the pr-status: review A PR awaiting review label Nov 3, 2022

Merge branch 'master' into record_selector_ux

39fa5a0

pavish reviewed Nov 10, 2022

View reviewed changes

pavish requested changes Nov 10, 2022

View reviewed changes

pavish assigned seancolsen and unassigned pavish Nov 10, 2022

pavish added pr-status: revision A PR awaiting follow-up work from its author after review and removed pr-status: review A PR awaiting review labels Nov 10, 2022

Fix chips in array cell consuming full cell width

e4a159d

This was referenced Nov 10, 2022

Cell selection is stuck in drag mode after closing the record selector #1917

Closed

Be smarter about how to handle Enter key within the Record Selector #1918

Open

seancolsen added pr-status: review A PR awaiting review and removed pr-status: revision A PR awaiting follow-up work from its author after review labels Nov 10, 2022

seancolsen assigned pavish and unassigned seancolsen Nov 10, 2022

seancolsen and others added 2 commits November 10, 2022 15:30

Clean up accompanying dropdown element

4f01720

Merge branch 'master' into record_selector_ux

562caa4

pavish approved these changes Nov 11, 2022

View reviewed changes

pavish enabled auto-merge November 11, 2022 07:05

pavish merged commit 32b5f7b into master Nov 11, 2022

pavish deleted the record_selector_ux branch November 11, 2022 07:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Record selector bug fixes and UX improvements #1856

Record selector bug fixes and UX improvements #1856

seancolsen commented Oct 20, 2022 •

edited

Loading

seancolsen commented Nov 3, 2022

kgodey commented Nov 4, 2022

pavish Nov 10, 2022

seancolsen Nov 10, 2022 •

edited

Loading

pavish Nov 10, 2022

seancolsen Nov 10, 2022

pavish left a comment

pavish Nov 10, 2022 •

edited

Loading

seancolsen Nov 10, 2022

pavish commented Nov 10, 2022 •

edited

Loading

seancolsen commented Nov 10, 2022

Record selector bug fixes and UX improvements #1856

Record selector bug fixes and UX improvements #1856

Conversation

seancolsen commented Oct 20, 2022 • edited Loading

This PR

Demo of some notable design changes

Remaining issues to handle later

What's next

Checklist

Developer Certificate of Origin

seancolsen commented Nov 3, 2022

kgodey commented Nov 4, 2022

pavish Nov 10, 2022

Choose a reason for hiding this comment

seancolsen Nov 10, 2022 • edited Loading

Choose a reason for hiding this comment

pavish Nov 10, 2022

Choose a reason for hiding this comment

seancolsen Nov 10, 2022

Choose a reason for hiding this comment

pavish left a comment

Choose a reason for hiding this comment

pavish Nov 10, 2022 • edited Loading

Choose a reason for hiding this comment

seancolsen Nov 10, 2022

Choose a reason for hiding this comment

pavish commented Nov 10, 2022 • edited Loading

seancolsen commented Nov 10, 2022

seancolsen commented Oct 20, 2022 •

edited

Loading

seancolsen Nov 10, 2022 •

edited

Loading

pavish Nov 10, 2022 •

edited

Loading

pavish commented Nov 10, 2022 •

edited

Loading