refactor(devtools): add types to Explorer #2949

Liam-Tait · 2021-11-15T12:31:45Z

Add types to Explorer component with as minimal functional changes as
possible while still getting type safety

vercel · 2021-11-15T12:31:51Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tanstack/react-query/ET9df1xXf2KzYDgncuotnrWa3P7q
✅ Preview: https://react-query-git-fork-liam-tait-addexplorertypes-tanstack.vercel.app

Add types to Explorer component with as minimal functional changes as possible while still getting type safety 2742

codesandbox-ci · 2021-11-15T12:34:47Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e39f971:

Sandbox	Source
tannerlinsley/react-query: basic	Configuration
tannerlinsley/react-query: basic-typescript	Configuration

codecov · 2021-11-15T14:09:36Z

Codecov Report

Merging #2949 (e39f971) into master (c1ae82b) will decrease coverage by 0.00%.
The diff coverage is 87.09%.

@@            Coverage Diff             @@
##           master    #2949      +/-   ##
==========================================
- Coverage   96.40%   96.40%   -0.01%     
==========================================
  Files          45       45              
  Lines        2227     2278      +51     
  Branches      637      641       +4     
==========================================
+ Hits         2147     2196      +49     
- Misses         77       79       +2     
  Partials        3        3

Impacted Files	Coverage Δ
src/devtools/Explorer.tsx	`76.92% <87.09%> (-0.55%)`	⬇️
src/core/query.ts	`100.00% <0.00%> (ø)`
src/core/retryer.ts	`100.00% <0.00%> (ø)`
src/core/mutation.ts	`100.00% <0.00%> (ø)`
src/core/queryClient.ts	`100.00% <0.00%> (ø)`
src/react/useQueries.ts	`100.00% <0.00%> (ø)`
src/core/focusManager.ts	`100.00% <0.00%> (ø)`
src/react/useMutation.ts	`100.00% <0.00%> (ø)`
src/core/mutationCache.ts	`100.00% <0.00%> (ø)`
... and 7 more

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 c1ae82b...e39f971. Read the comment docs.

TkDodo · 2021-11-17T15:58:03Z

can you try adding some more tests please

Liam-Tait · 2021-11-17T21:40:09Z

can you try adding some more tests please

Can do

Liam-Tait · 2021-11-19T06:40:02Z

@TkDodo are you be happy for me to do some additional clean up in this file too?

TkDodo · 2021-11-19T06:43:55Z

@TkDodo are you be happy for me to do some additional clean up in this file too?

sure :)

TkDodo · 2022-02-06T14:17:24Z

@Liam-Tait this looks like a nice addition, but the PR is still in draft state. Is ready for review? Thank you

Liam-Tait · 2022-02-07T21:37:50Z

@TkDodo I think this still needed some more tests. I haven't added enough to maintain or increase coverage, however most of these changes are adding types to existing code.

TkDodo

I'm fine with the test coverage. You've added types AND added a test. not sure how the coverage can go down but that doesn't matter :)

src/devtools/Explorer.tsx

Liam-Tait · 2022-03-04T05:55:02Z

@TkDodo Addressed issues, ready for a re-review

TkDodo · 2022-03-04T15:22:52Z

seems like there are some type errors now:

Error: src/devtools/tests/Explorer.test.tsx(39,11): error TS2322: Type '{ label: string; toggleExpanded: Mock<any, any>; pageSize: number; handleEntry: () => Element; expanded: false; subEntryPages: { label: string; }[][]; }' is not assignable to type 'IntrinsicAttributes & RendererProps'.
``

Liam-Tait · 2022-03-15T00:14:48Z

@TkDodo Fixed

* refactor(devtools): add types to Explorer Add types to Explorer component with as minimal functional changes as possible while still getting type safety 2742 * remove unused set param from explorer toggle * Wrap Explorer toggle with useCallback * Rename Explorer toggle to toggleExpanded * Remove unused path * Move subEntryPages definition next to usage * Set type to be a string instead of string union * Remove unused depth prop * Move chunkArrays to own tested function * set handleEntry as required * Add LabelButton for accesibility * fix test * Remove shadowing * Set subEntries as empty array by default * Add type for property * Convert handleEntry function to react component with entry props * Use unknown for value * Set RenderProps to required where possible * Add required attributes to Explorer tests

tannerlinsley · 2022-03-24T19:37:36Z

🎉 This PR is included in version 3.34.17 🎉

The release is available on:

Your semantic-release bot 📦🚀

tannerlinsley · 2022-03-24T19:53:40Z

🎉 This PR is included in version 4.0.0-alpha.22 🎉

The release is available on:

Your semantic-release bot 📦🚀

TkDodo · 2022-03-25T08:24:33Z

@Liam-Tait I'm now seeing some react key related warnings when running the react-query devtools tests:

console.error
    Warning: Each child in a list should have a unique "key" prop.
    
    Check the render method of `Explorer`. See https://reactjs.org/link/warning-keys for more information.
        at HandleEntry (react-query/src/devtools/Explorer.tsx:242:21)
        at Explorer (react-query/src/devtools/Explorer.tsx:185:3)

can you maybe have a look at those please?

TkDodo · 2022-04-06T19:28:43Z

@Liam-Tait we sadly have 2 more (minor) issues reported that are likely introduced with this PR:

Data Explorer now shows white background for expandable fields:

3.4.16:

3.4.17:

was this an intended change?

expanded entries in the explorer now collapse if there is a background refetch that didn't actually change anything.

For example, take a look at this sandbox

click on the query in the devtools, and expand the owner field
then, re-focus the window

--> the owner collapses.

If you take the sandbox back to 3.4.16, owner stay expanded.

Could you take a look at these two things please? Should we open separate issues? Thank you!

TkDodo · 2022-04-06T19:51:22Z

ah, issue 1 is caused by wrapping the clickable element in a button, but it's unstyled.

https://github.com/tannerlinsley/react-query/pull/2949/files#diff-a29eb5ef62b495218e2308396eb9064e59c6630c92421a6ceef78a0836d07fe3R17

Liam-Tait · 2022-04-07T12:24:13Z

@TkDodo I'll have a look at these this weekend

vercel bot deployed to Preview November 15, 2021 12:31 View deployment

refactor(devtools): add types to Explorer

7f092e4

Add types to Explorer component with as minimal functional changes as possible while still getting type safety 2742

vercel bot deployed to Preview November 15, 2021 12:36 View deployment

Liam-Tait marked this pull request as ready for review November 16, 2021 10:11

Liam-Tait marked this pull request as draft November 17, 2021 21:40

Liam-Tait added 2 commits November 19, 2021 19:31

remove unused set param from explorer toggle

719c5d1

Wrap Explorer toggle with useCallback

bc9e61f

Rename Explorer toggle to toggleExpanded

36cac2e

Liam-Tait added 7 commits November 19, 2021 20:10

Remove unused path

f296533

Move subEntryPages definition next to usage

d266a2d

Set type to be a string instead of string union

00c564d

Remove unused depth prop

866f8d6

Move chunkArrays to own tested function

aab375c

set handleEntry as required

0d7761a

Add LabelButton for accesibility

ce94d1a

vercel bot deployed to Preview November 24, 2021 11:27 View deployment

fix test

325be97

vercel bot deployed to Preview November 24, 2021 11:55 View deployment

Liam-Tait added 4 commits November 27, 2021 16:20

Remove shadowing

b714fdf

Set subEntries as empty array by default

ab14b94

Add type for property

a7f6077

Convert handleEntry function to react component with entry props

5de07c6

vercel bot deployed to Preview November 27, 2021 04:22 View deployment

TkDodo marked this pull request as ready for review February 8, 2022 20:28

TkDodo reviewed Feb 8, 2022

View reviewed changes

src/devtools/Explorer.tsx Outdated Show resolved Hide resolved

src/devtools/Explorer.tsx Outdated Show resolved Hide resolved

Use unknown for value

5bc51d8

vercel bot deployed to Preview March 4, 2022 05:51 View deployment

Set RenderProps to required where possible

3b4aeef

vercel bot deployed to Preview March 4, 2022 05:53 View deployment

TkDodo approved these changes Mar 4, 2022

View reviewed changes

Add required attributes to Explorer tests

e39f971

vercel bot deployed to Preview March 5, 2022 07:57 View deployment

TkDodo merged commit c6594df into TanStack:master Mar 15, 2022

tannerlinsley added the released label Mar 24, 2022

tannerlinsley added the released on @alpha label Mar 24, 2022

Liam-Tait mentioned this pull request Mar 27, 2022

fix(devtools): add keys to mapped entries for Explorer #3446

Merged

TkDodo mentioned this pull request Apr 20, 2022

[Devtools]Missing button styles for buttons under Data Explorer and Query Explorer #3538

Closed

TkDodo mentioned this pull request Jun 7, 2022

Data tree won't stay expanded in Data Explorer in devtools #3681

Closed

markmurphydev mentioned this pull request Jun 9, 2022

fix(devtools): stop devtools explorer from un-expanding when data is fetched #3687

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(devtools): add types to Explorer #2949

refactor(devtools): add types to Explorer #2949

Liam-Tait commented Nov 15, 2021

vercel bot commented Nov 15, 2021 •

edited

Loading

codesandbox-ci bot commented Nov 15, 2021 •

edited

Loading

codecov bot commented Nov 15, 2021 •

edited

Loading

TkDodo commented Nov 17, 2021

Liam-Tait commented Nov 17, 2021

Liam-Tait commented Nov 19, 2021

TkDodo commented Nov 19, 2021

TkDodo commented Feb 6, 2022

Liam-Tait commented Feb 7, 2022

TkDodo left a comment

Liam-Tait commented Mar 4, 2022

TkDodo commented Mar 4, 2022

Liam-Tait commented Mar 15, 2022

tannerlinsley commented Mar 24, 2022

tannerlinsley commented Mar 24, 2022

TkDodo commented Mar 25, 2022 •

edited

Loading

TkDodo commented Apr 6, 2022

TkDodo commented Apr 6, 2022

Liam-Tait commented Apr 7, 2022

refactor(devtools): add types to Explorer #2949

refactor(devtools): add types to Explorer #2949

Conversation

Liam-Tait commented Nov 15, 2021

vercel bot commented Nov 15, 2021 • edited Loading

codesandbox-ci bot commented Nov 15, 2021 • edited Loading

codecov bot commented Nov 15, 2021 • edited Loading

Codecov Report

TkDodo commented Nov 17, 2021

Liam-Tait commented Nov 17, 2021

Liam-Tait commented Nov 19, 2021

TkDodo commented Nov 19, 2021

TkDodo commented Feb 6, 2022

Liam-Tait commented Feb 7, 2022

TkDodo left a comment

Choose a reason for hiding this comment

Liam-Tait commented Mar 4, 2022

TkDodo commented Mar 4, 2022

Liam-Tait commented Mar 15, 2022

tannerlinsley commented Mar 24, 2022

tannerlinsley commented Mar 24, 2022

TkDodo commented Mar 25, 2022 • edited Loading

TkDodo commented Apr 6, 2022

TkDodo commented Apr 6, 2022

Liam-Tait commented Apr 7, 2022

vercel bot commented Nov 15, 2021 •

edited

Loading

codesandbox-ci bot commented Nov 15, 2021 •

edited

Loading

codecov bot commented Nov 15, 2021 •

edited

Loading

TkDodo commented Mar 25, 2022 •

edited

Loading