reorganize request details files

src/Components/ReqDetail/Headers.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import General from './sections/General';
-import ResponseHeaders from './sections/ResponseHeaders';
-import RequestHeaders from './sections/RequestHeaders';
-import SectionInfo from './sections/SectionInfo';
+import General from './headers/General';
+import ResponseHeaders from './headers/ResponseHeaders';
+import RequestHeaders from './headers/RequestHeaders';
+import SectionInfo from './SectionInfo';
 import Styles from './ReqDetail.styles.scss';
 
 const Headers = ({ data }) => (!data ? null : (

src/Components/ReqDetail/Request.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import QueryString from './sections/QueryString';
-import FormData from './sections/FormData';
-import SectionInfo from './sections/SectionInfo';
+import QueryString from './request/QueryString';
+import FormData from './request/FormData';
+import SectionInfo from './SectionInfo';
 import Styles from './ReqDetail.styles.scss';
-import RequestPayload from './sections/RequestPayload';
+import RequestPayload from './request/RequestPayload';
 
 const Request = ({ data }) => {
   if (!data.headers.postData?.text &&

src/Components/ReqDetail/sections/SectionTitle.jsx → src/Components/ReqDetail/SectionTitle.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { SECTION_TITLES, PAYLOAD_CAPTIONS } from './../../../constants';
-import Styles from './../ReqDetail.styles.scss';
-import IconCaretDown from '../../../icons/IconCaretDown';
-import IconCaretRight from '../../../icons/IconCaretRight';
+import { SECTION_TITLES, PAYLOAD_CAPTIONS } from '../../constants';
+import Styles from './ReqDetail.styles.scss';
+import IconCaretDown from '../../icons/IconCaretDown';
+import IconCaretRight from '../../icons/IconCaretRight';
 
 const SectionTitle = ({
   onClick,

src/Components/ReqDetail/sections/General.jsx → src/Components/ReqDetail/headers/General.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Styles from './../ReqDetail.styles.scss';
+import Styles from '../ReqDetail.styles.scss';
 import { GENERAL_HEADERS } from '../../../constants';
 
 const General = ({ data }) => (

src/Components/ReqDetail/sections/RequestHeaders.jsx → src/Components/ReqDetail/headers/RequestHeaders.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Styles from './../ReqDetail.styles.scss';
+import Styles from '../ReqDetail.styles.scss';
 
 const RequestHeaders = ({ data }) => (
   <div className={Styles['section-detail']}>

src/Components/ReqDetail/sections/ResponseHeaders.jsx → src/Components/ReqDetail/headers/ResponseHeaders.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Styles from './../ReqDetail.styles.scss';
+import Styles from '../ReqDetail.styles.scss';
 
 const ResponseHeaders = ({ data }) => (
   <div className={Styles['section-detail']}>

src/Components/ReqDetail/sections/FormData.jsx → src/Components/ReqDetail/request/FormData.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Styles from './../ReqDetail.styles.scss';
+import Styles from '../ReqDetail.styles.scss';
 
 const FormData = ({ data, isPayloadTransformed }) => (
   <div className={Styles['section-detail']}>

src/Components/ReqDetail/sections/QueryString.jsx → src/Components/ReqDetail/request/QueryString.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Styles from './../ReqDetail.styles.scss';
+import Styles from '../ReqDetail.styles.scss';
 
 const QueryString = ({ data, isPayloadTransformed }) => (
   <div className={Styles['section-detail']}>

src/Components/ReqDetail/sections/RequestPayload.jsx → src/Components/ReqDetail/request/RequestPayload.jsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
-import Styles from './../ReqDetail.styles.scss';
+import Styles from '../ReqDetail.styles.scss';
 import { parseRequestPayload } from '../../../utils';
 import CopyAllButton from '../CopyAllButton';
 

tests/__tests__/Components/ReqDetail/headers/FormData.spec.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import FormData from '../../../../../src/Components/ReqDetail/sections/FormData';
+import FormData from '../../../../../src/Components/ReqDetail/request/FormData';
 
 describe('FormData', () => {
   const props = {

tests/__tests__/Components/ReqDetail/headers/General.spec.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import General from '../../../../../src/Components/ReqDetail/sections/General';
+import General from '../../../../../src/Components/ReqDetail/headers/General';
 
 describe('General', () => {
   const props = {

tests/__tests__/Components/ReqDetail/headers/QueryString.spec.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import QueryString from '../../../../../src/Components/ReqDetail/sections/QueryString';
+import QueryString from '../../../../../src/Components/ReqDetail/request/QueryString';
 
 describe('QueryString', () => {
   const props = {

tests/__tests__/Components/ReqDetail/headers/RequestHeaders.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import RequestHeaders from '../../../../../src/Components/ReqDetail/sections/RequestHeaders';
+import RequestHeaders from '../../../../../src/Components/ReqDetail/headers/RequestHeaders';
 
 describe('RequestHeaders', () => {
   const props = {

tests/__tests__/Components/ReqDetail/headers/RequestPayload.spec.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import RequestPayload from '../../../../../src/Components/ReqDetail/sections/RequestPayload';
+import RequestPayload from '../../../../../src/Components/ReqDetail/request/RequestPayload';
 
 describe('RequestPayload', () => {
   const props = {

tests/__tests__/Components/ReqDetail/headers/ResponseHeaders.spec.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import ResponseHeaders from '../../../../../src/Components/ReqDetail/sections/ResponseHeaders';
+import ResponseHeaders from '../../../../../src/Components/ReqDetail/headers/ResponseHeaders';
 
 describe('ResponseHeaders', () => {
   const props = {

tests/__tests__/Components/ReqDetail/headers/SectionInfo.spec.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import SectionInfo from '../../../../../src/Components/ReqDetail/sections/SectionInfo';
+import SectionInfo from '../../../../../src/Components/ReqDetail/SectionInfo';
 
 describe('SectionInfo', () => {
   const props = {

tests/__tests__/Components/ReqDetail/headers/SectionTitle.spec.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import SectionTitle from '../../../../../src/Components/ReqDetail/sections/SectionTitle';
+import SectionTitle from '../../../../../src/Components/ReqDetail/SectionTitle';
 
 describe('SectionTitle', () => {
   const props = {