Skip to content
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

feat(devtools): add 'copy' button in devtools #4468

Merged
merged 17 commits into from Nov 13, 2022
Merged

feat(devtools): add 'copy' button in devtools #4468

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
060ae2d
feat(devtools): add copy object data explorer
StefanDjokovic Nov 6, 2022
1088b3f
fix: address code comments
StefanDjokovic Nov 6, 2022
062d5c6
fix: add logs to investigate iframe copy issue
StefanDjokovic Nov 6, 2022
ef04edd
feat: add checkmark on copy
StefanDjokovic Nov 6, 2022
3101359
add: error state
StefanDjokovic Nov 7, 2022
5922f18
add: test
StefanDjokovic Nov 7, 2022
8532dcb
fix: test import
StefanDjokovic Nov 7, 2022
8345cc7
fix: layouts and use superjson
StefanDjokovic Nov 9, 2022
67a9a44
fix: test comment
StefanDjokovic Nov 9, 2022
c076cef
fix: typing and onclick only on nocopy
StefanDjokovic Nov 12, 2022
b33cb55
prettier
StefanDjokovic Nov 12, 2022
3d197e8
fix: test error react17
StefanDjokovic Nov 12, 2022
4227be5
Merge branch 'main' into feature/add-copy-data
TkDodo Nov 12, 2022
16c90f5
fix: format test
StefanDjokovic Nov 12, 2022
e2b1c39
merge master locally
StefanDjokovic Nov 12, 2022
71f3950
fix: test copy and add await
StefanDjokovic Nov 12, 2022
54cc881
Merge branch 'main' into feature/add-copy-data
TkDodo Nov 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
38 changes: 38 additions & 0 deletions packages/react-query-devtools/src/Explorer.tsx
View file
Open in desktop
Expand Up @@ -29,6 +29,16 @@ export const ExpandButton = styled('button', {
padding: 0,
})

export const CopyButton = styled('button', {
cursor: 'pointer',
color: 'inherit',
font: 'inherit',
outline: 'inherit',
background: 'transparent',
border: 'none',
padding: 0,
})

export const Value = styled('span', (_props, theme) => ({
color: theme.danger,
}))
Expand All @@ -49,6 +59,11 @@ type ExpanderProps = {
style?: React.CSSProperties
}

type CopierProps = {
onClick: () => {}
StefanDjokovic marked this conversation as resolved.
Show resolved Hide resolved
style?: React.CSSProperties
}

export const Expander = ({ expanded, style = {} }: ExpanderProps) => (
<span
style={{
Expand All @@ -62,6 +77,20 @@ export const Expander = ({ expanded, style = {} }: ExpanderProps) => (
</span>
)

export const Copier = ({ onClick, style = {} }: CopierProps) => (
<span onClick={onClick} style={{
display: 'span',
StefanDjokovic marked this conversation as resolved.
Show resolved Hide resolved
paddingLeft: '1em',
...style,
}}>
<span>
<svg aria-hidden="true" height="12" viewBox="0 0 16 16" width="12">
<path fill="currentColor" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill="currentColor" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path>
</svg>
</span>
</span>
)

type Entry = {
label: string
}
Expand All @@ -74,6 +103,7 @@ type RendererProps = {
subEntryPages: Entry[][]
type: string
expanded: boolean
copiable: boolean
StefanDjokovic marked this conversation as resolved.
Show resolved Hide resolved
toggleExpanded: () => void
pageSize: number
}
Expand Down Expand Up @@ -108,6 +138,7 @@ export const DefaultRenderer: Renderer = ({
subEntryPages = [],
type,
expanded = false,
copiable = false,
toggleExpanded,
pageSize,
}) => {
Expand All @@ -124,6 +155,9 @@ export const DefaultRenderer: Renderer = ({
{subEntries.length} {subEntries.length > 1 ? `items` : `item`}
</Info>
</ExpandButton>
{copiable ? (<CopyButton>
<Copier onClick={() => navigator.clipboard.writeText(displayValue(value))} />
Copy link
Collaborator

Choose a reason for hiding this comment

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

putting displayValue into the clipboard seems weird, because we use superjson to show non-serializable values. Why don't we just put the raw values that are really in the cache into the clipboard?

</CopyButton>) : null}
StefanDjokovic marked this conversation as resolved.
Show resolved Hide resolved
{expanded ? (
subEntryPages.length === 1 ? (
<SubEntries>{subEntries.map(handleEntry)}</SubEntries>
Expand Down Expand Up @@ -166,6 +200,7 @@ export const DefaultRenderer: Renderer = ({
type ExplorerProps = Partial<RendererProps> & {
renderer?: Renderer
defaultExpanded?: true | Record<string, boolean>
copiable?: boolean,
}

type Property = {
Expand All @@ -183,6 +218,7 @@ export default function Explorer({
defaultExpanded,
renderer = DefaultRenderer,
pageSize = 100,
copiable = false,
...rest
}: ExplorerProps) {
const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded))
Expand Down Expand Up @@ -241,6 +277,7 @@ export default function Explorer({
key={entry.label}
value={value}
renderer={renderer}
copiable={copiable}
{...rest}
{...entry}
/>
Expand All @@ -250,6 +287,7 @@ export default function Explorer({
subEntryPages,
value,
expanded,
copiable,
toggleExpanded,
pageSize,
...rest,
Expand Down
1 change: 1 addition & 0 deletions packages/react-query-devtools/src/__tests__/Explorer.test.tsx
View file
Open in desktop
Expand Up @@ -38,6 +38,7 @@ describe('Explorer', () => {
toggleExpanded={toggleExpanded}
pageSize={10}
expanded={false}
copiable={false}
subEntryPages={[[{ label: 'A lovely label' }]]}
handleEntry={() => <></>}
value={undefined}
Expand Down
1 change: 1 addition & 0 deletions packages/react-query-devtools/src/devtools.tsx
View file
Open in desktop
Expand Up @@ -966,6 +966,7 @@ const ActiveQuery = ({
label="Data"
value={activeQueryState.data}
defaultExpanded={{}}
copiable
/>
</div>
<div
Expand Down