usebruno · busy-panda · Apr 29, 2024 · Apr 29, 2024 · May 1, 2024 · May 9, 2024
diff --git a/contributing.md b/contributing.md
@@ -63,14 +63,66 @@ done
 find . -type f -name "package-lock.json" -delete
 ```
 
-### Testing
+### Run Unit Tests
 
 ```bash
-# bruno-schema
+npm test --workspace=packages/bruno-query
+npm test --workspace=packages/bruno-lang
 npm test --workspace=packages/bruno-schema
+npm test --workspace=packages/bruno-app
+npm test --workspace=packages/bruno-js
+npm test --workspace=packages/bruno-common
+npm test --workspace=packages/bruno-cli
+npm test --workspace=packages/bruno-electron
+```
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
+### Run CLI Tests
+
+```bash
+cd packages/bruno-tests/collection
+npm install
+node ../../bruno-cli/bin/bru.js run --env Prod --output junit.xml --format junit
+```
+
+### Debugging in Visual Studio Code
+
+Add a file `.vscode/launch.json` with the following configuration:
+
+```json
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Debug Electron UI",
+ "type": "node",
+ "request": "launch",
+ "cwd": "${workspaceFolder}/packages/bruno-electron",
+ "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
+ "windows": {
+ "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
+ },
+ "args": ["."],
+ "outputCapture": "std"
+ },
+ {
+ "name": "Debug Cli",
+ "program": "${workspaceFolder}/packages/bruno-cli/bin/bru.js",
+ "request": "launch",
+ "skipFiles": ["<node_internals>/**"],
+ "type": "node",
+ "cwd": "${workspaceFolder}/packages/bruno-tests/collection/",
+ "args": ["run", "--env", "Local"],
+ "console": "integratedTerminal"
+ },
+ {
+ "name": "Debug Backend Cli",
+ "command": "npm start",
+ "request": "launch",
+ "type": "node-terminal",
+ "cwd": "${workspaceFolder}/packages/bruno-tests"
+ }
+ ]
+}
 ```
 
 ### Raising Pull Requests

diff --git a/packages/bruno-app/src/components/CodeEditor/index.js b/packages/bruno-app/src/components/CodeEditor/index.js
@@ -286,7 +286,7 @@ export default class CodeEditor extends React.Component {
  }
  return (
  <StyledWrapper
- className="h-full w-full"
+ className="h-full w-full code-mirror-wrapper"
  aria-label="Code Editor"
  font={this.props.font}
  ref={(node) => {

diff --git a/packages/bruno-app/src/components/CollectionSettings/Docs/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Docs/StyledWrapper.js
@@ -2,17 +2,19 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
  div.CodeMirror {
- /* todo: find a better way */
-  height: calc(100vh - 240px);
+ height: 100%;
+ }
 
- .CodeMirror-scroll {
- padding-bottom: 0px;
- }
+ div.code-mirror-wrapper {
+ height: calc(100% - 35px);
  }
  .editing-mode {
  cursor: pointer;
  color: ${(props) => props.theme.colors.text.yellow};
  }
+ div.markdown-wrapper {
+ height: calc(100% - 35px);
+ }
 `;
 
 export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/CollectionSettings/Docs/index.js b/packages/bruno-app/src/components/CollectionSettings/Docs/index.js
@@ -32,7 +32,7 @@ const Docs = ({ collection }) => {
  const onSave = () => dispatch(saveCollectionRoot(collection.uid));
 
  return (
- <StyledWrapper className="mt-1 h-full w-full relative">
+ <StyledWrapper className="h-full w-full  flex flex-col">
  <div className="editing-mode mb-2" role="tab" onClick={toggleViewMode}>
  {isEditing ? 'Preview' : 'Edit'}
  </div>

diff --git a/packages/bruno-app/src/components/CollectionSettings/Script/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Script/StyledWrapper.js
@@ -1,8 +1,16 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+ div.section-wrapper {
+ height: 100%;
+ }
+
+ div.script-section {
+ height: calc((100% - 36px) / 2);
+ min-height: 100px;
+ }
  div.CodeMirror {
- height: inherit;
+ height: 100%;
  }
 
  div.title {

diff --git a/packages/bruno-app/src/components/CollectionSettings/Script/index.js b/packages/bruno-app/src/components/CollectionSettings/Script/index.js
@@ -38,39 +38,41 @@ const Script = ({ collection }) => {
  };
 
  return (
- <StyledWrapper className="w-full flex flex-col h-full">
- <div className="text-xs mb-4 text-muted">
- Write pre and post-request scripts that will run before and after any request in this collection is sent.
- </div>
- <div className="flex-1 mt-2">
- <div className="mb-1 title text-xs">Pre Request</div>
- <CodeEditor
- collection={collection}
- value={requestScript || ''}
- theme={displayedTheme}
- onEdit={onRequestScriptEdit}
- mode="javascript"
- onSave={handleSave}
- font={get(preferences, 'font.codeFont', 'default')}
- />
- </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={displayedTheme}
- onEdit={onResponseScriptEdit}
- mode="javascript"
- onSave={handleSave}
- font={get(preferences, 'font.codeFont', 'default')}
- />
- </div>
+ <StyledWrapper className="w-full h-full">
+ <div className="flex flex-col section-wrapper">
+ <div className="text-xs mb-4 text-muted">
+ Write pre and post-request scripts that will run before and after any request in this collection is sent.
+ </div>
+ <div className="script-section flex-1 mt-2">
+ <div className="mb-1 title text-xs">Pre Request</div>
+ <CodeEditor
+ collection={collection}
+ value={requestScript || ''}
+ theme={displayedTheme}
+ onEdit={onRequestScriptEdit}
+ mode="javascript"
+ onSave={handleSave}
+ font={get(preferences, 'font.codeFont', 'default')}
+ />
+ </div>
+ <div className="script-section flex-1 mt-6">
+ <div className="mt-1 mb-1 title text-xs">Post Response</div>
+ <CodeEditor
+ collection={collection}
+ value={responseScript || ''}
+ theme={displayedTheme}
+ onEdit={onResponseScriptEdit}
+ mode="javascript"
+ onSave={handleSave}
+ font={get(preferences, 'font.codeFont', 'default')}
+ />
+ </div>
 
- <div className="mt-12">
- <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
- Save
- </button>
+ <div className="mt-12">
+ <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+ Save
+ </button>
+ </div>
  </div>
  </StyledWrapper>
  );

diff --git a/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
@@ -3,6 +3,8 @@ import styled from 'styled-components';
 const StyledWrapper = styled.div`
  max-width: 800px;
 
+ max-height: calc(100vh - 90px);
+
  div.tabs {
  div.tab {
  padding: 6px 0px;

diff --git a/packages/bruno-app/src/components/CollectionSettings/Tests/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Tests/StyledWrapper.js
@@ -1,5 +1,12 @@
 import styled from 'styled-components';
 
-const StyledWrapper = styled.div``;
+const StyledWrapper = styled.div`
+ div.CodeMirror {
+ height: 100%;
+ }
+ div.code-mirror-wrapper {
+ height: calc(100% - 100px);
+ }
+`;
 
 export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/CollectionSettings/index.js b/packages/bruno-app/src/components/CollectionSettings/index.js
@@ -117,7 +117,7 @@ const CollectionSettings = ({ collection }) => {
  };
 
  return (
- <StyledWrapper className="flex flex-col h-full relative px-4 py-4">
+ <StyledWrapper id="CollectionSettings" 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
@@ -147,7 +147,7 @@ const CollectionSettings = ({ collection }) => {
  Info
  </div>
  </div>
- <section className="mt-4 h-full">{getTabPanel(tab)}</section>
+ <section className="mt-4 h-full overflow-y-auto">{getTabPanel(tab)}</section>
  </StyledWrapper>
  );
 };

diff --git a/packages/bruno-app/src/components/Documentation/StyledWrapper.js b/packages/bruno-app/src/components/Documentation/StyledWrapper.js
@@ -2,17 +2,19 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
  div.CodeMirror {
- /* todo: find a better way */
-  height: calc(100vh - 240px);
+ height: 100%;
+ }
 
- .CodeMirror-scroll {
- padding-bottom: 0px;
- }
+ div.code-mirror-wrapper {
+ height: calc(100% - 35px);
  }
  .editing-mode {
  cursor: pointer;
  color: ${(props) => props.theme.colors.text.yellow};
  }
+ div.markdown-wrapper {
+ height: calc(100% - 35px);
+ }
 `;
 
 export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/Documentation/index.js b/packages/bruno-app/src/components/Documentation/index.js
@@ -37,7 +37,7 @@ const Documentation = ({ item, collection }) => {
  }
 
  return (
- <StyledWrapper className="mt-1 h-full w-full relative">
+ <StyledWrapper className="h-full w-full flex flex-col">
  <div className="editing-mode mb-2" role="tab" onClick={toggleViewMode}>
  {isEditing ? 'Preview' : 'Edit'}
  </div>

diff --git a/packages/bruno-app/src/components/MarkDown/index.jsx b/packages/bruno-app/src/components/MarkDown/index.jsx
@@ -13,7 +13,7 @@ const Markdown = ({ onDoubleClick, content }) => {
  const htmlFromMarkdown = md.render(content || '');
 
  return (
- <StyledWrapper>
+ <StyledWrapper className="markdown-wrapper">
  <div
  className="markdown-body"
  dangerouslySetInnerHTML={{ __html: htmlFromMarkdown }}

diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
@@ -104,7 +104,7 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
  onChange={handlePKCEToggle}
  />
  </div>
- <div className="flex flex-row gap-4">
+ <div className="flex flex-row gap-4 mb-5">
  <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
  Get Access Token
  </button>

diff --git a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/StyledWrapper.js
@@ -1,6 +1,9 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+ div.CodeMirror {
+ height: 100%;
+ }
  div.tabs {
  div.tab {
  padding: 6px 0px;

diff --git a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
@@ -31,7 +31,9 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
  : get(item, 'request.body.graphql.variables');
  const { displayedTheme } = useTheme();
  const [schema, setSchema] = useState(null);
-
+ const isResponsePaneDockedToBottom = useSelector(
+ (state) => state.app.preferences.userInterface.responsePaneDockedToBottom
+ );
  useEffect(() => {
  onSchemaLoad(schema);
  }, [schema]);
@@ -151,7 +153,7 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
  </div>
  <GraphQLSchemaActions item={item} collection={collection} onSchemaLoad={setSchema} toggleDocs={toggleDocs} />
  </div>
- <section className="flex w-full mt-5">{getTabPanel(focusedTab.requestPaneTab)}</section>
+ <section className="flex w-full h-full mt-5 overflow-y-auto">{getTabPanel(focusedTab.requestPaneTab)}</section>
  </StyledWrapper>
  );
 };

diff --git a/packages/bruno-app/src/components/RequestPane/GraphQLVariables/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/GraphQLVariables/StyledWrapper.js
@@ -2,8 +2,7 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
  div.CodeMirror {
- /* todo: find a better way */
- height: calc(100vh - 220px);
+ height: 100%;
  }
 `;
 

diff --git a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
@@ -21,6 +21,9 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
  const dispatch = useDispatch();
  const tabs = useSelector((state) => state.tabs.tabs);
  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
+ const isResponsePaneDockedToBottom = useSelector(
+ (state) => state.app.preferences.userInterface.responsePaneDockedToBottom
+ );
 
  const selectTab = (tab) => {
  dispatch(
@@ -96,7 +99,7 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
  responseVars.filter((response) => response.enabled).length;
 
  return (
- <StyledWrapper className="flex flex-col h-full relative">
+ <StyledWrapper id="HttpRequestPane" 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
@@ -136,7 +139,7 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
  ) : null}
  </div>
  <section
- className={`flex w-full ${
+ className={`flex w-full overflow-y-auto h-full ${
  ['script', 'vars', 'auth', 'docs'].includes(focusedTab.requestPaneTab) ? '' : 'mt-5'
  }`}
  >

diff --git a/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
@@ -5,7 +5,7 @@ const StyledWrapper = styled.div`
  background: ${(props) => props.theme.codemirror.bg};
  border: solid 1px ${(props) => props.theme.codemirror.border};
  /* todo: find a better way */
- height: calc(100vh - 220px);
+ height: 100%;
  }
 
  textarea.cm-editor {

diff --git a/packages/bruno-app/src/components/RequestPane/RequestBody/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/RequestBody/StyledWrapper.js
@@ -2,8 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
  div.CodeMirror {
- /* todo: find a better way */
- height: calc(100vh - 220px);
+ height: 100%;
  }
 `;
 

diff --git a/packages/bruno-app/src/components/RequestPane/RequestBody/index.js b/packages/bruno-app/src/components/RequestPane/RequestBody/index.js
@@ -45,7 +45,7 @@ const RequestBody = ({ item, collection }) => {
  };
 
  return (
- <StyledWrapper className="w-full">
+ <StyledWrapper id="RequestBody" className="w-full h-full">
  <CodeEditor
  collection={collection}
  theme={displayedTheme}