From a9ee70ae50e84374d36d5918f2ffc43f49755390 Mon Sep 17 00:00:00 2001
From: Christian Michael Kang <ChrisKang@C02FD2MP-BE2069.local>
Date: Thu, 26 Sep 2024 10:23:00 -0600
Subject: [PATCH] Tried to fix all differences between master and my branch,
 added more comments on more of my personal sections of code

---
 guide/results-viewer-react/src/YamlWriter.tsx |  4 +-
 .../src/components/Modal/story.tsx            | 78 +++++++++++++++++++
 .../src/components/YamlWriterUpload/index.tsx | 49 +++---------
 3 files changed, 91 insertions(+), 40 deletions(-)

diff --git a/guide/results-viewer-react/src/YamlWriter.tsx b/guide/results-viewer-react/src/YamlWriter.tsx
index 8f1dd87b..aa990e5c 100644
--- a/guide/results-viewer-react/src/YamlWriter.tsx
+++ b/guide/results-viewer-react/src/YamlWriter.tsx
@@ -96,9 +96,7 @@ export const YamlWriter = () => {
     <GlobalStyle />
     <h1>Create a PewPew Test</h1>
     <YamlDiv>
-      <YamlWriterUpload
-      sendEndpoints={updateEndpoints}
-      />
+      <YamlWriterUpload sendEndpoints={updateEndpoints}/>
       <YamlWriterForm clearParentEndpoints={clearEndpoints} parentEndpoints={state.endpoints}/>
     </YamlDiv>
   </>
diff --git a/guide/results-viewer-react/src/components/Modal/story.tsx b/guide/results-viewer-react/src/components/Modal/story.tsx
index e68e2da5..a0f8f7a8 100644
--- a/guide/results-viewer-react/src/components/Modal/story.tsx
+++ b/guide/results-viewer-react/src/components/Modal/story.tsx
@@ -187,6 +187,76 @@ const ModalCreateYamlDemo = () => {
   );
 };
 
+// const ModalSwaggerUrlDemo = () => {
+//   const modalRef = useRef<ModalObject | null>(null);
+//   useEffectModal(modalRef, LogLevel.INFO);
+
+//   const [swaggerUrl, setSwaggerUrl] = useState('');
+
+//   const submitEvent = () => {
+//     log ("Swagger URL submitted: " + swaggerUrl, LogLevel.INFO);
+//     return Promise.resolve();
+//   };
+
+//   return (
+//     <div>
+//       <GlobalStyle />
+//       <button onClick={() => modalRef.current?.openModal()}>Upload Swagger URL</button>
+//       <Modal
+//         ref={modalRef}
+//         title={"Upload Swagger URL"}
+//         submitText={"Submit"}
+//         onSubmit={submitEvent}
+//         closeText={"Cancel"}
+//         isReady={swaggerUrl.length > 0}
+//       >
+//         <input
+//           type="text"
+//           value={swaggerUrl}
+//           onChange={(e) => setSwaggerUrl(e.target.value)}
+//           placeholder="Enter Swagger URL"
+//           style={{ width: "100%", padding: "8px", marginTop: "10px" }}
+//           />
+//       </Modal>
+//     </div>
+//   );
+// };
+
+// const ModalServerUrlDemo = () => {
+//   const modalRef = useRef<ModalObject | null>(null);
+//   useEffectModal(modalRef, LogLevel.INFO);
+
+//   const [serverUrl, setServerUrl] = useState('');
+
+//   const submitEvent = () => {
+//     log ("Server URL submitted: " + serverUrl, LogLevel.INFO);
+//     return Promise.resolve();
+//   };
+
+//   return (
+//     <div>
+//       <GlobalStyle />
+//       <button onClick={() => modalRef.current?.openModal()}>Insert Server URL</button>
+//       <Modal
+//         ref={modalRef}
+//         title={"Insert Server URL"}
+//         submitText={"Submit"}
+//         onSubmit={submitEvent}
+//         closeText={"Cancel"}
+//         isReady={serverUrl.length > 0}
+//       >
+//         <input
+//           type="text"
+//           value={serverUrl}
+//           onChange={(e) => setServerUrl(e.target.value)}
+//           placeholder="Enter Server URL"
+//           style={{ width: "100%", padding: "8px", marginTop: "10px" }}
+//           />
+//       </Modal>
+//     </div>
+//   );
+// }
+
 export default {
   title: "Modal"
 } as Meta<typeof Modal>;
@@ -206,3 +276,11 @@ export const _LoggerModal: StoryFn = () => (
 export const CreateYamlModal: StoryFn = () => (
   <ModalCreateYamlDemo/>
 );
+
+// export const SwaggerUrlModal: StoryFn = () => (
+//   <ModalSwaggerUrlDemo/>
+// );
+
+// export const ServerUrlModal: StoryFn = () => (
+//   <ModalServerUrlDemo/>
+// );
\ No newline at end of file
diff --git a/guide/results-viewer-react/src/components/YamlWriterUpload/index.tsx b/guide/results-viewer-react/src/components/YamlWriterUpload/index.tsx
index 111a1109..b4f94b60 100644
--- a/guide/results-viewer-react/src/components/YamlWriterUpload/index.tsx
+++ b/guide/results-viewer-react/src/components/YamlWriterUpload/index.tsx
@@ -175,33 +175,6 @@ interface IndexType {
   id: string
 }
 
-// Modal wrapper props to make reusing modal component easier
-interface ModalWrapperProps {
-  modalRef: React.RefObject<ModalObject>;
-  title: string;
-  submitText: string;
-  closeText: string;
-  isReady: boolean;
-  onSubmit: () => void;
-  onClose: () => void;
-  children: React.ReactNode;
-}
-
-// A resusable modal wrapper that accepts props and provides a consistent structure for modals
-const ModalWrapper = ({ modalRef, title, submitText, closeText, isReady, onSubmit, onClose, children }: ModalWrapperProps) => (
-  <Modal
-    ref={modalRef}
-    title={title}
-    submitText={submitText}
-    onSubmit={() => Promise.resolve(onSubmit())}
-    closeText={closeText}
-    onClose={onClose}
-    isReady={isReady}
-  >
-    {children}
-  </Modal>
-);
-
 export const YamlWriterUpload = (props: YamlWriterUploadProps) => {
   const defaultState: YamlWriterUploadState = {
     file: undefined,  // To track the Har file
@@ -419,11 +392,9 @@ export const YamlWriterUpload = (props: YamlWriterUploadProps) => {
     let hasValidVersion: boolean = false;
     let hasValidHost: boolean = false;
     if ("openapi" in swaggerData) {
-      // const swaggerData = unknownData as SwaggerDoc3;
       hasValidServers = Array.isArray(swaggerData.servers) && swaggerData.servers.length > 0;
       hasValidVersion = typeof swaggerData.openapi === "string" && versionRegex.test(swaggerData.openapi);
     } else if ("swagger" in swaggerData) {
-      // const swaggerData = unknownData as SwaggerDoc2;
       hasValidHost = typeof swaggerData.host === "string";
       hasValidVersion = typeof swaggerData.swagger === "string" && versionRegex.test(swaggerData.swagger);
     } else {
@@ -647,7 +618,9 @@ export const YamlWriterUpload = (props: YamlWriterUploadProps) => {
       const fullPath = baseUrl.endsWith("/") || url.startsWith("/") ? `${baseUrl}${url}` : `${baseUrl}/${url}`;
       const hostUrl = new URL(baseUrl).hostname;
 
-      // Create URL object
+      // Create URL-like object without URL encoding the `{}` on the endpoints,
+      // because using the `new URL()` would encode `{}` into `%7B` and `%7D`.
+      // This ensures the curly braces remain intact for the endpoints.
       const parsedUrl = {
         href: fullPath,
         toString: () => fullPath
@@ -745,7 +718,9 @@ export const YamlWriterUpload = (props: YamlWriterUploadProps) => {
               }
             }
 
-            // Create URL object
+            // Create URL-like object without URL encoding the `{}` on the endpoints,
+            // because using the `new URL()` would encode `{}` into `%7B` and `%7D`.
+            // This ensures the curly braces remain intact for the endpoints.
             const parsedUrl = {
               href: fullPath,
               toString: () => fullPath
@@ -902,8 +877,8 @@ export const YamlWriterUpload = (props: YamlWriterUploadProps) => {
           </h3>
       </Div>
       {/* This is the upload file modal */}
-      <ModalWrapper
-        modalRef={fileModalRef}
+      <Modal
+        ref={fileModalRef}
         title="Upload Files"
         submitText="Load"
         closeText="Cancel"
@@ -943,10 +918,10 @@ export const YamlWriterUpload = (props: YamlWriterUploadProps) => {
             </div>
           )}
         </div>
-      </ModalWrapper>
+      </Modal>
       {/* Modal for Swagger URL input */}
-      <ModalWrapper
-        modalRef={swaggerUrlModalRef}
+      <Modal
+        ref={swaggerUrlModalRef}
         title="Enter Swagger URL"
         submitText="Submit"
         closeText="Cancel"
@@ -960,7 +935,7 @@ export const YamlWriterUpload = (props: YamlWriterUploadProps) => {
         <div style={{ width: "90%", height: "auto", display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column" }}>
           <input type="text" style={{ width: "80%", padding: "10px", marginTop: "10px" }} placeholder="Enter Swagger URL" value={state.swaggerUrl} onChange={(e) => setState({ ...state, swaggerUrl: e.target.value })} />
         </div>
-      </ModalWrapper>
+      </Modal>
       {/* This is the modal that opens when a server is missing in a swagger upload */}
       <Modal
         ref= {serverUrlModalRef}