Merge branch 'usebruno:main' into main

package.json

@@ -20,6 +20,7 @@
     "@jest/globals": "^29.2.0",
     "@playwright/test": "^1.27.1",
     "@types/jest": "^29.5.11",
+    "concurrently": "^8.2.2",
     "fs-extra": "^11.1.1",
     "husky": "^8.0.3",
     "jest": "^29.2.0",
@@ -29,6 +30,7 @@
     "ts-jest": "^29.0.5"
   },
   "scripts": {
+    "dev": "concurrently --kill-others \"npm run dev:web\" \"npm run dev:electron\"",
     "dev:web": "npm run dev --workspace=packages/bruno-app",
     "build:web": "npm run build --workspace=packages/bruno-app",
     "prettier:web": "npm run prettier --workspace=packages/bruno-app",

packages/bruno-app/package.json

@@ -12,6 +12,7 @@
     "prettier": "prettier --write \"./src/**/*.{js,jsx,json,ts,tsx}\""
   },
   "dependencies": {
+    "@fontsource/inter": "^5.0.15",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.16",
@@ -42,11 +43,12 @@
     "jshint": "^2.13.6",
     "json5": "^2.2.3",
     "jsonc-parser": "^3.2.1",
-    "jsonlint": "^1.6.3",
     "jsonpath-plus": "^7.2.0",
+    "jsonlint": "^1.6.3",
     "know-your-http-well": "^0.5.0",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.2",
+    "markdown-it-replace-link": "^1.2.0",
     "mousetrap": "^1.6.5",
     "nanoid": "3.3.4",
     "next": "12.3.3",

packages/bruno-app/src/components/CodeEditor/StyledWrapper.js

@@ -14,6 +14,24 @@ const StyledWrapper = styled.div`
     background: #d2d7db;
   }
 
+  .CodeMirror-dialog {
+    overflow: visible;
+  }
+
+  #search-results-count {
+    display: inline-block;
+    position: absolute;
+    top: calc(100% + 1px);
+    right: 0;
+    border-width: 0 0 1px 1px;
+    border-style: solid;
+    border-color: ${(props) => props.theme.codemirror.border};
+    padding: 0.1em 0.8em;
+    background-color: ${(props) => props.theme.codemirror.bg};
+    color: rgb(102, 102, 102);
+    white-space: nowrap;
+  }
+
   textarea.cm-editor {
     position: relative;
   }

packages/bruno-app/src/components/CodeEditor/index.js

@@ -111,6 +111,7 @@ export default class CodeEditor extends React.Component {
     // unnecessary updates during the update lifecycle.
     this.cachedValue = props.value || '';
     this.variables = {};
+    this.searchResultsCountElementId = 'search-results-count';
 
     this.lintOptions = {
       esversion: 11,
@@ -157,8 +158,16 @@ export default class CodeEditor extends React.Component {
             this.props.onSave();
           }
         },
-        'Cmd-F': 'findPersistent',
-        'Ctrl-F': 'findPersistent',
+        'Cmd-F': (cm) => {
+          cm.execCommand('findPersistent');
+          this._bindSearchHandler();
+          this._appendSearchResultsCount();
+        },
+        'Ctrl-F': (cm) => {
+          cm.execCommand('findPersistent');
+          this._bindSearchHandler();
+          this._appendSearchResultsCount();
+        },
         'Cmd-H': 'replace',
         'Ctrl-H': 'replace',
         Tab: function (cm) {
@@ -310,6 +319,8 @@ export default class CodeEditor extends React.Component {
       this.editor.off('change', this._onEdit);
       this.editor = null;
     }
+
+    this._unbindSearchHandler();
   }
 
   render() {
@@ -346,4 +357,62 @@ export default class CodeEditor extends React.Component {
       }
     }
   };
+
+  /**
+   * Bind handler to search input to count number of search results
+   */
+  _bindSearchHandler = () => {
+    const searchInput = document.querySelector('.CodeMirror-search-field');
+
+    if (searchInput) {
+      searchInput.addEventListener('input', this._countSearchResults);
+    }
+  };
+
+  /**
+   * Unbind handler to search input to count number of search results
+   */
+  _unbindSearchHandler = () => {
+    const searchInput = document.querySelector('.CodeMirror-search-field');
+
+    if (searchInput) {
+      searchInput.removeEventListener('input', this._countSearchResults);
+    }
+  };
+
+  /**
+   * Append search results count to search dialog
+   */
+  _appendSearchResultsCount = () => {
+    const dialog = document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
+
+    if (dialog) {
+      const searchResultsCount = document.createElement('span');
+      searchResultsCount.id = this.searchResultsCountElementId;
+      dialog.appendChild(searchResultsCount);
+
+      this._countSearchResults();
+    }
+  };
+
+  /**
+   * Count search results and update state
+   */
+  _countSearchResults = () => {
+    let count = 0;
+
+    const searchInput = document.querySelector('.CodeMirror-search-field');
+
+    if (searchInput && searchInput.value.length > 0) {
+      const text = new RegExp(searchInput.value, 'gi');
+      const matches = this.editor.getValue().match(text);
+      count = matches ? matches.length : 0;
+    }
+
+    const searchResultsCountElement = document.querySelector(`#${this.searchResultsCountElementId}`);
+
+    if (searchResultsCountElement) {
+      searchResultsCountElement.innerText = `${count} results`;
+    }
+  };
 }

packages/bruno-app/src/components/CollectionSettings/Docs/index.js

@@ -48,7 +48,7 @@ const Docs = ({ collection }) => {
           font={get(preferences, 'font.codeFont', 'default')}
         />
       ) : (
-        <Markdown onDoubleClick={toggleViewMode} content={docs} />
+        <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
       )}
     </StyledWrapper>
   );

packages/bruno-app/src/components/Documentation/index.js

@@ -53,7 +53,7 @@ const Documentation = ({ item, collection }) => {
           mode="application/text"
         />
       ) : (
-        <Markdown onDoubleClick={toggleViewMode} content={docs} />
+        <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
       )}
     </StyledWrapper>
   );

packages/bruno-app/src/components/MarkDown/StyledWrapper.js

@@ -69,6 +69,7 @@ const StyledMarkdownBodyWrapper = styled.div`
 
     pre {
       background: ${(props) => props.theme.sidebar.bg};
+      color: ${(props) => props.theme.text};
     }
 
     table {

packages/bruno-app/src/components/MarkDown/index.jsx

@@ -1,10 +1,15 @@
 import MarkdownIt from 'markdown-it';
+import * as MarkdownItReplaceLink from 'markdown-it-replace-link';
 import StyledWrapper from './StyledWrapper';
 import React from 'react';
 
-const md = new MarkdownIt();
+const Markdown = ({ collectionPath, onDoubleClick, content }) => {
+  const markdownItOptions = {
+    replaceLink: function (link, env) {
+      return link.replace(/^\./, collectionPath);
+    }
+  };
 
-const Markdown = ({ onDoubleClick, content }) => {
   const handleOnClick = (event) => {
     const target = event.target;
     if (target.tagName === 'A') {
@@ -23,6 +28,8 @@ const Markdown = ({ onDoubleClick, content }) => {
     }
   };
 
+  const md = new MarkdownIt(markdownItOptions).use(MarkdownItReplaceLink);
+
   const htmlFromMarkdown = md.render(content || '');
 
   return (

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

@@ -46,7 +46,7 @@ const QueryResultFilter = ({ filter, onChange, mode }) => {
   return (
     <div
       className={
-        'response-filter absolute bottom-2 w-full justify-end right-0 flex flex-row items-center gap-2 py-4 px-2'
+        'response-filter absolute bottom-2 w-full justify-end right-0 flex flex-row items-center gap-2 py-4 px-2 pointer-events-none'
       }
     >
       {tooltipText && !isExpanded && <ReactTooltip anchorId={'request-filter-icon'} html={tooltipText} />}
@@ -61,11 +61,11 @@ const QueryResultFilter = ({ filter, onChange, mode }) => {
         autoCapitalize="off"
         spellCheck="false"
         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'
+          isExpanded ? 'w-full opacity-100 pointer-events-auto' : 'w-[0] opacity-0'
         }`}
         onChange={onChange}
       />
-      <div className="text-gray-500 sm:text-sm cursor-pointer" id="request-filter-icon" onClick={handleFilterClick}>
+      <div className="text-gray-500 sm:text-sm cursor-pointer pointer-events-auto" 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/index.js

@@ -97,6 +97,8 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
     });
   };
 
+  const responseHeadersCount = typeof response.headers === 'object' ? Object.entries(response.headers).length : 0;
+
   return (
     <StyledWrapper className="flex flex-col h-full relative">
       <div className="flex flex-wrap items-center pl-3 pr-4 tabs" role="tablist">
@@ -105,7 +107,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
         </div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
           Headers
-          {response.headers?.length > 0 && <sup className="ml-1 font-medium">{response.headers.length}</sup>}
+          {responseHeadersCount > 0 && <sup className="ml-1 font-medium">{responseHeadersCount}</sup>}
         </div>
         <div className={getTabClassname('timeline')} role="tab" onClick={() => selectTab('timeline')}>
           Timeline

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/index.js

@@ -23,7 +23,9 @@ const RequestMethod = ({ item }) => {
   return (
     <StyledWrapper>
       <div className={getClassname(item.request.method)}>
-        <span className="uppercase">{item.request.method}</span>
+        <span className="uppercase">
+          {item.request.method.length > 5 ? item.request.method.substring(0, 3) : item.request.method}
+        </span>
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/pages/_app.js

@@ -14,6 +14,15 @@ import 'codemirror/lib/codemirror.css';
 import 'graphiql/graphiql.min.css';
 import 'react-tooltip/dist/react-tooltip.css';
 import '@usebruno/graphql-docs/dist/esm/index.css';
+import '@fontsource/inter/100.css';
+import '@fontsource/inter/200.css';
+import '@fontsource/inter/300.css';
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/500.css';
+import '@fontsource/inter/600.css';
+import '@fontsource/inter/700.css';
+import '@fontsource/inter/800.css';
+import '@fontsource/inter/900.css';
 import { DictionaryProvider } from 'providers/Dictionary/index';
 
 function SafeHydrate({ children }) {

packages/bruno-app/src/pages/_document.js

@@ -30,12 +30,7 @@ export default class MyDocument extends Document {
   render() {
     return (
       <Html>
-        <Head>
-          <link
-            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
-            rel="stylesheet"
-          />
-        </Head>
+        <Head />
         <body id="bruno-app-body">
           <Main />
           <NextScript />

packages/bruno-app/src/utils/exporters/postman-collection.js

@@ -12,6 +12,7 @@ export const exportCollection = (collection) => {
   const generateInfoSection = () => {
     return {
       name: collection.name,
+      description: collection.root?.docs,
       schema: 'https://schema.getpostman.com/json/collection/v2.1.0/collection.json'
     };
   };
@@ -137,6 +138,11 @@ export const exportCollection = (collection) => {
             }
           }
         };
+      case 'graphql':
+        return {
+          mode: 'graphql',
+          graphql: body.graphql
+        };
     }
   };
 
@@ -201,6 +207,8 @@ export const exportCollection = (collection) => {
     const requestObject = {
       method: itemRequest.method,
       header: generateHeaders(itemRequest.headers),
+      auth: generateAuth(itemRequest.auth),
+      description: itemRequest.docs,
       url: {
         raw: itemRequest.url,
         host: generateHost(itemRequest.url),