PewRL fixes and updates (#274)

* Endpoint modal initially open w/o useEffect, removed devkey option

* Clear URL button added

* Clear URL button, query params, request body

* Replaced console.error with log()

guide/results-viewer-react/src/components/Modal/index.tsx

@@ -93,6 +93,7 @@ interface ModalProps {
   children?: React.ReactNode;
   isReady?: boolean;
   scrollable?: boolean;
+  initialDisplay?: boolean;
 }
 
 export interface ModalObject {
@@ -136,9 +137,10 @@ export const Modal = forwardRef(({
   submitText = "submit",
   children,
   isReady,
-  scrollable
+  scrollable,
+  initialDisplay = false
 }: ModalProps, ref: Ref<ModalObject>) => {
-  const [display, setDisplay] = useState(false);
+  const [display, setDisplay] = useState(initialDisplay);
   let windowOffset: number = 0;
 
   useImperativeHandle(ref, () => {

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

@@ -0,0 +1,68 @@
+import { PewPewHeader, PewPewQueryParam } from "../../util/yamlwriter";
+import { PewPewQueryParamStringType } from ".";
+import React from "react";
+
+export interface QueryParamsViewProps {
+    id: string;
+    queryParamList: PewPewQueryParam[];
+    removeParam: (param: PewPewQueryParam) => void;
+    changeParam: (paramIndex: number, type: PewPewQueryParamStringType, value: string) => void;
+    addParam: () => void;
+}
+
+function QueryParamsView ({ id, queryParamList, removeParam, changeParam, addParam }: QueryParamsViewProps): 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={() => addParam()}>+</button></span>
+                <span>Name</span>
+                <span>Value</span>
+                </div>
+                {queryParamList.length === 0 && <span>No Query Params yet, click "+" to create one</span>}
+                {queryParamList.map((param: PewPewHeader, index: number) => (
+                <div key={index} style={styles.gridRows}>
+                    <button style={styles.button} onClick={() => removeParam(param)}>X</button>
+                    <input style={styles.input} id={`urlHeaderKey@${index}`} name={id} value={param.name} onChange={(event) => changeParam(index, "name", event.target.value)} />
+                    <input style={styles.input} id={`urlHeaderValue@${index}`} name={id} value={param.value} onChange={(event) => changeParam(index, "value", event.target.value)} />
+                </div>
+                ))}
+            </div>
+            </div>
+        </React.Fragment>
+    );
+}
+
+export default QueryParamsView;

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

@@ -0,0 +1,46 @@
+import { LogLevel, log } from "../../util/log";
+import React from "react";
+
+export interface RequestBodyViewProps {
+    requestBody: object | undefined;
+    updateRequestBody: (newRequestBody: object) => void;
+}
+
+function RequestBodyView ({ requestBody, updateRequestBody }: RequestBodyViewProps): JSX.Element {
+    const [requestBodyInEdit, setRequestBodyInEdit] = React.useState<string>(JSON.stringify(requestBody, null, 2).replace(/\\n/g, "\n").replace(/^"|"$/g, ""));
+
+    const requestBodyDisplayStyle: React.CSSProperties = {
+        fontFamily: "monospace",
+        width: "100%",
+        height: "270px",
+        overflow: "auto",
+        border: "1px solid #ccc",
+        padding: "10px",
+        backgroundColor: "#2e3438",
+        resize: "none",
+        tabSize: 2,
+        boxSizing: "border-box"
+    };
+
+    const handleEditorInput = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const newRequestBody = event.target.value;
+        setRequestBodyInEdit(newRequestBody);
+        try {
+            updateRequestBody(JSON.parse(newRequestBody));
+        } catch (error) {
+            log("Invalid JSON", LogLevel.WARN, error);
+        }
+    };
+
+    return (
+        <React.Fragment>
+            <textarea
+                value={requestBodyInEdit}
+                onChange={handleEditorInput}
+                style={requestBodyDisplayStyle}
+            />
+        </React.Fragment>
+    );
+}
+
+export default RequestBodyView;

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

@@ -1,15 +1,33 @@
 import HeadersView, { HeadersViewProps } from "./HeadersView";
+import QueryParamsView, { QueryParamsViewProps } from "./QueryParamsView";
+import RequestBodyView, { RequestBodyViewProps } from "./RequestBodyView";
 import ResponseView, { ResponseViewProps } from "./ResponseView";
 import React from "react";
 import { TabType } from ".";
 
-interface RequestDetailsTabsProps extends HeadersViewProps, ResponseViewProps {
+interface RequestDetailsTabsProps extends HeadersViewProps, ResponseViewProps, QueryParamsViewProps, RequestBodyViewProps {
     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"];
+  function RequestDetailsTabs ({
+    id,
+    headersList,
+    removeHeader,
+    changeHeader,
+    addHeader,
+    queryParamList,
+    removeParam,
+    changeParam,
+    addParam,
+    response,
+    error,
+    activeTab,
+    handleChangeTab,
+    requestBody,
+    updateRequestBody
+  }: RequestDetailsTabsProps): JSX.Element {
+    const tabs: TabType[] = ["Headers", "Query Params", "Request Body", "Response"];
 
     return (
       <div>
@@ -33,6 +51,8 @@ interface RequestDetailsTabsProps extends HeadersViewProps, ResponseViewProps {
         <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} />}
+          {activeTab === "Query Params" && <QueryParamsView id={id} queryParamList={queryParamList} removeParam={removeParam} changeParam={changeParam} addParam={addParam} />}
+          {activeTab === "Request Body" && <RequestBodyView requestBody={requestBody} updateRequestBody={updateRequestBody} />}
         </div>
       </div>
     );