chore: Enhance Omnibar

[geido]

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]

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

@@            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]

/testenv up FEATURE_OMNIBAR=true

[github-actions]

@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]

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]

@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]

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]

@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]

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!

[pkdotson]

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

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.