improve: script ui

usebruno · Jan 22, 2025 · 3d6ebe6 · 3d6ebe6
1 parent fee631d
commit 3d6ebe6
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 34 deletions.
diff --git a/packages/bruno-app/src/components/RequestPane/Script/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Script/StyledWrapper.js
@@ -1,13 +1,42 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  div.CodeMirror {
-    height: inherit;
+  height: 100%;
+
+  .script-tabs {
+    display: flex;
+    gap: 1px;
+    padding: 0 1px;
+    border-bottom: 1px solid ${(props) => props.theme.requestTabs.bottomBorder};
   }
 
-  div.title {
-    color: var(--color-tab-inactive);
+  .tab {
+    padding: 8px 16px;
+    font-size: 13px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: ${(props) => props.theme.requestTabs.color};
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s ease;
+    position: relative;
+
+    &:hover {
+      color: ${(props) => props.theme.requestTabs.icon.hoverColor};
+      background: ${(props) => props.theme.requestTabs.icon.hoverBg};
+    }
+
+    &.active {
+      color: ${(props) => props.theme.tabs.active.color};
+      border-bottom: solid 2px ${(props) => props.theme.tabs.active.border};
+      background: ${(props) => props.theme.requestTabs.active.bg};
+    }
+  }
+
+  div.CodeMirror {
+    height: calc(100vh - 290px);
+    background: ${(props) => props.theme.codemirror.bg};
   }
 `;
 
-export default StyledWrapper;
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/RequestPane/Script/index.js b/packages/bruno-app/src/components/RequestPane/Script/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
@@ -8,6 +8,7 @@ import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
 
 const Script = ({ item, collection }) => {
+  const [activeTab, setActiveTab] = useState('pre-request');
   const dispatch = useDispatch();
   const requestScript = item.draft ? get(item, 'draft.request.script.req') : get(item, 'request.script.req');
   const responseScript = item.draft ? get(item, 'draft.request.script.res') : get(item, 'request.script.res');
@@ -39,37 +40,53 @@ const Script = ({ item, collection }) => {
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
   return (
-    <StyledWrapper className="w-full flex flex-col">
-      <div className="flex flex-col flex-1 mt-2 gap-y-2">
-        <div className="title text-xs">Pre Request</div>
-        <CodeEditor
-          collection={collection}
-          value={requestScript || ''}
-          theme={displayedTheme}
-          font={get(preferences, 'font.codeFont', 'default')}
-          fontSize={get(preferences, 'font.codeFontSize')}
-          onEdit={onRequestScriptEdit}
-          mode="javascript"
-          onRun={onRun}
-          onSave={onSave}
-        />
+    <StyledWrapper className="w-full flex flex-col mt-4">
+      <div className="script-tabs">
+        <button
+          className={`tab ${activeTab === 'pre-request' ? 'active' : ''}`}
+          onClick={() => setActiveTab('pre-request')}
+        >
+          Pre Request
+        </button>
+        <button
+          className={`tab ${activeTab === 'post-response' ? 'active' : ''}`}
+          onClick={() => setActiveTab('post-response')}
+        >
+          Post Response
+        </button>
       </div>
-      <div className="flex flex-col flex-1 mt-2 gap-y-2">
-        <div className="title text-xs">Post Response</div>
-        <CodeEditor
-          collection={collection}
-          value={responseScript || ''}
-          theme={displayedTheme}
-          font={get(preferences, 'font.codeFont', 'default')}
-          fontSize={get(preferences, 'font.codeFontSize')}
-          onEdit={onResponseScriptEdit}
-          mode="javascript"
-          onRun={onRun}
-          onSave={onSave}
-        />
+
+      <div className="flex flex-col flex-1 mt-2">
+        {activeTab === 'pre-request' && (
+          <CodeEditor
+            collection={collection}
+            value={requestScript || ''}
+            theme={displayedTheme}
+            font={get(preferences, 'font.codeFont', 'default')}
+            fontSize={get(preferences, 'font.codeFontSize')}
+            onEdit={onRequestScriptEdit}
+            mode="javascript"
+            onRun={onRun}
+            onSave={onSave}
+          />
+        )}
+
+        {activeTab === 'post-response' && (
+          <CodeEditor
+            collection={collection}
+            value={responseScript || ''}
+            theme={displayedTheme}
+            font={get(preferences, 'font.codeFont', 'default')}
+            fontSize={get(preferences, 'font.codeFontSize')}
+            onEdit={onResponseScriptEdit}
+            mode="javascript"
+            onRun={onRun}
+            onSave={onSave}
+          />
+        )}
       </div>
     </StyledWrapper>
   );
 };
 
-export default Script;
+export default Script;