mirror of
https://github.com/usebruno/bruno.git
synced 2025-06-21 20:41:41 +02:00
feat(#BRU-26): json filter button with expandable input bar (#1699)
* feat(#BRU-26): JSON filter UI * feat(#BRU-22): prettify graphql toast
This commit is contained in:
parent
6a05321109
commit
95b59b06e8
@ -190,6 +190,7 @@ export default class QueryEditor extends React.Component {
|
|||||||
});
|
});
|
||||||
|
|
||||||
this.editor.setValue(prettyQuery);
|
this.editor.setValue(prettyQuery);
|
||||||
|
toast.success('Query prettified');
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast.error('Error occurred while prettifying GraphQL query');
|
toast.error('Error occurred while prettifying GraphQL query');
|
||||||
}
|
}
|
||||||
|
@ -1,8 +1,24 @@
|
|||||||
import { IconFilter } from '@tabler/icons';
|
import { IconFilter, IconX } from '@tabler/icons';
|
||||||
import React, { useMemo } from 'react';
|
import React, { useMemo } from 'react';
|
||||||
|
import { useRef } from 'react';
|
||||||
|
import { useState } from 'react';
|
||||||
import { Tooltip as ReactTooltip } from 'react-tooltip';
|
import { Tooltip as ReactTooltip } from 'react-tooltip';
|
||||||
|
|
||||||
const QueryResultFilter = ({ onChange, mode }) => {
|
const QueryResultFilter = ({ filter, onChange, mode }) => {
|
||||||
|
const inputRef = useRef(null);
|
||||||
|
const [isExpanded, toggleExpand] = useState(false);
|
||||||
|
|
||||||
|
const handleFilterClick = () => {
|
||||||
|
// Toggle filter search bar
|
||||||
|
toggleExpand(!isExpanded);
|
||||||
|
// Reset filter search input
|
||||||
|
onChange({ target: { value: '' } });
|
||||||
|
// Reset input value
|
||||||
|
if (inputRef?.current) {
|
||||||
|
inputRef.current.value = '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const tooltipText = useMemo(() => {
|
const tooltipText = useMemo(() => {
|
||||||
if (mode.includes('json')) {
|
if (mode.includes('json')) {
|
||||||
return 'Filter with JSONPath';
|
return 'Filter with JSONPath';
|
||||||
@ -28,16 +44,14 @@ const QueryResultFilter = ({ onChange, mode }) => {
|
|||||||
}, [mode]);
|
}, [mode]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={'response-filter relative'}>
|
<div
|
||||||
<div className="absolute inset-y-0 left-0 pl-4 flex items-center">
|
className={
|
||||||
<div className="text-gray-500 sm:text-sm" id="request-filter-icon">
|
'response-filter absolute bottom-2 w-full justify-end right-0 flex flex-row items-center gap-2 py-4 px-2'
|
||||||
<IconFilter size={16} strokeWidth={1.5} />
|
}
|
||||||
</div>
|
>
|
||||||
</div>
|
{tooltipText && !isExpanded && <ReactTooltip anchorId={'request-filter-icon'} html={tooltipText} />}
|
||||||
|
|
||||||
{tooltipText && <ReactTooltip anchorId={'request-filter-icon'} html={tooltipText} />}
|
|
||||||
|
|
||||||
<input
|
<input
|
||||||
|
ref={inputRef}
|
||||||
type="text"
|
type="text"
|
||||||
name="response-filter"
|
name="response-filter"
|
||||||
id="response-filter"
|
id="response-filter"
|
||||||
@ -46,9 +60,14 @@ const QueryResultFilter = ({ onChange, mode }) => {
|
|||||||
autoCorrect="off"
|
autoCorrect="off"
|
||||||
autoCapitalize="off"
|
autoCapitalize="off"
|
||||||
spellCheck="false"
|
spellCheck="false"
|
||||||
className="block w-full pl-10 py-1 sm:text-sm"
|
className={`block ml-14 p-2 py-1 sm:text-sm transition-all duration-200 ease-in-out border border-gray-300 rounded-md ${
|
||||||
|
isExpanded ? 'w-full opacity-100' : 'w-[0] opacity-0'
|
||||||
|
}`}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
/>
|
/>
|
||||||
|
<div className="text-gray-500 sm:text-sm cursor-pointer" id="request-filter-icon" onClick={handleFilterClick}>
|
||||||
|
{isExpanded ? <IconX size={20} strokeWidth={1.5} /> : <IconFilter size={20} strokeWidth={1.5} />}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -3,7 +3,7 @@ import styled from 'styled-components';
|
|||||||
const StyledWrapper = styled.div`
|
const StyledWrapper = styled.div`
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 100%;
|
grid-template-columns: 100%;
|
||||||
grid-template-rows: ${(props) => (props.queryFilterEnabled ? '1.25rem 1fr 2.25rem' : '1.25rem 1fr')};
|
grid-template-rows: 1.25rem 1fr;
|
||||||
|
|
||||||
/* This is a hack to force Codemirror to use all available space */
|
/* This is a hack to force Codemirror to use all available space */
|
||||||
> div {
|
> div {
|
||||||
|
@ -134,7 +134,9 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
|
|||||||
disableRunEventListener={disableRunEventListener}
|
disableRunEventListener={disableRunEventListener}
|
||||||
displayedTheme={displayedTheme}
|
displayedTheme={displayedTheme}
|
||||||
/>
|
/>
|
||||||
{queryFilterEnabled && <QueryResultFilter onChange={debouncedResultFilterOnChange} mode={mode} />}
|
{queryFilterEnabled && (
|
||||||
|
<QueryResultFilter filter={filter} onChange={debouncedResultFilterOnChange} mode={mode} />
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</StyledWrapper>
|
</StyledWrapper>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user