Merge pull request #598 from Ross-Gargett/bugfix/negative-timeout

Fixes Bug #597 : Timeout field validation

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

@@ -1,67 +1,96 @@
-import React, { useState } from 'react';
+import React from 'react';
+import { useFormik } from 'formik';
 import { useSelector, useDispatch } from 'react-redux';
 import { savePreferences } from 'providers/ReduxStore/slices/app';
 import StyledWrapper from './StyledWrapper';
+import * as Yup from 'yup';
+import toast from 'react-hot-toast';
 
 const General = ({ close }) => {
   const preferences = useSelector((state) => state.app.preferences);
   const dispatch = useDispatch();
 
-  const [sslVerification, setSslVerification] = useState(preferences.request.sslVerification);
-  const [timeout, setTimeout] = useState(preferences.request.timeout);
+  const preferencesSchema = Yup.object().shape({
+    sslVerification: Yup.boolean(),
+    timeout: Yup.number('Request Timeout must be a number')
+      .positive('Request Timeout must be a positive number')
+      .typeError('Request Timeout must be a number')
+      .optional()
+  });
 
-  const handleSave = () => {
+  const formik = useFormik({
+    initialValues: {
+      sslVerification: preferences.request.sslVerification,
+      timeout: preferences.request.timeout
+    },
+    validationSchema: preferencesSchema,
+    onSubmit: async (values) => {
+      try {
+        const newPreferences = await proxySchema.validate(values, { abortEarly: true });
+        handleSave(newPreferences);
+      } catch (error) {
+        console.error('Preferences validation error:', error.message);
+      }
+    }
+  });
+
+  const handleSave = (newPreferences) => {
     dispatch(
       savePreferences({
         ...preferences,
         request: {
-          sslVerification,
-          timeout
+          sslVerification: newPreferences.sslVerification,
+          timeout: newPreferences.timeout
         }
       })
-    ).then(() => {
-      close();
-    });
-  };
-
-  const handleTimeoutChange = (value) => {
-    const validTimeout = isNaN(Number(value)) ? timeout : Number(value);
-    setTimeout(validTimeout);
+    )
+      .then(() => {
+        close();
+      })
+      .catch((err) => console.log(err) && toast.error('Failed to update preferences'));
   };
 
   return (
     <StyledWrapper>
-      <div className="flex items-center mt-2">
-        <label className="mr-2 select-none" style={{ minWidth: 200 }} htmlFor="ssl-cert-verification">
-          SSL/TLS Certificate Verification
-        </label>
-        <input
-          id="ssl-cert-verification"
-          type="checkbox"
-          checked={sslVerification}
-          onChange={() => setSslVerification(!sslVerification)}
-          className="mousetrap mr-0"
-        />
-      </div>
-      <div className="flex flex-col mt-6">
-        <label className="block font-medium select-none">Request Timeout (in ms)</label>
-        <input
-          type="text"
-          className="block textbox mt-2 w-1/4"
-          autoComplete="off"
-          autoCorrect="off"
-          autoCapitalize="off"
-          spellCheck="false"
-          onChange={(e) => handleTimeoutChange(e.target.value)}
-          defaultValue={timeout === 0 ? '' : timeout}
-        />
-      </div>
-
-      <div className="mt-10">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
-          Save
-        </button>
-      </div>
+      <form className="bruno-form" onSubmit={formik.handleSubmit}>
+        <div className="flex items-center mt-2">
+          <label className="block font-medium mr-2 select-none" style={{ minWidth: 200 }} htmlFor="sslVerification">
+            SSL/TLS Certificate Verification
+          </label>
+          <input
+            id="ssl-cert-verification"
+            type="checkbox"
+            name="sslVerification"
+            checked={formik.values.sslVerification}
+            onChange={formik.handleChange}
+            className="mousetrap mr-0"
+          />
+        </div>
+        <div className="flex flex-col mt-6">
+          <label className="block font-medium select-none" htmlFor="timeout">
+            Request Timeout (in ms)
+          </label>
+          <input
+            type="text"
+            name="timeout"
+            className="block textbox mt-2 w-16"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck="false"
+            onChange={formik.handleChange}
+            value={formik.values.timeout}
+          />
+        </div>
+        {formik.touched.timeout && formik.errors.timeout ? (
+          <div className="text-red-500">{formik.errors.timeout}</div>
+        ) : null}
+        <div className="mt-10">
+          <button type="submit" className="submit btn btn-sm btn-secondary">
+            Save
+          </button>
+        </div>
+      </form>
     </StyledWrapper>
   );
 };

packages/bruno-app/src/providers/ReduxStore/slices/app.js

@@ -9,7 +9,8 @@ const initialState = {
   showHomePage: false,
   preferences: {
     request: {
-      sslVerification: true
+      sslVerification: true,
+      timeout: 0
     },
     font: {
       codeFont: 'default'