Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Enhance Omnibar #16273

Merged
merged 18 commits into from
Aug 24, 2021
Merged

chore: Enhance Omnibar #16273

merged 18 commits into from
Aug 24, 2021

Conversation

geido
Copy link
Member

@geido geido commented Aug 16, 2021

SUMMARY

This PR:

  • Makes the Omnibar appear on the Dashboards' list with cmd + k or ctrl + k
  • Clears up the search when the Omnibar is closed
  • Disables autocomplete
  • Closes the Omnibar when clicking outside
Video.Game.Sales.mp4

TESTING INSTRUCTIONS

  1. Open the dashboards' list
  2. Press cmd + k or ctrl + k on your keyboard
  3. Search for dashboards and move with the arrows through the results
  4. Close the Omnibar by pressing ESC
  5. Reopen the modal and observe that the latest search input and options are gone

ADDITIONAL INFORMATION

  • Has associated issue: [dashboard]Omnibar issues and enhancements #16198
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

@codecov
Copy link

codecov bot commented Aug 16, 2021

Codecov Report

Merging #16273 (b572957) into master (ee9a384) will decrease coverage by 0.00%.
The diff coverage is 77.27%.

❗ Current head b572957 differs from pull request most recent head acbe60f. Consider uploading reports for the commit acbe60f to get more accurate results
Impacted file tree graph

@@            Coverage Diff             @@
##           master   #16273      +/-   ##
==========================================
- Coverage   76.47%   76.47%   -0.01%     
==========================================
  Files         997      997              
  Lines       53247    53260      +13     
  Branches     6777     6778       +1     
==========================================
+ Hits        40722    40730       +8     
- Misses      12295    12300       +5     
  Partials      230      230              
Flag Coverage Δ
javascript 70.93% <77.27%> (-0.01%) ⬇️

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

Impacted Files Coverage Δ
superset-frontend/src/components/Modal/Modal.tsx 100.00% <ø> (ø)
...-frontend/src/components/OmniContainer/Omnibar.tsx 100.00% <ø> (ø)
...et-frontend/src/dashboard/components/Dashboard.jsx 78.84% <ø> (ø)
...et-frontend/src/components/OmniContainer/index.tsx 86.95% <76.19%> (-10.11%) ⬇️
...rontend/src/views/CRUD/dashboard/DashboardList.tsx 71.83% <100.00%> (+0.19%) ⬆️

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 ee9a384...acbe60f. Read the comment docs.

@geido
Copy link
Member Author

geido commented Aug 16, 2021

/testenv up FEATURE_OMNIBAR=true

@github-actions
Copy link
Contributor

@geido Ephemeral environment spinning up at http://54.201.229.97:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

@michael-s-molina
Copy link
Member

The arrow navigation is conflicting with the mouse hover. In this example, I hovered an element with the mouse (dark gray) and then navigate to another option using the arrow keys (light gray). When I pressed Enter the mouse hovered option was selected.

Screen.Recording.2021-08-16.at.3.56.09.PM.mov

@geido
Copy link
Member Author

geido commented Aug 16, 2021

@michael-s-molina to be honest that looks like an edge case. I will check whether there is even a solution for that. However, this problem not related to my changes so I would get these changes merged in first if there isn't any problem related to the PR itself.

@michael-s-molina
Copy link
Member

However, this problem not related to my changes so I would get these changes merged in first if there isn't any problem related to the PR itself.

@geido I think we can improve the criteria to split the PRs. I completely understand that sometimes we have reviews that suggest new features or completely different matters to the PR's intentions. On the other hand, we want to avoid a bureaucratic process where all that matters is the changed lines and the context is irrelevant. In my comment above, if you have caught that problem during your tests you probably would have added the fix in this PR, so to me, it belongs to the same context. We can do it in a separate PR but the fragmentation of the context is also something we need to consider when deciding if we should split the PRs. Getting the changes merged should be balanced with the overhead of filling new issues, collecting screenshots, and reloading the context in a follow-up review.

@geido
Copy link
Member Author

geido commented Aug 17, 2021

@michael-s-molina I totally agree with your point. We shouldn't be bureaucratic and lose the context. I didn't want to convey that with my response. For this issue specifically, I was considering what you have reported as an edge case and I didn't it think would be a problem tackling it separately.

I had a look anyway and found out that the Omnibar plugin that we are using comes with several limitations. I couldn't find a working solution so far, other than rendering the dropdown as a custom component.

I have suggested before to go for a full refactor of this component and just build our own Omnibar. This would be much faster than tackling each case individually and would give us much more freedom.

I advocate that we take that direction and I'll be happy to take that work on myself.

@michael-s-molina
Copy link
Member

I have suggested before to go for a full refactor of this component and just build our own Omnibar. This would be much faster than tackling each case individually and would give us much more freedom.

I advocate that we take that direction and I'll be happy to take that work on myself.

@geido Agreed. Thanks for the explanation!

Copy link
Member

@pkdotson pkdotson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! I agree with you guys about the refactor of this component somewhere down the road. But I think this solution works for now.

@geido geido merged commit c14364c into apache:master Aug 24, 2021
@github-actions
Copy link
Contributor

Ephemeral environment shutdown and build artifacts deleted.

@junlincc junlincc moved this from In Review to Done in Community Usability Bash! 🐛🐞🕷 Aug 31, 2021
opus-42 pushed a commit to opus-42/incubator-superset that referenced this pull request Nov 14, 2021
* Fix style and implement ESC

* Include ESC test case

* Move pagination outside of table

* Update superset-frontend/src/components/OmniContainer/OmniContainer.test.tsx

Co-authored-by: Evan Rusackas <evan@preset.io>

* Enhance

* Handle close

* Localize placeholder

* Fix tests

* Clear input on close

* Destroy modal on close

* Clean up

* Fix tests

Co-authored-by: Evan Rusackas <evan@preset.io>
QAlexBall pushed a commit to QAlexBall/superset that referenced this pull request Dec 28, 2021
* Fix style and implement ESC

* Include ESC test case

* Move pagination outside of table

* Update superset-frontend/src/components/OmniContainer/OmniContainer.test.tsx

Co-authored-by: Evan Rusackas <evan@preset.io>

* Enhance

* Handle close

* Localize placeholder

* Fix tests

* Clear input on close

* Destroy modal on close

* Clean up

* Fix tests

Co-authored-by: Evan Rusackas <evan@preset.io>
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 1.4.0 labels Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels size/M 🚢 1.4.0
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

None yet

4 participants