feat(#334): collection level headers, auth, scripts and tests

2024-11-21 23:43:15 +01:00 · 2023-10-09 06:18:05 +05:30 · 2023-10-09 06:18:05 +05:30 · 1ce8d707f1
commit 1ce8d707f1
parent 159dd90b03
31 changed files with 1380 additions and 328 deletions
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js
@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  font-size: 0.8125rem;
+
+  .auth-mode-selector {
+    background: transparent;
+
+    .auth-mode-label {
+      color: ${(props) => props.theme.colors.text.yellow};
+    }
+
+    .dropdown-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+
+    .label-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+  }
+
+  .caret {
+    color: rgb(140, 140, 140);
+    fill: rgb(140 140 140);
+  }
+`;
+
+export default Wrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js
@ -0,0 +1,69 @@
+import React, { useRef, forwardRef } from 'react';
+import get from 'lodash/get';
+import { IconCaretDown } from '@tabler/icons';
+import Dropdown from 'components/Dropdown';
+import { useDispatch } from 'react-redux';
+import { updateCollectionAuthMode } from 'providers/ReduxStore/slices/collections';
+import { humanizeRequestAuthMode } from 'utils/collections';
+import StyledWrapper from './StyledWrapper';
+
+const AuthMode = ({ collection }) => {
+  const dispatch = useDispatch();
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+  const authMode = get(collection, 'root.request.auth.mode');
+
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex items-center justify-center auth-mode-label select-none">
+        {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
+
+  const onModeChange = (value) => {
+    dispatch(
+      updateCollectionAuthMode({
+        collectionUid: collection.uid,
+        mode: value
+      })
+    );
+  };
+
+  return (
+    <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('basic');
+            }}
+          >
+            Basic Auth
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('bearer');
+            }}
+          >
+            Bearer Token
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('none');
+            }}
+          >
+            No Auth
+          </div>
+        </Dropdown>
+      </div>
+    </StyledWrapper>
+  );
+};
+export default AuthMode;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/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;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.js
@ -0,0 +1,71 @@
+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 BasicAuth = ({ collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const basicAuth = get(collection, 'root.request.auth.basic', {});
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+  const handleUsernameChange = (username) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'basic',
+        collectionUid: collection.uid,
+        content: {
+          username: username,
+          password: basicAuth.password
+        }
+      })
+    );
+  };
+
+  const handlePasswordChange = (password) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'basic',
+        collectionUid: collection.uid,
+        content: {
+          username: basicAuth.username,
+          password: password
+        }
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="mt-2 w-full">
+      <label className="block font-medium mb-2">Username</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={basicAuth.username || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleUsernameChange(val)}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Password</label>
+      <div className="single-line-editor-wrapper">
+        <SingleLineEditor
+          value={basicAuth.password || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handlePasswordChange(val)}
+          collection={collection}
+        />
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default BasicAuth;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/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;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js
@ -0,0 +1,46 @@
+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 BearerAuth = ({ collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const bearerToken = get(collection, 'root.request.auth.bearer.token');
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+  const handleTokenChange = (token) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'bearer',
+        collectionUid: collection.uid,
+        content: {
+          token: token
+        }
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="mt-2 w-full">
+      <label className="block font-medium mb-2">Token</label>
+      <div className="single-line-editor-wrapper">
+        <SingleLineEditor
+          value={bearerToken}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleTokenChange(val)}
+          collection={collection}
+        />
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default BearerAuth;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/StyledWrapper.js
@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div``;
+
+export default Wrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/index.js
@ -0,0 +1,42 @@
+import React from 'react';
+import get from 'lodash/get';
+import { useDispatch } from 'react-redux';
+import AuthMode from './AuthMode';
+import BearerAuth from './BearerAuth';
+import BasicAuth from './BasicAuth';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+
+const Auth = ({ collection }) => {
+  const authMode = get(collection, 'root.request.auth.mode');
+  const dispatch = useDispatch();
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+  const getAuthView = () => {
+    switch (authMode) {
+      case 'basic': {
+        return <BasicAuth collection={collection} />;
+      }
+      case 'bearer': {
+        return <BearerAuth collection={collection} />;
+      }
+    }
+  };
+
+  return (
+    <StyledWrapper className="w-full mt-2">
+      <div className="flex flex-grow justify-start items-center">
+        <AuthMode collection={collection} />
+      </div>
+      {getAuthView()}
+
+      <div className="mt-6">
+        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+          Save
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+};
+export default Auth;
--- a/packages/bruno-app/src/components/CollectionSettings/Headers/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Headers/StyledWrapper.js
@ -0,0 +1,56 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-weight: 600;
+    table-layout: fixed;
+
+    thead,
+    td {
+      border: 1px solid ${(props) => props.theme.table.border};
+    }
+
+    thead {
+      color: ${(props) => props.theme.table.thead.color};
+      font-size: 0.8125rem;
+      user-select: none;
+    }
+    td {
+      padding: 6px 10px;
+
+      &:nth-child(1) {
+        width: 30%;
+      }
+
+      &:nth-child(3) {
+        width: 70px;
+      }
+    }
+  }
+
+  .btn-add-header {
+    font-size: 0.8125rem;
+  }
+
+  input[type='text'] {
+    width: 100%;
+    border: solid 1px transparent;
+    outline: none !important;
+    background-color: inherit;
+
+    &:focus {
+      outline: none !important;
+      border: solid 1px transparent;
+    }
+  }
+
+  input[type='checkbox'] {
+    cursor: pointer;
+    position: relative;
+    top: 1px;
+  }
+`;
+
+export default Wrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Headers/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Headers/index.js
@ -0,0 +1,151 @@
+import React from 'react';
+import get from 'lodash/get';
+import cloneDeep from 'lodash/cloneDeep';
+import { IconTrash } from '@tabler/icons';
+import { useDispatch } from 'react-redux';
+import { useTheme } from 'providers/Theme';
+import {
+  addCollectionHeader,
+  updateCollectionHeader,
+  deleteCollectionHeader
+} from 'providers/ReduxStore/slices/collections';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import SingleLineEditor from 'components/SingleLineEditor';
+import StyledWrapper from './StyledWrapper';
+import { headers as StandardHTTPHeaders } from 'know-your-http-well';
+const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
+
+const Headers = ({ collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+  const headers = get(collection, 'root.request.headers', []);
+
+  const addHeader = () => {
+    dispatch(
+      addCollectionHeader({
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleHeaderValueChange = (e, _header, type) => {
+    const header = cloneDeep(_header);
+    switch (type) {
+      case 'name': {
+        header.name = e.target.value;
+        break;
+      }
+      case 'value': {
+        header.value = e.target.value;
+        break;
+      }
+      case 'enabled': {
+        header.enabled = e.target.checked;
+        break;
+      }
+    }
+    dispatch(
+      updateCollectionHeader({
+        header: header,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  const handleRemoveHeader = (header) => {
+    dispatch(
+      deleteCollectionHeader({
+        headerUid: header.uid,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="w-full">
+      <table>
+        <thead>
+          <tr>
+            <td>Name</td>
+            <td>Value</td>
+            <td></td>
+          </tr>
+        </thead>
+        <tbody>
+          {headers && headers.length
+            ? headers.map((header) => {
+                return (
+                  <tr key={header.uid}>
+                    <td>
+                      <SingleLineEditor
+                        value={header.name}
+                        theme={storedTheme}
+                        onSave={handleSave}
+                        onChange={(newValue) =>
+                          handleHeaderValueChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            header,
+                            'name'
+                          )
+                        }
+                        autocomplete={headerAutoCompleteList}
+                        collection={collection}
+                      />
+                    </td>
+                    <td>
+                      <SingleLineEditor
+                        value={header.value}
+                        theme={storedTheme}
+                        onSave={handleSave}
+                        onChange={(newValue) =>
+                          handleHeaderValueChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            header,
+                            'value'
+                          )
+                        }
+                        collection={collection}
+                      />
+                    </td>
+                    <td>
+                      <div className="flex items-center">
+                        <input
+                          type="checkbox"
+                          checked={header.enabled}
+                          tabIndex="-1"
+                          className="mr-3 mousetrap"
+                          onChange={(e) => handleHeaderValueChange(e, header, 'enabled')}
+                        />
+                        <button tabIndex="-1" onClick={() => handleRemoveHeader(header)}>
+                          <IconTrash strokeWidth={1.5} size={20} />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            : null}
+        </tbody>
+      </table>
+      <button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
+        + Add Header
+      </button>
+
+      <div className="mt-6">
+        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+          Save
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+};
+export default Headers;
--- a/packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js
@ -49,15 +49,14 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {

  return (
    <StyledWrapper>
-      <h1 className="font-medium mb-3">Proxy Settings</h1>
      <form className="bruno-form" onSubmit={formik.handleSubmit}>
-        <div className="ml-4 mb-3 flex items-center">
+        <div className="mb-3 flex items-center">
          <label className="settings-label" htmlFor="enabled">
            Enabled
          </label>
          <input type="checkbox" name="enabled" checked={formik.values.enabled} onChange={formik.handleChange} />
        </div>
-        <div className="ml-4 mb-3 flex items-center">
+        <div className="mb-3 flex items-center">
          <label className="settings-label" htmlFor="protocol">
            Protocol
          </label>
@ -86,7 +85,7 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
            </label>
          </div>
        </div>
-        <div className="ml-4 mb-3 flex items-center">
+        <div className="mb-3 flex items-center">
          <label className="settings-label" htmlFor="hostname">
            Hostname
          </label>
@ -106,7 +105,7 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
            <div className="text-red-500">{formik.errors.hostname}</div>
          ) : null}
        </div>
-        <div className="ml-4 mb-3 flex items-center">
+        <div className="mb-3 flex items-center">
          <label className="settings-label" htmlFor="port">
            Port
          </label>
@ -124,7 +123,7 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
          />
          {formik.touched.port && formik.errors.port ? <div className="text-red-500">{formik.errors.port}</div> : null}
        </div>
-        <div className="ml-4 mb-3 flex items-center">
+        <div className="mb-3 flex items-center">
          <label className="settings-label" htmlFor="auth.enabled">
            Auth
          </label>
@ -136,7 +135,7 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
          />
        </div>
        <div>
-          <div className="ml-4 mb-3 flex items-center">
+          <div className="mb-3 flex items-center">
            <label className="settings-label" htmlFor="auth.username">
              Username
            </label>
@ -156,7 +155,7 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
              <div className="text-red-500">{formik.errors.auth.username}</div>
            ) : null}
          </div>
-          <div className="ml-4 mb-3 flex items-center">
+          <div className="mb-3 flex items-center">
            <label className="settings-label" htmlFor="auth.password">
              Password
            </label>
@ -178,7 +177,7 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
          </div>
        </div>
        <div className="mt-6">
-          <button type="submit" className="submit btn btn-md btn-secondary">
+          <button type="submit" className="submit btn btn-sm btn-secondary">
            Save
          </button>
        </div>
--- a/packages/bruno-app/src/components/CollectionSettings/Script/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Script/StyledWrapper.js
@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  div.CodeMirror {
+    height: inherit;
+  }
+
+  div.title {
+    color: var(--color-tab-inactive);
+  }
+`;
+
+export default StyledWrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Script/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Script/index.js
@ -0,0 +1,73 @@
+import React from 'react';
+import get from 'lodash/get';
+import { useDispatch } from 'react-redux';
+import CodeEditor from 'components/CodeEditor';
+import { updateCollectionRequestScript, updateCollectionResponseScript } from 'providers/ReduxStore/slices/collections';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { useTheme } from 'providers/Theme';
+import StyledWrapper from './StyledWrapper';
+
+const Script = ({ collection }) => {
+  const dispatch = useDispatch();
+  const requestScript = get(collection, 'root.request.script.req', '');
+  const responseScript = get(collection, 'root.request.script.res', '');
+
+  const { storedTheme } = useTheme();
+
+  const onRequestScriptEdit = (value) => {
+    dispatch(
+      updateCollectionRequestScript({
+        script: value,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  const onResponseScriptEdit = (value) => {
+    dispatch(
+      updateCollectionResponseScript({
+        script: value,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  const handleSave = () => {
+    dispatch(saveCollectionRoot(collection.uid));
+  };
+
+  return (
+    <StyledWrapper className="w-full flex flex-col">
+      <div className="flex-1 mt-2">
+        <div className="mb-1 title text-xs">Pre Request</div>
+        <CodeEditor
+          collection={collection}
+          value={requestScript || ''}
+          theme={storedTheme}
+          onEdit={onRequestScriptEdit}
+          mode="javascript"
+          onSave={handleSave}
+        />
+      </div>
+      <div className="flex-1 mt-6">
+        <div className="mt-1 mb-1 title text-xs">Post Response</div>
+        <CodeEditor
+          collection={collection}
+          value={responseScript || ''}
+          theme={storedTheme}
+          onEdit={onResponseScriptEdit}
+          mode="javascript"
+          onSave={handleSave}
+        />
+      </div>
+
+      <div className="mt-12">
+        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+          Save
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default Script;
--- a/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
@ -1,6 +1,32 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
+  max-width: 800px;
+
+  div.tabs {
+    div.tab {
+      padding: 6px 0px;
+      border: none;
+      border-bottom: solid 2px transparent;
+      margin-right: 1.25rem;
+      color: var(--color-tab-inactive);
+      cursor: pointer;
+
+      &:focus,
+      &:active,
+      &:focus-within,
+      &:focus-visible,
+      &:target {
+        outline: none !important;
+        box-shadow: none !important;
+      }
+
+      &.active {
+        color: ${(props) => props.theme.tabs.active.color} !important;
+        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
+      }
+    }
+  }
  table {
    thead,
    td {
--- a/packages/bruno-app/src/components/CollectionSettings/Tests/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Tests/StyledWrapper.js
@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div``;
+
+export default StyledWrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Tests/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Tests/index.js
@ -0,0 +1,47 @@
+import React from 'react';
+import get from 'lodash/get';
+import { useDispatch } from 'react-redux';
+import CodeEditor from 'components/CodeEditor';
+import { updateCollectionTests } from 'providers/ReduxStore/slices/collections';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { useTheme } from 'providers/Theme';
+import StyledWrapper from './StyledWrapper';
+
+const Tests = ({ collection }) => {
+  const dispatch = useDispatch();
+  const tests = get(collection, 'root.request.tests', '');
+
+  const { storedTheme } = useTheme();
+
+  const onEdit = (value) => {
+    dispatch(
+      updateCollectionTests({
+        tests: value,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+  return (
+    <StyledWrapper className="w-full flex flex-col h-full">
+      <CodeEditor
+        collection={collection}
+        value={tests || ''}
+        theme={storedTheme}
+        onEdit={onEdit}
+        mode="javascript"
+        onSave={handleSave}
+      />
+
+      <div className="mt-6">
+        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+          Save
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default Tests;
--- a/packages/bruno-app/src/components/CollectionSettings/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/index.js
@ -1,14 +1,29 @@
 import React from 'react';
+import classnames from 'classnames';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import toast from 'react-hot-toast';
 import { updateBrunoConfig } from 'providers/ReduxStore/slices/collections/actions';
+import { updateSettingsSelectedTab } from 'providers/ReduxStore/slices/collections';
 import { useDispatch } from 'react-redux';
 import ProxySettings from './ProxySettings';
+import Headers from './Headers';
+import Auth from './Auth';
+import Script from './Script';
+import Test from './Tests';
 import StyledWrapper from './StyledWrapper';

 const CollectionSettings = ({ collection }) => {
  const dispatch = useDispatch();
+  const tab = collection.settingsSelectedTab;
+  const setTab = (tab) => {
+    dispatch(
+      updateSettingsSelectedTab({
+        collectionUid: collection.uid,
+        tab
+      })
+    );
+  };

  const proxyConfig = get(collection, 'brunoConfig.proxy', {});

@ -22,11 +37,52 @@ const CollectionSettings = ({ collection }) => {
      .catch((err) => console.log(err) && toast.error('Failed to update collection settings'));
  };

-  return (
-    <StyledWrapper className="px-4 py-4">
-      <h1 className="font-semibold mb-4">Collection Settings</h1>
+  const getTabPanel = (tab) => {
+    switch (tab) {
+      case 'headers': {
+        return <Headers collection={collection} />;
+      }
+      case 'auth': {
+        return <Auth collection={collection} />;
+      }
+      case 'script': {
+        return <Script collection={collection} />;
+      }
+      case 'tests': {
+        return <Test collection={collection} />;
+      }
+      case 'proxy': {
+        return <ProxySettings proxyConfig={proxyConfig} onUpdate={onProxySettingsUpdate} />;
+      }
+    }
+  };

-      <ProxySettings proxyConfig={proxyConfig} onUpdate={onProxySettingsUpdate} />
+  const getTabClassname = (tabName) => {
+    return classnames(`tab select-none ${tabName}`, {
+      active: tabName === tab
+    });
+  };
+
+  return (
+    <StyledWrapper className="flex flex-col h-full relative px-4 py-4">
+      <div className="flex flex-wrap items-center tabs" role="tablist">
+        <div className={getTabClassname('headers')} role="tab" onClick={() => setTab('headers')}>
+          Headers
+        </div>
+        <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
+          Auth
+        </div>
+        <div className={getTabClassname('script')} role="tab" onClick={() => setTab('script')}>
+          Script
+        </div>
+        <div className={getTabClassname('tests')} role="tab" onClick={() => setTab('tests')}>
+          Tests
+        </div>
+        <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
+          Proxy
+        </div>
+      </div>
+      <section className={`flex ${['auth', 'script'].includes(tab) ? '' : 'mt-4'}`}>{getTabPanel(tab)}</section>
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js
@ -8,7 +8,7 @@ const SpecialTab = ({ handleCloseClick, type }) => {
        return (
          <>
            <IconSettings size={18} strokeWidth={1.5} className="text-yellow-600" />
-            <span className="ml-1">Settings</span>
+            <span className="ml-1">Collection</span>
          </>
        );
      }
--- a/packages/bruno-app/src/providers/Hotkeys/index.js
+++ b/packages/bruno-app/src/providers/Hotkeys/index.js
@ -51,7 +51,8 @@ export const HotkeysProvider = (props) => {
          if (item && item.uid) {
            dispatch(saveRequest(activeTab.uid, activeTab.collectionUid));
          } else {
-            setShowSaveRequestModal(true);
+            // todo: when ephermal requests go live
+            // setShowSaveRequestModal(true);
          }
        }
      }
--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
@ -91,6 +91,29 @@ export const saveRequest = (itemUid, collectionUid) => (dispatch, getState) => {
  });
 };

+export const saveCollectionRoot = (collectionUid) => (dispatch, getState) => {
+  const state = getState();
+  const collection = findCollectionByUid(state.collections.collections, collectionUid);
+  console.log(collection.root);
+
+  return new Promise((resolve, reject) => {
+    if (!collection) {
+      return reject(new Error('Collection not found'));
+    }
+
+    const { ipcRenderer } = window;
+
+    ipcRenderer
+      .invoke('renderer:save-collection-root', collection.pathname, collection.root)
+      .then(() => toast.success('Collection Settings saved successfully'))
+      .then(resolve)
+      .catch((err) => {
+        toast.error('Failed to save collection settings!');
+        reject(err);
+      });
+  });
+};
+
 export const sendRequest = (item, collectionUid) => (dispatch, getState) => {
  const state = getState();
  const collection = findCollectionByUid(state.collections.collections, collectionUid);
--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
@ -7,6 +7,8 @@ import concat from 'lodash/concat';
 import filter from 'lodash/filter';
 import each from 'lodash/each';
 import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
+import set from 'lodash/set';
 import { createSlice } from '@reduxjs/toolkit';
 import { splitOnFirst } from 'utils/url';
 import {
@ -40,6 +42,8 @@ export const collectionsSlice = createSlice({
      const collectionUids = map(state.collections, (c) => c.uid);
      const collection = action.payload;

+      collection.settingsSelectedTab = 'headers';
+
      // TODO: move this to use the nextAction approach
      // last action is used to track the last action performed on the collection
      // this is optional
@ -107,6 +111,15 @@ export const collectionsSlice = createSlice({
        collection.nextAction = nextAction;
      }
    },
+    updateSettingsSelectedTab: (state, action) => {
+      const { collectionUid, tab } = action.payload;
+
+      const collection = findCollectionByUid(state.collections, collectionUid);
+
+      if (collection) {
+        collection.settingsSelectedTab = tab;
+      }
+    },
    collectionUnlinkEnvFileEvent: (state, action) => {
      const { data: environment, meta } = action.payload;
      const collection = findCollectionByUid(state.collections, meta.collectionUid);
@ -930,10 +943,100 @@ export const collectionsSlice = createSlice({
        }
      }
    },
+    updateCollectionAuthMode: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if (collection) {
+        set(collection, 'root.request.auth.mode', action.payload.mode);
+      }
+    },
+    updateCollectionAuth: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if (collection) {
+        switch (action.payload.mode) {
+          case 'bearer':
+            set(collection, 'root.request.auth.bearer', action.payload.content);
+            break;
+          case 'basic':
+            set(collection, 'root.request.auth.basic', action.payload.content);
+            break;
+        }
+      }
+    },
+    updateCollectionRequestScript: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if (collection) {
+        set(collection, 'root.request.script.req', action.payload.script);
+      }
+    },
+    updateCollectionResponseScript: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if (collection) {
+        set(collection, 'root.request.script.res', action.payload.script);
+      }
+    },
+
+    updateCollectionTests: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if (collection) {
+        set(collection, 'root.request.tests', action.payload.tests);
+      }
+    },
+    addCollectionHeader: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if (collection) {
+        const headers = get(collection, 'root.request.headers', []);
+        headers.push({
+          uid: uuid(),
+          name: '',
+          value: '',
+          description: '',
+          enabled: true
+        });
+        set(collection, 'root.request.headers', headers);
+      }
+    },
+    updateCollectionHeader: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if (collection) {
+        const headers = get(collection, 'root.request.headers', []);
+        const header = find(headers, (h) => h.uid === action.payload.header.uid);
+        if (header) {
+          header.name = action.payload.header.name;
+          header.value = action.payload.header.value;
+          header.description = action.payload.header.description;
+          header.enabled = action.payload.header.enabled;
+        }
+      }
+    },
+    deleteCollectionHeader: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if (collection) {
+        let headers = get(collection, 'root.request.headers', []);
+        headers = filter(headers, (h) => h.uid !== action.payload.headerUid);
+        set(collection, 'root.request.headers', headers);
+      }
+    },
    collectionAddFileEvent: (state, action) => {
      const file = action.payload.file;
+      const isCollectionRoot = file.meta.collectionRoot ? true : false;
      const collection = findCollectionByUid(state.collections, file.meta.collectionUid);

+      if (isCollectionRoot) {
+        if (collection) {
+          collection.root = file.data;
+        }
+        console.log('collectionAddFileEvent', file);
+        return;
+      }
+
      if (collection) {
        const dirname = getDirectoryName(file.meta.pathname);
        const subDirectories = getSubdirectoriesFromRoot(collection.pathname, dirname);
@ -1018,6 +1121,12 @@ export const collectionsSlice = createSlice({
      const { file } = action.payload;
      const collection = findCollectionByUid(state.collections, file.meta.collectionUid);

+      // check and update collection root
+      if (collection && file.meta.collectionRoot) {
+        collection.root = file.data;
+        return;
+      }
+
      if (collection) {
        const item = findItemInCollection(collection, file.data.uid);

@ -1222,6 +1331,7 @@ export const {
  sortCollections,
  updateLastAction,
  updateNextAction,
+  updateSettingsSelectedTab,
  collectionUnlinkEnvFileEvent,
  saveEnvironment,
  selectEnvironment,
@ -1267,6 +1377,14 @@ export const {
  addVar,
  updateVar,
  deleteVar,
+  addCollectionHeader,
+  updateCollectionHeader,
+  deleteCollectionHeader,
+  updateCollectionAuthMode,
+  updateCollectionAuth,
+  updateCollectionRequestScript,
+  updateCollectionResponseScript,
+  updateCollectionTests,
  collectionAddFileEvent,
  collectionAddDirectoryEvent,
  collectionChangeFileEvent,
--- a/packages/bruno-app/src/styles/globals.css
+++ b/packages/bruno-app/src/styles/globals.css
@ -54,8 +54,11 @@ body::-webkit-scrollbar-thumb,
  border-radius: 5rem;
 }

-/* making all the checkboxes and radios bigger */
-input[type='checkbox'],
-input[type='radio'] {
-  transform: scale(1.25);
-}
+/* 
+ * todo: this will be supported in the future to be changed via applying a theme
+ * making all the checkboxes and radios bigger
+ * input[type='checkbox'],
+ * input[type='radio'] {
+ * transform: scale(1.1);
+ * }
+ */
--- a/packages/bruno-app/src/utils/network/index.js
+++ b/packages/bruno-app/src/utils/network/index.js
@ -23,7 +23,7 @@ const sendHttpRequest = async (item, collection, environment, collectionVariable
    const { ipcRenderer } = window;

    ipcRenderer
-      .invoke('send-http-request', item, collection.uid, collection.pathname, environment, collectionVariables)
+      .invoke('send-http-request', item, collection, environment, collectionVariables)
      .then(resolve)
      .catch(reject);
  });
--- a/packages/bruno-electron/src/app/watcher.js
+++ b/packages/bruno-electron/src/app/watcher.js
@ -3,7 +3,7 @@ const fs = require('fs');
 const path = require('path');
 const chokidar = require('chokidar');
 const { hasBruExtension } = require('../utils/filesystem');
-const { bruToEnvJson, bruToJson } = require('../bru');
+const { bruToEnvJson, bruToJson, collectionBruToJson } = require('../bru');
 const { dotenvToJson } = require('@usebruno/lang');

 const { uuid } = require('../utils/common');
@ -37,6 +37,13 @@ const isBruEnvironmentConfig = (pathname, collectionPath) => {
  return dirname === envDirectory && hasBruExtension(basename);
 };

+const isCollectionRootBruFile = (pathname, collectionPath) => {
+  const dirname = path.dirname(pathname);
+  const basename = path.basename(pathname);
+
+  return dirname === collectionPath && basename === 'collection.bru';
+};
+
 const hydrateRequestWithUuid = (request, pathname) => {
  request.uid = getRequestUid(pathname);

@ -59,6 +66,20 @@ const hydrateRequestWithUuid = (request, pathname) => {
  return request;
 };

+const hydrateBruCollectionFileWithUuid = (collectionRoot) => {
+  const params = _.get(collectionRoot, 'request.params', []);
+  const headers = _.get(collectionRoot, 'request.headers', []);
+  const requestVars = _.get(collectionRoot, 'request.vars.req', []);
+  const responseVars = _.get(collectionRoot, 'request.vars.res', []);
+
+  params.forEach((param) => (param.uid = uuid()));
+  headers.forEach((header) => (header.uid = uuid()));
+  requestVars.forEach((variable) => (variable.uid = uuid()));
+  responseVars.forEach((variable) => (variable.uid = uuid()));
+
+  return collectionRoot;
+};
+
 const envHasSecrets = (environment = {}) => {
  const secrets = _.filter(environment.variables, (v) => v.secret);

@ -195,6 +216,30 @@ const add = async (win, pathname, collectionUid, collectionPath) => {
    return addEnvironmentFile(win, pathname, collectionUid, collectionPath);
  }

+  if (isCollectionRootBruFile(pathname, collectionPath)) {
+    const file = {
+      meta: {
+        collectionUid,
+        pathname,
+        name: path.basename(pathname),
+        collectionRoot: true
+      }
+    };
+
+    try {
+      let bruContent = fs.readFileSync(pathname, 'utf8');
+
+      file.data = collectionBruToJson(bruContent);
+
+      hydrateBruCollectionFileWithUuid(file.data);
+      win.webContents.send('main:collection-tree-updated', 'addFile', file);
+      return;
+    } catch (err) {
+      console.error(err);
+      return;
+    }
+  }
+
  if (hasBruExtension(pathname)) {
    const file = {
      meta: {
@ -208,6 +253,7 @@ const add = async (win, pathname, collectionUid, collectionPath) => {
      let bruContent = fs.readFileSync(pathname, 'utf8');

      file.data = bruToJson(bruContent);
+
      hydrateRequestWithUuid(file.data, pathname);
      win.webContents.send('main:collection-tree-updated', 'addFile', file);
    } catch (err) {
@ -274,6 +320,30 @@ const change = async (win, pathname, collectionUid, collectionPath) => {
    return changeEnvironmentFile(win, pathname, collectionUid, collectionPath);
  }

+  if (isCollectionRootBruFile(pathname, collectionPath)) {
+    const file = {
+      meta: {
+        collectionUid,
+        pathname,
+        name: path.basename(pathname),
+        collectionRoot: true
+      }
+    };
+
+    try {
+      let bruContent = fs.readFileSync(pathname, 'utf8');
+
+      file.data = collectionBruToJson(bruContent);
+
+      hydrateBruCollectionFileWithUuid(file.data);
+      win.webContents.send('main:collection-tree-updated', 'change', file);
+      return;
+    } catch (err) {
+      console.error(err);
+      return;
+    }
+  }
+
  if (hasBruExtension(pathname)) {
    try {
      const file = {
--- a/packages/bruno-electron/src/bru/index.js
+++ b/packages/bruno-electron/src/bru/index.js
@ -1,5 +1,56 @@
 const _ = require('lodash');
-const { bruToJsonV2, jsonToBruV2, bruToEnvJsonV2, envJsonToBruV2 } = require('@usebruno/lang');
+const {
+  bruToJsonV2,
+  jsonToBruV2,
+  bruToEnvJsonV2,
+  envJsonToBruV2,
+  collectionBruToJson: _collectionBruToJson,
+  jsonToCollectionBru: _jsonToCollectionBru
+} = require('@usebruno/lang');
+
+const collectionBruToJson = (bru) => {
+  try {
+    const json = _collectionBruToJson(bru);
+
+    const transformedJson = {
+      request: {
+        params: _.get(json, 'query', []),
+        headers: _.get(json, 'headers', []),
+        auth: _.get(json, 'auth', {}),
+        script: _.get(json, 'script', {}),
+        vars: _.get(json, 'vars', {}),
+        tests: _.get(json, 'tests', '')
+      }
+    };
+
+    return transformedJson;
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};
+
+const jsonToCollectionBru = (json) => {
+  try {
+    const collectionBruJson = {
+      query: _.get(json, 'request.params', []),
+      headers: _.get(json, 'request.headers', []),
+      auth: _.get(json, 'request.auth', {}),
+      script: {
+        req: _.get(json, 'request.script.req', ''),
+        res: _.get(json, 'request.script.res', '')
+      },
+      vars: {
+        req: _.get(json, 'request.vars.req', []),
+        res: _.get(json, 'request.vars.req', [])
+      },
+      tests: _.get(json, 'request.tests', '')
+    };
+
+    return _jsonToCollectionBru(collectionBruJson);
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};

 const bruToEnvJson = (bru) => {
  try {
@ -128,5 +179,7 @@ module.exports = {
  bruToJson,
  jsonToBru,
  bruToEnvJson,
-  envJsonToBru
+  envJsonToBru,
+  collectionBruToJson,
+  jsonToCollectionBru
 };
--- a/packages/bruno-electron/src/ipc/collection.js
+++ b/packages/bruno-electron/src/ipc/collection.js
@ -2,7 +2,7 @@ const _ = require('lodash');
 const fs = require('fs');
 const path = require('path');
 const { ipcMain, shell } = require('electron');
-const { envJsonToBru, bruToJson, jsonToBru } = require('../bru');
+const { envJsonToBru, bruToJson, jsonToBru, jsonToCollectionBru } = require('../bru');

 const {
  isValidPathname,
@ -101,6 +101,17 @@ const registerRendererEventHandlers = (mainWindow, watcher, lastOpenedCollection
    }
  });

+  ipcMain.handle('renderer:save-collection-root', async (event, collectionPathname, collectionRoot) => {
+    try {
+      const collectionBruFilePath = path.join(collectionPathname, 'collection.bru');
+
+      const content = jsonToCollectionBru(collectionRoot);
+      await writeFile(collectionBruFilePath, content);
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  });
+
  // new request
  ipcMain.handle('renderer:new-request', async (event, pathname, request) => {
    try {
--- a/packages/bruno-electron/src/ipc/network/index.js
+++ b/packages/bruno-electron/src/ipc/network/index.js
@ -1,3 +1,4 @@
+const os = require('os');
 const qs = require('qs');
 const https = require('https');
 const axios = require('axios');
@ -5,7 +6,7 @@ const decomment = require('decomment');
 const Mustache = require('mustache');
 const FormData = require('form-data');
 const { ipcMain } = require('electron');
-const { forOwn, extend, each, get } = require('lodash');
+const { forOwn, extend, each, get, compact } = require('lodash');
 const { VarsRuntime, AssertRuntime, ScriptRuntime, TestRuntime } = require('@usebruno/js');
 const prepareRequest = require('./prepare-request');
 const prepareGqlIntrospectionRequest = require('./prepare-gql-introspection-request');
@ -81,9 +82,9 @@ const getSize = (data) => {

 const registerNetworkIpc = (mainWindow) => {
  // handler for sending http request
-  ipcMain.handle(
-    'send-http-request',
-    async (event, item, collectionUid, collectionPath, environment, collectionVariables) => {
+  ipcMain.handle('send-http-request', async (event, item, collection, environment, collectionVariables) => {
+    const collectionUid = collection.uid;
+    const collectionPath = collection.pathname;
    const cancelTokenUid = uuid();
    const requestUid = uuid();

@ -104,8 +105,9 @@ const registerNetworkIpc = (mainWindow) => {
      cancelTokenUid
    });

+    const collectionRoot = get(collection, 'root', {});
    const _request = item.draft ? item.draft.request : item.request;
-      const request = prepareRequest(_request);
+    const request = prepareRequest(_request, collectionRoot);
    const envVars = getEnvVars(environment);
    const processEnvVars = getProcessEnvVars(collectionUid);
    const brunoConfig = getBrunoConfig(collectionUid);
@ -151,7 +153,9 @@ const registerNetworkIpc = (mainWindow) => {
      }

      // run pre-request script
-        const requestScript = get(request, 'script.req');
+      const requestScript = compact([get(collectionRoot, 'request.script.req'), get(request, 'script.req')]).join(
+        os.EOL
+      );
      if (requestScript && requestScript.length) {
        const scriptRuntime = new ScriptRuntime();
        const result = await scriptRuntime.runRequestScript(
@ -284,7 +288,9 @@ const registerNetworkIpc = (mainWindow) => {
      }

      // run post-response script
-        const responseScript = get(request, 'script.res');
+      const responseScript = compact([get(collectionRoot, 'request.script.res'), get(request, 'script.res')]).join(
+        os.EOL
+      );
      if (responseScript && responseScript.length) {
        const scriptRuntime = new ScriptRuntime();
        const result = await scriptRuntime.runResponseScript(
@ -330,7 +336,10 @@ const registerNetworkIpc = (mainWindow) => {
      }

      // run tests
-        const testFile = item.draft ? get(item.draft, 'request.tests') : get(item, 'request.tests');
+      const testFile = compact([
+        get(collectionRoot, 'request.tests'),
+        item.draft ? get(item.draft, 'request.tests') : get(item, 'request.tests')
+      ]).join(os.EOL);
      if (typeof testFile === 'string') {
        const testRuntime = new TestRuntime();
        const testResults = await testRuntime.runTests(
@ -409,7 +418,10 @@ const registerNetworkIpc = (mainWindow) => {
        }

        // run tests
-          const testFile = item.draft ? get(item.draft, 'request.tests') : get(item, 'request.tests');
+        const testFile = compact([
+          get(collectionRoot, 'request.tests'),
+          item.draft ? get(item.draft, 'request.tests') : get(item, 'request.tests')
+        ]).join(os.EOL);
        if (typeof testFile === 'string') {
          const testRuntime = new TestRuntime();
          const testResults = await testRuntime.runTests(
@ -454,8 +466,7 @@ const registerNetworkIpc = (mainWindow) => {

      return Promise.reject(error);
    }
-    }
-  );
+  });

  ipcMain.handle('cancel-http-request', async (event, cancelTokenUid) => {
    return new Promise((resolve, reject) => {
@ -516,6 +527,7 @@ const registerNetworkIpc = (mainWindow) => {
      const folderUid = folder ? folder.uid : null;
      const brunoConfig = getBrunoConfig(collectionUid);
      const scriptingConfig = get(brunoConfig, 'scripts', {});
+      const collectionRoot = get(collection, 'root', {});

      const onConsoleLog = (type, args) => {
        console[type](...args);
@ -574,7 +586,7 @@ const registerNetworkIpc = (mainWindow) => {
          });

          const _request = item.draft ? item.draft.request : item.request;
-          const request = prepareRequest(_request);
+          const request = prepareRequest(_request, collectionRoot);
          const processEnvVars = getProcessEnvVars(collectionUid);

          try {
@ -611,7 +623,9 @@ const registerNetworkIpc = (mainWindow) => {
            }

            // run pre-request script
-            const requestScript = get(request, 'script.req');
+            const requestScript = compact([get(collectionRoot, 'request.script.req'), get(request, 'script.req')]).join(
+              os.EOL
+            );
            if (requestScript && requestScript.length) {
              const scriptRuntime = new ScriptRuntime();
              const result = await scriptRuntime.runRequestScript(
@ -724,7 +738,10 @@ const registerNetworkIpc = (mainWindow) => {
            }

            // run response script
-            const responseScript = get(request, 'script.res');
+            const responseScript = compact([
+              get(collectionRoot, 'request.script.res'),
+              get(request, 'script.res')
+            ]).join(os.EOL);
            if (responseScript && responseScript.length) {
              const scriptRuntime = new ScriptRuntime();
              const result = await scriptRuntime.runResponseScript(
@ -768,7 +785,10 @@ const registerNetworkIpc = (mainWindow) => {
            }

            // run tests
-            const testFile = item.draft ? get(item.draft, 'request.tests') : get(item, 'request.tests');
+            const testFile = compact([
+              get(collectionRoot, 'request.tests'),
+              item.draft ? get(item.draft, 'request.tests') : get(item, 'request.tests')
+            ]).join(os.EOL);
            if (typeof testFile === 'string') {
              const testRuntime = new TestRuntime();
              const testResults = await testRuntime.runTests(
@ -848,7 +868,10 @@ const registerNetworkIpc = (mainWindow) => {
              }

              // run tests
-              const testFile = item.draft ? get(item.draft, 'request.tests') : get(item, 'request.tests');
+              const testFile = compact([
+                get(collectionRoot, 'request.tests'),
+                item.draft ? get(item.draft, 'request.tests') : get(item, 'request.tests')
+              ]).join(os.EOL);
              if (typeof testFile === 'string') {
                const testRuntime = new TestRuntime();
                const testResults = await testRuntime.runTests(
--- a/packages/bruno-electron/src/ipc/network/prepare-request.js
+++ b/packages/bruno-electron/src/ipc/network/prepare-request.js
@ -1,9 +1,20 @@
 const { get, each, filter } = require('lodash');
 const decomment = require('decomment');

-const prepareRequest = (request) => {
+const prepareRequest = (request, collectionRoot) => {
  const headers = {};
  let contentTypeDefined = false;
+
+  // collection headers
+  each(get(collectionRoot, 'request.headers', []), (h) => {
+    if (h.enabled) {
+      headers[h.name] = h.value;
+      if (h.name.toLowerCase() === 'content-type') {
+        contentTypeDefined = true;
+      }
+    }
+  });
+
  each(request.headers, (h) => {
    if (h.enabled) {
      headers[h.name] = h.value;
@ -20,6 +31,23 @@ const prepareRequest = (request) => {
  };

  // 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 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 = {
--- a/packages/bruno-lang/src/index.js
+++ b/packages/bruno-lang/src/index.js
@ -1,21 +1,23 @@
-const { bruToJson, jsonToBru, bruToEnvJson, envJsonToBru } = require('../v1/src');
-
 const bruToJsonV2 = require('../v2/src/bruToJson');
 const jsonToBruV2 = require('../v2/src/jsonToBru');
 const bruToEnvJsonV2 = require('../v2/src/envToJson');
 const envJsonToBruV2 = require('../v2/src/jsonToEnv');
 const dotenvToJson = require('../v2/src/dotenvToJson');

-module.exports = {
-  bruToJson,
-  jsonToBru,
-  bruToEnvJson,
-  envJsonToBru,
+const collectionBruToJson = require('../v2/src/collectionBruToJson');
+const jsonToCollectionBru = require('../v2/src/jsonToCollectionBru');

+// Todo: remove V2 suffixes
+// Changes will have to be made to the CLI and GUI
+
+module.exports = {
  bruToJsonV2,
  jsonToBruV2,
  bruToEnvJsonV2,
  envJsonToBruV2,

+  collectionBruToJson,
+  jsonToCollectionBru,
+
  dotenvToJson
 };
--- a/packages/bruno-lang/v2/src/jsonToCollectionBru.js
+++ b/packages/bruno-lang/v2/src/jsonToCollectionBru.js
@ -12,7 +12,7 @@ const stripLastLine = (text) => {
  return text.replace(/(\r?\n)$/, '');
 };

-const jsonToBru = (json) => {
+const jsonToCollectionBru = (json) => {
  const { meta, query, headers, auth, script, tests, vars, docs } = json;

  let bru = '';
@ -182,4 +182,4 @@ ${indentString(docs)}
  return stripLastLine(bru);
 };

-module.exports = jsonToBru;
+module.exports = jsonToCollectionBru;
--- a/readme.md
+++ b/readme.md
@ -73,6 +73,7 @@ Even if you are not able to make contributions via code, please don't hesitate t
 [Twitter](https://twitter.com/use_bruno) <br />
 [Website](https://www.usebruno.com) <br />
 [Discord](https://discord.com/invite/KgcZUncpjq)
+[LinkedIn](https://www.linkedin.com/company/usebruno)

 ### License 📄