style adjustments and clean up

saucelabs · Aug 23, 2024 · ca255b0 · ca255b0
1 parent 7535895
commit ca255b0
Show file tree

Hide file tree

Showing 14 changed files with 111 additions and 139 deletions.
diff --git a/src/Components/NetworkTable/NetworkTableBody.jsx b/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}
     />
   );

diff --git a/src/Components/ReqDetail/CopyAllButton.jsx b/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;
diff --git a/src/Components/ReqDetail/ReqDetail.styles.scss b/src/Components/ReqDetail/ReqDetail.styles.scss
@@ -1,14 +1,5 @@
 @import "./../../styles/variables";
 
-.no-data {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: $font-size-h4;
-  width: 100%;
-  color: $brand-primary-dark-gray;
-}
-
 .section-container {
   width: 100%;
 }
@@ -53,7 +44,7 @@
 }
 
 .section-detail {
-  padding: $size-xs-s;
+  padding: $size-xs-s $size-s;
 
   .info-row {
     margin: 0;
@@ -74,3 +65,30 @@
     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;
+  }
+}
+
diff --git a/src/Components/ReqDetail/Request.jsx b/src/Components/ReqDetail/Request.jsx
@@ -12,7 +12,7 @@ const Request = ({ data }) => {
     !data.headers.postData?.params &&
     !data.headers.queryString?.length
   ) {
-    return (<h4 className={Styles['no-data']}>This request has no request data available.</h4>);
+    return (<h4 className={Styles['no-payload']}>This request has no request data available.</h4>);
   }
 
   return (!data ? null : (
@@ -23,16 +23,17 @@ const Request = ({ data }) => {
           data={data}
           eventKey="requestPayload"
           isParseEnabled
+          isVisible
         />
       )}
-      {(data.headers.queryString && data.headers.queryString.length) ? (
+      {data.headers.queryString && !!data.headers.queryString.length && (
         <SectionInfo
           component={QueryString}
           data={data}
           eventKey="queryString"
           isEncodeEnabled
         />
-      ) : null}
+      )}
       {data.headers.postData && data.headers.postData.params && (
         <SectionInfo
           component={FormData}

diff --git a/src/Components/ReqDetail/Request.styles.scss b/src/Components/ReqDetail/Request.styles.scss
diff --git a/src/Components/ReqDetail/Response.jsx b/src/Components/ReqDetail/Response.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Styles from './Response.styles.scss';
+import Styles from './ReqDetail.styles.scss';
 import CopyAllButton from './CopyAllButton';
 
 const NoResponseText = () => (
-  <h4 className={Styles['no-response']}>This request has no response data available.</h4>
+  <h4 className={Styles['no-payload']}>This request has no response data available.</h4>
 );
 
 const Response = ({ data }) => {
@@ -16,13 +16,15 @@ const Response = ({ data }) => {
   }
 
   return (
-    <div className={Styles['response-content']}>
-      <div className={Styles['copy-button']}>
-        <CopyAllButton text={content} />
+    <div className={Styles['section-detail']}>
+      <div className={Styles['response-content']}>
+        <div className={Styles['copy-button']}>
+          <CopyAllButton text={content} />
+        </div>
+        <span className={Styles['payload-body']}>
+          {content}
+        </span>
       </div>
-      <span className={Styles['response-body']}>
-        {content}
-      </span>
     </div>
   );
 };

diff --git a/src/Components/ReqDetail/Response.styles.scss b/src/Components/ReqDetail/Response.styles.scss
diff --git a/src/Components/ReqDetail/sections/RequestPayload.jsx b/src/Components/ReqDetail/sections/RequestPayload.jsx
@@ -3,20 +3,23 @@ import PropTypes from 'prop-types';
 
 import Styles from './../ReqDetail.styles.scss';
 import { parseRequestPayload } from '../../../utils';
+import CopyAllButton from '../CopyAllButton';
 
 const RequestPayload = ({ data, isPayloadTransformed }) => {
   const payloadData = data.headers.postData.text;
   const parsedData = useMemo(() => parseRequestPayload(payloadData), [payloadData]);
+  const payload = isPayloadTransformed ? parsedData : payloadData;
 
   return (
     <div className={Styles['section-detail']}>
-      {isPayloadTransformed ? (
-        <div className={Styles['response-content']}>
-          <pre className={Styles['log-body-colorless']}>
-            {parsedData}
-          </pre>
+      <div className={Styles['response-content']}>
+        <div className={Styles['copy-button']}>
+          <CopyAllButton text={payload} />
         </div>
-      ) : payloadData}
+        <div className={Styles['payload-body']}>
+          {payload}
+        </div>
+      </div>
     </div>
   );
 };

diff --git a/src/Components/ReqDetail/sections/SectionInfo.jsx b/src/Components/ReqDetail/sections/SectionInfo.jsx
@@ -1,12 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames/bind';
 
-import Styles from './../ReqDetail.styles.scss';
 import SectionTitle from './SectionTitle';
 
-const context = classNames.bind(Styles);
-
 const SectionInfo = ({
   eventKey,
   data,

diff --git a/src/utils.js b/src/utils.js
@@ -217,7 +217,7 @@ export const prepareViewerData = (entries) => {
       const lastTimeOfEntry = getTotalTimeOfEntry(entry);
       endTime = endTime < lastTimeOfEntry ? lastTimeOfEntry : endTime;
       return {
-        index: +entry.connection || index,
+        index,
         status: entry.response.status,
         method: entry.request.method,
         size: parseSize(entry.response),

diff --git a/tests/__tests__/Components/ReqDetail/__snapshots__/Response.spec.jsx.snap b/tests/__tests__/Components/ReqDetail/__snapshots__/Response.spec.jsx.snap
@@ -3,13 +3,15 @@
 exports[`Response renders without crashing for content 1`] = `
 <div>
   <div>
-    <CopyAllButton
-      text="{\\"foo\\": \\"bar\\"}"
-    />
+    <div>
+      <CopyAllButton
+        text="{\\"foo\\": \\"bar\\"}"
+      />
+    </div>
+    <span>
+      {"foo": "bar"}
+    </span>
   </div>
-  <span>
-    {"foo": "bar"}
-  </span>
 </div>
 `;
 

diff --git a/tests/__tests__/Components/ReqDetail/headers/__snapshots__/RequestPayload.spec.jsx.snap b/tests/__tests__/Components/ReqDetail/headers/__snapshots__/RequestPayload.spec.jsx.snap
@@ -3,9 +3,14 @@
 exports[`RequestPayload renders without crashing 1`] = `
 <div>
   <div>
-    <pre>
+    <div>
+      <CopyAllButton
+        text="{ 'name': 'foo' }"
+      />
+    </div>
+    <div>
       { 'name': 'foo' }
-    </pre>
+    </div>
   </div>
 </div>
 `;