From ee8e162f3dd02e28ebd43117b02b4a03a330710e Mon Sep 17 00:00:00 2001
From: Krystian Marcisz <simivar@gmail.com>
Date: Thu, 22 Aug 2024 14:10:39 +0200
Subject: [PATCH] feat: add hint for Request Path Variables to improve UX
 (#2873)

* feat: add hint for Request Path Variables to improve UX
---
 .../src/components/RequestPane/QueryParams/index.js    | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/bruno-app/src/components/RequestPane/QueryParams/index.js b/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
index ead38b8c9..460def1fd 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
@@ -224,6 +224,16 @@ const QueryParams = ({ item, collection }) => {
               : null}
           </tbody>
         </table>
+        {!(pathParams && pathParams.length) ?
+          <div className="title pr-2 py-3 mt-2 text-xs">
+            Hint: Path variables are automatically added whenever the
+            <code className="font-mono font-medium text-gray-700 dark:text-gray-400 mx-2">:name</code>
+            template is used in the URL, for example:
+            <code className="font-mono font-medium text-gray-700 dark:text-gray-400 mx-2">
+              https://example.com/v1/users/<span className="font-extrabold">:id</span>
+            </code>
+          </div>
+        : null}
       </div>
     </StyledWrapper>
   );