Redesign request details (#147)

* configure showReset

* renaming

* Request Details tabs title and layout rework

* style adjustments and clean up

* decrease footer font-size

* reorganize request details files

* add useIsVisible hook for table height

* setup IntersectionObserver config for jest

config/jest/jest.setup.js

@@ -0,0 +1,17 @@
+global.IntersectionObserver = class IntersectionObserver {
+  disconnect() {
+    return null;
+  }
+
+  observe() {
+    return null;
+  }
+
+  takeRecords() {
+    return null;
+  }
+
+  unobserve() {
+    return null;
+  }
+};

jest.config.js

@@ -2,6 +2,7 @@ module.exports = {
   roots: [
     '<rootDir>/tests',
   ],
+  setupFiles: ['<rootDir>/config/jest/jest.setup.js'],
   setupFilesAfterEnv: [
     '<rootDir>/config/setupTests.js',
   ],

src/Components/NetworkTable/NetworkTable.styles.scss

@@ -115,6 +115,7 @@
   padding: $size-xs $size-s;
   display: inline-flex;
   vertical-align: middle;
+  font-size: $font-size-small;
 
   span {
     flex: 1 1 auto;

src/Components/NetworkTable/NetworkTableBody.jsx

@@ -31,7 +31,7 @@ const virtualizedTableRow = ({
       entry={item}
       maxTime={totalNetworkTime}
       onSelect={handleReqSelect}
-      scrollHighlight={selectedReqIndex === index}
+      scrollHighlight={selectedReqIndex === item.index}
       style={style}
     />
   );

src/Components/ReqDetail/CopyAllButton.jsx

@@ -38,11 +38,11 @@ const CopyAllButton = ({ text }) => {
 };
 
 CopyAllButton.propTypes = {
-  text: PropTypes.object,
+  text: PropTypes.any,
 };
 
 CopyAllButton.defaultProps = {
-  text: 'testi testi',
+  text: '',
 };
 
 export default CopyAllButton;

src/Components/ReqDetail/Headers.jsx

@@ -2,56 +2,29 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import General from './headers/General';
-import Response from './headers/Response';
-import Request from './headers/Request';
-import QueryString from './headers/QueryString';
-import FormData from './headers/FormData';
-import HeaderInfo from './headers/HeaderInfo';
-import Styles from './Headers.styles.scss';
-import RequestPayload from './headers/RequestPayload';
+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 : (
-  <section className={Styles['headers-container']}>
-    <HeaderInfo
+  <section className={Styles['section-container']}>
+    <SectionInfo
       component={General}
       data={data}
       eventKey="general"
       isVisible
     />
-    <HeaderInfo
-      component={Request}
+    <SectionInfo
+      component={RequestHeaders}
       data={data}
-      eventKey="request"
+      eventKey="requestHeaders"
     />
-    <HeaderInfo
-      component={Response}
+    <SectionInfo
+      component={ResponseHeaders}
       data={data}
-      eventKey="response"
+      eventKey="responseHeaders"
     />
-    {(data.headers.queryString && data.headers.queryString.length) ? (
-      <HeaderInfo
-        component={QueryString}
-        data={data}
-        eventKey="queryString"
-        isEncodeEnabled
-      />
-    ) : null}
-    {data.headers.postData && data.headers.postData.params && (
-      <HeaderInfo
-        component={FormData}
-        data={data}
-        eventKey="formData"
-        isEncodeEnabled
-      />
-    )}
-    {data.headers.postData && data.headers.postData.text && (
-      <HeaderInfo
-        component={RequestPayload}
-        data={data}
-        eventKey="requestPayload"
-        isParseEnabled
-      />
-    )}
   </section>
 ));
 

src/Components/ReqDetail/ReqDetail.styles.scss

@@ -0,0 +1,94 @@
+@import "./../../styles/variables";
+
+.section-container {
+  width: 100%;
+}
+
+.section-title-row {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: $size-xs $size-s;
+  background: $bg-gray-90;
+  border-top: $border;
+  border-bottom: $border;
+  font-weight: 500;
+  font-size: 13px;
+  color: $brand-primary-dark-gray;
+  width: 100%;
+
+  &:first-child {
+    border-top: 0;
+  }
+
+  .section-title {
+    display: flex;
+    align-content: center;
+
+    .caret-icon {
+      fill: $brand-primary-gray;
+      height: $size-m;
+      width: $size-m;
+      margin-right: $size-xs;
+    }
+  }
+
+  .encode-url {
+    margin-left: $size-s;
+    font-size: $font-size-small;
+  }
+
+  &:focus, span:focus {
+    outline: none;
+  }
+}
+
+.section-detail {
+  padding: $size-xs-s $size-s;
+
+  .info-row {
+    margin: 0;
+    font-size: $font-size-small;
+    padding-bottom: $size-xs;
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+
+  .info-caption {
+    font-weight: bold;
+    padding-right: $size-xs-s;
+  }
+
+  .info-value {
+    word-break: break-all;
+  }
+}
+
+.no-payload {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: $font-size-h4;
+  width: 100%;
+  color: $brand-primary-dark-gray;
+}
+
+.response-content {
+  font-size: $font-size-small;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .copy-button {
+    align-self: end;
+  }
+
+  .payload-body {
+    font-family: monospace;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+}
+

src/Components/ReqDetail/Request.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import QueryString from './request/QueryString';
+import FormData from './request/FormData';
+import SectionInfo from './SectionInfo';
+import Styles from './ReqDetail.styles.scss';
+import RequestPayload from './request/RequestPayload';
+
+const Request = ({ data }) => {
+  if (!data.headers.postData?.text &&
+    !data.headers.postData?.params &&
+    !data.headers.queryString?.length
+  ) {
+    return (<h4 className={Styles['no-payload']}>This request has no request data available.</h4>);
+  }
+
+  return (!data ? null : (
+    <section className={Styles['section-container']}>
+      {data.headers.postData && data.headers.postData.text && (
+        <SectionInfo
+          component={RequestPayload}
+          data={data}
+          eventKey="requestPayload"
+          isParseEnabled
+          isVisible
+        />
+      )}
+      {data.headers.queryString && !!data.headers.queryString.length && (
+        <SectionInfo
+          component={QueryString}
+          data={data}
+          eventKey="queryString"
+          isEncodeEnabled
+        />
+      )}
+      {data.headers.postData && data.headers.postData.params && (
+        <SectionInfo
+          component={FormData}
+          data={data}
+          eventKey="formData"
+          isEncodeEnabled
+        />
+      )}
+    </section>
+  ));
+};
+
+Request.propTypes = {
+  data: PropTypes.object,
+};
+
+Request.defaultProps = {
+  data: null,
+};
+
+export default Request;