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:
lohit 2024-03-11 02:06:27 +05:30 committed by GitHub
parent 6a05321109
commit 95b59b06e8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 36 additions and 14 deletions

View File

@ -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');
} }

View File

@ -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>
); );
}; };

View File

@ -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 {

View File

@ -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>