feat: Update main view

packages/bruno-app/src/components/Documentation/index.js

@@ -40,7 +40,13 @@ const Documentation = ({ item, collection }) => {
       </div>
 
       {isEditing ? (
-        <CodeEditor value={docs || ''} onChange={onEdit} onSave={onSave} mode="markdown" />
+        <CodeEditor
+          value={docs || ''}
+          onChange={onEdit}
+          onSave={onSave}
+          mode="markdown"
+          height={'calc(100% - var(--mantine-spacing-xl))'}
+        />
       ) : (
         <Markdown onDoubleClick={toggleViewMode} content={docs} />
       )}

packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/DocExplorerWrapper.module.scss

@@ -0,0 +1,19 @@
+.container {
+  outline: none;
+  box-shadow: rgb(0 0 0 / 15%) 0px 0px 8px;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  z-index: 2000;
+  width: 500px;
+  max-width: 95dvw;
+  height: 100%;
+
+  .doc-explorer-title {
+    text-align: left;
+  }
+
+  .doc-explorer-rhs {
+    display: flex;
+  }
+}

packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/DocExplorerWrapper.tsx

@@ -0,0 +1,26 @@
+import { DocExplorer } from '@usebruno/graphql-docs';
+import { createPortal } from 'react-dom';
+import classes from './DocExplorerWrapper.module.scss';
+
+type DocExplorerWrapperProps = {
+  schema: any;
+  opened: boolean;
+  onClose: () => void;
+};
+
+export const DocExplorerWrapper: React.FC<DocExplorerWrapperProps> = ({ onClose, opened, schema }) => {
+  if (!opened) {
+    return null;
+  }
+
+  return createPortal(
+    <div className={classes.container}>
+      <DocExplorer schema={schema}>
+        <button className="mr-2" onClick={onClose} aria-label="Close Documentation Explorer">
+          {'\u2715'}
+        </button>
+      </DocExplorer>
+    </div>,
+    document.body
+  );
+};

packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import find from 'lodash/find';
 import get from 'lodash/get';
 import classnames from 'classnames';
@@ -11,15 +11,15 @@ import Vars from 'components/RequestPane/Vars';
 import Assertions from 'components/RequestPane/Assertions';
 import Script from 'components/RequestPane/Script';
 import Tests from 'components/RequestPane/Tests';
-import { useTheme } from 'providers/Theme';
 import { updateRequestGraphqlQuery } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import Documentation from 'components/Documentation/index';
 import GraphQLSchemaActions from '../GraphQLSchemaActions/index';
 import CodeEditor from 'components/CodeEditor';
+import { DocExplorerWrapper } from './DocExplorerWrapper';
 
-const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, toggleDocs, handleGqlClickReference }) => {
+const GraphQLRequestPane = ({ item, collection }) => {
   const dispatch = useDispatch();
   const tabs = useSelector((state) => state.tabs.tabs);
   const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
@@ -30,10 +30,7 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
     ? get(item, 'draft.request.body.graphql.variables')
     : get(item, 'request.body.graphql.variables');
   const [schema, setSchema] = useState(null);
-
-  useEffect(() => {
-    onSchemaLoad(schema);
-  }, [schema]);
+  const [docExplorerOpened, setDocExplorerOpened] = useState(false);
 
   const onQueryChange = (value) => {
     dispatch(
@@ -62,12 +59,12 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
         return (
           <CodeEditor
             schema={schema}
-            width={leftPaneWidth}
             onSave={onSave}
             value={query}
             onRun={onRun}
             mode={'graphql-query'}
             onChange={onQueryChange}
+            height={'calc(100% - var(--mantine-spacing-xs))'}
             withVariables
           />
         );
@@ -147,9 +144,16 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
         <div className={getTabClassname('docs')} role="tab" onClick={() => selectTab('docs')}>
           Docs
         </div>
-        <GraphQLSchemaActions item={item} collection={collection} onSchemaLoad={setSchema} toggleDocs={toggleDocs} />
+        <GraphQLSchemaActions
+          item={item}
+          collection={collection}
+          onSchemaLoad={setSchema}
+          toggleDocs={() => setDocExplorerOpened(!docExplorerOpened)}
+        />
       </div>
       <section className="flex w-full mt-5 flex-1">{getTabPanel(focusedTab.requestPaneTab)}</section>
+
+      <DocExplorerWrapper onClose={() => setDocExplorerOpened(false)} opened={docExplorerOpened} schema={schema} />
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js

@@ -22,7 +22,14 @@ const GraphQLVariables = ({ variables, item, collection }) => {
 
   return (
     <StyledWrapper className="w-full">
-      <CodeEditor value={variables || ''} onChange={onEdit} mode="javascript" onRun={onRun} onSave={onSave} />
+      <CodeEditor
+        value={variables || ''}
+        onChange={onEdit}
+        mode="javascript"
+        onRun={onRun}
+        onSave={onSave}
+        height={'calc(100% - var(--mantine-spacing-xs))'}
+      />
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js

@@ -27,7 +27,7 @@ const componentMap = (item, collection) => ({
   docs: <Documentation item={item} collection={collection} />
 });
 
-const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
+const HttpRequestPane = ({ item, collection }) => {
   const dispatch = useDispatch();
   const tabs = useSelector((state) => state.tabs.tabs);
   const activeTabUid = useSelector((state) => state.tabs.activeTabUid);

packages/bruno-app/src/components/RequestPane/RequestBody/index.js

@@ -27,16 +27,15 @@ const RequestBody = ({ item, collection }) => {
     const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
     return (
-      <div className="w-full">
-        <CodeEditor
-          value={body[bodyMode] || ''}
-          onChange={onEdit}
-          onRun={onRun}
-          onSave={onSave}
-          mode={bodyMode}
-          withVariables
-        />
-      </div>
+      <CodeEditor
+        value={body[bodyMode] || ''}
+        onChange={onEdit}
+        onRun={onRun}
+        onSave={onSave}
+        mode={bodyMode}
+        withVariables
+        height={'calc(100% - var(--mantine-spacing-xs))'}
+      />
     );
   }
 

packages/bruno-app/src/components/RequestPane/RequestHeaders/BulkEditEditor.tsx

@@ -85,7 +85,7 @@ export const BulkEditEditor: React.FC<BulkEditEditorProps> = ({ item, collection
           onChange={(value) => handleBulkEdit(value)}
           onRun={onRun}
           onSave={onSave}
-          height="100%"
+          height="calc(100% - var(--mantine-spacing-xs))"
           withVariables
           hideMinimap
         />

packages/bruno-app/src/components/RequestPane/Script/Script.module.scss

@@ -0,0 +1,16 @@
+.container {
+  height: calc(100% - calc(var(--mantine-spacing-xs) * 2));
+  width: 100%;
+
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: 50% 50%;
+  gap: var(--mantine-spacing-xs);
+
+  & > div {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+}

packages/bruno-app/src/components/RequestPane/Script/index.js

@@ -3,7 +3,8 @@ import { useDispatch } 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 StyledWrapper from './StyledWrapper';
+import { Text } from '@mantine/core';
+import classes from './Script.module.scss';
 
 const Script = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -34,30 +35,34 @@ 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>
+    <div className={classes.container}>
+      <div>
+        <Text size="xs" c={'dimmed'}>
+          Pre Request
+        </Text>
         <CodeEditor
           value={requestScript || ''}
-          height={'30vh'}
+          height={'100%'}
           onChange={onRequestScriptEdit}
           mode="javascript"
           onRun={onRun}
           onSave={onSave}
         />
       </div>
-      <div className="flex flex-col flex-1 mt-2 gap-y-2">
-        <div className="title text-xs">Post Response</div>
+      <div>
+        <Text size="xs" c={'dimmed'}>
+          Post Request
+        </Text>
         <CodeEditor
           value={responseScript || ''}
-          height={'30vh'}
+          height={'100%'}
           onChange={onResponseScriptEdit}
           mode="javascript"
           onRun={onRun}
           onSave={onSave}
         />
       </div>
-    </StyledWrapper>
+    </div>
   );
 };
 

packages/bruno-app/src/components/RequestPane/Tests/index.js

@@ -23,7 +23,14 @@ const Tests = ({ item, collection }) => {
 
   return (
     <div className="w-full h-full">
-      <CodeEditor value={tests || ''} onChange={onEdit} mode="javascript" onRun={onRun} onSave={onSave} />
+      <CodeEditor
+        value={tests || ''}
+        onChange={onEdit}
+        mode="javascript"
+        onRun={onRun}
+        onSave={onSave}
+        height={'calc(100% - var(--mantine-spacing-xs))'}
+      />
     </div>
   );
 };

packages/bruno-app/src/components/RequestPane/Vars/index.js

@@ -9,14 +9,10 @@ const Vars = ({ item, collection }) => {
 
   return (
     <StyledWrapper className="w-full flex flex-col">
-      <div className="flex-1 mt-2">
-        <h3 className="mb-2 title text-xs">Pre Request</h3>
-        <VarsTable item={item} collection={collection} vars={requestVars} varType="request" />
-      </div>
-      <div className="flex-1">
-        <h3 className="mb-2 title text-xs">Post Response</h3>
-        <VarsTable item={item} collection={collection} vars={responseVars} varType="response" />
-      </div>
+      <h3 className="my-2 title text-xs">Pre Request</h3>
+      <VarsTable item={item} collection={collection} vars={requestVars} varType="request" />
+      <h3 className="my-2 title text-xs">Post Response</h3>
+      <VarsTable item={item} collection={collection} vars={responseVars} varType="response" />
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/RequestTabPanel/index.js

@@ -1,15 +1,12 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import find from 'lodash/find';
-import toast from 'react-hot-toast';
 import { useSelector, useDispatch } from 'react-redux';
 import GraphQLRequestPane from 'components/RequestPane/GraphQLRequestPane';
 import HttpRequestPane from 'components/RequestPane/HttpRequestPane';
 import ResponsePane from 'components/ResponsePane';
 import { findItemInCollection } from 'utils/collections';
 import { updateRequestPaneTabWidth } from 'providers/ReduxStore/slices/tabs';
-import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import RequestNotFound from './RequestNotFound';
-import NetworkError from 'components/ResponsePane/NetworkError';
 import RunnerResults from 'components/RunnerResults';
 import VariablesEditor from 'components/VariablesEditor';
 import CollectionSettings from 'components/CollectionSettings';
@@ -138,14 +135,6 @@ const RequestTabPanel = () => {
     return <RequestNotFound itemUid={activeTabUid} />;
   }
 
-  const handleRun = async () => {
-    dispatch(sendRequest(item, collection.uid)).catch((err) =>
-      toast.custom((t) => <NetworkError onClose={() => toast.dismiss(t.id)} />, {
-        duration: 5000
-      })
-    );
-  };
-
   return (
     <StyledWrapper className={`flex flex-col flex-grow relative ${dragging ? 'dragging' : ''}`}>
       <RequestUrlBar item={item} collection={collection} handleRun={handleRun} />

packages/bruno-app/src/components/RequestTabs/StyledWrapper.js

@@ -1,8 +1,6 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  border-bottom: 1px solid ${(props) => props.theme.requestTabs.bottomBorder};
-
   ul {
     padding: 0;
     margin: 0;

packages/bruno-app/src/components/RequestTabs/index.js

@@ -5,7 +5,6 @@ import classnames from 'classnames';
 import { IconChevronRight, IconChevronLeft } from '@tabler/icons-react';
 import { useSelector, useDispatch } from 'react-redux';
 import { focusTab, closeTabs } from 'providers/ReduxStore/slices/tabs';
-import CollectionToolBar from './CollectionToolBar';
 import RequestTab from './RequestTab';
 import StyledWrapper from './StyledWrapper';
 import ConfirmRequestClose from './RequestTab/ConfirmRequestClose/index';
@@ -143,7 +142,6 @@ const RequestTabs = () => {
         onClose={() => setNewRequestModalOpen(false)}
         opened={newRequestModalOpen}
       />
-      <CollectionToolBar collection={activeCollection} activeTabUid={activeTabUid} />
       {collectionRequestTabs?.length && !hideTabs ? (
         <div className="flex items-center pl-4">
           <ul role="tablist">

packages/bruno-app/src/components/ResponsePane/Debug.tsx

@@ -16,7 +16,7 @@ export const DebugTab: React.FC<{ debugInfo: DebugInfo; timings: unknown; maxWid
   maxWidth
 }) => {
   return (
-    <Stack w={'100%'} maw={maxWidth} gap={'xl'}>
+    <Stack w={'100%'} maw={'100%'} gap={'xl'}>
       <ResponseTimings timings={timings} />
       {debugInfo.map(({ stage, logs }) => (
         <div key={stage}>

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultError/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const QueryResultError = ({ error, width }) => {
+const QueryResultError = ({ error }) => {
   return (
     <div className={'mt-4'}>
       <pre className="text-red-500 break-all whitespace-pre-wrap">{error}</pre>

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultMode/index.js

@@ -72,7 +72,7 @@ const formatResponse = (data, mode, filter) => {
   return safeStringifyJSON(data);
 };
 
-const QueryResultMode = ({ item, collection, data, dataBuffer, width, disableRunEventListener, headers, error }) => {
+const QueryResultMode = ({ item, collection, data, dataBuffer, disableRunEventListener, headers, error }) => {
   const contentType = getContentType(headers);
   const mode = getMonacoModeFromContent(contentType, data);
   const [filter, setFilter] = useState('');
@@ -135,7 +135,7 @@ const QueryResultMode = ({ item, collection, data, dataBuffer, width, disableRun
   return (
     <StyledWrapper
       className="w-full h-full relative"
-      style={{ maxWidth: width }}
+      style={{ maxWidth: '100%' }}
       queryFilterEnabled={queryFilterEnabled}
     >
       <div className="flex justify-end gap-2 text-xs" role="tablist">