storage: Scroll dialog fields into view as needed

When fields fail validation, the first of them is scrolled into view. Additionally, when the encryption fields of the Format dialog are revealed, they are scrolled into view. https://bugzilla.redhat.com/show_bug.cgi?id=2264540
cockpit-project · Feb 19, 2024 · 6c8e3a2 · 6c8e3a2
1 parent 1d80179
commit 6c8e3a2
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 3 deletions.
diff --git a/pkg/storaged/block/format-dialog.jsx b/pkg/storaged/block/format-dialog.jsx
@@ -440,6 +440,9 @@ function format_dialog_internal(client, path, start, size, enable_dos_extended,
                 }
                 if (vals.type == "efi" && !vals.mount_point)
                     dlg.set_values({ mount_point: "/boot/efi" });
+            } else if (trigger == "crypto") {
+                if (vals.crypto != "none" && vals.crypto != " keep")
+                    dlg.show_field("crypto_options");
             }
         },
         Action: {

diff --git a/pkg/storaged/dialog.jsx b/pkg/storaged/dialog.jsx
@@ -286,15 +286,15 @@ const Row = ({ field, values, errors, onChange }) => {
                 </>
             );
         return (
-            <FormGroup label={titleLabel} hasNoPaddingTop={field.hasNoPaddingTop}>
+            <FormGroup data-tag={tag} label={titleLabel} hasNoPaddingTop={field.hasNoPaddingTop}>
                 { field_elts }
                 { nested_elts }
                 <FormHelper helperText={explanation} helperTextInvalid={validated && error} />
             </FormGroup>
         );
     } else if (!field.bare) {
         return (
-            <FormGroup validated={validated} hasNoPaddingTop={field.hasNoPaddingTop}>
+            <FormGroup data-tag={tag} validated={validated} hasNoPaddingTop={field.hasNoPaddingTop}>
                 { field_elts }
                 { nested_elts }
                 <FormHelper helperText={explanation} helperTextInvalid={validated && error} />
@@ -465,14 +465,45 @@ export const dialog_open = (def) => {
                 return null;
         })).then(results => {
             const errors = { };
-            fields.forEach((f, i) => { if (results[i]) errors[f.tag] = results[i]; });
+            let scrolled = false;
+            fields.forEach((f, i) => {
+                if (results[i]) {
+                    if (!scrolled) {
+                        show_field(f.tag);
+                        scrolled = true;
+                    }
+                    errors[f.tag] = results[i];
+                }
+            });
             if (Object.keys(errors).length > 0)
                 return Promise.reject(errors);
         });
     };
 
     const dlg = show_modal_dialog(props(), footer_props(null, null));
 
+    function show_field(tag) {
+        function scroll() {
+            const dialog_element = document.querySelector('#dialog .pf-v5-c-modal-box__body');
+            const field_element = document.querySelector('#dialog [data-tag="' + tag + '"]');
+
+            if (field_element) {
+                if (dialog_element) {
+                    // check if we need to scroll
+                    if (field_element.getBoundingClientRect().bottom <=
+                        dialog_element.getBoundingClientRect().bottom)
+                        return;
+                }
+
+                field_element.scrollIntoView({ behavior: "smooth", block: "end" });
+            }
+        }
+        // By the time show_field is called from the "update"
+        // callback, newly visible fields don't exist yet in the
+        // DOM, so delay the scrolling a bit.
+        window.setTimeout(scroll, 10);
+    }
+
     const self = {
         run: (title, promise) => {
             update_footer(title, promise);
@@ -537,6 +568,8 @@ export const dialog_open = (def) => {
             update();
         },
 
+        show_field: show_field,
+
         close: () => {
             dlg.footerProps.dialog_done();
         }