Request Details tabs title and layout rework

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

Hide file tree

Showing 22 changed files with 264 additions and 229 deletions.
diff --git a/src/Components/ReqDetail/Headers.jsx b/src/Components/ReqDetail/Headers.jsx
@@ -8,7 +8,7 @@ import SectionInfo from './sections/SectionInfo';
 import Styles from './ReqDetail.styles.scss';
 
 const Headers = ({ data }) => (!data ? null : (
-  <section className={Styles['headers-container']}>
+  <section className={Styles['section-container']}>
     <SectionInfo
       component={General}
       data={data}

diff --git a/src/Components/ReqDetail/ReqDetail.styles.scss b/src/Components/ReqDetail/ReqDetail.styles.scss
@@ -9,40 +9,41 @@
   color: $brand-primary-dark-gray;
 }
 
-.headers-container {
+.section-container {
   width: 100%;
+}
 
-  .header-info {
-    border-bottom: 1px solid $white-90;
-    padding-bottom: $size-xs-s;
-    margin-bottom: $size-xs-s;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
+.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%;
 
-    &.active {
-      .caret-icon {
-        transform: translateY(-1px) translateX(-5px) rotate(180deg);
-      }
-    }
+  &:first-child {
+    border-top: 0;
   }
-}
 
-.header-title {
-  margin: 0;
-  cursor: pointer;
-  display: inline-block;
+  .section-title {
+    display: flex;
+    align-content: center;
 
-  .caret-icon {
-    display: inline-block;
-    height: $size-xs-s;
-    transform: translateY(-1px) translateX(-5px) rotate(90deg);
-    width: $size-xs-s;
+    .caret-icon {
+      fill: $brand-primary-gray;
+      height: $size-m;
+      width: $size-m;
+      margin-right: $size-xs;
+    }
   }
 
   .encode-url {
-    margin-left: $size-xs-s;
+    margin-left: $size-s;
     font-size: $font-size-small;
   }
 
@@ -51,9 +52,8 @@
   }
 }
 
-.header-detail {
-  padding-top: $size-xs-s;
-  padding-left: $size-xs-s;
+.section-detail {
+  padding: $size-xs-s;
 
   .info-row {
     margin: 0;

diff --git a/src/Components/ReqDetail/Request.jsx b/src/Components/ReqDetail/Request.jsx
@@ -16,7 +16,7 @@ const Request = ({ data }) => {
   }
 
   return (!data ? null : (
-    <section className={Styles['headers-container']}>
+    <section className={Styles['section-container']}>
       {data.headers.postData && data.headers.postData.text && (
         <SectionInfo
           component={RequestPayload}

diff --git a/src/Components/ReqDetail/Response.styles.scss b/src/Components/ReqDetail/Response.styles.scss
@@ -14,6 +14,7 @@
   width: 100%;
   display: flex;
   flex-direction: column;
+  padding: 0 $size-xs-s;
 
   .copy-button {
     align-self: end;

diff --git a/src/Components/ReqDetail/sections/FormData.jsx b/src/Components/ReqDetail/sections/FormData.jsx
@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 import Styles from './../ReqDetail.styles.scss';
 
 const FormData = ({ data, isPayloadTransformed }) => (
-  <div className={Styles['header-detail']}>
+  <div className={Styles['section-detail']}>
     {data.headers.postData.params.map(({ name, value }, index) => (
-      <p
+      <div
         key={`${name}-${index}`}
         className={Styles['info-row']}
       >
@@ -16,7 +16,7 @@ const FormData = ({ data, isPayloadTransformed }) => (
         <span className={Styles['info-value']}>
           {isPayloadTransformed ? decodeURIComponent(value) : value}
         </span>
-      </p>
+      </div>
     ))}
   </div>
 );

diff --git a/src/Components/ReqDetail/sections/General.jsx b/src/Components/ReqDetail/sections/General.jsx
@@ -5,7 +5,7 @@ import Styles from './../ReqDetail.styles.scss';
 import { GENERAL_HEADERS } from '../../../constants';
 
 const General = ({ data }) => (
-  <div className={Styles['header-detail']}>
+  <div className={Styles['section-detail']}>
     {Object.entries(GENERAL_HEADERS).map(([dataKey, { key, name }]) => (
       <div
         key={dataKey}

diff --git a/src/Components/ReqDetail/sections/QueryString.jsx b/src/Components/ReqDetail/sections/QueryString.jsx
@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 import Styles from './../ReqDetail.styles.scss';
 
 const QueryString = ({ data, isPayloadTransformed }) => (
-  <div className={Styles['header-detail']}>
+  <div className={Styles['section-detail']}>
     {data.headers.queryString.map(({ name, value }, index) => (
-      <p
+      <div
         key={`${name}-${index}`}
         className={Styles['info-row']}
       >
@@ -16,7 +16,7 @@ const QueryString = ({ data, isPayloadTransformed }) => (
         <span className={Styles['info-value']}>
           {isPayloadTransformed ? decodeURIComponent(value) : value}
         </span>
-      </p>
+      </div>
     ))}
   </div>
 );

diff --git a/src/Components/ReqDetail/sections/RequestHeaders.jsx b/src/Components/ReqDetail/sections/RequestHeaders.jsx
@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 import Styles from './../ReqDetail.styles.scss';
 
 const RequestHeaders = ({ data }) => (
-  <div className={Styles['header-detail']}>
+  <div className={Styles['section-detail']}>
     {data.headers.request.map(({ name, value }, index) => (
-      <p
+      <div
         key={`${name}-${index}`}
         className={Styles['info-row']}
       >
@@ -16,7 +16,7 @@ const RequestHeaders = ({ data }) => (
         <span className={Styles['info-value']}>
           {value}
         </span>
-      </p>
+      </div>
     ))}
   </div>
 );

diff --git a/src/Components/ReqDetail/sections/RequestPayload.jsx b/src/Components/ReqDetail/sections/RequestPayload.jsx
@@ -9,7 +9,7 @@ const RequestPayload = ({ data, isPayloadTransformed }) => {
   const parsedData = useMemo(() => parseRequestPayload(payloadData), [payloadData]);
 
   return (
-    <div className={Styles['header-detail']}>
+    <div className={Styles['section-detail']}>
       {isPayloadTransformed ? (
         <div className={Styles['response-content']}>
           <pre className={Styles['log-body-colorless']}>

diff --git a/src/Components/ReqDetail/sections/ResponseHeaders.jsx b/src/Components/ReqDetail/sections/ResponseHeaders.jsx
@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 import Styles from './../ReqDetail.styles.scss';
 
 const ResponseHeaders = ({ data }) => (
-  <div className={Styles['header-detail']}>
+  <div className={Styles['section-detail']}>
     {data.headers.response.map(({ name, value }, index) => (
-      <p
+      <div
         key={`${name}-${index}`}
         className={Styles['info-row']}
       >
@@ -16,7 +16,7 @@ const ResponseHeaders = ({ data }) => (
         <span className={Styles['info-value']}>
           {value}
         </span>
-      </p>
+      </div>
     ))}
   </div>
 );

diff --git a/src/Components/ReqDetail/sections/SectionInfo.jsx b/src/Components/ReqDetail/sections/SectionInfo.jsx
@@ -26,17 +26,18 @@ const SectionInfo = ({
   });
 
   return (
-    <div className={context('header-info', { active: isOpen })}>
+    <>
       <SectionTitle
         eventKey={eventKey}
         isEncodeEnabled={isEncodeEnabled}
+        isOpen={isOpen}
         isParseEnabled={isParseEnabled}
         isPayloadTransformed={isPayloadTransformed}
         onClick={() => setIsOpen(!isOpen)}
         onPayloadTransform={handlePayloadTransform}
       />
       {isOpen && <ChildComponent />}
-    </div>
+    </>
   );
 };
 

diff --git a/src/Components/ReqDetail/sections/SectionTitle.jsx b/src/Components/ReqDetail/sections/SectionTitle.jsx
@@ -1,29 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { HEADERS_TITLES, PAYLOAD_CAPTIONS } from './../../../constants';
-import IconCaretUp from './../../../icons/IconCaretUp';
+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,
   eventKey,
   isEncodeEnabled,
+  isOpen,
   onPayloadTransform,
   isPayloadTransformed,
   isParseEnabled,
 }) => {
   const payloadStatus = PAYLOAD_CAPTIONS[isParseEnabled ? 'parse' : 'encode'][isPayloadTransformed];
 
   return (
-    <div className={Styles['header-title']}>
+    <div className={Styles['section-title-row']}>
       <span
-        onClick={() => onClick(HEADERS_TITLES[eventKey].key)}
+        className={Styles['section-title']}
+        onClick={() => onClick(SECTION_TITLES[eventKey].key)}
         role="button"
         tabIndex={0}
       >
-        <IconCaretUp className={Styles['caret-icon']} />
-        {HEADERS_TITLES[eventKey].name}
+        {isOpen ?
+          <IconCaretDown className={Styles['caret-icon']} /> :
+          <IconCaretRight className={Styles['caret-icon']} />}
+        {SECTION_TITLES[eventKey].name}
       </span>
       {(isEncodeEnabled || isParseEnabled) && (
         <span
@@ -42,6 +47,7 @@ const SectionTitle = ({
 SectionTitle.propTypes = {
   eventKey: PropTypes.string.isRequired,
   isEncodeEnabled: PropTypes.bool,
+  isOpen: PropTypes.bool,
   isParseEnabled: PropTypes.bool,
   isPayloadTransformed: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
@@ -50,6 +56,7 @@ SectionTitle.propTypes = {
 
 SectionTitle.defaultProps = {
   isEncodeEnabled: false,
+  isOpen: false,
   isParseEnabled: false,
   isPayloadTransformed: true,
 };

diff --git a/src/Containers/ReqDetailContainer.styles.scss b/src/Containers/ReqDetailContainer.styles.scss
@@ -1,7 +1,7 @@
 @import "./../styles/variables";
 
 $close-button-width: 35px;
-$tab-height: 35px;
+$tab-height: 32px;
 
 .req-detail-container {
   width: 70%;
@@ -12,24 +12,24 @@ $tab-height: 35px;
   position: relative;
 
   .nav-tabs {
+    height: $tab-height;
     padding-left: $close-button-width;
-    border: 0;
   }
 
   .tab-link {
-    color: $white-33;
-    border: 0;
-    border-bottom: 2px solid transparent;
+    color: $brand-primary-dark-gray;
     padding: $size-xs-s $size-s $size-xs;
+    border: 0;
+    margin: 0;
 
     &:hover {
       text-decoration: none;
     }
 
     &.active {
-      border: 0;
-      color: $white-20;
-      border-bottom: 2px solid $white-20;
+      color: $brand-primary-dark-gray;
+      font-weight: 600;
+      border-bottom: 2px solid $brand-primary-dark-gray;
     }
   }
 
@@ -63,7 +63,6 @@ $tab-height: 35px;
   .tabs-container {
     display: flex;
     width: 100%;
-    padding: $size-s $size-m;
     height: calc(100% - #{$tab-height});
     overflow: auto;
     outline: none;

diff --git a/src/constants.js b/src/constants.js
@@ -259,7 +259,7 @@ export const GENERAL_HEADERS = Object.freeze({
   }),
 });
 
-export const HEADERS_TITLES = Object.freeze({
+export const SECTION_TITLES = Object.freeze({
   general: Object.freeze({
     key: 'general',
     name: 'General',
@@ -272,6 +272,10 @@ export const HEADERS_TITLES = Object.freeze({
     key: 'responseHeaders',
     name: 'Response Headers',
   }),
+  requestPayload: Object.freeze({
+    key: 'requestPayload',
+    name: 'Request Payload',
+  }),
   queryString: Object.freeze({
     key: 'queryString',
     name: 'Query String Parameters',
@@ -280,10 +284,6 @@ export const HEADERS_TITLES = Object.freeze({
     key: 'formData',
     name: 'Form Data',
   }),
-  requestPayload: Object.freeze({
-    key: 'requestPayload',
-    name: 'Request Payload',
-  }),
 });
 
 export const MAX_COLOR_CONTENT_SIZE = 100000; // 100kB

diff --git a/src/icons/IconCaretDown.jsx b/src/icons/IconCaretDown.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const IconCaretDown = ({ className }) => (
+  <svg
+    className={className}
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M5.04607 8.29925C4.94259 8.1833 5.02523 8 5.181 8H18.8192C18.975 8 19.0577 8.1833 18.9542 8.29925L12.1351 15.9397C12.0632 16.0201 11.937 16.0201 11.8652 15.9397L5.04607 8.29925Z" />
+  </svg>
+);
+
+IconCaretDown.propTypes = {
+  className: PropTypes.string,
+};
+
+IconCaretDown.defaultProps = {
+  className: '',
+};
+
+export default IconCaretDown;