WIP

Author: mvollmer

src/components/common/dialog.tsx

@@ -21,10 +21,10 @@
 
 /* TODOs:
 
+   - find a way to have optional values in DialogState...
    - progress reporting
    - action cancelling
-   - async, debounced validation
-   - async init
+   - debounced validation
    - different validation rules for different actions
  */
 
@@ -442,8 +442,8 @@
 
  */
 
-import React from "react";
-import { useObject, useOn } from 'hooks';
+import React, { useState } from "react";
+import { useObject, useInit, useOn } from 'hooks';
 import { EventEmitter } from 'cockpit/event';
 
 import cockpit from "cockpit";
@@ -452,9 +452,13 @@ import { Button, type ButtonProps } from "@patternfly/react-core/dist/esm/compon
 import { FormGroup, type FormGroupProps, FormHelperText } from "@patternfly/react-core/dist/esm/components/Form";
 import { TextInput, type TextInputProps } from "@patternfly/react-core/dist/esm/components/TextInput";
 import { Alert } from "@patternfly/react-core/dist/esm/components/Alert/index.js";
-import { HelperText, HelperTextItem } from "@patternfly/react-core/dist/esm/components/HelperText";
+import {
+    HelperText, HelperTextItem, type HelperTextItemProps
+} from "@patternfly/react-core/dist/esm/components/HelperText";
 import { Checkbox } from "@patternfly/react-core/dist/esm/components/Checkbox";
-import { FormSelect, type FormSelectProps } from "@patternfly/react-core/dist/esm/components/FormSelect";
+import {
+    FormSelect, type FormSelectProps, FormSelectOption
+} from "@patternfly/react-core/dist/esm/components/FormSelect";
 import { Radio } from "@patternfly/react-core/dist/esm/components/Radio";
 
 const _ = cockpit.gettext;
@@ -465,7 +469,9 @@ type ArrayElement<ArrayType> =
 interface DialogValidationState {
     cached_value: unknown;
     cached_result: string | undefined;
-    // TODO - all the stuff for async
+    validation_promise: Promise<void> | undefined;
+    validation_object: Record<string, string | undefined>;
+    // TODO - all the stuff for debounce
 }
 
 function toSpliced<T>(arr: T[], start: number, deleteCount: number, ...rest: T[]): T[] {
@@ -559,17 +565,22 @@ export class DialogValue<T> {
             Object.is(this.dialog.validation_state[this.path].cached_value, val)) {
             v = this.dialog.validation_state[this.path].cached_result;
             console.log("CACHE HIT", this.path, v);
+            this.dialog.validation_state[this.path].validation_object = this.dialog.validation;
         } else {
             v = func(val);
             if (!(this.path in this.dialog.validation_state)) {
                 this.dialog.validation_state[this.path] = {
                     cached_value: val,
-                    cached_result: v
+                    cached_result: v,
+                    validation_promise: undefined,
+                    validation_object: this.dialog.validation,
                 };
             } else {
                 const state = this.dialog.validation_state[this.path];
                 state.cached_value = val;
                 state.cached_result = v;
+                state.validation_promise = undefined;
+                state.validation_object = this.dialog.validation;
             }
             console.log("VALIDATE", this.path, v);
         }
@@ -580,6 +591,70 @@ export class DialogValue<T> {
             this.dialog.update();
         }
     }
+
+    validate_async(_debounce: number, func: (val: T) => Promise<string | undefined>): void {
+        // TODO - implement debouncing
+        const val = this.get();
+        if (this.path in this.dialog.validation_state &&
+            Object.is(this.dialog.validation_state[this.path].cached_value, val)) {
+            const v = this.dialog.validation_state[this.path].cached_result;
+            console.log("CACHE HIT", this.path, v);
+            this.dialog.validation_state[this.path].validation_object = this.dialog.validation;
+            if (v) {
+                this.dialog.validation[this.path] = v;
+                this.dialog.validation_failed = true;
+                this.dialog.online_validation = true;
+                this.dialog.update();
+            }
+        } else {
+            console.log("START VALIDATE ASYNC", this.path, val);
+            const prom =
+                func(val)
+                        .catch(
+                            ex => {
+                                console.error(ex);
+                                return undefined;
+                            }
+                        )
+                        .then(
+                            v => {
+                                const state = this.dialog.validation_state[this.path];
+                                if (Object.is(state.validation_promise, prom)) {
+                                    state.validation_promise = undefined;
+                                    state.cached_result = v;
+                                    if (Object.is(state.validation_object, this.dialog.validation)) {
+                                        console.log("DONE VALIDATE ASYNC", this.path, v);
+                                        if (v) {
+                                            this.dialog.validation[this.path] = v;
+                                            this.dialog.validation_failed = true;
+                                            this.dialog.online_validation = true;
+                                            this.dialog.update();
+                                        }
+                                    } else {
+                                        console.log("OUTDATED", this.path);
+                                    }
+                                } else {
+                                    console.log("OVERTAKEN", this.path);
+                                }
+                            }
+                        );
+
+            if (!(this.path in this.dialog.validation_state)) {
+                this.dialog.validation_state[this.path] = {
+                    cached_value: val,
+                    cached_result: undefined,
+                    validation_promise: prom,
+                    validation_object: this.dialog.validation,
+                };
+            } else {
+                const state = this.dialog.validation_state[this.path];
+                state.cached_value = val;
+                state.cached_result = undefined;
+                state.validation_promise = prom;
+                state.validation_object = this.dialog.validation;
+            }
+        }
+    }
 }
 
 interface DialogStateEvents {
@@ -621,6 +696,17 @@ export class DialogState<V> extends EventEmitter<DialogStateEvents> {
         this.update();
     }
 
+    async wait_for_validation_promises(): Promise<void> {
+        for (const path in this.validation_state) {
+            const state = this.validation_state[path];
+            if (state.validation_promise) {
+                console.log("WAITING FOR", path);
+                await state.validation_promise;
+                console.log("WAITING DONE FOR", path);
+            }
+        }
+    }
+
     rename_validation_state(path: string, from: number, to: number) {
         const from_path = path + "." + String(from);
         const to_path = path + "." + String(to);
@@ -689,7 +775,7 @@ export class DialogState<V> extends EventEmitter<DialogStateEvents> {
 
     async validate(): Promise<boolean> {
         this.trigger_validation();
-        // TODO - wait for the asyncs to be done
+        await this.wait_for_validation_promises();
         return Object.keys(this.validation).length == 0;
     }
 }
@@ -708,7 +794,27 @@ export function useDialogState<V extends object>(
     return dlg;
 }
 
-// export function useDialogState_async<V>(...)
+export function useDialogState_async<V extends object>(
+    init: () => Promise<V>,
+    validate: (dlg: DialogState<V>) => void
+) : null | DialogError | DialogState<V> {
+    const [dlg, setDlg] = useState<null | DialogError | DialogState<V>>(null);
+    // HACK - Remove the "!" annotation once pkg/lib/hooks is fixed
+    // See https://github.com/cockpit-project/cockpit/pull/22677
+    useOn((dlg instanceof DialogError ? null : dlg)!, "changed");
+    useInit(async () => {
+        try {
+            const init_vals: V = await init();
+            setDlg(new DialogState(init_vals, validate));
+        } catch (ex) {
+            if (ex instanceof DialogError)
+                setDlg(ex);
+            else
+                setDlg(DialogError.fromError(_("Error during initialization"), ex));
+        }
+    });
+    return dlg;
+}
 
 // Common elements
 
@@ -736,15 +842,15 @@ export class DialogError {
 export function DialogErrorMessage<V>({
     dialog,
 } : {
-    dialog: DialogState<V>
+    dialog: DialogState<V> | DialogError | null,
 }) {
-    if (!dialog.error)
+    const err = (!dialog || dialog instanceof DialogError) ? dialog : dialog.error;
+    if (!err)
         return null;
 
     let title: string;
     let details: React.ReactNode;
 
-    const err = dialog.error;
     if (err instanceof DialogError) {
         title = err.title;
         details = err.details;
@@ -775,19 +881,19 @@ export function DialogActionButton<V>({
     onClose = undefined,
     ...props
 } : {
-    dialog: DialogState<V> | null,
+    dialog: DialogState<V> | DialogError | null,
     children: React.ReactNode,
     action: (values: V) => Promise<void>,
     onClose?: undefined | (() => void)
 } & Omit<ButtonProps, "id" | "action" | "isLoading" | "isDisabled" | "variant" | "onClick">) {
     return (
         <Button
             id="dialog-apply"
-            isLoading={!!dialog && dialog.busy}
-            isDisabled={!dialog || dialog.actions_disabled}
+            isLoading={!!dialog && !(dialog instanceof DialogError) && dialog.busy}
+            isDisabled={!dialog || dialog instanceof DialogError || dialog.actions_disabled}
             variant="primary"
             onClick={() => {
-                cockpit.assert(dialog);
+                cockpit.assert(dialog && !(dialog instanceof DialogError));
                 dialog.run_action(vals => action(vals).then(onClose || (() => {})));
             }}
             {...props}
@@ -802,13 +908,13 @@ export function DialogCancelButton<V>({
     onClose,
     ...props
 } : {
-    dialog: DialogState<V>,
+    dialog: DialogState<V> | DialogError | null,
     onClose: () => void
 } & Omit<ButtonProps, "id" | "isDisabled" | "variant" | "onClick">) {
     return (
         <Button
             id="dialog-cancel"
-            isDisabled={dialog.cancel_disabled}
+            isDisabled={!dialog || dialog instanceof DialogError || dialog.cancel_disabled}
             variant="link"
             onClick={onClose}
             {...props}
@@ -823,13 +929,19 @@ export function DialogCancelButton<V>({
 
 export function DialogHelperText<V>({
     value,
+    warning = null,
     explanation = null,
 } : {
     value: DialogValue<V>,
+    warning?: React.ReactNode;
     explanation?: React.ReactNode;
 }) {
     let text: React.ReactNode = value.validation_text();
-    let variant: "error" | "default" = "error";
+    let variant: HelperTextItemProps["variant"] = "error";
+    if (!text && warning) {
+        text = warning;
+        variant = "warning";
+    }
     if (!text) {
         text = explanation;
         variant = "default";
@@ -875,12 +987,14 @@ export const DialogTextInput = ({
     label = null,
     value,
     excuse = null,
+    warning = null,
     isDisabled = false,
     ...props
 } : {
     label?: React.ReactNode,
     value: DialogValue<string>,
     excuse?: null | string,
+    warning?: React.ReactNode,
     isDisabled?: boolean,
 } & Omit<TextInputProps, "id" | "label" | "value" | "onChange">) => {
     return (
@@ -892,7 +1006,7 @@ export const DialogTextInput = ({
                 isDisabled={!!excuse || isDisabled}
                 {...props}
             />
-            <DialogHelperText explanation={excuse} value={value} />
+            <DialogHelperText explanation={excuse} warning={warning} value={value} />
         </OptionalFormGroup>
     );
 };
@@ -996,3 +1110,43 @@ export function DialogRadioSelect<T extends string>({
         </OptionalFormGroup>
     );
 }
+
+export function DialogSelect<T>({
+    label,
+    value,
+    warning = null,
+    explanation = null,
+    options,
+    option_label = (o: T): string => { cockpit.assert(typeof o == "string"); return o },
+} : {
+    label: React.ReactNode,
+    value: DialogValue<T>,
+    warning?: React.ReactNode,
+    explanation?: React.ReactNode,
+    options: T[],
+    option_label?: (o: T) => string,
+}) {
+    return (
+        <OptionalFormGroup label={label}>
+            <FormSelect
+                id={value.id()}
+                onChange={(_event, val) => {
+                    const opt = options.find(o => option_label(o) == val);
+                    value.set(opt!);
+                }}
+                validated={warning ? "warning" : undefined}
+                value={option_label(value.get())}
+            >
+                {
+                    options.map(
+                        o => {
+                            const l = option_label(o);
+                            return <FormSelectOption key={l} value={l} label={l} />;
+                        }
+                    )
+                }
+            </FormSelect>
+            <DialogHelperText value={value} warning={warning} explanation={explanation} />
+        </OptionalFormGroup>
+    );
+}