Enhancement: dashboard improvements, drag-n-drop reorder dashboard views

[shamoon]

Proposed change

Opening a pair of UI PRs (not dependent on each other) in honor of v2. Appreciate any feedback. This PR gives the dashboard some love. Screenshots and video below.

• Allow for more legible & useful saved view widgets
• Support drag-and-drop reorder of dashboard views
• Make things nicer (remove clutter, tighten up spacing, resize some headers)
• For mobile, reduce the noise

The biggest challenge with updating the dashboard was that I pushed the upload widget down and made it smaller, the potential problems caused by this are mitigated with:

• Enable the 'global' dropzone on the dashboard, because really this makes more sense anyway
• Make the status alerts 'float' to the bottom right, i.e. they're no longer tied to this little widget

Edit: as pointed out by stumpylog the drag-n-drop package has a bad bug, so attempted to apply georgipeltekov/ngx-file-drop#294 via https://www.npmjs.com/package/patch-package...

sortable.mov

I'll update screenshots in the docs once these PRs are done / merged.

Fixes #1818

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Other (please explain):

Checklist:

• I have read & agree with the contributing guidelines.
• If applicable, I have included testing coverage for new code in this PR, for backend and / or front-end changes.
• If applicable, I have tested my code for new features & regressions on both mobile & desktop devices, using the latest version of major browsers.
• If applicable, I have checked that all tests pass, see documentation.
• I have run all pre-commit hooks, see documentation.
• I have made corresponding changes to the documentation as needed.
• I have checked my modifications for any breaking changes.

[codecov]

Codecov Report

Merging #4252 (4ebd0c8) into dev (9617658) will increase coverage by 0.13%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##              dev    #4252      +/-   ##
==========================================
+ Coverage   95.65%   95.78%   +0.13%     
==========================================
  Files         356      358       +2     
  Lines       13588    13682      +94     
  Branches     1081     1094      +13     
==========================================
+ Hits        12997    13105     +108     
+ Misses        586      573      -13     
+ Partials        5        4       -1     

Flag	Coverage Δ
backend	94.48% <100.00%> (+<0.01%)	⬆️
frontend	97.31% <100.00%> (+0.26%)	⬆️

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

Files	Coverage Δ
src-ui/src/app/app.component.html	100.00% <ø> (ø)
src-ui/src/app/app.component.ts	100.00% <ø> (+2.19%)	⬆️
src-ui/src/app/app.module.ts	100.00% <100.00%> (ø)
.../app/components/app-frame/app-frame.component.html	100.00% <100.00%> (ø)
...ents/common/page-header/page-header.component.html	100.00% <100.00%> (ø)
.../app/components/dashboard/dashboard.component.html	100.00% <ø> (ø)
...rc/app/components/dashboard/dashboard.component.ts	100.00% <100.00%> (ø)
...saved-view-widget/saved-view-widget.component.html	100.00% <100.00%> (ø)
...s/saved-view-widget/saved-view-widget.component.ts	100.00% <100.00%> (ø)
...statistics-widget/statistics-widget.component.html	100.00% <ø> (ø)
... and 13 more

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[stumpylog]

I like the visual changes with this and re-ordering is something I know often asked for. That looks to work great.

One thing I'm seeing is the "global" drag and drop seems inconsistent. I can't tell it's a particular location not working or just doing it too frequently? No network activity when the drag and drop is released in these cases. This was in the console:

I also managed to get the dashboard to freeze with the upload green box/text showing:

[shamoon]

Ah great, fail on the first try 😑

Hmm, I think there may have been an issue where the drag-and-drops were interacting in a weird way (I remembered to turn off global file drop if moving the widgets but forgot the other way around).

I still couldn't exactly reproduce the same error as above though, but let me know if youre still seeing it (and if so maybe a video or if there's a more specific set of steps?).

[LucaNerlich]

you are doing some nice stuff! Thanks for the work (loving the consumption template pr :) )

[stumpylog]

Seems pretty solid now. Reordering works and d&d is solid on Windows especially.

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion or issue for related concerns.