Squashed commit of the following:

commit e5597df Author: busy-panda <npuzin@outlook.com> Date: Thu Apr 25 10:55:22 2024 +0200 missing import commit 951ff1c Author: busy-panda <npuzin@outlook.com> Date: Thu Apr 25 10:49:02 2024 +0200 added more details in the contributing section commit 2ee749b Author: busy-panda <npuzin@outlook.com> Date: Thu Apr 25 10:22:19 2024 +0200 code refactoring commit b58d15b Author: busy-panda <npuzin@outlook.com> Date: Wed Apr 24 19:11:25 2024 +0200 renaming commit cf67824 Author: busy-panda <npuzin@outlook.com> Date: Wed Apr 24 18:15:34 2024 +0200 persist the flag isResponsePaneDockedToBottom in the preference file commit ab6ed0e Merge: bc797eb 7b1bf96 Author: busy-panda <npuzin@outlook.com> Date: Wed Apr 24 11:10:14 2024 +0200 Merge branch 'feature/response-panel-split-horizontal-1041' of https://github.com/busy-panda/bruno into feature/response-panel-split-horizontal-1041 commit bc797eb Author: busy-panda <npuzin@outlook.com> Date: Wed Apr 24 11:10:01 2024 +0200 fix commit 7b1bf96 Merge: cc78fce 16861c9 Author: busy-panda🐼🐼 <139650490+busy-panda@users.noreply.github.com> Date: Wed Apr 24 10:09:34 2024 +0200 Merge branch 'usebruno:main' into feature/response-panel-split-horizontal-1041 commit cc78fce Author: busy-panda <npuzin@outlook.com> Date: Wed Apr 24 10:08:43 2024 +0200 improve how code mirror controls height is set commit 26113f2 Author: busy-panda <npuzin@outlook.com> Date: Mon Apr 22 18:28:23 2024 +0200 minor fix commit 560b80d Author: busy-panda <npuzin@outlook.com> Date: Mon Apr 22 16:03:39 2024 +0200 feature: UI: Response Panel Split Horizontally usebruno#1041
busy-panda · Apr 25, 2024 · d73d5b3 · d73d5b3
1 parent 9068694
commit d73d5b3
Show file tree

Hide file tree

Showing 27 changed files with 407 additions and 89 deletions.
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/Documentation/StyledWrapper.js b/packages/bruno-app/src/components/Documentation/StyledWrapper.js
@@ -2,12 +2,6 @@ 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;

diff --git a/packages/bruno-app/src/components/Documentation/index.js b/packages/bruno-app/src/components/Documentation/index.js
@@ -2,12 +2,13 @@ import 'github-markdown-css/github-markdown.css';
 import get from 'lodash/get';
 import { updateRequestDocs } from 'providers/ReduxStore/slices/collections';
 import { useTheme } from 'providers/Theme';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useDispatch, useSelector } 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';
+import { updateCodeMirrorsHeight } from 'utils/common/codemirror';
 
 const Documentation = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -16,6 +17,10 @@ const Documentation = ({ item, collection }) => {
   const docs = item.draft ? get(item, 'draft.request.docs') : get(item, 'request.docs');
   const preferences = useSelector((state) => state.app.preferences);
 
+  useEffect(() => {
+    updateCodeMirrorsHeight('#documentation-tab', 80, 'calc(100vh - 260px)');
+  });
+
   const toggleViewMode = () => {
     setIsEditing((prev) => !prev);
   };
@@ -37,8 +42,8 @@ const Documentation = ({ item, collection }) => {
   }
 
   return (
-    <StyledWrapper className="mt-1 h-full w-full relative">
-      <div className="editing-mode mb-2" role="tab" onClick={toggleViewMode}>
+    <StyledWrapper id="documentation-tab" className="h-full w-full flex flex-col">
+      <div className="editing-mode mb-2 mt-1" role="tab" onClick={toggleViewMode}>
         {isEditing ? 'Preview' : 'Edit'}
       </div>
 

diff --git a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
@@ -151,7 +151,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 mt-5 overflow-y-auto">{getTabPanel(focusedTab.requestPaneTab)}</section>
     </StyledWrapper>
   );
 };

diff --git a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
@@ -136,7 +136,7 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
         ) : null}
       </div>
       <section
-        className={`flex w-full ${
+        className={`flex w-full overflow-y-auto ${
           ['script', 'vars', 'auth', 'docs'].includes(focusedTab.requestPaneTab) ? '' : 'mt-5'
         }`}
       >

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,6 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   div.CodeMirror {
-    /* todo: find a better way */
-    height: calc(100vh - 220px);
   }
 `;
 

diff --git a/packages/bruno-app/src/components/RequestPane/RequestBody/index.js b/packages/bruno-app/src/components/RequestPane/RequestBody/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import get from 'lodash/get';
 import CodeEditor from 'components/CodeEditor';
 import FormUrlEncodedParams from 'components/RequestPane/FormUrlEncodedParams';
@@ -8,6 +8,7 @@ import { useTheme } from 'providers/Theme';
 import { updateRequestBody } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
+import { updateCodeMirrorsHeight } from 'utils/common/codemirror';
 
 const RequestBody = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -16,6 +17,10 @@ const RequestBody = ({ item, collection }) => {
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
+  useEffect(() => {
+    updateCodeMirrorsHeight('#request-body', 65, 'calc(100vh - 250px)');
+  });
+
   const onEdit = (value) => {
     dispatch(
       updateRequestBody({
@@ -45,7 +50,7 @@ const RequestBody = ({ item, collection }) => {
     };
 
     return (
-      <StyledWrapper className="w-full">
+      <StyledWrapper id="request-body" className="w-full">
         <CodeEditor
           collection={collection}
           theme={displayedTheme}

diff --git a/packages/bruno-app/src/components/RequestPane/Script/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Script/StyledWrapper.js
@@ -2,7 +2,6 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   div.CodeMirror {
-    height: inherit;
   }
 
   div.title {

diff --git a/packages/bruno-app/src/components/RequestPane/Script/index.js b/packages/bruno-app/src/components/RequestPane/Script/index.js
@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
 import { updateRequestScript, updateResponseScript } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
+import { updateCodeMirrorsHeight } from 'utils/common/codemirror';
 
 const Script = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -15,6 +16,10 @@ const Script = ({ item, collection }) => {
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
+  useEffect(() => {
+    updateCodeMirrorsHeight('#request-script-tab', 125, 'calc((100vh - 280px) / 2');
+  });
+
   const onRequestScriptEdit = (value) => {
     dispatch(
       updateRequestScript({
@@ -39,32 +44,34 @@ const Script = ({ item, collection }) => {
   const onSave = () => dispatch(saveRequest(item.uid, 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={displayedTheme}
-          font={get(preferences, 'font.codeFont', 'default')}
-          onEdit={onRequestScriptEdit}
-          mode="javascript"
-          onRun={onRun}
-          onSave={onSave}
-        />
-      </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}
-          font={get(preferences, 'font.codeFont', 'default')}
-          onEdit={onResponseScriptEdit}
-          mode="javascript"
-          onRun={onRun}
-          onSave={onSave}
-        />
+    <StyledWrapper id="request-script-tab" className="w-full">
+      <div className="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={displayedTheme}
+            font={get(preferences, 'font.codeFont', 'default')}
+            onEdit={onRequestScriptEdit}
+            mode="javascript"
+            onRun={onRun}
+            onSave={onSave}
+          />
+        </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}
+            font={get(preferences, 'font.codeFont', 'default')}
+            onEdit={onResponseScriptEdit}
+            mode="javascript"
+            onRun={onRun}
+            onSave={onSave}
+          />
+        </div>
       </div>
     </StyledWrapper>
   );

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

diff --git a/packages/bruno-app/src/components/RequestPane/Tests/index.js b/packages/bruno-app/src/components/RequestPane/Tests/index.js
@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
 import { updateRequestTests } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
+import { updateCodeMirrorsHeight } from 'utils/common/codemirror';
 
 const Tests = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -24,11 +25,15 @@ const Tests = ({ item, collection }) => {
     );
   };
 
+  useEffect(() => {
+    updateCodeMirrorsHeight('#test-tab', 65, 'calc(100vh - 250px)');
+  });
+
   const onRun = () => dispatch(sendRequest(item, collection.uid));
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
   return (
-    <StyledWrapper className="w-full">
+    <StyledWrapper id="test-tab" className="w-full">
       <CodeEditor
         collection={collection}
         value={tests || ''}

diff --git a/packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js b/packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js
@@ -26,6 +26,27 @@ const StyledWrapper = styled.div`
     }
   }
 
+  div.drag-request-horizontal {
+    display: flex;
+
+    justify-content: center;
+    height: 10px;
+
+    cursor: row-resize;
+    background: transparent;
+
+    div.drag-request-horizontal-border {
+      display: flex;
+      width: 100%;
+      height: 1px;
+      border-top: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.border};
+    }
+
+    &:hover div.drag-request-horizontal-border {
+      border-top: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.activeBorder};
+    }
+  }
+
   div.graphql-docs-explorer-container {
     background: white;
     outline: none;