feat(#BRU-26): json filter button with expandable input bar (#1699)

* feat(#BRU-26): JSON filter UI
* feat(#BRU-22): prettify graphql toast

packages/bruno-app/src/components/RequestPane/QueryEditor/index.js

@@ -190,6 +190,7 @@ export default class QueryEditor extends React.Component {
       });
 
       this.editor.setValue(prettyQuery);
+      toast.success('Query prettified');
     } catch (e) {
       toast.error('Error occurred while prettifying GraphQL query');
     }

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultFilter/index.js

@@ -1,8 +1,24 @@
-import { IconFilter } from '@tabler/icons';
+import { IconFilter, IconX } from '@tabler/icons';
 import React, { useMemo } from 'react';
+import { useRef } from 'react';
+import { useState } from 'react';
 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(() => {
     if (mode.includes('json')) {
       return 'Filter with JSONPath';
@@ -28,16 +44,14 @@ const QueryResultFilter = ({ onChange, mode }) => {
   }, [mode]);
 
   return (
-    <div className={'response-filter relative'}>
-      <div className="absolute inset-y-0 left-0 pl-4 flex items-center">
-        <div className="text-gray-500 sm:text-sm" id="request-filter-icon">
-          <IconFilter size={16} strokeWidth={1.5} />
-        </div>
-      </div>
-
-      {tooltipText && <ReactTooltip anchorId={'request-filter-icon'} html={tooltipText} />}
-
+    <div
+      className={
+        'response-filter absolute bottom-2 w-full justify-end right-0 flex flex-row items-center gap-2 py-4 px-2'
+      }
+    >
+      {tooltipText && !isExpanded && <ReactTooltip anchorId={'request-filter-icon'} html={tooltipText} />}
       <input
+        ref={inputRef}
         type="text"
         name="response-filter"
         id="response-filter"
@@ -46,9 +60,14 @@ const QueryResultFilter = ({ onChange, mode }) => {
         autoCorrect="off"
         autoCapitalize="off"
         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}
       />
+      <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>
   );
 };

packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 const StyledWrapper = styled.div`
   display: grid;
   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 */
   > div {

packages/bruno-app/src/components/ResponsePane/QueryResult/index.js

@@ -134,7 +134,9 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
             disableRunEventListener={disableRunEventListener}
             displayedTheme={displayedTheme}
           />
-          {queryFilterEnabled && <QueryResultFilter onChange={debouncedResultFilterOnChange} mode={mode} />}
+          {queryFilterEnabled && (
+            <QueryResultFilter filter={filter} onChange={debouncedResultFilterOnChange} mode={mode} />
+          )}
         </>
       )}
     </StyledWrapper>