feat: Add 'Code Snippets' to the Playground's Query bar (4007) - #57
feat: Add 'Code Snippets' to the Playground's Query bar (4007)#57adwait-bruno wants to merge 2 commits into
Conversation
79eb05a to
ef0edde
Compare
vasharma05-bruno
left a comment
vasharma05-bruno
left a comment
There was a problem hiding this comment.
Small changes, otherwise looks good to me. Please work on the changes suggested.
| setPlaygroundResponse, | ||
| selectPlaygroundResponse, | ||
| applyScriptVariableChanges | ||
| } from '@/store/slices/playground'; |
There was a problem hiding this comment.
| } from '@/store/slices/playground'; | |
| } from '@slices/playground'; |
Refer:
There was a problem hiding this comment.
Had to revert this as lint was failing under the rule:
'no-restricted-imports': ['error', {
patterns: [{
group: ['**/store/slices/', '!@/store/slices/', '@slices/'],
message: 'Import slices through the @/store/slices/ alias.'
}]
}],
There was a problem hiding this comment.
We should remove the @slices/ from tsconfig and vite configs @arpit-bruno.
| const effectiveAuth = useMemo<Auth | undefined>(() => { | ||
| const ownAuth = getRequestAuth(editableItem) as Auth | undefined; | ||
| return ownAuth === 'inherit' ? resolveInheritedAuth(collection, ancestry, editableItem).auth : ownAuth; | ||
| }, [collection, ancestry, editableItem]); | ||
|
|
||
| // Applies same rules as runner so that the code snippet shows the same effective headers as the runner. | ||
| const effectiveHeaders = useMemo<HttpRequestHeader[]>(() => { | ||
| const auth = effectiveAuth && effectiveAuth !== 'inherit' ? effectiveAuth : undefined; | ||
| const authWritesAuthorization = Boolean( | ||
| (auth?.type === 'bearer' && auth.token) || (auth?.type === 'basic' && auth.username && auth.password) | ||
| ); | ||
| const keep = (header: { name?: string }) => | ||
| !authWritesAuthorization || (header.name || '').toLowerCase() !== 'authorization'; | ||
| const ownRows = getRequestHeaders(editableItem).filter(keep); | ||
| const inheritedRows = getInheritedHeaders(collection, ancestry, editableItem) | ||
| .filter(keep) | ||
| .map((header) => ({ name: header.name, value: header.value ?? '', disabled: header.disabled })); | ||
| return [...ownRows, ...inheritedRows]; | ||
| }, [collection, ancestry, editableItem, effectiveAuth]); | ||
|
|
There was a problem hiding this comment.
@sundram-bruno, I see this block been written multiple times in the whole application. Since you have worked on Auth, can we have a new reusable hook which does this, and update the implementation at other places accordingly.
Thanks!
There was a problem hiding this comment.
Mainly it's in GrpcRequest, and now in the PlaygroundView. We have the useRequestPageData hook, but that's more than what is needed for this implementation.
Maybe, we can use the said hook inside the useRequestPageData,
There was a problem hiding this comment.
@vasharma05-bruno , ok will look into it and see what can be done.
There was a problem hiding this comment.
Should we let this change go ahead in this PR, or make the change in this PR itself?
There was a problem hiding this comment.
let this change go. Currently I dont have the bandwidth to do the change and no need to hold this pr for something where we can change it across the whole repo. I feel we can let it be a separate task for it.
| it('labels the icon trigger for screen readers and marks it as opening a dialog', () => { | ||
| const root = useRenderToDom(<SnippetTabs snippets={snippets} variant="icon" testId="query-bar-code-snippet" />); | ||
|
|
||
| const trigger = getByTestId(root, 'query-bar-code-snippet-trigger'); | ||
| expect(trigger.attributes['aria-label']).toBe('Generate Code'); | ||
| expect(trigger.attributes['aria-haspopup']).toBe('dialog'); | ||
| }); |
There was a problem hiding this comment.
Can we also add a test for clicking on the trigger button, and then check the modal renders with content inside it.
There was a problem hiding this comment.
Have covered this in the e2e(query-bar-code-snippet.spec.ts) ,clicking cannot be simulated in rendertoStaticMarkup.
There was a problem hiding this comment.
| ) : ( | |
| <button | |
| ref={triggerRef} | |
| type="button" | |
| className={variant == icon ? "snippet-icon-trigger" : "snippet-trigger"} | |
| aria-haspopup="dialog" | |
| aria-label="Generate Code" | |
| data-testid={`${testId}-trigger`} | |
| onClick={openModal} | |
| > | |
| <IconCode size={16} stroke={1.5} /> | |
| {variant === 'inline' && "Code Snippet"} | |
| </button> | |
| ) |
|
Please update the PR title: |
adwait-bruno
changed the title
83f6c9e to
be6916d
Compare
3 participants
REF:BRU-4007
Adds a Generate Code button to the playground's URL bar, so you can grab a cURL / JavaScript / Python snippet for the request you're working on without leaving the playground. This matches Bruno desktop, where the same control sits
next to the URL.