feat: add textbox for request timeout

packages/bruno-app/src/components/Preferences/General/index.js

@@ -6,6 +6,7 @@ const General = () => {
   const { preferences, setPreferences } = usePreferences();
 
   const [sslVerification, setSslVerification] = useState(preferences.request.sslVerification);
+  const [timeout, setTimeout] = useState(preferences.request.timeout);
 
   const handleCheckboxChange = () => {
     const updatedPreferences = {
@@ -25,11 +26,49 @@ const General = () => {
       });
   };
 
+  const handleTimeoutChange = (value) => {
+    const timeout = value === '' ? 0 : value;
+    const updatedPreferences = {
+      ...preferences,
+      request: {
+        ...preferences.request,
+        timeout
+      }
+    };
+
+    setPreferences(updatedPreferences)
+      .then(() => {
+        setTimeout(timeout);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+
   return (
     <StyledWrapper>
       <div className="flex items-center mt-2">
-        <input type="checkbox" checked={sslVerification} onChange={handleCheckboxChange} className="mr-3 mousetrap" />
-        SSL Certificate Verification
+        <label className="mr-2" style={{ minWidth: 200 }} htmlFor="ssl-cert-verification">
+          SSL Certificate Verification
+        </label>
+        <input
+          id="ssl-cert-verification"
+          type="checkbox"
+          checked={sslVerification}
+          onChange={handleCheckboxChange}
+          className="mousetrap h-4 w-4 mr-0"
+        />
+      </div>
+      <div className="flex items-center mt-2">
+        <label className="mr-2" style={{ minWidth: 200 }}>
+          Request Timeout (in ms)
+        </label>
+        <input
+          value={timeout === 0 ? '' : timeout}
+          onChange={(e) => handleTimeoutChange(e.target.value)}
+          type="text"
+          className="block textbox w-1/6"
+        />
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/providers/Preferences/index.js

@@ -14,13 +14,15 @@ import toast from 'react-hot-toast';
 
 const defaultPreferences = {
   request: {
-    sslVerification: true
+    sslVerification: true,
+    timeout: 0
   }
 };
 
 const preferencesSchema = Yup.object().shape({
   request: Yup.object().shape({
-    sslVerification: Yup.boolean()
+    sslVerification: Yup.boolean(),
+    timeout: Yup.number()
   })
 });