Merge pull request #699 from balsa-asanovic/improve-form-errors

Form now scrolls up if warning is shown

web/package/cockpit-agama.changes

@@ -1,3 +1,10 @@
+-------------------------------------------------------------------
+Sat Aug 12 11:35:12 UTC 2023 - Balsa Asanovic <[email protected]>
+
+- Added scroll up functionality to the discover iSCSI form when
+  the warning shows up after the submit action
+  (gh#openSUSE/agama#468).
+
 -------------------------------------------------------------------
 Wed Aug  2 18:59:16 UTC 2023 - Balsa Asanovic <[email protected]>
 

web/src/components/storage/iscsi/DiscoverForm.jsx

@@ -19,7 +19,7 @@
  * find current contact information at www.suse.com.
  */
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
   Alert,
   Form, FormGroup,
@@ -46,11 +46,21 @@ export default function DiscoverForm({ onSubmit: onSubmitProp, onCancel }) {
   const [isLoading, setIsLoading] = useState(false);
   const [isFailed, setIsFailed] = useState(false);
   const [isValidAuth, setIsValidAuth] = useState(true);
+  const alertRef = useRef(null);
 
   useEffect(() => {
     setData(savedData);
   }, [setData, savedData]);
 
+  useEffect(() => {
+    // Scroll the alert into view
+    if (isFailed)
+      alertRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+      });
+  });
+
   const updateData = (key, value) => setData({ ...data, [key]: value });
   const onAddressChange = v => updateData("address", v);
   const onPortChange = v => updateData("port", v);
@@ -89,9 +99,15 @@ export default function DiscoverForm({ onSubmit: onSubmitProp, onCancel }) {
     <Popup isOpen title="Discover iSCSI Targets">
       <Form id={id} onSubmit={onSubmit}>
         { isFailed &&
-          <Alert variant="warning" isInline title="Something went wrong">
-            <p>Make sure you provide the correct values</p>
-          </Alert> }
+          <div ref={alertRef}>
+            <Alert
+              variant="warning"
+              isInline
+              title="Something went wrong"
+            >
+              <p>Make sure you provide the correct values</p>
+            </Alert>
+          </div> }
         <FormGroup
           fieldId="address"
           label="IP address"