wrap the checkbox in form field

Author: dantovska

redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx

@@ -53,14 +53,16 @@ const SSHDetails = (props: Props) => {
         align={!flexGroupClassName ? 'end' : undefined}
       >
         <FlexItem style={{ width: '230px' }} className={flexItemClassName}>
-          <Checkbox
-            id={id}
-            name="ssh"
-            label={<Text>Use SSH Tunnel</Text>}
-            checked={!!formik.values.ssh}
-            onChange={formik.handleChange}
-            data-testid="use-ssh"
-          />
+          <FormField>
+            <Checkbox
+              id={id}
+              name="ssh"
+              label={<Text>Use SSH Tunnel</Text>}
+              checked={!!formik.values.ssh}
+              onChange={formik.handleChange}
+              data-testid="use-ssh"
+            />
+          </FormField>
         </FlexItem>
       </Row>
 

redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx

@@ -187,15 +187,17 @@ const TlsDetails = (props: Props) => {
   return (
     <>
       <Row gap="m">
-        <FlexItem grow={1}>
-          <Checkbox
-            id={sslId}
-            name="tls"
-            label={<Text>Use TLS</Text>}
-            checked={!!formik.values.tls}
-            onChange={formik.handleChange}
-            data-testid="tls"
-          />
+        <FlexItem>
+          <FormField>
+            <Checkbox
+              id={sslId}
+              name="tls"
+              label={<Text>Use TLS</Text>}
+              checked={!!formik.values.tls}
+              onChange={formik.handleChange}
+              data-testid="tls"
+            />
+          </FormField>
         </FlexItem>
       </Row>