feat(dashboard): Implement empty states for empty tabs

[kgabryje]

SUMMARY

Add empty state to dashboard tabs (top level and normal ones) if they contain no components

1. Top level tabs - if user has dashboard edit permissions, they see an additional description and a button that triggers edit mode. In edit mode, text changes and button redirects to "add chart" page
2. Regular tabs - if user has dashboard edit permissions, they see an additional description. The description contains a link button that triggers edit mode. In edit mode, text changes and the link button redirects to "add chart" page.

Moreover, I added "Edit dashboard" button to 1 of old empty states (whole dashboard is empty) for consistency.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2022-03-29.at.14.34.12.mov

TESTING INSTRUCTIONS

1. Create a dashboard
2. Add top level tabs
3. Verify that empty state appears and button redirects to add chart
4. Save dashboard and verify that text changed and the button redirects to edit mode
5. Add normal tabs
6. Verify that "top level" empty state disappears, instead there's an empty state in newly added tabs. A link button in description should redirect to add chart page.
7. Save chart, verify that text changed and link button redirects to edit mode.
8. Change user to a one withtout dashboard edit permissions, verify that descriptions/buttons don't appear

ADDITIONAL INFORMATION

• Has associated issue:
• 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

CC @kasiazjc

[codecov]

Codecov Report

Merging #19408 (8357c95) into master (6b136c2) will increase coverage by 0.00%.
The diff coverage is 63.63%.

@@           Coverage Diff           @@
##           master   #19408   +/-   ##
=======================================
  Coverage   66.57%   66.58%           
=======================================
  Files        1675     1675           
  Lines       64092    64112   +20     
  Branches     6519     6531   +12     
=======================================
+ Hits        42672    42688   +16     
- Misses      19729    19733    +4     
  Partials     1691     1691           

Flag	Coverage Δ
javascript	51.27% <63.63%> (+0.01%)	⬆️

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

Impacted Files	Coverage Δ
...erset-frontend/src/components/EmptyState/index.tsx	74.35% <ø> (+5.12%)	⬆️
...d/components/DashboardBuilder/DashboardBuilder.tsx	70.88% <0.00%> (-1.85%)	⬇️
...rontend/src/dashboard/containers/DashboardGrid.jsx	100.00% <ø> (ø)
...rontend/src/dashboard/components/DashboardGrid.jsx	62.50% <50.00%> (-0.55%)	⬇️
...nd/src/dashboard/components/gridComponents/Tab.jsx	83.67% <100.00%> (+3.18%)	⬆️

---

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 6b136c2...8357c95. Read the comment docs.

[villebro]

LGTM!

[villebro]

😆