PewPew improvements

guide/results-viewer-react/package.json

@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev": "npm run lint && webpack serve --port 3001 --mode development --open --hot",
+    "dev-lint": "npm run lint && webpack serve --port 3001 --mode development --open --hot",
+    "dev": "webpack serve --port 3001 --mode development --open --hot --watch",
     "watch": "webpack --watch",
     "build": "webpack --mode production",
     "lint": "eslint --fix .",

guide/results-viewer-react/src/components/YamlUrls/HeadersView.tsx

@@ -0,0 +1,68 @@
+import { HeaderType, PewPewHeaderStringType } from ".";
+import { PewPewHeader } from "../../util/yamlwriter";
+import React from "react";
+
+export 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>
+    );
+}
+
+export default HeadersView;

guide/results-viewer-react/src/components/YamlUrls/RequestDetailsTabs.tsx

@@ -0,0 +1,41 @@
+import HeadersView, { HeadersViewProps } from "./HeadersView";
+import ResponseView, { ResponseViewProps } from "./ResponseView";
+import React from "react";
+import { TabType } from ".";
+
+interface RequestDetailsTabsProps extends HeadersViewProps, ResponseViewProps {
+    activeTab: TabType;
+    handleChangeTab: (tab: TabType) => void;
+  }
+
+  function RequestDetailsTabs ({ id, headersList, removeHeader, changeHeader, addHeader, response, error, activeTab, handleChangeTab }: RequestDetailsTabsProps): JSX.Element {
+    const tabs: TabType[] = ["Headers", "Response"];
+
+    return (
+      <div>
+        <div role="tablist" className="tab-list" style={{display: "flex"}}>
+          {tabs.map((tab) => (
+            <button
+              key={tab}
+              role="tab"
+              aria-selected={activeTab === tab}
+              aria-controls={`tabpanel-${tab}`}
+              id={`tab-${tab}`}
+              onClick={() => handleChangeTab(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 response={response} error={error} />}
+        </div>
+      </div>
+    );
+  }
+
+  export default RequestDetailsTabs;

guide/results-viewer-react/src/components/YamlUrls/ResponseView.tsx

@@ -0,0 +1,30 @@
+import { AxiosResponse } from "axios";
+import React from "react";
+
+export interface ResponseViewProps {
+    response: AxiosResponse | undefined;
+    error: string | undefined;
+}
+
+function ResponseView ({ response, error }: ResponseViewProps): JSX.Element {
+    const responseDisplayStyle: React.CSSProperties = {
+        maxHeight: "270px",
+        overflow: "auto",
+        border: "1px solid #ccc",
+        padding: "10px",
+        backgroundColor: "#2e3438"
+    };
+
+    return (
+        <React.Fragment>
+        <p style={{ fontSize: "14px" }}>Code: {response?.status}</p>
+        <div style={responseDisplayStyle}>
+            <pre>
+            {response ? JSON.stringify(response?.data, null, 2) : error}
+            </pre>
+        </div>
+        </React.Fragment>
+    );
+}
+
+export default ResponseView;