refactor: regroup request related components under request pane

renderer/components/RequestPane/GraphQLRequestPane/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
+import QueryEditor from 'components/RequestPane/QueryEditor';
+import RequestHeaders from 'components/RequestPane/RequestHeaders';
 import StyledWrapper from './StyledWrapper';
-import QueryEditor from '../QueryEditor';
-import RequestHeaders from '../RequestHeaders';
 
 const GraphQLRequestPane = ({onRunQuery, schema, leftPaneWidth, value, onQueryChange}) => {
   return (

renderer/components/RequestPane/HttpRequestPane/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
+import QueryParams from 'components/RequestPane/QueryParams';
+import RequestHeaders from 'components/RequestPane/RequestHeaders';
 import StyledWrapper from './StyledWrapper';
-import QueryParams from '../QueryParams';
-import RequestHeaders from '../RequestHeaders';
 
 const HttpRequestPane = ({leftPaneWidth}) => {
   return (
@@ -12,14 +12,20 @@ const HttpRequestPane = ({leftPaneWidth}) => {
           <Tab tabIndex="-1">Params</Tab>
           <Tab tabIndex="-1">Body</Tab>
           <Tab tabIndex="-1">Headers</Tab>
-          <Tab tabIndex="-1">Authorization</Tab>
+          <Tab tabIndex="-1">Auth</Tab>
         </TabList>
         <TabPanel>
           <QueryParams />
         </TabPanel>
+        <TabPanel>
+          <div>Body</div>
+        </TabPanel>
         <TabPanel>
           <RequestHeaders />
         </TabPanel>
+        <TabPanel>
+          <div>Auth</div>
+        </TabPanel>
       </Tabs>
     </StyledWrapper>
   )

renderer/components/RequestPane/QueryParams/StyledWrapper.js

@@ -37,6 +37,8 @@ const Wrapper = styled.div`
 
   input[type="checkbox"] {
     cursor: pointer;
+    position: relative;
+    top: 1px;
   }
 `;
 

renderer/components/RequestPane/QueryUrl/index.js

@@ -1,9 +1,9 @@
 import React, { useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { IconCaretDown } from '@tabler/icons';
-import Dropdown from '../Dropdown';
+import Dropdown from 'components/Dropdown';
+import SaveRequestButton from 'components/RequestPane/SaveRequest';
 import StyledWrapper from './StyledWrapper';
-import SaveRequestButton from '../SaveRequest';
 
 const QueryUrl = ({value, onChange, handleRun, collections}) => {
   const dropdownTippyRef = useRef();

renderer/components/RequestPane/RequestHeaders/StyledWrapper.js

@@ -37,6 +37,8 @@ const Wrapper = styled.div`
 
   input[type="checkbox"] {
     cursor: pointer;
+    position: relative;
+    top: 1px;
   }
 `;
 

renderer/components/RequestPane/SaveRequest/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { faFolder } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import StyledWrapper from './StyledWrapper';
-import Modal from '../Modal';
+import Modal from 'components//Modal';
 
 const SaveRequestButton = ({folders}) => {
   const [openSaveRequestModal, setOpenSaveRequestModal] = useState(false);

renderer/components/RequestTabPanel/index.js

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import find from 'lodash/find';
 import { useSelector, useDispatch } from 'react-redux';
-import QueryUrl from 'components/QueryUrl';
+import QueryUrl from 'components/RequestPane/QueryUrl';
-import GraphQLRequestPane from 'components/GraphQLRequestPane';
+import GraphQLRequestPane from 'components/RequestPane/GraphQLRequestPane';
-import HttpRequestPane from 'components/HttpRequestPane';
+import HttpRequestPane from 'components/RequestPane/HttpRequestPane';
 import ResponsePane from 'components/ResponsePane';
 import Welcome from 'components/Welcome';
 import { findItemInCollection } from 'utils/collections';