Merge branch 'main' into feature/build-on-different-os

.github/workflows/release-snap.yml

@@ -0,0 +1,46 @@
+name: Publish to Snapcraft
+
+on:
+  workflow_dispatch:
+    inputs:
+      build:
+        description: 'Build and publish to Snapcraft'
+        required: true
+        default: 'true'
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Check package-lock.json
+        run: npm ci
+
+      - name: Install dependencies
+        run: npm install --legacy-peer-deps
+
+      - name: Build Electron app
+        run: npm run build:electron:snap
+
+      - name: Install Snapcraft
+        run: |
+          sudo snap install snapcraft --classic
+        continue-on-error: true
+
+      - name: Configure Snapcraft
+        run: snapcraft whoami
+        env:
+          SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.SNAPCRAFT_API_KEY }}
+
+      - name: Publish to Snapcraft
+        run: |
+          snapcraft upload --release=stable packages/bruno-electron/out/*.snap
+        env:
+          SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.SNAPCRAFT_API_KEY }}

package.json

@@ -33,6 +33,12 @@
     "build:bruno-query": "npm run build --workspace=packages/bruno-query",
     "build:graphql-docs": "npm run build --workspace=packages/bruno-graphql-docs",
     "build:electron": "node ./scripts/build-electron.js",
+    "build:electron:mac": "./scripts/build-electron.sh mac",
+    "build:electron:win": "./scripts/build-electron.sh win",
+    "build:electron:linux": "./scripts/build-electron.sh linux",
+    "build:electron:deb": "./scripts/build-electron.sh deb",
+    "build:electron:rpm": "./scripts/build-electron.sh rpm",
+    "build:electron:snap": "./scripts/build-electron.sh snap",
     "test:e2e": "npx playwright test",
     "test:report": "npx playwright show-report",
     "prepare": "husky install"

packages/bruno-app/package.json

@@ -27,6 +27,7 @@
     "file-dialog": "^0.0.8",
     "file-saver": "^2.0.5",
     "formik": "^2.2.9",
+    "github-markdown-css": "^5.2.0",
     "graphiql": "^1.5.9",
     "graphql": "^16.6.0",
     "graphql-request": "^3.7.0",
@@ -36,7 +37,7 @@
     "immer": "^9.0.15",
     "know-your-http-well": "^0.5.0",
     "lodash": "^4.17.21",
-    "markdown-it": "^13.0.1",
+    "markdown-it": "^13.0.2",
     "mousetrap": "^1.6.5",
     "nanoid": "3.3.4",
     "next": "12.3.3",

packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js

@@ -34,6 +34,15 @@ const AuthMode = ({ collection }) => {
     <StyledWrapper>
       <div className="inline-flex items-center cursor-pointer auth-mode-selector">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('awsv4');
+            }}
+          >
+            AWS Sig v4
+          </div>
           <div
             className="dropdown-item"
             onClick={() => {

packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/StyledWrapper.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+
+  .single-line-editor-wrapper {
+    padding: 0.15rem 0.4rem;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+`;
+
+export default Wrapper;

packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js

@@ -0,0 +1,192 @@
+import React from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useDispatch } from 'react-redux';
+import SingleLineEditor from 'components/SingleLineEditor';
+import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+
+const AwsV4Auth = ({ collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const awsv4Auth = get(collection, 'root.request.auth.awsv4', {});
+  console.log('saved auth', awsv4Auth);
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+  const handleAccessKeyIdChange = (accessKeyId) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        content: {
+          accessKeyId: accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleSecretAccessKeyChange = (secretAccessKey) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleSessionTokenChange = (sessionToken) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleServiceChange = (service) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleRegionChange = (region) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleProfileNameChange = (profileName) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: profileName
+        }
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="mt-2 w-full">
+      <label className="block font-medium mb-2">Access Key ID</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.accessKeyId || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleAccessKeyIdChange(val)}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Secret Access Key</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.secretAccessKey || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleSecretAccessKeyChange(val)}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Session Token</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.sessionToken || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleSessionTokenChange(val)}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Service</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.service || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleServiceChange(val)}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Region</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.region || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleRegionChange(val)}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Profile Name</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.profileName || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleProfileNameChange(val)}
+          collection={collection}
+        />
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default AwsV4Auth;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import get from 'lodash/get';
 import { useDispatch } from 'react-redux';
 import AuthMode from './AuthMode';
+import AwsV4Auth from './AwsV4Auth';
 import BearerAuth from './BearerAuth';
 import BasicAuth from './BasicAuth';
 import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
@@ -15,6 +16,9 @@ const Auth = ({ collection }) => {
 
   const getAuthView = () => {
     switch (authMode) {
+      case 'awsv4': {
+        return <AwsV4Auth collection={collection} />;
+      }
       case 'basic': {
         return <BasicAuth collection={collection} />;
       }

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

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  div.CodeMirror {
+    /* todo: find a better way */
+    height: calc(100vh - 240px);
+
+    .CodeMirror-scroll {
+      padding-bottom: 0px;
+    }
+  }
+  .editing-mode {
+    cursor: pointer;
+    color: ${(props) => props.theme.colors.text.yellow};
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,55 @@
+import 'github-markdown-css/github-markdown.css';
+import get from 'lodash/get';
+import { updateCollectionDocs } from 'providers/ReduxStore/slices/collections';
+import { useTheme } from 'providers/Theme/index';
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import Markdown from 'components/MarkDown';
+import CodeEditor from 'components/CodeEditor';
+import StyledWrapper from './StyledWrapper';
+
+const Docs = ({ collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+  const [isEditing, setIsEditing] = useState(false);
+  const docs = get(collection, 'root.docs', '');
+
+  const toggleViewMode = () => {
+    setIsEditing((prev) => !prev);
+  };
+
+  const onEdit = (value) => {
+    dispatch(
+      updateCollectionDocs({
+        collectionUid: collection.uid,
+        docs: value
+      })
+    );
+  };
+
+  const onSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+  return (
+    <StyledWrapper className="mt-1 h-full w-full relative">
+      <div className="editing-mode mb-2" role="tab" onClick={toggleViewMode}>
+        {isEditing ? 'Preview' : 'Edit'}
+      </div>
+
+      {isEditing ? (
+        <CodeEditor
+          collection={collection}
+          theme={storedTheme}
+          value={docs || ''}
+          onEdit={onEdit}
+          onSave={onSave}
+          mode="application/text"
+        />
+      ) : (
+        <Markdown onDoubleClick={toggleViewMode} content={docs} />
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default Docs;

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

@@ -11,6 +11,7 @@ import Headers from './Headers';
 import Auth from './Auth';
 import Script from './Script';
 import Test from './Tests';
+import Docs from './Docs';
 import StyledWrapper from './StyledWrapper';
 
 const CollectionSettings = ({ collection }) => {
@@ -54,6 +55,9 @@ const CollectionSettings = ({ collection }) => {
       case 'proxy': {
         return <ProxySettings proxyConfig={proxyConfig} onUpdate={onProxySettingsUpdate} />;
       }
+      case 'docs': {
+        return <Docs collection={collection} />;
+      }
     }
   };
 
@@ -81,8 +85,11 @@ const CollectionSettings = ({ collection }) => {
         <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
           Proxy
         </div>
+        <div className={getTabClassname('docs')} role="tab" onClick={() => setTab('docs')}>
+          Docs
+        </div>
       </div>
-      <section className={`flex ${['auth', 'script'].includes(tab) ? '' : 'mt-4'}`}>{getTabPanel(tab)}</section>
+      <section className={`flex ${['auth', 'script', 'docs'].includes(tab) ? '' : 'mt-4'}`}>{getTabPanel(tab)}</section>
     </StyledWrapper>
   );
 };

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

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  div.CodeMirror {
+    /* todo: find a better way */
+    height: calc(100vh - 240px);
+
+    .CodeMirror-scroll {
+      padding-bottom: 0px;
+    }
+  }
+  .editing-mode {
+    cursor: pointer;
+    color: ${(props) => props.theme.colors.text.yellow};
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,60 @@
+import 'github-markdown-css/github-markdown.css';
+import get from 'lodash/get';
+import { updateRequestDocs } from 'providers/ReduxStore/slices/collections';
+import { useTheme } from 'providers/Theme/index';
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import Markdown from 'components/MarkDown';
+import CodeEditor from 'components/CodeEditor';
+import StyledWrapper from './StyledWrapper';
+
+const Documentation = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+  const [isEditing, setIsEditing] = useState(false);
+  const docs = item.draft ? get(item, 'draft.request.docs') : get(item, 'request.docs');
+
+  const toggleViewMode = () => {
+    setIsEditing((prev) => !prev);
+  };
+
+  const onEdit = (value) => {
+    dispatch(
+      updateRequestDocs({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        docs: value
+      })
+    );
+  };
+
+  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
+
+  if (!item) {
+    return null;
+  }
+
+  return (
+    <StyledWrapper className="mt-1 h-full w-full relative">
+      <div className="editing-mode mb-2" role="tab" onClick={toggleViewMode}>
+        {isEditing ? 'Preview' : 'Edit'}
+      </div>
+
+      {isEditing ? (
+        <CodeEditor
+          collection={collection}
+          theme={storedTheme}
+          value={docs || ''}
+          onEdit={onEdit}
+          onSave={onSave}
+          mode="application/text"
+        />
+      ) : (
+        <Markdown onDoubleClick={toggleViewMode} content={docs} />
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default Documentation;

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

@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+
+const StyledMarkdownBodyWrapper = styled.div`
+  background: transparent;
+  height: inherit;
+  .markdown-body {
+    background: transparent;
+    overflow-y: auto;
+    color: ${(props) => props.theme.text};
+    box-sizing: border-box;
+    height: 100%;
+    margin: 0 auto;
+    padding-top: 0.5rem;
+    font-size: 0.875rem;
+
+    h1 {
+      margin: 0.67em 0;
+      font-weight: var(--base-text-weight-semibold, 600);
+      padding-bottom: 0.3em;
+      font-size: 1.3;
+      border-bottom: 1px solid var(--color-border-muted);
+    }
+
+    h2 {
+      font-weight: var(--base-text-weight-semibold, 600);
+      padding-bottom: 0.3em;
+      font-size: 1.2;
+      border-bottom: 1px solid var(--color-border-muted);
+    }
+
+    h3 {
+      font-weight: var(--base-text-weight-semibold, 600);
+      font-size: 1.1em;
+    }
+
+    h4 {
+      font-weight: var(--base-text-weight-semibold, 600);
+      font-size: 1em;
+    }
+
+    h5 {
+      font-weight: var(--base-text-weight-semibold, 600);
+      font-size: 0.95em;
+    }
+
+    h6 {
+      font-weight: var(--base-text-weight-semibold, 600);
+      font-size: 0.9em;
+      color: var(--color-fg-muted);
+    }
+
+    hr {
+      box-sizing: content-box;
+      overflow: hidden;
+      border-bottom: 1px solid var(--color-border-muted);
+      height: 1px;
+      padding: 0;
+      margin: 24px 0;
+      background-color: var(--color-border-default);
+      border: 0;
+    }
+
+    ul {
+      list-style-type: disc;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    pre {
+      background: ${(props) => props.theme.sidebar.bg};
+    }
+  }
+
+  @media (max-width: 767px) {
+    .markdown-body {
+      padding: 15px;
+    }
+  }
+`;
+
+export default StyledMarkdownBodyWrapper;

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

@@ -0,0 +1,32 @@
+import MarkdownIt from 'markdown-it';
+import StyledWrapper from './StyledWrapper';
+
+const md = new MarkdownIt();
+
+const Markdown = ({ onDoubleClick, content }) => {
+  const handleOnDoubleClick = (event) => {
+    switch (event.detail) {
+      case 2: {
+        onDoubleClick();
+        break;
+      }
+      case 1:
+      default: {
+        break;
+      }
+    }
+  };
+  const htmlFromMarkdown = md.render(content || '');
+
+  return (
+    <StyledWrapper>
+      <div
+        className="markdown-body"
+        dangerouslySetInnerHTML={{ __html: htmlFromMarkdown }}
+        onClick={handleOnDoubleClick}
+      />
+    </StyledWrapper>
+  );
+};
+
+export default Markdown;

packages/bruno-app/src/components/RequestPane/Assertions/AssertionOperator/index.js

@@ -1,4 +1,7 @@
 import React from 'react';
+import { useTheme } from 'providers/Theme/index';
+import darkTheme from 'themes/dark';
+import lightTheme from 'themes/light';
 
 /**
  * Assertion operators
@@ -76,10 +79,16 @@ const AssertionOperator = ({ operator, onChange }) => {
     }
   };
 
+  const { storedTheme } = useTheme();
+
   return (
     <select value={operator} onChange={handleChange} className="mousetrap">
       {operators.map((operator) => (
-        <option key={operator} value={operator}>
+        <option
+          style={{ backgroundColor: storedTheme === 'dark' ? darkTheme.bg : lightTheme.bg }}
+          key={operator}
+          value={operator}
+        >
           {getLabel(operator)}
         </option>
       ))}

packages/bruno-app/src/components/RequestPane/Assertions/AssertionRow/index.js

@@ -178,7 +178,7 @@ const AssertionRow = ({
               handleAssertionChange(
                 {
                   target: {
-                    value: newValue
+                    value: `${operator} ${newValue}`
                   }
                 },
                 assertion,

packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js

@@ -35,6 +35,15 @@ const AuthMode = ({ item, collection }) => {
     <StyledWrapper>
       <div className="inline-flex items-center cursor-pointer auth-mode-selector">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('awsv4');
+            }}
+          >
+            AWS Sig v4
+          </div>
           <div
             className="dropdown-item"
             onClick={() => {

packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/StyledWrapper.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+
+  .single-line-editor-wrapper {
+    padding: 0.15rem 0.4rem;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+`;
+
+export default Wrapper;

packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/index.js

@@ -0,0 +1,206 @@
+import React, { useState } from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useDispatch } from 'react-redux';
+import SingleLineEditor from 'components/SingleLineEditor';
+import { updateAuth } from 'providers/ReduxStore/slices/collections';
+import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+import { update } from 'lodash';
+
+const AwsV4Auth = ({ onTokenChange, item, collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const awsv4Auth = item.draft ? get(item, 'draft.request.auth.awsv4', {}) : get(item, 'request.auth.awsv4', {});
+  console.log('saved auth', awsv4Auth);
+
+  const handleRun = () => dispatch(sendRequest(item, collection.uid));
+  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
+
+  const handleAccessKeyIdChange = (accessKeyId) => {
+    dispatch(
+      updateAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          accessKeyId: accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleSecretAccessKeyChange = (secretAccessKey) => {
+    dispatch(
+      updateAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleSessionTokenChange = (sessionToken) => {
+    dispatch(
+      updateAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleServiceChange = (service) => {
+    dispatch(
+      updateAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleRegionChange = (region) => {
+    dispatch(
+      updateAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleProfileNameChange = (profileName) => {
+    dispatch(
+      updateAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: profileName
+        }
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="mt-2 w-full">
+      <label className="block font-medium mb-2">Access Key ID</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.accessKeyId || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleAccessKeyIdChange(val)}
+          onRun={handleRun}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Secret Access Key</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.secretAccessKey || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleSecretAccessKeyChange(val)}
+          onRun={handleRun}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Session Token</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.sessionToken || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleSessionTokenChange(val)}
+          onRun={handleRun}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Service</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.service || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleServiceChange(val)}
+          onRun={handleRun}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Region</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.region || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleRegionChange(val)}
+          onRun={handleRun}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Profile Name</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.profileName || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleProfileNameChange(val)}
+          onRun={handleRun}
+          collection={collection}
+        />
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default AwsV4Auth;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import get from 'lodash/get';
 import AuthMode from './AuthMode';
+import AwsV4Auth from './AwsV4Auth';
 import BearerAuth from './BearerAuth';
 import BasicAuth from './BasicAuth';
 import StyledWrapper from './StyledWrapper';
@@ -10,6 +11,9 @@ const Auth = ({ item, collection }) => {
 
   const getAuthView = () => {
     switch (authMode) {
+      case 'awsv4': {
+        return <AwsV4Auth collection={collection} item={item} />;
+      }
       case 'basic': {
         return <BasicAuth collection={collection} item={item} />;
       }

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

@@ -19,6 +19,7 @@ import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collection
 import { findEnvironmentInCollection } from 'utils/collections';
 import useGraphqlSchema from './useGraphqlSchema';
 import StyledWrapper from './StyledWrapper';
+import Documentation from 'components/Documentation/index';
 
 const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, toggleDocs, handleGqlClickReference }) => {
   const dispatch = useDispatch();
@@ -113,6 +114,9 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
       case 'tests': {
         return <Tests item={item} collection={collection} />;
       }
+      case 'docs': {
+        return <Documentation item={item} collection={collection} />;
+      }
       default: {
         return <div className="mt-4">404 | Not found</div>;
       }
@@ -161,6 +165,9 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
         <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
           Tests
         </div>
+        <div className={getTabClassname('docs')} role="tab" onClick={() => selectTab('docs')}>
+          Docs
+        </div>
         <div className="flex flex-grow justify-end items-center" style={{ fontSize: 13 }}>
           <div className="flex items-center cursor-pointer hover:underline" onClick={loadGqlSchema}>
             {isSchemaLoading ? <IconLoader2 className="animate-spin" size={18} strokeWidth={1.5} /> : null}

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

@@ -14,6 +14,8 @@ import Assertions from 'components/RequestPane/Assertions';
 import Script from 'components/RequestPane/Script';
 import Tests from 'components/RequestPane/Tests';
 import StyledWrapper from './StyledWrapper';
+import { get } from 'lodash';
+import Documentation from 'components/Documentation/index';
 
 const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
   const dispatch = useDispatch();
@@ -55,6 +57,9 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
       case 'tests': {
         return <Tests item={item} collection={collection} />;
       }
+      case 'docs': {
+        return <Documentation item={item} collection={collection} />;
+      }
       default: {
         return <div className="mt-4">404 | Not found</div>;
       }
@@ -76,33 +81,54 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
     });
   };
 
+  // get the length of active params, headers, asserts and vars
+  const params = item.draft ? get(item, 'draft.request.params', []) : get(item, 'request.params', []);
+  const headers = item.draft ? get(item, 'draft.request.headers', []) : get(item, 'request.headers', []);
+  const assertions = item.draft ? get(item, 'draft.request.assertions', []) : get(item, 'request.assertions', []);
+  const requestVars = item.draft ? get(item, 'draft.request.vars.req', []) : get(item, 'request.vars.req', []);
+  const responseVars = item.draft ? get(item, 'draft.request.vars.res', []) : get(item, 'request.vars.res', []);
+
+  const activeParamsLength = params.filter((param) => param.enabled).length;
+  const activeHeadersLength = headers.filter((header) => header.enabled).length;
+  const activeAssertionsLength = assertions.filter((assertion) => assertion.enabled).length;
+  const activeVarsLength =
+    requestVars.filter((request) => request.enabled).length +
+    responseVars.filter((response) => response.enabled).length;
+
   return (
     <StyledWrapper className="flex flex-col h-full relative">
       <div className="flex flex-wrap items-center tabs" role="tablist">
         <div className={getTabClassname('params')} role="tab" onClick={() => selectTab('params')}>
           Query
+          {activeParamsLength > 0 && <sup className="ml-1 font-medium">{activeParamsLength}</sup>}
         </div>
         <div className={getTabClassname('body')} role="tab" onClick={() => selectTab('body')}>
           Body
         </div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
           Headers
+          {activeHeadersLength > 0 && <sup className="ml-1 font-medium">{activeHeadersLength}</sup>}
         </div>
         <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>
           Auth
         </div>
         <div className={getTabClassname('vars')} role="tab" onClick={() => selectTab('vars')}>
           Vars
+          {activeVarsLength > 0 && <sup className="ml-1 font-medium">{activeVarsLength}</sup>}
         </div>
         <div className={getTabClassname('script')} role="tab" onClick={() => selectTab('script')}>
           Script
         </div>
         <div className={getTabClassname('assert')} role="tab" onClick={() => selectTab('assert')}>
           Assert
+          {activeAssertionsLength > 0 && <sup className="ml-1 font-medium">{activeAssertionsLength}</sup>}
         </div>
         <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
           Tests
         </div>
+        <div className={getTabClassname('docs')} role="tab" onClick={() => selectTab('docs')}>
+          Docs
+        </div>
         {focusedTab.requestPaneTab === 'body' ? (
           <div className="flex flex-grow justify-end items-center">
             <RequestBodyMode item={item} collection={collection} />
@@ -110,7 +136,9 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
         ) : null}
       </div>
       <section
-        className={`flex w-full ${['script', 'vars', 'auth'].includes(focusedTab.requestPaneTab) ? '' : 'mt-5'}`}
+        className={`flex w-full ${
+          ['script', 'vars', 'auth', 'docs'].includes(focusedTab.requestPaneTab) ? '' : 'mt-5'
+        }`}
       >
         {getTabPanel(focusedTab.requestPaneTab)}
       </section>

packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js

@@ -82,6 +82,15 @@ const RequestBodyMode = ({ item, collection }) => {
           >
             TEXT
           </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('sparql');
+            }}
+          >
+            SPARQL
+          </div>
           <div className="label-item font-medium">Other</div>
           <div
             className="dropdown-item"

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

@@ -28,17 +28,19 @@ const RequestBody = ({ item, collection }) => {
   const onRun = () => dispatch(sendRequest(item, collection.uid));
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
-  if (['json', 'xml', 'text'].includes(bodyMode)) {
+  if (['json', 'xml', 'text', 'sparql'].includes(bodyMode)) {
     let codeMirrorMode = {
       json: 'application/ld+json',
       text: 'application/text',
-      xml: 'application/xml'
+      xml: 'application/xml',
+      sparql: 'application/sparql-query'
     };
 
     let bodyContent = {
       json: body.json,
       text: body.text,
-      xml: body.xml
+      xml: body.xml,
+      sparql: body.sparql
     };
 
     return (

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

@@ -2,16 +2,12 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   position: absolute;
+  height: 100%;
   z-index: 1;
-  height: 100vh;
   background-color: ${(props) => props.theme.requestTabPanel.responseOverlayBg};
 
   div.overlay {
-    position: absolute;
+    height: 100%;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
     z-index: 9;
     display: flex;
     flex-direction: column;

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

@@ -17,7 +17,7 @@ const ResponseLoadingOverlay = ({ item, collection }) => {
       <div className="overlay">
         <div style={{ marginBottom: 15, fontSize: 26 }}>
           <div style={{ display: 'inline-block', fontSize: 20, marginLeft: 5, marginRight: 5 }}>
-            <StopWatch />
+            <StopWatch requestTimestamp={item?.requestSent?.timestamp} />
           </div>
         </div>
         <IconRefresh size={24} className="loading-icon" />

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

@@ -1,8 +1,14 @@
 import React from 'react';
 import { IconSend } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
+import { isMacOS } from 'utils/common/platform';
 
 const Placeholder = () => {
+  const isMac = isMacOS();
+  const sendRequestShortcut = isMac ? 'Cmd + Enter' : 'Ctrl + Enter';
+  const newRequestShortcut = isMac ? 'Cmd + B' : 'Ctrl + B';
+  const editEnvironmentShortcut = isMac ? 'Cmd + E' : 'Ctrl + E';
+
   return (
     <StyledWrapper>
       <div className="send-icon flex justify-center" style={{ fontSize: 200 }}>
@@ -15,9 +21,9 @@ const Placeholder = () => {
           <div className="px-1 py-2">Edit Environments</div>
         </div>
         <div className="flex flex-1 flex-col px-1">
-          <div className="px-1 py-2">Cmd + Enter</div>
+          <div className="px-1 py-2">{sendRequestShortcut}</div>
-          <div className="px-1 py-2">Cmd + B</div>
+          <div className="px-1 py-2">{newRequestShortcut}</div>
-          <div className="px-1 py-2">Cmd + E</div>
+          <div className="px-1 py-2">{editEnvironmentShortcut}</div>
         </div>
       </div>
     </StyledWrapper>

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

@@ -11,7 +11,7 @@ import StyledWrapper from './StyledWrapper';
 import { useState } from 'react';
 import { useMemo } from 'react';
 
-const QueryResult = ({ item, collection, data, width, disableRunEventListener, headers }) => {
+const QueryResult = ({ item, collection, data, width, disableRunEventListener, headers, error }) => {
   const { storedTheme } = useTheme();
   const [tab, setTab] = useState('preview');
   const dispatch = useDispatch();
@@ -45,6 +45,10 @@ const QueryResult = ({ item, collection, data, width, disableRunEventListener, h
       return safeStringifyJSON(data);
     }
 
+    if (mode.includes('image')) {
+      return item.requestSent.url;
+    }
+
     // final fallback
     if (typeof data === 'string') {
       return data;
@@ -87,7 +91,13 @@ const QueryResult = ({ item, collection, data, width, disableRunEventListener, h
   };
 
   const activeResult = useMemo(() => {
-    if (tab === 'preview' && mode.includes('html') && item.requestSent && item.requestSent.url) {
+    if (
+      tab === 'preview' &&
+      mode.includes('html') &&
+      item.requestSent &&
+      item.requestSent.url &&
+      typeof data === 'string'
+    ) {
       // Add the Base tag to the head so content loads properly. This also needs the correct CSP settings
       const webViewSrc = data.replace('<head>', `<head><base href="${item.requestSent.url}">`);
       return (
@@ -97,17 +107,19 @@ const QueryResult = ({ item, collection, data, width, disableRunEventListener, h
           className="h-full bg-white"
         />
       );
+    } else if (mode.includes('image')) {
+      return <img src={item.requestSent.url} alt="image" />;
     }
 
     return <CodeEditor collection={collection} theme={storedTheme} onRun={onRun} value={value} mode={mode} readOnly />;
   }, [tab, collection, storedTheme, onRun, value, mode]);
 
   return (
-    <StyledWrapper className="px-3 w-full h-full" style={{ maxWidth: width }}>
+    <StyledWrapper className="w-full h-full" style={{ maxWidth: width }}>
       <div className="flex justify-end gap-2 text-xs" role="tablist">
         {getTabs()}
       </div>
-      {activeResult}
+      {error ? <span className="text-red-500">{error}</span> : activeResult}
     </StyledWrapper>
   );
 };

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

@@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
 
 const ResponseHeaders = ({ headers }) => {
   return (
-    <StyledWrapper className="px-3 pb-4 w-full">
+    <StyledWrapper className="pb-4 w-full">
       <table>
         <thead>
           <tr>

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

@@ -15,7 +15,7 @@ const TestResults = ({ results, assertionResults }) => {
   const failedAssertions = assertionResults.filter((result) => result.status === 'fail');
 
   return (
-    <StyledWrapper className="flex flex-col px-3">
+    <StyledWrapper className="flex flex-col">
       <div className="pb-2 font-medium test-summary">
         Tests ({results.length}/{results.length}), Passed: {passedTests.length}, Failed: {failedTests.length}
       </div>

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

@@ -20,7 +20,7 @@ const Timeline = ({ request, response }) => {
   let requestData = safeStringifyJSON(request.data);
 
   return (
-    <StyledWrapper className="px-3 pb-4 w-full">
+    <StyledWrapper className="pb-4 w-full">
       <div>
         <pre className="line request font-bold">
           <span className="arrow">{'>'}</span> {request.method} {request.url}

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

@@ -42,6 +42,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
             width={rightPaneWidth}
             data={response.data}
             headers={response.headers}
+            error={response.error}
           />
         );
       }
@@ -94,7 +95,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
 
   return (
     <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex flex-wrap items-center px-3 tabs" role="tablist">
+      <div className="flex flex-wrap items-center pl-3 pr-4 tabs" role="tablist">
         <div className={getTabClassname('response')} role="tab" onClick={() => selectTab('response')}>
           Response
         </div>
@@ -115,7 +116,9 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
           </div>
         ) : null}
       </div>
-      <section className={`flex flex-grow ${focusedTab.responsePaneTab === 'response' ? '' : 'mt-4'}`}>
+      <section
+        className={`flex flex-grow relative pl-3 pr-4 ${focusedTab.responsePaneTab === 'response' ? '' : 'mt-4'}`}
+      >
         {isLoading ? <Overlay item={item} collection={collection} /> : null}
         {getTabPanel(focusedTab.responsePaneTab)}
       </section>

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

@@ -6,6 +6,7 @@ const Wrapper = styled.div`
   align-self: stretch;
   align-items: center;
   min-width: 34px;
+  flex-shrink: 0;
 
   span {
     position: relative;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import exportBrunoCollection from 'utils/collections/export';
+import exportPostmanCollection from 'utils/exporters/postman-collection';
+import { toastError } from 'utils/common/error';
+import cloneDeep from 'lodash/cloneDeep';
+import Modal from 'components/Modal';
+import { transformCollectionToSaveToExportAsFile } from 'utils/collections/index';
+
+const ExportCollection = ({ onClose, collection }) => {
+  const handleExportBrunoCollection = () => {
+    const collectionCopy = cloneDeep(collection);
+    exportBrunoCollection(transformCollectionToSaveToExportAsFile(collectionCopy));
+    onClose();
+  };
+
+  const handleExportPostmanCollection = () => {
+    const collectionCopy = cloneDeep(collection);
+    exportPostmanCollection(collectionCopy);
+    onClose();
+  };
+
+  return (
+    <Modal size="sm" title="Export Collection" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
+      <div>
+        <div className="text-link hover:underline cursor-pointer" onClick={handleExportBrunoCollection}>
+          Bruno Collection
+        </div>
+        <div className="text-link hover:underline cursor-pointer mt-2" onClick={handleExportPostmanCollection}>
+          Postman Collection
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ExportCollection;

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

@@ -14,6 +14,7 @@ import NewRequest from 'components/Sidebar/NewRequest';
 import NewFolder from 'components/Sidebar/NewFolder';
 import CollectionItem from './CollectionItem';
 import RemoveCollection from './RemoveCollection';
+import ExportCollection from './ExportCollection';
 import CollectionProperties from './CollectionProperties';
 import { doesCollectionHaveItemsMatchingSearchText } from 'utils/collections/search';
 import { isItemAFolder, isItemARequest, transformCollectionToSaveToExportAsFile } from 'utils/collections';
@@ -26,6 +27,7 @@ const Collection = ({ collection, searchText }) => {
   const [showNewFolderModal, setShowNewFolderModal] = useState(false);
   const [showNewRequestModal, setShowNewRequestModal] = useState(false);
   const [showRenameCollectionModal, setShowRenameCollectionModal] = useState(false);
+  const [showExportCollectionModal, setShowExportCollectionModal] = useState(false);
   const [showRemoveCollectionModal, setShowRemoveCollectionModal] = useState(false);
   const [collectionPropertiesModal, setCollectionPropertiesModal] = useState(false);
   const [collectionIsCollapsed, setCollectionIsCollapsed] = useState(collection.collapsed);
@@ -129,6 +131,9 @@ const Collection = ({ collection, searchText }) => {
       {showRemoveCollectionModal && (
         <RemoveCollection collection={collection} onClose={() => setShowRemoveCollectionModal(false)} />
       )}
+      {showExportCollectionModal && (
+        <ExportCollection collection={collection} onClose={() => setShowExportCollectionModal(false)} />
+      )}
       {collectionPropertiesModal && (
         <CollectionProperties collection={collection} onClose={() => setCollectionPropertiesModal(false)} />
       )}
@@ -186,7 +191,7 @@ const Collection = ({ collection, searchText }) => {
               className="dropdown-item"
               onClick={(e) => {
                 menuDropdownTippyRef.current.hide();
-                handleExportClick(true);
+                setShowExportCollectionModal(true);
               }}
             >
               Export

packages/bruno-app/src/components/Sidebar/Collections/StyledWrapper.js

@@ -12,6 +12,10 @@ const Wrapper = styled.div`
       fill: rgb(140, 140, 140);
     }
   }
+
+  span.close-icon {
+    color: ${(props) => props.theme.colors.text.muted};
+  }
 `;
 
 export default Wrapper;

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

@@ -5,7 +5,8 @@ import {
   IconFolders,
   IconArrowsSort,
   IconSortAscendingLetters,
-  IconSortDescendingLetters
+  IconSortDescendingLetters,
+  IconX
 } from '@tabler/icons';
 import Collection from '../Collections/Collection';
 import CreateCollection from '../CreateCollection';
@@ -97,8 +98,21 @@ const Collections = () => {
           spellCheck="false"
           className="block w-full pl-7 py-1 sm:text-sm"
           placeholder="search"
+          value={searchText}
           onChange={(e) => setSearchText(e.target.value.toLowerCase())}
         />
+        {searchText !== '' && (
+          <div className="absolute inset-y-0 right-0 pr-4 flex items-center">
+            <span
+              className="close-icon"
+              onClick={() => {
+                setSearchText('');
+              }}
+            >
+              <IconX size={16} strokeWidth={1.5} className="cursor-pointer" />
+            </span>
+          </div>
+        )}
       </div>
 
       <div className="mt-4 flex flex-col overflow-y-auto absolute top-32 bottom-10 left-0 right-0">

packages/bruno-app/src/components/Sidebar/NewFolder/index.js

@@ -16,6 +16,7 @@ const NewFolder = ({ collection, item, onClose }) => {
     },
     validationSchema: Yup.object({
       folderName: Yup.string()
+        .trim()
         .min(1, 'must be at least 1 character')
         .required('name is required')
         .test({
@@ -32,7 +33,7 @@ const NewFolder = ({ collection, item, onClose }) => {
     onSubmit: (values) => {
       dispatch(newFolder(values.folderName, collection.uid, item ? item.uid : null))
         .then(() => onClose())
-        .catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));
+        .catch((err) => toast.error(err ? err.message : 'An error occurred while adding the folder'));
     }
   });
 

packages/bruno-app/src/components/Sidebar/NewRequest/index.js

@@ -25,13 +25,14 @@ const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
     },
     validationSchema: Yup.object({
       requestName: Yup.string()
+        .trim()
         .min(1, 'must be at least 1 character')
         .required('name is required')
         .test({
           name: 'requestName',
           message: `The request names - collection and folder is reserved in bruno`,
           test: (value) => {
-            const trimmedValue = value.trim().toLowerCase();
+            const trimmedValue = value ? value.trim().toLowerCase() : '';
             return !['collection', 'folder'].includes(trimmedValue);
           }
         })

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

@@ -105,7 +105,7 @@ const Sidebar = () => {
                   Star
                 </GitHubButton>
               </div>
-              <div className="flex flex-grow items-center justify-end text-xs mr-2">v0.22.0</div>
+              <div className="flex flex-grow items-center justify-end text-xs mr-2">v0.24.0</div>
             </div>
           </div>
         </div>

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-const StopWatch = () => {
+const StopWatch = ({ requestTimestamp }) => {
   const [milliseconds, setMilliseconds] = useState(0);
 
   const tickInterval = 200;
@@ -15,6 +15,10 @@ const StopWatch = () => {
     };
   });
 
+  useEffect(() => {
+    setMilliseconds(Date.now() - requestTimestamp);
+  }, [requestTimestamp]);
+
   if (milliseconds < 1000) {
     return 'Loading...';
   }

packages/bruno-app/src/pageComponents/Index/index.js

@@ -9,29 +9,32 @@ import StyledWrapper from './StyledWrapper';
 import 'codemirror/theme/material.css';
 import 'codemirror/theme/monokai.css';
 import 'codemirror/addon/scroll/simplescrollbars.css';
+import Documentation from 'components/Documentation';
 
 const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
 if (!SERVER_RENDERED) {
   require('codemirror/mode/javascript/javascript');
   require('codemirror/mode/xml/xml');
-  require('codemirror/addon/scroll/simplescrollbars');
+  require('codemirror/mode/sparql/sparql');
+  require('codemirror/addon/comment/comment');
+  require('codemirror/addon/dialog/dialog');
+  require('codemirror/addon/edit/closebrackets');
   require('codemirror/addon/edit/matchbrackets');
   require('codemirror/addon/fold/brace-fold');
   require('codemirror/addon/fold/foldgutter');
-  require('codemirror/addon/mode/overlay');
   require('codemirror/addon/hint/show-hint');
-  require('codemirror/keymap/sublime');
+  require('codemirror/addon/lint/lint');
-  require('codemirror/addon/comment/comment');
+  require('codemirror/addon/mode/overlay');
-  require('codemirror/addon/edit/closebrackets');
+  require('codemirror/addon/scroll/simplescrollbars');
+  require('codemirror/addon/search/jump-to-line');
   require('codemirror/addon/search/search');
   require('codemirror/addon/search/searchcursor');
-  require('codemirror/addon/search/jump-to-line');
+  require('codemirror/keymap/sublime');
-  require('codemirror/addon/dialog/dialog');
 
   require('codemirror-graphql/hint');
-  require('codemirror-graphql/lint');
   require('codemirror-graphql/info');
   require('codemirror-graphql/jump');
+  require('codemirror-graphql/lint');
   require('codemirror-graphql/mode');
 
   require('utils/codemirror/brunoVarInfo');

packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js

@@ -45,6 +45,8 @@ import {
 
 import { closeAllCollectionTabs } from 'providers/ReduxStore/slices/tabs';
 import { resolveRequestFilename } from 'utils/common/platform';
+import { parseQueryParams, splitOnFirst } from 'utils/url/index';
+import { each } from 'lodash';
 
 const PATH_SEPARATOR = path.sep;
 
@@ -140,22 +142,33 @@ export const sendRequest = (item, collectionUid) => (dispatch, getState) => {
       })
       .then(resolve)
       .catch((err) => {
+        if (err && err.message === "Error invoking remote method 'send-http-request': Error: Request cancelled") {
+          console.log('>> request cancelled');
+          dispatch(
+            responseReceived({
+              itemUid: item.uid,
+              collectionUid: collectionUid,
+              response: null
+            })
+          );
+          return;
+        }
+
+        const errorResponse = {
+          status: 'Error',
+          isError: true,
+          error: err.message ?? 'Something went wrong',
+          size: 0,
+          duration: 0
+        };
+
         dispatch(
           responseReceived({
             itemUid: item.uid,
             collectionUid: collectionUid,
-            response: null
+            response: errorResponse
           })
         );
-
-        if (err && err.message === "Error invoking remote method 'send-http-request': Error: Request cancelled") {
-          console.log('>> request cancelled');
-          return;
-        }
-
-        console.log('>> sending request failed');
-        console.log(err);
-        toast.error(err ? err.message : 'Something went wrong!');
       });
   });
 };
@@ -588,6 +601,12 @@ export const newHttpRequest = (params) => (dispatch, getState) => {
       return reject(new Error('Collection not found'));
     }
 
+    const parts = splitOnFirst(requestUrl, '?');
+    const params = parseQueryParams(parts[1]);
+    each(params, (urlParam) => {
+      urlParam.enabled = true;
+    });
+
     const collectionCopy = cloneDeep(collection);
     const item = {
       uid: uuid(),
@@ -597,11 +616,13 @@ export const newHttpRequest = (params) => (dispatch, getState) => {
         method: requestMethod,
         url: requestUrl,
         headers: [],
+        params,
         body: {
           mode: 'none',
           json: null,
           text: null,
           xml: null,
+          sparql: null,
           multipartForm: null,
           formUrlEncoded: null
         }

packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js

@@ -286,6 +286,12 @@ export const collectionsSlice = createSlice({
       const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
 
       if (collection && collection.items && collection.items.length) {
+        const parts = splitOnFirst(action.payload.requestUrl, '?');
+        const params = parseQueryParams(parts[1]);
+        each(params, (urlParam) => {
+          urlParam.enabled = true;
+        });
+
         const item = {
           uid: action.payload.uid,
           name: action.payload.requestName,
@@ -293,7 +299,7 @@ export const collectionsSlice = createSlice({
           request: {
             url: action.payload.requestUrl,
             method: action.payload.requestMethod,
-            params: [],
+            params,
             headers: [],
             body: {
               mode: null,
@@ -373,6 +379,10 @@ export const collectionsSlice = createSlice({
 
           item.draft.request.auth = item.draft.request.auth || {};
           switch (action.payload.mode) {
+            case 'awsv4':
+              item.draft.request.auth.mode = 'awsv4';
+              item.draft.request.auth.awsv4 = action.payload.content;
+              break;
             case 'bearer':
               item.draft.request.auth.mode = 'bearer';
               item.draft.request.auth.bearer = action.payload.content;
@@ -692,6 +702,10 @@ export const collectionsSlice = createSlice({
               item.draft.request.body.xml = action.payload.content;
               break;
             }
+            case 'sparql': {
+              item.draft.request.body.sparql = action.payload.content;
+              break;
+            }
             case 'formUrlEncoded': {
               item.draft.request.body.formUrlEncoded = action.payload.content;
               break;
@@ -955,6 +969,10 @@ export const collectionsSlice = createSlice({
 
       if (collection) {
         switch (action.payload.mode) {
+          case 'awsv4':
+            set(collection, 'root.request.auth.awsv4', action.payload.content);
+            console.log('set auth awsv4', action.payload.content);
+            break;
           case 'bearer':
             set(collection, 'root.request.auth.bearer', action.payload.content);
             break;
@@ -978,7 +996,6 @@ export const collectionsSlice = createSlice({
         set(collection, 'root.request.script.res', action.payload.script);
       }
     },
-
     updateCollectionTests: (state, action) => {
       const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
 
@@ -986,6 +1003,13 @@ export const collectionsSlice = createSlice({
         set(collection, 'root.request.tests', action.payload.tests);
       }
     },
+    updateCollectionDocs: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if (collection) {
+        set(collection, 'root.docs', action.payload.docs);
+      }
+    },
     addCollectionHeader: (state, action) => {
       const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
 
@@ -1319,6 +1343,20 @@ export const collectionsSlice = createSlice({
       if (collection) {
         collection.runnerResult = null;
       }
+    },
+    updateRequestDocs: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if (collection) {
+        const item = findItemInCollection(collection, action.payload.itemUid);
+
+        if (item && isItemARequest(item)) {
+          if (!item.draft) {
+            item.draft = cloneDeep(item);
+          }
+          item.draft.request.docs = action.payload.docs;
+        }
+      }
     }
   }
 });
@@ -1385,6 +1423,7 @@ export const {
   updateCollectionRequestScript,
   updateCollectionResponseScript,
   updateCollectionTests,
+  updateCollectionDocs,
   collectionAddFileEvent,
   collectionAddDirectoryEvent,
   collectionChangeFileEvent,
@@ -1395,7 +1434,8 @@ export const {
   resetRunResults,
   runRequestEvent,
   runFolderEvent,
-  resetCollectionRunner
+  resetCollectionRunner,
+  updateRequestDocs
 } = collectionsSlice.actions;
 
 export default collectionsSlice.reducer;

packages/bruno-app/src/utils/collections/export.js

@@ -2,7 +2,7 @@ import * as FileSaver from 'file-saver';
 import get from 'lodash/get';
 import each from 'lodash/each';
 
-const deleteUidsInItems = (items) => {
+export const deleteUidsInItems = (items) => {
   each(items, (item) => {
     delete item.uid;
 
@@ -26,7 +26,7 @@ const deleteUidsInItems = (items) => {
  * Some of the models in the app are not consistent with the Collection Json format
  * This function is used to transform the models to the Collection Json format
  */
-const transformItem = (items = []) => {
+export const transformItem = (items = []) => {
   each(items, (item) => {
     if (['http-request', 'graphql-request'].includes(item.type)) {
       item.request.query = item.request.params;
@@ -47,14 +47,14 @@ const transformItem = (items = []) => {
   });
 };
 
-const deleteUidsInEnvs = (envs) => {
+export const deleteUidsInEnvs = (envs) => {
   each(envs, (env) => {
     delete env.uid;
     each(env.variables, (variable) => delete variable.uid);
   });
 };
 
-const deleteSecretsInEnvs = (envs) => {
+export const deleteSecretsInEnvs = (envs) => {
   each(envs, (env) => {
     each(env.variables, (variable) => {
       if (variable.secret) {
@@ -64,9 +64,13 @@ const deleteSecretsInEnvs = (envs) => {
   });
 };
 
-const exportCollection = (collection) => {
+export const exportCollection = (collection) => {
   // delete uids
   delete collection.uid;
+
+  // delete process variables
+  delete collection.processEnvVariables;
+
   deleteUidsInItems(collection.items);
   deleteUidsInEnvs(collection.environments);
   deleteSecretsInEnvs(collection.environments);

packages/bruno-app/src/utils/collections/index.js

@@ -284,6 +284,7 @@ export const transformCollectionToSaveToExportAsFile = (collection, options = {}
               text: si.draft.request.body.text,
               xml: si.draft.request.body.xml,
               graphql: si.draft.request.body.graphql,
+              sparql: si.draft.request.body.sparql,
               formUrlEncoded: copyFormUrlEncodedParams(si.draft.request.body.formUrlEncoded),
               multipartForm: copyMultipartFormParams(si.draft.request.body.multipartForm)
             },
@@ -316,6 +317,7 @@ export const transformCollectionToSaveToExportAsFile = (collection, options = {}
               text: si.request.body.text,
               xml: si.request.body.xml,
               graphql: si.request.body.graphql,
+              sparql: si.request.body.sparql,
               formUrlEncoded: copyFormUrlEncodedParams(si.request.body.formUrlEncoded),
               multipartForm: copyMultipartFormParams(si.request.body.multipartForm)
             },
@@ -382,7 +384,8 @@ export const transformRequestToSaveToFilesystem = (item) => {
       script: _item.request.script,
       vars: _item.request.vars,
       assertions: _item.request.assertions,
-      tests: _item.request.tests
+      tests: _item.request.tests,
+      docs: _item.request.docs
     }
   };
 
@@ -459,6 +462,10 @@ export const humanizeRequestBodyMode = (mode) => {
       label = 'XML';
       break;
     }
+    case 'sparql': {
+      label = 'SPARQL';
+      break;
+    }
     case 'formUrlEncoded': {
       label = 'Form URL Encoded';
       break;
@@ -475,6 +482,10 @@ export const humanizeRequestBodyMode = (mode) => {
 export const humanizeRequestAuthMode = (mode) => {
   let label = 'No Auth';
   switch (mode) {
+    case 'awsv4': {
+      label = 'AWS Sig V4';
+      break;
+    }
     case 'basic': {
       label = 'Basic Auth';
       break;

packages/bruno-app/src/utils/common/codemirror.js

@@ -60,6 +60,8 @@ export const getCodeMirrorModeBasedOnContentType = (contentType) => {
     return 'application/xml';
   } else if (contentType.includes('yaml')) {
     return 'application/yaml';
+  } else if (contentType.includes('image')) {
+    return 'application/image';
   } else {
     return 'application/text';
   }

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

@@ -0,0 +1,215 @@
+import map from 'lodash/map';
+import * as FileSaver from 'file-saver';
+import { deleteSecretsInEnvs, deleteUidsInEnvs, deleteUidsInItems } from 'utils/collections/export';
+
+export const exportCollection = (collection) => {
+  delete collection.uid;
+  delete collection.processEnvVariables;
+  deleteUidsInItems(collection.items);
+  deleteUidsInEnvs(collection.environments);
+  deleteSecretsInEnvs(collection.environments);
+
+  const generateInfoSection = () => {
+    return {
+      name: collection.name,
+      schema: 'https://schema.getpostman.com/json/collection/v2.1.0/collection.json'
+    };
+  };
+
+  const generateCollectionVars = (collection) => {
+    const pattern = /{{[^{}]+}}/g;
+    let listOfVars = [];
+
+    const findOccurrences = (obj, results) => {
+      if (typeof obj === 'object') {
+        if (Array.isArray(obj)) {
+          obj.forEach((item) => findOccurrences(item, results));
+        } else {
+          for (const key in obj) {
+            findOccurrences(obj[key], results);
+          }
+        }
+      } else if (typeof obj === 'string') {
+        obj.replace(pattern, (match) => {
+          results.push(match.replace(/{{|}}/g, ''));
+        });
+      }
+    };
+
+    findOccurrences(collection, listOfVars);
+
+    const finalArrayOfVars = [...new Set(listOfVars)];
+
+    return finalArrayOfVars.map((variable) => ({
+      key: variable,
+      value: '',
+      type: 'default'
+    }));
+  };
+
+  const generateEventSection = (item) => {
+    const eventArray = [];
+    if (item.request.tests.length) {
+      eventArray.push({
+        listen: 'test',
+        script: {
+          exec: item.request.tests.split('\n')
+          // type: 'text/javascript'
+        }
+      });
+    }
+    if (item.request.script.req) {
+      eventArray.push({
+        listen: 'prerequest',
+        script: {
+          exec: item.request.script.req.split('\n')
+          // type: 'text/javascript'
+        }
+      });
+    }
+    return eventArray;
+  };
+
+  const generateHeaders = (headersArray) => {
+    return map(headersArray, (item) => {
+      return {
+        key: item.name,
+        value: item.value,
+        disabled: !item.enabled,
+        type: 'default'
+      };
+    });
+  };
+
+  const generateBody = (body) => {
+    switch (body.mode) {
+      case 'formUrlEncoded':
+        return {
+          mode: 'urlencoded',
+          urlencoded: map(body.formUrlEncoded, (bodyItem) => {
+            return {
+              key: bodyItem.name,
+              value: bodyItem.value,
+              disabled: !bodyItem.enabled,
+              type: 'default'
+            };
+          })
+        };
+      case 'multipartForm':
+        return {
+          mode: 'formdata',
+          formdata: map(body.multipartForm, (bodyItem) => {
+            return {
+              key: bodyItem.name,
+              value: bodyItem.value,
+              disabled: !bodyItem.enabled,
+              type: 'default'
+            };
+          })
+        };
+      case 'json':
+        return {
+          mode: 'raw',
+          raw: body.json,
+          options: {
+            raw: {
+              language: 'json'
+            }
+          }
+        };
+      case 'xml':
+        return {
+          mode: 'raw',
+          raw: body.xml,
+          options: {
+            raw: {
+              language: 'xml'
+            }
+          }
+        };
+      case 'text':
+        return {
+          mode: 'raw',
+          raw: body.text,
+          options: {
+            raw: {
+              language: 'text'
+            }
+          }
+        };
+    }
+  };
+
+  const generateAuth = (itemAuth) => {
+    switch (itemAuth) {
+      case 'bearer':
+        return {
+          type: 'bearer',
+          bearer: {
+            key: 'token',
+            value: itemAuth.bearer.token,
+            type: 'string'
+          }
+        };
+      case 'basic': {
+        return {
+          type: 'basic',
+          basic: [
+            {
+              key: 'password',
+              value: itemAuth.basic.password,
+              type: 'string'
+            },
+            {
+              key: 'username',
+              value: itemAuth.basic.username,
+              type: 'string'
+            }
+          ]
+        };
+      }
+    }
+  };
+
+  const generateRequestSection = (itemRequest) => {
+    const requestObject = {
+      method: itemRequest.method,
+      header: generateHeaders(itemRequest.headers),
+      url: itemRequest.url,
+      auth: generateAuth(itemRequest.auth)
+    };
+
+    if (itemRequest.body.mode != 'none') {
+      requestObject.body = generateBody(itemRequest.body);
+    }
+    return requestObject;
+  };
+
+  const generateItemSection = (itemsArray) => {
+    return map(itemsArray, (item) => {
+      if (item.type === 'folder') {
+        return {
+          name: item.name,
+          item: item.items.length ? generateItemSection(item.items) : []
+        };
+      } else {
+        return {
+          name: item.name,
+          event: generateEventSection(item),
+          request: generateRequestSection(item.request)
+        };
+      }
+    });
+  };
+  const collectionToExport = {};
+  collectionToExport.info = generateInfoSection();
+  collectionToExport.item = generateItemSection(collection.items);
+  collectionToExport.variable = generateCollectionVars(collection);
+
+  const fileName = `${collection.name}.json`;
+  const fileBlob = new Blob([JSON.stringify(collectionToExport, null, 2)], { type: 'application/json' });
+
+  FileSaver.saveAs(fileBlob, fileName);
+};
+
+export default exportCollection;

packages/bruno-app/src/utils/network/index.js

@@ -1,3 +1,5 @@
+import { safeStringifyJSON } from 'utils/common';
+
 export const sendNetworkRequest = async (item, collection, environment, collectionVariables) => {
   return new Promise((resolve, reject) => {
     if (['http-request', 'graphql-request'].includes(item.type)) {
@@ -7,7 +9,7 @@ export const sendNetworkRequest = async (item, collection, environment, collecti
             state: 'success',
             data: response.data,
             headers: Object.entries(response.headers),
-            size: response.headers['content-length'] || 0,
+            size: getResponseSize(response),
             status: response.status,
             statusText: response.statusText,
             duration: response.duration
@@ -29,6 +31,10 @@ const sendHttpRequest = async (item, collection, environment, collectionVariable
   });
 };
 
+const getResponseSize = (response) => {
+  return response.headers['content-length'] || Buffer.byteLength(safeStringifyJSON(response.data)) || 0;
+};
+
 export const fetchGqlSchema = async (endpoint, environment, request, collection) => {
   return new Promise((resolve, reject) => {
     const { ipcRenderer } = window;

packages/bruno-cli/package.json

@@ -25,7 +25,7 @@
   ],
   "dependencies": {
     "@usebruno/js": "0.8.0",
-    "@usebruno/lang": "0.6.0",
+    "@usebruno/lang": "0.8.0",
     "axios": "^1.5.1",
     "chai": "^4.3.7",
     "chalk": "^3.0.0",

packages/bruno-cli/src/runner/run-single-request.js

@@ -30,7 +30,7 @@ const runSingleRequest = async function (
   try {
     let request;
 
-    request = prepareRequest(bruJson.request);
+    request = prepareRequest(bruJson.request, collectionRoot);
 
     const scriptingConfig = get(brunoConfig, 'scripts', {});
 

packages/bruno-electron/.gitignore

@@ -1,6 +1,7 @@
 node_modules
 web
 out
+dist
 .env
 
 // certs

packages/bruno-electron/electron-builder-config.js

@@ -1,56 +1,45 @@
 require('dotenv').config({ path: process.env.DOTENV_PATH });
 
 const config = {
-  "appId": "com.usebruno.app",
+  appId: 'com.usebruno.app',
-  "productName": "Bruno",
+  productName: 'Bruno',
-  "electronVersion": "21.1.1",
+  electronVersion: '21.1.1',
-  "directories": {
+  directories: {
-    "buildResources": "resources",
+    buildResources: 'resources',
-    "output": "out"
+    output: 'out'
   },
-  "files": [
+  files: ['**/*'],
-    "**/*"
+  afterSign: 'notarize.js',
-  ],
+  mac: {
-  "afterSign": "notarize.js",
+    artifactName: '${name}_${version}_${arch}_${os}.${ext}',
-  "mac": {
+    category: 'public.app-category.developer-tools',
-    "artifactName": "${name}_${version}_${arch}_${os}.${ext}",
+    target: [
-    "category": "public.app-category.developer-tools",
-    "target": [
       {
-        "target": "dmg",
+        target: 'dmg',
-        "arch": [
+        arch: ['x64', 'arm64']
-          "x64",
-          "arm64"
-        ]
       },
       {
-        "target": "zip",
+        target: 'zip',
-        "arch": [
+        arch: ['x64', 'arm64']
-          "x64",
-          "arm64"
-        ]
       }
     ],
-    "icon": "resources/icons/mac/icon.icns",
+    icon: 'resources/icons/mac/icon.icns',
-    "hardenedRuntime": true,
+    hardenedRuntime: true,
-    "identity": "Anoop MD (W7LPPWA48L)",
+    identity: 'Anoop MD (W7LPPWA48L)',
-    "entitlements": "resources/entitlements.mac.plist",
+    entitlements: 'resources/entitlements.mac.plist',
-    "entitlementsInherit": "resources/entitlements.mac.plist"
+    entitlementsInherit: 'resources/entitlements.mac.plist'
   },
-  "linux": {
+  linux: {
-    "artifactName": "${name}_${version}_${arch}_linux.${ext}",
+    artifactName: '${name}_${version}_${arch}_linux.${ext}',
-    "icon": "resources/icons/png",
+    icon: 'resources/icons/png',
-    "target": [
+    target: ['AppImage', 'deb', 'snap', 'rpm']
-      "AppImage",
-      "deb"
-    ]
   },
-  "win": {
+  win: {
-    "artifactName": "${name}_${version}_${arch}_win.${ext}",
+    artifactName: '${name}_${version}_${arch}_win.${ext}',
-    "icon": "resources/icons/png",
+    icon: 'resources/icons/png',
-    "certificateFile": `${process.env.WIN_CERT_FILEPATH}`,
+    certificateFile: `${process.env.WIN_CERT_FILEPATH}`,
-    "certificatePassword": `${process.env.WIN_CERT_PASSWORD}`,
+    certificatePassword: `${process.env.WIN_CERT_PASSWORD}`
   }
 };
 
-module.exports = config;
+module.exports = config;

packages/bruno-electron/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "v0.22.0",
+  "version": "v0.24.0",
   "name": "bruno",
   "description": "Opensource API Client for Exploring and Testing APIs",
   "homepage": "https://www.usebruno.com",
@@ -9,20 +9,25 @@
   "scripts": {
     "clean": "rimraf dist",
     "dev": "electron .",
-    "dist": "electron-builder --mac --config electron-builder-config.js",
+    "dist:mac": "electron-builder --mac --config electron-builder-config.js",
-    "dist-mac": "electron-builder --mac --config electron-builder-config.js",
+    "dist:win": "electron-builder --win --config electron-builder-config.js",
-    "dist-win": "electron-builder --win --config electron-builder-config.js",
+    "dist:linux": "electron-builder --linux AppImage --config electron-builder-config.js",
-    "dist-linux": "electron-builder --linux --config electron-builder-config.js",
+    "dist:deb": "electron-builder --linux deb --config electron-builder-config.js",
+    "dist:rpm": "electron-builder --linux rpm --config electron-builder-config.js",
+    "dist:snap": "electron-builder --linux snap --config electron-builder-config.js",
     "pack": "electron-builder --dir",
     "test": "jest"
   },
   "dependencies": {
+    "@aws-sdk/credential-providers": "^3.425.0",
     "@usebruno/js": "0.8.0",
-    "@usebruno/lang": "0.6.0",
+    "@usebruno/lang": "0.8.0",
     "@usebruno/schema": "0.5.0",
     "about-window": "^1.15.2",
+    "aws4-axios": "^3.3.0",
     "axios": "^1.5.1",
     "chai": "^4.3.7",
+    "chai-string": "^1.5.0",
     "chokidar": "^3.5.3",
     "decomment": "^0.9.5",
     "dotenv": "^16.0.3",

packages/bruno-electron/src/bru/index.js

@@ -20,7 +20,8 @@ const collectionBruToJson = (bru) => {
         script: _.get(json, 'script', {}),
         vars: _.get(json, 'vars', {}),
         tests: _.get(json, 'tests', '')
-      }
+      },
+      docs: _.get(json, 'docs', '')
     };
 
     return transformedJson;
@@ -43,7 +44,8 @@ const jsonToCollectionBru = (json) => {
         req: _.get(json, 'request.vars.req', []),
         res: _.get(json, 'request.vars.req', [])
       },
-      tests: _.get(json, 'request.tests', '')
+      tests: _.get(json, 'request.tests', ''),
+      docs: _.get(json, 'docs', '')
     };
 
     return _jsonToCollectionBru(collectionBruJson);
@@ -116,7 +118,8 @@ const bruToJson = (bru) => {
         script: _.get(json, 'script', {}),
         vars: _.get(json, 'vars', {}),
         assertions: _.get(json, 'assertions', []),
-        tests: _.get(json, 'tests', '')
+        tests: _.get(json, 'tests', ''),
+        docs: _.get(json, 'docs', '')
       }
     };
 
@@ -169,7 +172,8 @@ const jsonToBru = (json) => {
       res: _.get(json, 'request.vars.res', [])
     },
     assertions: _.get(json, 'request.assertions', []),
-    tests: _.get(json, 'request.tests', '')
+    tests: _.get(json, 'request.tests', ''),
+    docs: _.get(json, 'request.docs', '')
   };
 
   return jsonToBruV2(bruJson);

packages/bruno-electron/src/index.js

@@ -13,12 +13,16 @@ const { loadWindowState, saveWindowState } = require('./utils/window');
 
 const lastOpenedCollections = new LastOpenedCollections();
 
-setContentSecurityPolicy(`
+const contentSecurityPolicy = [
-	default-src * 'unsafe-inline' 'unsafe-eval';
+  isDev ? "default-src 'self' 'unsafe-inline' 'unsafe-eval'" : "default-src 'self'",
-	script-src * 'unsafe-inline' 'unsafe-eval';
+  "connect-src 'self' https://api.github.com/repos/usebruno/bruno",
-	connect-src * 'unsafe-inline';
+  "font-src 'self' https://fonts.gstatic.com",
-	form-action 'none';
+  "form-action 'none'",
-`);
+  "img-src 'self' blob: data:",
+  "style-src 'self' https://fonts.googleapis.com"
+];
+
+setContentSecurityPolicy(contentSecurityPolicy.join(';'));
 
 const menu = Menu.buildFromTemplate(menuTemplate);
 Menu.setApplicationMenu(menu);
@@ -35,6 +39,8 @@ app.on('ready', async () => {
     y,
     width,
     height,
+    minWidth:1000,
+    minHeight:640,
     webPreferences: {
       nodeIntegration: true,
       contextIsolation: true,

packages/bruno-electron/src/ipc/network/awsv4auth-helper.js

@@ -0,0 +1,56 @@
+const { fromIni } = require('@aws-sdk/credential-providers');
+const { aws4Interceptor } = require('aws4-axios');
+
+function isStrPresent(str) {
+  return str && str !== '' && str !== 'undefined';
+}
+
+async function resolveCredentials(request) {
+  const awsv4 = request.awsv4config;
+  if (isStrPresent(awsv4.profileName)) {
+    try {
+      credentialsProvider = fromIni({
+        profile: awsv4.profileName
+      });
+      credentials = await credentialsProvider();
+      awsv4.accessKeyId = credentials.accessKeyId;
+      awsv4.secretAccessKey = credentials.secretAccessKey;
+      awsv4.sessionToken = credentials.sessionToken;
+    } catch {
+      console.error('Failed to fetch credentials from AWS profile.');
+    }
+  }
+  return awsv4;
+}
+
+function addAwsV4Interceptor(axiosInstance, request) {
+  if (!request.awsv4config) {
+    console.warn('No Auth Config found!');
+    return;
+  }
+
+  const awsv4 = request.awsv4config;
+  if (!isStrPresent(awsv4.accessKeyId) || !isStrPresent(awsv4.secretAccessKey)) {
+    console.warn('Required Auth Fields are not present');
+    return;
+  }
+
+  const interceptor = aws4Interceptor({
+    options: {
+      region: awsv4.region,
+      service: awsv4.service
+    },
+    credentials: {
+      accessKeyId: awsv4.accessKeyId,
+      secretAccessKey: awsv4.secretAccessKey,
+      sessionToken: awsv4.sessionToken
+    }
+  });
+
+  axiosInstance.interceptors.request.use(interceptor);
+}
+
+module.exports = {
+  addAwsV4Interceptor,
+  resolveCredentials
+};

packages/bruno-electron/src/ipc/network/axios-instance.js

@@ -23,9 +23,9 @@ function makeAxiosInstance() {
       return response;
     },
     (error) => {
-      const end = Date.now();
-      const start = error.config.headers['request-start-time'];
       if (error.response) {
+        const end = Date.now();
+        const start = error.config.headers['request-start-time'];
         error.response.headers['request-duration'] = end - start;
       }
       return Promise.reject(error);

packages/bruno-electron/src/ipc/network/index.js

@@ -22,6 +22,7 @@ const { HttpsProxyAgent } = require('https-proxy-agent');
 const { HttpProxyAgent } = require('http-proxy-agent');
 const { SocksProxyAgent } = require('socks-proxy-agent');
 const { makeAxiosInstance } = require('./axios-instance');
+const { addAwsV4Interceptor, resolveCredentials } = require('./awsv4auth-helper');
 
 // override the default escape function to prevent escaping
 Mustache.escape = function (value) {
@@ -75,7 +76,7 @@ const getSize = (data) => {
   }
 
   if (typeof data === 'object') {
-    return Buffer.byteLength(JSON.stringify(data), 'utf8');
+    return Buffer.byteLength(safeStringifyJSON(data), 'utf8');
   }
 
   return 0;
@@ -194,7 +195,8 @@ const registerNetworkIpc = (mainWindow) => {
           url: request.url,
           method: request.method,
           headers: request.headers,
-          data: safeParseJSON(safeStringifyJSON(request.data))
+          data: safeParseJSON(safeStringifyJSON(request.data)),
+          timestamp: Date.now()
         },
         collectionUid,
         itemUid: item.uid,
@@ -270,6 +272,12 @@ const registerNetworkIpc = (mainWindow) => {
 
       const axiosInstance = makeAxiosInstance();
 
+      if (request.awsv4config) {
+        request.awsv4config = await resolveCredentials(request);
+        addAwsV4Interceptor(axiosInstance, request);
+        delete request.awsv4config;
+      }
+
       /** @type {import('axios').AxiosResponse} */
       const response = await axiosInstance(request);
 
@@ -493,7 +501,8 @@ const registerNetworkIpc = (mainWindow) => {
   ipcMain.handle('fetch-gql-schema', async (event, endpoint, environment, request, collection) => {
     try {
       const envVars = getEnvVars(environment);
-      const preparedRequest = prepareGqlIntrospectionRequest(endpoint, envVars, request);
+      const collectionRoot = get(collection, 'root', {});
+      const preparedRequest = prepareGqlIntrospectionRequest(endpoint, envVars, request, collectionRoot);
 
       const preferences = getPreferences();
       const sslVerification = get(preferences, 'request.sslVerification', true);
@@ -711,14 +720,14 @@ const registerNetworkIpc = (mainWindow) => {
 
               if (socksEnabled) {
                 const socksProxyAgent = new SocksProxyAgent(proxyUri);
-      
+
                 request.httpsAgent = socksProxyAgent;
                 request.httpAgent = socksProxyAgent;
               } else {
                 request.httpsAgent = new HttpsProxyAgent(proxyUri, {
                   rejectUnauthorized: sslVerification
                 });
-  
+
                 request.httpAgent = new HttpProxyAgent(proxyUri);
               }
             } else if (!sslVerification) {

packages/bruno-electron/src/ipc/network/interpolate-vars.js

@@ -121,6 +121,16 @@ const interpolateVars = (request, envVars = {}, collectionVariables = {}, proces
     delete request.auth;
   }
 
+  // interpolate vars for aws sigv4 auth
+  if (request.awsv4config) {
+    request.awsv4config.accessKeyId = interpolate(request.awsv4config.accessKeyId) || '';
+    request.awsv4config.secretAccessKey = interpolate(request.awsv4config.secretAccessKey) || '';
+    request.awsv4config.sessionToken = interpolate(request.awsv4config.sessionToken) || '';
+    request.awsv4config.service = interpolate(request.awsv4config.service) || '';
+    request.awsv4config.region = interpolate(request.awsv4config.region) || '';
+    request.awsv4config.profileName = interpolate(request.awsv4config.profileName) || '';
+  }
+
   return request;
 };
 

packages/bruno-electron/src/ipc/network/prepare-gql-introspection-request.js

@@ -1,15 +1,14 @@
 const Handlebars = require('handlebars');
 const { getIntrospectionQuery } = require('graphql');
-const { get } = require('lodash');
+const { setAuthHeaders } = require('./prepare-request');
 
-const prepareGqlIntrospectionRequest = (endpoint, envVars, request) => {
+const prepareGqlIntrospectionRequest = (endpoint, envVars, request, collectionRoot) => {
   if (endpoint && endpoint.length) {
     endpoint = Handlebars.compile(endpoint, { noEscape: true })(envVars);
   }
 
-  const introspectionQuery = getIntrospectionQuery();
   const queryParams = {
-    query: introspectionQuery
+    query: getIntrospectionQuery()
   };
 
   let axiosRequest = {
@@ -23,20 +22,7 @@ const prepareGqlIntrospectionRequest = (endpoint, envVars, request) => {
     data: JSON.stringify(queryParams)
   };
 
-  if (request.auth) {
+  return setAuthHeaders(axiosRequest, request, collectionRoot);
-    if (request.auth.mode === 'basic') {
-      axiosRequest.auth = {
-        username: get(request, 'auth.basic.username'),
-        password: get(request, 'auth.basic.password')
-      };
-    }
-
-    if (request.auth.mode === 'bearer') {
-      axiosRequest.headers.authorization = `Bearer ${get(request, 'auth.bearer.token')}`;
-    }
-  }
-
-  return axiosRequest;
 };
 
 const mapHeaders = (headers) => {

packages/bruno-electron/src/ipc/network/prepare-request.js

@@ -1,6 +1,63 @@
 const { get, each, filter } = require('lodash');
 const decomment = require('decomment');
 
+// Authentication
+// A request can override the collection auth with another auth
+// But it cannot override the collection auth with no auth
+// We will provide support for disabling the auth via scripting in the future
+const setAuthHeaders = (axiosRequest, request, collectionRoot) => {
+  const collectionAuth = get(collectionRoot, 'request.auth');
+  if (collectionAuth) {
+    switch (collectionAuth.mode) {
+      case 'awsv4':
+        axiosRequest.awsv4config = {
+          accessKeyId: get(collectionAuth, 'awsv4.accessKeyId'),
+          secretAccessKey: get(collectionAuth, 'awsv4.secretAccessKey'),
+          sessionToken: get(collectionAuth, 'awsv4.sessionToken'),
+          service: get(collectionAuth, 'awsv4.service'),
+          region: get(collectionAuth, 'awsv4.region'),
+          profileName: get(collectionAuth, 'awsv4.profileName')
+        };
+        break;
+      case 'basic':
+        axiosRequest.auth = {
+          username: get(collectionAuth, 'basic.username'),
+          password: get(collectionAuth, 'basic.password')
+        };
+        break;
+      case 'bearer':
+        axiosRequest.headers['authorization'] = `Bearer ${get(collectionAuth, 'bearer.token')}`;
+        break;
+    }
+  }
+
+  if (request.auth) {
+    switch (request.auth.mode) {
+      case 'awsv4':
+        axiosRequest.awsv4config = {
+          accessKeyId: get(request, 'auth.awsv4.accessKeyId'),
+          secretAccessKey: get(request, 'auth.awsv4.secretAccessKey'),
+          sessionToken: get(request, 'auth.awsv4.sessionToken'),
+          service: get(request, 'auth.awsv4.service'),
+          region: get(request, 'auth.awsv4.region'),
+          profileName: get(request, 'auth.awsv4.profileName')
+        };
+        break;
+      case 'basic':
+        axiosRequest.auth = {
+          username: get(request, 'auth.basic.username'),
+          password: get(request, 'auth.basic.password')
+        };
+        break;
+      case 'bearer':
+        axiosRequest.headers['authorization'] = `Bearer ${get(request, 'auth.bearer.token')}`;
+        break;
+    }
+  }
+
+  return axiosRequest;
+};
+
 const prepareRequest = (request, collectionRoot) => {
   const headers = {};
   let contentTypeDefined = false;
@@ -30,36 +87,7 @@ const prepareRequest = (request, collectionRoot) => {
     headers: headers
   };
 
-  // Authentication
+  axiosRequest = setAuthHeaders(axiosRequest, request, collectionRoot);
-  // A request can override the collection auth with another auth
-  // But it cannot override the collection auth with no auth
-  // We will provide support for disabling the auth via scripting in the future
-  const collectionAuth = get(collectionRoot, 'request.auth');
-  if (collectionAuth) {
-    if (collectionAuth.mode === 'basic') {
-      axiosRequest.auth = {
-        username: get(collectionAuth, 'basic.username'),
-        password: get(collectionAuth, 'basic.password')
-      };
-    }
-
-    if (collectionAuth.mode === 'bearer') {
-      axiosRequest.headers['authorization'] = `Bearer ${get(collectionAuth, 'bearer.token')}`;
-    }
-  }
-
-  if (request.auth) {
-    if (request.auth.mode === 'basic') {
-      axiosRequest.auth = {
-        username: get(request, 'auth.basic.username'),
-        password: get(request, 'auth.basic.password')
-      };
-    }
-
-    if (request.auth.mode === 'bearer') {
-      axiosRequest.headers['authorization'] = `Bearer ${get(request, 'auth.bearer.token')}`;
-    }
-  }
 
   if (request.body.mode === 'json') {
     if (!contentTypeDefined) {
@@ -87,6 +115,13 @@ const prepareRequest = (request, collectionRoot) => {
     axiosRequest.data = request.body.xml;
   }
 
+  if (request.body.mode === 'sparql') {
+    if (!contentTypeDefined) {
+      axiosRequest.headers['content-type'] = 'application/sparql-query';
+    }
+    axiosRequest.data = request.body.sparql;
+  }
+
   if (request.body.mode === 'formUrlEncoded') {
     axiosRequest.headers['content-type'] = 'application/x-www-form-urlencoded';
     const params = {};
@@ -125,3 +160,4 @@ const prepareRequest = (request, collectionRoot) => {
 };
 
 module.exports = prepareRequest;
+module.exports.setAuthHeaders = setAuthHeaders;

packages/bruno-js/src/runtime/assert-runtime.js

@@ -6,6 +6,7 @@ const BrunoRequest = require('../bruno-request');
 const { evaluateJsTemplateLiteral, evaluateJsExpression, createResponseParser } = require('../utils');
 
 const { expect } = chai;
+chai.use(require('chai-string'));
 chai.use(function (chai, utils) {
   // Custom assertion for checking if a variable is JSON
   chai.Assertion.addProperty('json', function () {

packages/bruno-js/src/runtime/script-runtime.js

@@ -15,6 +15,7 @@ const BrunoResponse = require('../bruno-response');
 const { cleanJson } = require('../utils');
 
 // Inbuilt Library Support
+const ajv = require('ajv');
 const atob = require('atob');
 const btoa = require('btoa');
 const lodash = require('lodash');
@@ -70,6 +71,7 @@ class ScriptRuntime {
       };
       context.console = {
         log: customLogger('log'),
+        debug: customLogger('debug'),
         info: customLogger('info'),
         warn: customLogger('warn'),
         error: customLogger('error')
@@ -93,6 +95,7 @@ class ScriptRuntime {
           punycode,
           zlib,
           // 3rd party libs
+          ajv,
           atob,
           btoa,
           lodash,
@@ -182,6 +185,7 @@ class ScriptRuntime {
           punycode,
           zlib,
           // 3rd party libs
+          ajv,
           atob,
           btoa,
           lodash,

packages/bruno-js/src/runtime/test-runtime.js

@@ -18,13 +18,15 @@ const TestResults = require('../test-results');
 const { cleanJson } = require('../utils');
 
 // Inbuilt Library Support
+const ajv = require('ajv');
 const atob = require('atob');
-const axios = require('axios');
 const btoa = require('btoa');
 const lodash = require('lodash');
 const moment = require('moment');
 const uuid = require('uuid');
 const nanoid = require('nanoid');
+const axios = require('axios');
+const fetch = require('node-fetch');
 const CryptoJS = require('crypto-js');
 
 class TestRuntime {
@@ -111,14 +113,16 @@ class TestRuntime {
           punycode,
           zlib,
           // 3rd party libs
-          atob,
+          ajv,
-          axios,
           btoa,
+          atob,
           lodash,
           moment,
           uuid,
           nanoid,
+          axios,
           chai,
+          'node-fetch': fetch,
           'crypto-js': CryptoJS,
           ...whitelistedModules,
           fs: allowScriptFilesystemAccess ? fs : undefined

packages/bruno-lang/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usebruno/lang",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "license": "MIT",
   "main": "src/index.js",
   "files": [
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "arcsecond": "^5.0.0",
+    "dotenv": "^16.3.1",
     "lodash": "^4.17.21",
     "ohm-js": "^16.6.0"
   }

packages/bruno-lang/v2/src/bruToJson.js

@@ -23,8 +23,8 @@ const { outdentString } = require('../../v1/src/utils');
  */
 const grammar = ohm.grammar(`Bru {
   BruFile = (meta | http | query | headers | auths | bodies | varsandassert | script | tests | docs)*
-  auths = authbasic | authbearer 
+  auths = authawsv4 | authbasic | authbearer  
-  bodies = bodyjson | bodytext | bodyxml | bodygraphql | bodygraphqlvars | bodyforms | body
+  bodies = bodyjson | bodytext | bodyxml | bodysparql | bodygraphql | bodygraphqlvars | bodyforms | body
   bodyforms = bodyformurlencoded | bodymultipart
 
   nl = "\\r"? "\\n"
@@ -76,6 +76,7 @@ const grammar = ohm.grammar(`Bru {
   varsres = "vars:post-response" dictionary
   assert = "assert" assertdictionary
 
+  authawsv4 = "auth:awsv4" dictionary
   authbasic = "auth:basic" dictionary
   authbearer = "auth:bearer" dictionary
 
@@ -83,6 +84,7 @@ const grammar = ohm.grammar(`Bru {
   bodyjson = "body:json" st* "{" nl* textblock tagend
   bodytext = "body:text" st* "{" nl* textblock tagend
   bodyxml = "body:xml" st* "{" nl* textblock tagend
+  bodysparql = "body:sparql" st* "{" nl* textblock tagend
   bodygraphql = "body:graphql" st* "{" nl* textblock tagend
   bodygraphqlvars = "body:graphql:vars" st* "{" nl* textblock tagend
 
@@ -294,6 +296,33 @@ const sem = grammar.createSemantics().addAttribute('ast', {
       headers: mapPairListToKeyValPairs(dictionary.ast)
     };
   },
+  authawsv4(_1, dictionary) {
+    const auth = mapPairListToKeyValPairs(dictionary.ast, false);
+    const accessKeyIdKey = _.find(auth, { name: 'accessKeyId' });
+    const secretAccessKeyKey = _.find(auth, { name: 'secretAccessKey' });
+    const sessionTokenKey = _.find(auth, { name: 'sessionToken' });
+    const serviceKey = _.find(auth, { name: 'service' });
+    const regionKey = _.find(auth, { name: 'region' });
+    const profileNameKey = _.find(auth, { name: 'profileName' });
+    const accessKeyId = accessKeyIdKey ? accessKeyIdKey.value : '';
+    const secretAccessKey = secretAccessKeyKey ? secretAccessKeyKey.value : '';
+    const sessionToken = sessionTokenKey ? sessionTokenKey.value : '';
+    const service = serviceKey ? serviceKey.value : '';
+    const region = regionKey ? regionKey.value : '';
+    const profileName = profileNameKey ? profileNameKey.value : '';
+    return {
+      auth: {
+        awsv4: {
+          accessKeyId,
+          secretAccessKey,
+          sessionToken,
+          service,
+          region,
+          profileName
+        }
+      }
+    };
+  },
   authbasic(_1, dictionary) {
     const auth = mapPairListToKeyValPairs(dictionary.ast, false);
     const usernameKey = _.find(auth, { name: 'username' });
@@ -366,6 +395,13 @@ const sem = grammar.createSemantics().addAttribute('ast', {
       }
     };
   },
+  bodysparql(_1, _2, _3, _4, textblock, _5) {
+    return {
+      body: {
+        sparql: outdentString(textblock.sourceString)
+      }
+    };
+  },
   bodygraphql(_1, _2, _3, _4, textblock, _5) {
     return {
       body: {

packages/bruno-lang/v2/src/collectionBruToJson.js

@@ -4,7 +4,7 @@ const { outdentString } = require('../../v1/src/utils');
 
 const grammar = ohm.grammar(`Bru {
   BruFile = (meta | query | headers | auth | auths | vars | script | tests | docs)*
-  auths = authbasic | authbearer 
+  auths = authawsv4 | authbasic | authbearer 
 
   nl = "\\r"? "\\n"
   st = " " | "\\t"
@@ -38,6 +38,7 @@ const grammar = ohm.grammar(`Bru {
   varsreq = "vars:pre-request" dictionary
   varsres = "vars:post-response" dictionary
 
+  authawsv4 = "auth:awsv4" dictionary
   authbasic = "auth:basic" dictionary
   authbearer = "auth:bearer" dictionary
 
@@ -171,6 +172,33 @@ const sem = grammar.createSemantics().addAttribute('ast', {
       headers: mapPairListToKeyValPairs(dictionary.ast)
     };
   },
+  authawsv4(_1, dictionary) {
+    const auth = mapPairListToKeyValPairs(dictionary.ast, false);
+    const accessKeyIdKey = _.find(auth, { name: 'accessKeyId' });
+    const secretAccessKeyKey = _.find(auth, { name: 'secretAccessKey' });
+    const sessionTokenKey = _.find(auth, { name: 'sessionToken' });
+    const serviceKey = _.find(auth, { name: 'service' });
+    const regionKey = _.find(auth, { name: 'region' });
+    const profileNameKey = _.find(auth, { name: 'profileName' });
+    const accessKeyId = accessKeyIdKey ? accessKeyIdKey.value : '';
+    const secretAccessKey = secretAccessKeyKey ? secretAccessKeyKey.value : '';
+    const sessionToken = sessionTokenKey ? sessionTokenKey.value : '';
+    const service = serviceKey ? serviceKey.value : '';
+    const region = regionKey ? regionKey.value : '';
+    const profileName = profileNameKey ? profileNameKey.value : '';
+    return {
+      auth: {
+        awsv4: {
+          accessKeyId,
+          secretAccessKey,
+          sessionToken,
+          service,
+          region,
+          profileName
+        }
+      }
+    };
+  },
   authbasic(_1, dictionary) {
     const auth = mapPairListToKeyValPairs(dictionary.ast, false);
     const usernameKey = _.find(auth, { name: 'username' });

packages/bruno-lang/v2/src/dotenvToJson.js

@@ -1,80 +1,9 @@
-const ohm = require('ohm-js');
+const dotenv = require('dotenv');
-const _ = require('lodash');
-
-const grammar = ohm.grammar(`Env {
-  EnvFile = (entry)*
-  entry = st* key st* "=" st* value st* nl*
-  key = keychar*
-  value = valuechar*
-  keychar = ~(nl | st | nl | "=") any
-  valuechar = ~nl any
-  nl = "\\r"? "\\n"
-  st = " " | "\\t"
-}`);
-
-const concatArrays = (objValue, srcValue) => {
-  if (_.isArray(objValue) && _.isArray(srcValue)) {
-    return objValue.concat(srcValue);
-  }
-};
-
-const sem = grammar.createSemantics().addAttribute('ast', {
-  EnvFile(entries) {
-    return _.reduce(
-      entries.ast,
-      (result, item) => {
-        return _.mergeWith(result, item, concatArrays);
-      },
-      {}
-    );
-  },
-  entry(_1, key, _2, _3, _4, value, _5, _6) {
-    return { [key.ast.trim()]: value.ast.trim() };
-  },
-  key(chars) {
-    return chars.sourceString;
-  },
-  value(chars) {
-    return chars.sourceString;
-  },
-  nl(_1, _2) {
-    return '';
-  },
-  st(_) {
-    return '';
-  },
-  _iter(...elements) {
-    return elements.map((e) => e.ast);
-  }
-});
 
 const parser = (input) => {
-  const match = grammar.match(input);
+  const buf = Buffer.from(input);
-
+  const parsed = dotenv.parse(buf);
-  if (match.succeeded()) {
+  return parsed;
-    const ast = sem(match).ast;
-    return postProcessEntries(ast);
-  } else {
-    throw new Error(match.message);
-  }
 };
 
-function postProcessEntries(ast) {
-  const processed = {};
-
-  for (const key in ast) {
-    const value = ast[key];
-
-    if (!isNaN(value)) {
-      processed[key] = parseFloat(value); // Convert to number if it's a valid number
-    } else if (value.toLowerCase() === 'true' || value.toLowerCase() === 'false') {
-      processed[key] = value.toLowerCase() === 'true'; // Convert to boolean if it's 'true' or 'false'
-    } else {
-      processed[key] = value; // Otherwise, keep it as a string
-    }
-  }
-
-  return processed;
-}
-
 module.exports = parser;

packages/bruno-lang/v2/src/jsonToBru.js

@@ -87,6 +87,19 @@ const jsonToBru = (json) => {
     bru += '\n}\n\n';
   }
 
+  if (auth && auth.awsv4) {
+    bru += `auth:awsv4 {
+${indentString(`accessKeyId: ${auth.awsv4.accessKeyId}`)}
+${indentString(`secretAccessKey: ${auth.awsv4.secretAccessKey}`)}
+${indentString(`sessionToken: ${auth.awsv4.sessionToken}`)}
+${indentString(`service: ${auth.awsv4.service}`)}
+${indentString(`region: ${auth.awsv4.region}`)}
+${indentString(`profileName: ${auth.awsv4.profileName}`)}
+}
+
+`;
+  }
+
   if (auth && auth.basic) {
     bru += `auth:basic {
 ${indentString(`username: ${auth.basic.username}`)}
@@ -125,6 +138,14 @@ ${indentString(body.text)}
 ${indentString(body.xml)}
 }
 
+`;
+  }
+
+  if (body && body.sparql && body.sparql.length) {
+    bru += `body:sparql {
+${indentString(body.sparql)}
+}
+
 `;
   }
 

packages/bruno-lang/v2/src/jsonToCollectionBru.js

@@ -72,6 +72,19 @@ const jsonToCollectionBru = (json) => {
 ${indentString(`mode: ${auth.mode}`)}
 }
 
+`;
+  }
+
+  if (auth && auth.awsv4) {
+    bru += `auth:awsv4 {
+${indentString(`accessKeyId: ${auth.awsv4.accessKeyId}`)}
+${indentString(`secretAccessKey: ${auth.awsv4.secretAccessKey}`)}
+${indentString(`sessionToken: ${auth.awsv4.sessionToken}`)}
+${indentString(`service: ${auth.awsv4.service}`)}
+${indentString(`region: ${auth.awsv4.region}`)}
+${indentString(`profileName: ${auth.awsv4.profileName}`)}
+}
+
 `;
   }
 

packages/bruno-lang/v2/tests/dotenvToJson.spec.js

@@ -26,16 +26,25 @@ BEEP=false
 `;
     const expected = {
       FOO: 'bar',
-      BAZ: 2,
+      BAZ: '2',
-      BEEP: false
+      BEEP: 'false'
     };
     const output = parser(input);
     expect(output).toEqual(expected);
   });
 
-  test('it should handle leading and trailing whitespace', () => {
+  test('it should not strip leading and trailing whitespace when using quotes', () => {
     const input = `
-  SPACE  =  value
+SPACE="  value  "
+`;
+    const expected = { SPACE: '  value  ' };
+    const output = parser(input);
+    expect(output).toEqual(expected);
+  });
+
+  test('it should strip leading and trailing whitespace when NOT using quotes', () => {
+    const input = `
+SPACE=  value  
 `;
     const expected = { SPACE: 'value' };
     const output = parser(input);

packages/bruno-lang/v2/tests/fixtures/request.bru

@@ -22,6 +22,15 @@ headers {
   ~transaction-id: {{transactionId}}
 }
 
+auth:awsv4 {
+  accessKeyId: A12345678
+  secretAccessKey: thisisasecret
+  sessionToken: thisisafakesessiontoken
+  service: execute-api
+  region: us-east-1
+  profileName: test_profile
+}
+
 auth:basic {
   username: john
   password: secret
@@ -48,6 +57,13 @@ body:xml {
   </xml>
 }
 
+body:sparql {
+  SELECT * WHERE {
+    ?subject ?predicate ?object .
+  }
+  LIMIT 10
+}
+
 body:form-urlencoded {
   apikey: secret
   numbers: +91998877665

packages/bruno-lang/v2/tests/fixtures/request.json

@@ -45,6 +45,14 @@
     }
   ],
   "auth": {
+    "awsv4": {
+      "accessKeyId": "A12345678",
+      "secretAccessKey": "thisisasecret",
+      "sessionToken": "thisisafakesessiontoken",
+      "service": "execute-api",
+      "region": "us-east-1",
+      "profileName": "test_profile"
+    },
     "basic": {
       "username": "john",
       "password": "secret"
@@ -57,6 +65,7 @@
     "json": "{\n  \"hello\": \"world\"\n}",
     "text": "This is a text body",
     "xml": "<xml>\n  <name>John</name>\n  <age>30</age>\n</xml>",
+    "sparql": "SELECT * WHERE {\n  ?subject ?predicate ?object .\n}\nLIMIT 10",
     "graphql": {
       "query": "{\n  launchesPast {\n    launch_site {\n      site_name\n    }\n    launch_success\n  }\n}",
       "variables": "{\n  \"limit\": 5\n}"

packages/bruno-schema/src/collections/index.js

@@ -57,11 +57,12 @@ const graphqlBodySchema = Yup.object({
 
 const requestBodySchema = Yup.object({
   mode: Yup.string()
-    .oneOf(['none', 'json', 'text', 'xml', 'formUrlEncoded', 'multipartForm', 'graphql'])
+    .oneOf(['none', 'json', 'text', 'xml', 'formUrlEncoded', 'multipartForm', 'graphql', 'sparql'])
     .required('mode is required'),
   json: Yup.string().nullable(),
   text: Yup.string().nullable(),
   xml: Yup.string().nullable(),
+  sparql: Yup.string().nullable(),
   formUrlEncoded: Yup.array().of(keyValueSchema).nullable(),
   multipartForm: Yup.array().of(keyValueSchema).nullable(),
   graphql: graphqlBodySchema.nullable()
@@ -69,6 +70,17 @@ const requestBodySchema = Yup.object({
   .noUnknown(true)
   .strict();
 
+const authAwsV4Schema = Yup.object({
+  accessKeyId: Yup.string().nullable(),
+  secretAccessKey: Yup.string().nullable(),
+  sessionToken: Yup.string().nullable(),
+  service: Yup.string().nullable(),
+  region: Yup.string().nullable(),
+  profileName: Yup.string().nullable()
+})
+  .noUnknown(true)
+  .strict();
+
 const authBasicSchema = Yup.object({
   username: Yup.string().nullable(),
   password: Yup.string().nullable()
@@ -83,7 +95,8 @@ const authBearerSchema = Yup.object({
   .strict();
 
 const authSchema = Yup.object({
-  mode: Yup.string().oneOf(['none', 'basic', 'bearer']).required('mode is required'),
+  mode: Yup.string().oneOf(['none', 'awsv4', 'basic', 'bearer']).required('mode is required'),
+  awsv4: authAwsV4Schema.nullable(),
   basic: authBasicSchema.nullable(),
   bearer: authBearerSchema.nullable()
 })
@@ -114,7 +127,8 @@ const requestSchema = Yup.object({
     .strict()
     .nullable(),
   assertions: Yup.array().of(keyValueSchema).nullable(),
-  tests: Yup.string().nullable()
+  tests: Yup.string().nullable(),
+  docs: Yup.string().nullable()
 })
   .noUnknown(true)
   .strict();

scripts/build-electron.sh

@@ -19,4 +19,24 @@ sed -i'' -e 's@/_next/@_next/@g' packages/bruno-electron/web/**.html
 # Remove sourcemaps
 find packages/bruno-electron/web -name '*.map' -type f -delete
 
-npm run dist --workspace=packages/bruno-electron 
+if [ "$1" == "snap" ]; then
+  echo "Building snap distribution"
+  npm run dist:snap --workspace=packages/bruno-electron 
+elif [ "$1" == "mac" ]; then
+  echo "Building mac distribution"
+  npm run dist:mac --workspace=packages/bruno-electron
+elif [ "$1" == "win" ]; then
+  echo "Building windows distribution"
+  npm run dist:win --workspace=packages/bruno-electron
+elif [ "$1" == "deb" ]; then
+  echo "Building debian distribution"
+  npm run dist:deb --workspace=packages/bruno-electron
+elif [ "$1" == "rpm" ]; then
+  echo "Building rpm distribution"
+  npm run dist:rpm --workspace=packages/bruno-electron
+elif [ "$1" == "linux" ]; then
+  echo "Building linux distribution"
+  npm run dist:linux --workspace=packages/bruno-electron
+else
+  echo "Please pass a build distribution type"
+fi