feature: response panel split horizontal (usebruno#1041)

busy-panda · Apr 29, 2024 · 3a08877 · 3a08877
1 parent d7c0f48
commit 3a08877
Show file tree

Hide file tree

Showing 44 changed files with 479 additions and 144 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/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}