fix: UX - Error logs in development from Empty state component

[bryphe-coder]

Fixes #452

When the empty state is rendered with a non-textual element (which it turns out all our current empty states are, because they have a <button /> component as a call to action), this noisy error log was showing up in the console:

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
    at div
    at div
    at p
    at Typography (webpack-internal:///./node_modules/@material-ui/core/esm/Typography/Typography.js:166:28)
    at WithStyles (webpack-internal:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js:64:31)
    at div
    at StyledComponent (webpack-internal:///./node_modules/@material-ui/styles/esm/styled/styled.js:95:28)
    at EmptyState (webpack-internal:///./src/components/EmptyState/index.tsx:47:25)
...
    at ProjectsPage (webpack-internal:///./src/pages/projects/index.tsx:37:18)
    at Routes (webpack-internal:///./node_modules/react-router/index.js:275:5)
    at ThemeProvider (webpack-internal:///./node_modules/@material-ui/styles/esm/ThemeProvider/ThemeProvider.js:44:24)
    at UserProvider (webpack-internal:///./src/contexts/UserContext.tsx:100:55)
    at SWRConfig$1 (webpack-internal:///./node_modules/swr/dist/index.esm.js:501:23)
    at Router (webpack-internal:///./node_modules/react-router/index.js:209:15)
    at BrowserRouter (webpack-internal:///./node_modules/react-router-dom/index.js:118:5)
    at App

The issue was that the description prop could either be a string or an actual React component, but was always rendered as a child of a <Typography /> component. The <Typography> component internally renders as a <p>, which is not valid to nest <div>s inside.

The fix is to not nest inside a <Typography /> block, but an actual <div />.

[presleyp]

Cool, thanks!

[presleyp]

Nice!

[greyscaled]

Nice one!

[codecov]

Codecov Report

Merging #466 (b23e7b3) into main (8b12e47) will decrease coverage by 0.03%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main     #466      +/-   ##
==========================================
- Coverage   68.20%   68.17%   -0.04%     
==========================================
  Files         160      160              
  Lines        9260     9259       -1     
  Branches       79       79              
==========================================
- Hits         6316     6312       -4     
- Misses       2326     2329       +3     
  Partials      618      618              

Flag	Coverage Δ
unittest-go-macos-latest	62.72% <ø> (-0.03%)	⬇️
unittest-go-ubuntu-latest	67.52% <ø> (-0.05%)	⬇️
unittest-go-windows-2022	62.34% <ø> (+0.03%)	⬆️
unittest-js	63.72% <100.00%> (+0.07%)	⬆️

Impacted Files	Coverage Δ
site/src/components/EmptyState/index.tsx	85.71% <100.00%> (+5.71%)	⬆️
peerbroker/dial.go	75.43% <0.00%> (-7.02%)	⬇️
peerbroker/listen.go	81.35% <0.00%> (-2.55%)	⬇️
provisioner/echo/serve.go	57.50% <0.00%> (-2.50%)	⬇️
database/pubsub.go	75.00% <0.00%> (-2.09%)	⬇️
coderd/provisionerdaemons.go	57.60% <0.00%> (ø)
provisionerd/provisionerd.go	79.22% <0.00%> (+0.73%)	⬆️
peer/conn.go	81.07% <0.00%> (+1.02%)	⬆️

---

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 8b12e47...b23e7b3. Read the comment docs.