Thanks to visit codestin.com
Credit goes to github.com

Skip to content

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

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 4 commits into from
Mar 17, 2022
Merged

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

merged 4 commits into from
Mar 17, 2022

Conversation

bryphe-coder
Copy link
Contributor

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 />.

@bryphe-coder bryphe-coder requested a review from a team as a code owner March 16, 2022 21:48
@bryphe-coder bryphe-coder self-assigned this Mar 16, 2022
presleyp
presleyp reviewed Mar 16, 2022
View reviewed changes
site/jest.setup.ts
@@ -0,0 +1,22 @@
// Helper utility to fail jest tests if a console.error is logged
// Pulled from this blog post:
// https://www.benmvp.com/blog/catch-warnings-jest-tests/
Copy link
Contributor

Choose a reason for hiding this comment

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

Cool, thanks!

presleyp
presleyp approved these changes Mar 16, 2022
View reviewed changes
Copy link
Contributor

@presleyp presleyp left a comment

Choose a reason for hiding this comment

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

Nice!

greyscaled
greyscaled approved these changes Mar 16, 2022
View reviewed changes
Copy link
Contributor

@greyscaled greyscaled left a comment

Choose a reason for hiding this comment

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

Nice one!

@codecov
Copy link

codecov bot commented Mar 16, 2022 •
edited
Loading

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.

@bryphe-coder bryphe-coder merged commit edd8345 into main Mar 17, 2022
@bryphe-coder bryphe-coder deleted the bryphe/fix/452/empty-state-error branch March 17, 2022 03:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@presleyp presleyp presleyp approved these changes

@greyscaled greyscaled greyscaled approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Change EmptyState to take render message in a div
3 participants
@bryphe-coder @presleyp @greyscaled