zudoku 0.3.0-dev.65 → 0.3.0-dev.67

package/src/lib/plugins/openapi/playground/Playground.tsx

@@ -154,16 +154,18 @@ export const Playground = ({
 
   const path = url.split("/").map((part, i, arr) => {
     const isPathParam = part.startsWith("{") && part.endsWith("}");
-    const value = formState.pathParams.find(
-      (p) => p.name === part.slice(1, -1),
-    )?.value;
+    const replaced = part.replace(/[{}]/g, "");
+    const value = formState.pathParams.find((p) => p.name === replaced)?.value;
 
     const pathParamValue = value ? (
-      <ColorizedParam backgroundOpacity="0%" name={part} slug={part}>
+      <ColorizedParam backgroundOpacity="25%" name={part} slug={part}>
         {value}
       </ColorizedParam>
     ) : (
-      <span className="underline decoration-wavy decoration-red-500">
+      <span
+        className="underline decoration-wavy decoration-red-500"
+        title={`Missing value for path parameter \`${replaced}\``}
+      >
         {part}
       </span>
     );
@@ -188,7 +190,7 @@ export const Playground = ({
     .filter((p) => p.active)
     .map((p) => (
       <Fragment key={p.name}>
-        {p.name}={p.value}
+        {p.name}={encodeURIComponent(p.value).replaceAll("%20", "+")}
         <wbr />
       </Fragment>
     ));

package/src/lib/plugins/openapi/playground/createUrl.ts

@@ -1,22 +1,19 @@
 import type { PlaygroundForm } from "./Playground.js";
 
 export const createUrl = (host: string, path: string, data: PlaygroundForm) => {
-  const url = new URL(
-    host +
-      path
-        .split("/")
-        .map((v) =>
-          v.startsWith("{") && v.endsWith("}")
-            ? data.pathParams.find((part) => part.name === v.slice(1, -1))
-                ?.value ?? v
-            : v,
-        )
-        .join("/"),
+  const filledPath = path.replace(
+    /\{(\w+)}/g,
+    (_, key) =>
+      data.pathParams.find((part) => part.name === key)?.value || `{${key}}`,
   );
 
-  data.queryParams.forEach((param) => {
-    url.searchParams.set(param.name, param.value);
-  });
+  const url = new URL(filledPath, host);
+
+  data.queryParams
+    .filter((param) => param.active)
+    .forEach((param) => {
+      url.searchParams.set(param.name, param.value);
+    });
 
   return url;
 };