From 319f9d5fcfa8b792a71479e7f3c932e38b2deb94 Mon Sep 17 00:00:00 2001
From: blonde-mike <macrowther7+git@gmail.com>
Date: Wed, 27 Nov 2024 13:50:47 -0700
Subject: [PATCH] Michael/perf 1699 (#270)

* Updated Request tool to get it online

* Removed unused component

* Updates to remove lint errors
---
 guide/results-viewer-react/package-lock.json  |  56 ++-
 guide/results-viewer-react/package.json       |   1 +
 .../src/components/Modal/index.tsx            |  19 +-
 .../components/YamlQuestionBubble/index.tsx   |   4 +-
 .../src/components/YamlUrls/index.tsx         | 338 +++++++++++-------
 .../src/components/YamlUrls/story.tsx         |  24 +-
 6 files changed, 302 insertions(+), 140 deletions(-)

diff --git a/guide/results-viewer-react/package-lock.json b/guide/results-viewer-react/package-lock.json
index 6b0ae943..be2e8954 100644
--- a/guide/results-viewer-react/package-lock.json
+++ b/guide/results-viewer-react/package-lock.json
@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@fs/hdr-histogram-wasm": "file:./lib/hdr-histogram-wasm",
+        "axios": "^1.7.8",
         "chart.js": "~4.4.0",
         "chartjs-adapter-date-fns": "^3.0.0",
         "date-fns": "^3.0.0",
@@ -5400,6 +5401,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/attr-accept": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
@@ -5425,6 +5431,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.8.tgz",
+      "integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "9.2.1",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.2.1.tgz",
@@ -6357,6 +6373,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@@ -6909,6 +6936,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -7974,7 +8009,6 @@
       "version": "1.15.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
       "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -8062,6 +8096,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -9524,7 +9571,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -9534,7 +9580,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mime-db": "1.52.0"
@@ -10679,6 +10724,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/public-encrypt": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
diff --git a/guide/results-viewer-react/package.json b/guide/results-viewer-react/package.json
index b3cb6ae8..c35f1e05 100644
--- a/guide/results-viewer-react/package.json
+++ b/guide/results-viewer-react/package.json
@@ -29,6 +29,7 @@
   "homepage": "https://github.com/FamilySearch/pewpew/tree/master/lib/config-wasm#readme",
   "dependencies": {
     "@fs/hdr-histogram-wasm": "file:./lib/hdr-histogram-wasm",
+    "axios": "^1.7.8",
     "chart.js": "~4.4.0",
     "chartjs-adapter-date-fns": "^3.0.0",
     "date-fns": "^3.0.0",
diff --git a/guide/results-viewer-react/src/components/Modal/index.tsx b/guide/results-viewer-react/src/components/Modal/index.tsx
index 0868b546..d20d0d2c 100644
--- a/guide/results-viewer-react/src/components/Modal/index.tsx
+++ b/guide/results-viewer-react/src/components/Modal/index.tsx
@@ -92,6 +92,7 @@ interface ModalProps {
   submitText?: string;
   children?: React.ReactNode;
   isReady?: boolean;
+  scrollable?: boolean;
 }
 
 export interface ModalObject {
@@ -134,7 +135,8 @@ export const Modal = forwardRef(({
   onSubmit,
   submitText = "submit",
   children,
-  isReady
+  isReady,
+  scrollable
 }: ModalProps, ref: Ref<ModalObject>) => {
   const [display, setDisplay] = useState(false);
   let windowOffset: number = 0;
@@ -177,10 +179,15 @@ export const Modal = forwardRef(({
   };
 
   const submit = (event?: React.MouseEvent<HTMLButtonElement>) => {
-    const scrollY = document.getElementById("root")!.style.top;
-    document.getElementById("root")!.style.position = "";
-    document.getElementById("root")!.style.top = "";
-    window.scrollTo(0, parseInt(scrollY || "0", 10) * -1);
+    const root = document.getElementById("root");
+    if (root) {
+      const scrollY = root.style.top;
+      root.style.position = "";
+      root.style.top = "";
+      window.scrollTo(0, parseInt(scrollY || "0", 10) * -1);
+    } else {
+      log("Cannot find element #root", LogLevel.DEBUG);
+    }
     if (onSubmit) {
       onSubmit(event).finally(() => setDisplay(false));
     } else {
@@ -195,7 +202,7 @@ export const Modal = forwardRef(({
   <ModalStyle>
     <ModalDiv id="modal">
       {title && <ModalTitle>{title}</ModalTitle>}
-      <ModalContent>{children}</ModalContent>{/* Any elements that are children of modal will be rendered here */}
+      <ModalContent style={!scrollable ? {overflow: "unset"} : {}}>{children}</ModalContent>{/* Any elements that are children of modal will be rendered here */}
       <ModalActions>
         {onSubmit &&
           <button className="toggle-button" id="submitBtn" onClick={submit} disabled={!isReady}>
diff --git a/guide/results-viewer-react/src/components/YamlQuestionBubble/index.tsx b/guide/results-viewer-react/src/components/YamlQuestionBubble/index.tsx
index 4204edb8..7f7cdd99 100644
--- a/guide/results-viewer-react/src/components/YamlQuestionBubble/index.tsx
+++ b/guide/results-viewer-react/src/components/YamlQuestionBubble/index.tsx
@@ -35,8 +35,8 @@ const QuestionBubbleStyling = styled.span`
 export function QuestionBubble ({ text, href }: QuestionBubbleProps) {
   return (
     <QuestionBubbleStyling>
-    {href && <span style={{marginRight: "8px"}} className="questionHover"><a href={href} target="_blank"><i style={{fontFamily: "Arial"}}>?</i></a><span className="questionHoverText">{text}</span></span>}
-    {!href && <span style={{marginRight: "8px"}} className="questionHover"><i style={{fontFamily: "Arial"}}>?</i><span className="questionHoverText">{text}</span></span>}
+    {href && <span style={{marginRight: "8px"}} className="questionHover"><a href={href} target="_blank"><i style={{fontFamily: "Arial", fontSize: "14px"}}>?</i></a><span className="questionHoverText">{text}</span></span>}
+    {!href && <span style={{marginRight: "8px"}} className="questionHover"><i style={{fontFamily: "Arial", fontSize: "14px"}}>?</i><span className="questionHoverText">{text}</span></span>}
     </QuestionBubbleStyling>
     );
 }
diff --git a/guide/results-viewer-react/src/components/YamlUrls/index.tsx b/guide/results-viewer-react/src/components/YamlUrls/index.tsx
index c75be5d9..b2791d7a 100644
--- a/guide/results-viewer-react/src/components/YamlUrls/index.tsx
+++ b/guide/results-viewer-react/src/components/YamlUrls/index.tsx
@@ -2,23 +2,17 @@ import { Div, Label, Span } from "../YamlStyles";
 import { LogLevel, log } from "../../util/log";
 import { Modal, ModalObject, useEffectModal } from "../Modal";
 import { PewPewAPI, PewPewHeader } from "../../util/yamlwriter";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import axios, { AxiosRequestConfig, Method } from "axios";
 import QuestionBubble from "../YamlQuestionBubble";
 import styled from "styled-components";
 import { uniqueId } from "../../util/clientutil";
 
-// import axios from "axios";
-
-const ModalEndpointInput = styled.div`
+const ModalInput = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   margin-bottom: 10px;
 `;
-const ModalHitMethodInput = styled.div`
-  display: flex;
-  flex-direction: row;
-  margin: 25px 0;
-`;
 const EndpointDisplay = styled.span`
   margin-right: 5px;
   max-width: 450px;
@@ -26,6 +20,12 @@ const EndpointDisplay = styled.span`
   white-space: nowrap;
   overflow: hidden;
 `;
+const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 5px;
+`;
 
 export interface UrlProps {
   deleteUrl: (id: string) => void;
@@ -98,6 +98,12 @@ export function Urls ({ data: { headers, ...data }, ...props }: UrlProps) {
   const defaultState: UrlState = {
     passed: false
   };
+  const [url, setUrl] = useState(data.url);
+  const [method, setMethod] = useState(data.method as Method);
+  const [headersList, setHeadersList] = useState<PewPewHeader[]>(headers);
+  const [lastResponse, setLastResponse] = useState<Record<string, any>>();
+  const [lastResponseCode, setLastResponseCode] = useState<string>();
+  const enableSubmit = useMemo(() => isValidUrl(url), [url]);
   // /** Map to keep id's unique */
   const headersMap = new Map(headers.map((header) => ([header.id, header])));
 
@@ -137,65 +143,25 @@ export function Urls ({ data: { headers, ...data }, ...props }: UrlProps) {
     }
   }, [props.defaultHeaders]);
 
-  // Currently unoperational. Needs a server to access websites correctly.
-  // Would recommend simply using Postman instead of getting this function to work.
-  // Postman is already used by a lot of the FamilySearch org and does what this function below would do and more.
-  // Users can also simply create the testing script, test endpoints locally with pew pew, and edit the endpoints as needed.
-  const checkUrl = () => {
-    alert("Currently not working. Sorry!");
-    // console.log(data.url);
-    // const myUrl = `https://cors-escape-git-master.shalvah.now.sh/${data.url}`;
-    // console.log(myUrl);
-    /* let xhr = new XMLHttpRequest();
-    xhr.onreadystatechange = function () {
-      if (readyState === 4 && status === 200) {
-        let response = responseText;
-        console.log(response);
-      }
+  async function makeRequest () {
+    const request: AxiosRequestConfig = {
+      method,
+      url,
+      headers: headersList.reduce((acc, header) => {
+        acc[header.name] = header.value;
+        return acc;
+      }, {} as Record<string, string>),
+      validateStatus: () => true
+    };
+    try {
+      const response = await axios(request);
+      setLastResponseCode(response.status + " " + response.statusText);
+      setLastResponse(response.data);
+      return response.data;
+    } catch (error) {
+      throw error;
     }
-    xhr.open("GET", myUrl);
-    xhr.setRequestHeader("Accept", "application/json");
-    xhr.send(); */
-
-    /* fetch(myUrl, {
-      method: "POST",
-      headers: {
-        "Accept-Language": "en-us",
-        "Accept": "application/json",
-        "Content-Type": "application/json",
-      },
-      redirect: "follow",
-    })
-      .then(response => {
-        console.log(response);
-        if (response.ok) {
-          response.text().then(text => {
-            console.log(text);
-            //setState((prevState: UrlState): UrlState => ({...prevState, passed: true}));
-          })
-        }
-      })
-      .catch(error => console.error(error));
-  } */
-    /* axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
-    axios.get(myUrl)
-      .then((response) => {
-        console.log(response);
-        if (response.statusText === "OK") {
-          setState((prevState: UrlState): UrlState => ({...prevState, passed: true }));
-        } else {
-          setState((prevState: UrlState): UrlState => ({...prevState, passed: false }));
-        }
-      })
-      .catch((error) => {
-        console.error(error);
-        setState((prevState: UrlState): UrlState => ({...prevState, passed: false }));
-      })
-      .finally(() => {
-        props.updateReady(state.urlReady && state.hitReady);
-      });
-      */
-  };
+  }
 
   // Adds header to array in given url
   // Url found by id
@@ -204,10 +170,10 @@ export function Urls ({ data: { headers, ...data }, ...props }: UrlProps) {
     // Adding header when Authenticated option is checked
     if (headerType === DEFAULT_HEADERS) {
       // add all
-      props.addHeaders(data.id, getDefaultHeaders());
+      setHeadersList((prevHeadersList) => prevHeadersList.concat(getDefaultHeaders(props.authenticated)));
     } else {
       // put at end
-      props.addHeaders(data.id, [getHeader(headerType)]);
+      setHeadersList((prevHeadersList) => prevHeadersList.concat(getHeader(headerType)));
     }
   };
 
@@ -218,10 +184,9 @@ export function Urls ({ data: { headers, ...data }, ...props }: UrlProps) {
     log("removeHeader " + headerId, LogLevel.DEBUG);
     if (headerId === DEFAULT_HEADERS) {
       // Remove both!
-      props.deleteHeader(data.id, ACCEPT_LANGUAGE);
-      props.deleteHeader(data.id, CONTENT_TYPE);
+      setHeadersList((prevHeadersList) => prevHeadersList.filter((header) => header.id !== ACCEPT_LANGUAGE && header.id !== CONTENT_TYPE));
     } else {
-      props.deleteHeader(data.id, headerId);
+      setHeadersList((prevHeadersList) => prevHeadersList.filter((header) => header.id !== headerId));
     }
   };
 
@@ -231,16 +196,22 @@ export function Urls ({ data: { headers, ...data }, ...props }: UrlProps) {
   };
 
   const changeHeader = (headerIndex: number, type: PewPewHeaderStringType, value: string) => {
-    // const header: PewPewHeader = headers[headerIndex];
-    // // type = "name" or "value"
-    // header[type] = value;
-    // Typechecking above ^ for next line
-    headers[headerIndex][type] = value;
-    props.changeUrl({ ...data, headers });
+    setHeadersList((prevHeadersList) => {
+      const newHeadersList = [...prevHeadersList];
+      newHeadersList[headerIndex][type] = value;
+      return newHeadersList;
+    });
+  };
+
+  const updateEndpointHandler = () => {
+    changeUrl("method", method);
+    changeUrl("url", url);
+    props.changeUrl({ ...data, headers: headersList });
+    return Promise.resolve();
   };
 
   const checked = state.passed ? " Passed" : "";
-  const invalidUrl: boolean = !isValidUrl(data.url);
+  const invalidUrl: boolean = !isValidUrl(url);
   const urlStyle: React.CSSProperties = getUrlStyle(invalidUrl);
   const urlTitle: string | undefined = getUrlTitle(invalidUrl);
   const invalidHitRate = !HIT_RATE_REGEX.test(data.hitRate);
@@ -253,53 +224,45 @@ export function Urls ({ data: { headers, ...data }, ...props }: UrlProps) {
         ref={modalRef}
         title="Edit Endpoint"
         closeText="Close"
+        submitText="Update Endpoint"
+        onSubmit={updateEndpointHandler}
+        isReady={enableSubmit}
+        scrollable={false}
         >
-        <ModalEndpointInput>
-            <Label> Endpoint: {checked}</Label>
-            <input style={{ ...urlStyle, width: "500px" }} onChange={(event) => changeUrl("url", event.target.value)} title={urlTitle} name={data.id} value={data.url} id="urlUrl" />
-            <button onClick={checkUrl} disabled={invalidUrl} title={invalidUrl ? "Endpoint URL is not valid" : "Attempt to call this Endpoint"}>Test</button>
-            <p style={{marginLeft: "10px", fontSize: "11px"}}>Endpoint must be in the form "https://www.(url)" or "http://www.(url)" </p>
-        </ModalEndpointInput>
-        <ModalHitMethodInput>
-          <Span>
-            <Label> Hit Rate: </Label>
-            <QuestionBubble text="Required | Number, then hph, hpm, or hps"></QuestionBubble>
-            <input style={{ ...getHitRateStyle(invalidHitRate), width: "75px" }} onChange={(event) => changeUrl("hitRate", event.target.value)} name={data.id} value={data.hitRate} id="urlHitrate" title={getHitRateTitle(invalidHitRate)} />
-          </Span>
-          <Span>
-            <Label> Method: </Label>
-              <select onChange={(event) => changeUrl("method", event.target.value)} name={data.id} value={data.method} id="urlMethod">
-                <option value="GET"> Get </option>
-                <option value="POST"> Post </option>
-                <option value="PUT"> Put </option>
-                <option value="DELETE"> Delete </option>
-                <option value="PATCH"> Patch </option>
-              </select>
-          </Span>
-          <button name={data.id} style={{marginRight: "10px"}} onClick={() => addHeader()}>Add Header</button>
-        </ModalHitMethodInput>
-        <div>
-          <table>
-            <thead>
-              <tr>
-                <th></th>
-                <th>Name</th>
-                <th>Value</th>
-              </tr>
-            </thead>
-            <tbody>
-              {headers.map((header: PewPewHeader, index: number) => {
-                // This maps out all of the headers uploaded from har file
-                return (
-                  <tr key={header.id}>
-                    <td><button onClick={() => removeHeader(header.id)}>X</button></td>
-                    <td style={{alignSelf: "center"}}><input id={`urlHeaderKey@${index}`} name={data.id} value={header.name} onChange={(event) => changeHeader(index, "name", event.target.value)} /></td>
-                    <td><textarea style={{width: "450px", resize: "none"}} id={`urlHeaderValue@${index}`} name={data.id} value={header.value} onChange={(event) => changeHeader(index, "value", event.target.value)} /></td>
-                  </tr>);
-              })}
-            </tbody>
-          </table>
-        </div>
+        <Row style={{ alignItems: "start"}}>
+            <Span style={{ margin: 0 }}>
+              <ModalInput>
+                <Label style={{ fontSize: "14px", marginBottom: "5px" }} htmlFor="urlMethod"> Method </Label>
+                <select onChange={(event) => setMethod(event.target.value as Method)} name={data.id} value={method} id="urlMethod">
+                  <option value="GET"> Get </option>
+                  <option value="POST"> Post </option>
+                  <option value="PUT"> Put </option>
+                  <option value="DELETE"> Delete </option>
+                  <option value="PATCH"> Patch </option>
+                </select>
+              </ModalInput>
+            </Span>
+            <ModalInput style={{ flexGrow: 1 }}>
+              <Row>
+                <Label style={{ fontSize: "14px" }} htmlFor="urlUrl"> Endpoint {checked}</Label>
+                <p style={{ fontSize: "10px", margin: 0 }}> (must be in the form "https://www.[url]" or "http://www.[url]")</p>
+              </Row>
+              <Row>
+                <input style={{ ...urlStyle, width: "100%" }} onChange={(event) => setUrl(event.target.value)} title={urlTitle} name={data.id} value={url} id="urlUrl" type="text" />
+                <button style={{ cursor: "pointer" }} onClick={makeRequest} disabled={invalidUrl} title={invalidUrl ? "Endpoint URL is not valid" : "Attempt to call this Endpoint"} type="submit">Test</button>
+              </Row>
+            </ModalInput>
+            <Span style={{ marginRight: 0, marginLeft: "10px" }}>
+              <ModalInput>
+                <Row>
+                  <Label htmlFor="urlHitrate" style={{ fontSize: "14px" }}> Hit Rate </Label>
+                  <QuestionBubble text="Required | Number, then hph, hpm, or hps"></QuestionBubble>
+                </Row>
+                <input style={{ ...getHitRateStyle(invalidHitRate), width: "75px" }} onChange={(event) => changeUrl("hitRate", event.target.value)} name={data.id} value={data.hitRate} id="urlHitrate" title={getHitRateTitle(invalidHitRate)} />
+              </ModalInput>
+            </Span>
+        </Row>
+        <RequestDetailsTabs id={data.id} headersList={headersList} removeHeader={removeHeader} changeHeader={changeHeader} addHeader={addHeader} responseCode={lastResponseCode} response={lastResponse} />
       </Modal>
       <button onClick={() => modalRef.current?.openModal()}>Edit</button>
       <button id={data.id} onClick={() => props.deleteUrl(data.id)}>X</button>
@@ -308,3 +271,126 @@ export function Urls ({ data: { headers, ...data }, ...props }: UrlProps) {
 }
 
 export default Urls;
+
+interface RequestDetailsTabsProps extends HeadersViewProps, ResponseViewProps {}
+
+function RequestDetailsTabs ({ id, headersList, removeHeader, changeHeader, addHeader, responseCode, response }: RequestDetailsTabsProps): JSX.Element {
+  type tabType = "Headers" | "Response"
+  const [activeTab, setActiveTab] = useState<tabType>("Headers");
+  const tabs: tabType[] = ["Headers", "Response"];
+
+  return (
+    <div>
+      <div role="tablist" className="tab-list">
+        {tabs.map((tab) => (
+          <button
+            key={tab}
+            role="tab"
+            aria-selected={activeTab === tab}
+            aria-controls={`tabpanel-${tab}`}
+            id={`tab-${tab}`}
+            onClick={() => setActiveTab(tab)}
+            className={`tab ${activeTab === tab ? "active" : ""}`}
+            disabled={activeTab === tab}
+            style={{width: `${100 / tabs.length}%`}}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
+      <div role="tabpanel" id={`tabpanel-${activeTab}`} aria-labelledby={`tab-${activeTab}`}>
+        {activeTab === "Headers" && <HeadersView id={id} headersList={headersList} removeHeader={removeHeader} changeHeader={changeHeader} addHeader={addHeader} />}
+        {activeTab === "Response" && <ResponseView responseCode={responseCode} response={response} />}
+      </div>
+    </div>
+  );
+}
+
+interface HeadersViewProps {
+  id: string;
+  headersList: PewPewHeader[];
+  removeHeader: (headerId: string) => void;
+  changeHeader: (headerIndex: number, type: PewPewHeaderStringType, value: string) => void;
+  addHeader: (headerType?: HeaderType) => void;
+}
+
+function HeadersView ({ id, headersList, removeHeader, changeHeader, addHeader }: HeadersViewProps): JSX.Element {
+  const styles: Record<string, React.CSSProperties> = {
+    headersDisplay: {
+      marginTop: "10px",
+      maxHeight: "300px",
+      overflow: "auto"
+    },
+    gridContainer: {
+      display: "grid",
+      gap: "10px"
+    },
+    gridHeader: {
+      display: "grid",
+      gridTemplateColumns: "auto 1fr 2fr",
+      gap: "10px",
+      fontWeight: "bold",
+      height: "20px"
+    },
+    gridRows: {
+      display: "grid",
+      gridTemplateColumns: "auto 1fr 2fr",
+      gap: "10px",
+      alignItems: "stretch"
+    },
+    input: {
+      boxSizing: "border-box"
+    },
+    button: {
+      boxSizing: "border-box",
+      whiteSpace: "nowrap"
+    }
+  };
+  return (
+    <React.Fragment>
+        <div style={styles.headersDisplay}>
+          <div style={styles.gridContainer}>
+            <div style={styles.gridHeader}>
+              <span><button name={id} onClick={() => addHeader()}>+</button></span>
+              <span>Name</span>
+              <span>Value</span>
+            </div>
+            {headersList.length === 0 && <span>No Headers yet, click "+" to create one</span>}
+            {headersList.map((header: PewPewHeader, index: number) => (
+              <div key={index} style={styles.gridRows}>
+                <button style={styles.button} onClick={() => removeHeader(header.id)}>X</button>
+                <input style={styles.input} id={`urlHeaderKey@${index}`} name={id} value={header.name} onChange={(event) => changeHeader(index, "name", event.target.value)} />
+                <input style={styles.input} id={`urlHeaderValue@${index}`} name={id} value={header.value} onChange={(event) => changeHeader(index, "value", event.target.value)} />
+              </div>
+            ))}
+          </div>
+        </div>
+    </React.Fragment>
+  );
+}
+
+interface ResponseViewProps {
+  responseCode: string | undefined;
+  response: Record<string, any> | undefined;
+}
+
+function ResponseView ({ responseCode, response }: ResponseViewProps): JSX.Element {
+  const responseDisplayStyle: React.CSSProperties = {
+    maxHeight: "300px",
+    overflow: "auto",
+    border: "1px solid #ccc",
+    padding: "10px",
+    backgroundColor: "#2e3438"
+  };
+
+  return (
+    <React.Fragment>
+      <p style={{ fontSize: "14px" }}>Code: {responseCode}</p>
+      <div style={responseDisplayStyle}>
+        <pre>
+          {JSON.stringify(response, null, 2)}
+        </pre>
+      </div>
+    </React.Fragment>
+  );
+}
\ No newline at end of file
diff --git a/guide/results-viewer-react/src/components/YamlUrls/story.tsx b/guide/results-viewer-react/src/components/YamlUrls/story.tsx
index 6206563a..add38737 100644
--- a/guide/results-viewer-react/src/components/YamlUrls/story.tsx
+++ b/guide/results-viewer-react/src/components/YamlUrls/story.tsx
@@ -19,6 +19,7 @@ const props: UrlProps = {
  changeUrl: (pewpewUrl: PewPewAPI) => {
    // eslint-disable-next-line no-console
    console.log("changing url", pewpewUrl);
+  //  TODO: Update the URL properly
  },
  addHeaders: (urlId: string, newHeaders: PewPewHeader[]) => {
    // eslint-disable-next-line no-console
@@ -82,16 +83,33 @@ export default {
   title: "YamlUrls"
 } as Meta<typeof Urls>;
 
-export const Default: StoryFn = () => (
+export const Default: StoryFn = () => {
+  const [state, setState] = useState(props.data);
+
+  const addHeaders = (urlId: string, newHeaders: PewPewHeader[]) => {
+    const url = state;
+    url.headers = [...url.headers, ...newHeaders];
+    url.id = urlId;
+    setState(url);
+  };
+
+  const deleteHeader = (urlId: string, headerId: string) => {
+    const url = state;
+    url.headers = url.headers.filter((header) => header.id !== headerId);
+    url.id = urlId;
+    setState(url);
+  };
+
+  return (
   <React.Fragment>
     <GlobalStyle />
     <DisplayDivMain>
       <UrlsDiv>
-        <Urls {...props}></Urls>
+        <Urls {...props} addHeaders={addHeaders} deleteHeader={deleteHeader}></Urls>
       </UrlsDiv>
     </DisplayDivMain>
   </React.Fragment>
-);
+);};
 
 export const Loaded: StoryFn = () => (
   <React.Fragment>