feat(orchestrator): track user changes for setting defaults (#1638)

Signed-off-by: Marek Libra <marek.libra@gmail.com>

Author: mareklibra

workspaces/orchestrator/.changeset/dry-worms-love.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator-form-widgets': patch
+---
+
+In the active widgets, the default value received from an endpoint now replaces the actual value, unless the user has modified it.

workspaces/orchestrator/plugins/orchestrator-form-api/report.api.md

@@ -36,6 +36,8 @@ export type OrchestratorFormContextProps = {
     children: React.ReactNode;
     onSubmit: (formData: JsonObject) => void;
     setAuthTokenDescriptors: (authTokenDescriptors: AuthTokenDescriptor[]) => void;
+    getIsChangedByUser: (id: string) => boolean;
+    setIsChangedByUser: (id: string, isChangedByUser: boolean) => void;
 };
 
 // @public
@@ -56,7 +58,7 @@ export const useOrchestratorFormApiOrDefault: () => OrchestratorFormApi;
 
 // Warnings were encountered during analysis:
 //
-// src/api.d.ts:96:22 - (ae-undocumented) Missing documentation for "useOrchestratorFormApiOrDefault".
+// src/api.d.ts:98:22 - (ae-undocumented) Missing documentation for "useOrchestratorFormApiOrDefault".
 
 // (No @packageDocumentation comment for this package)
 

workspaces/orchestrator/plugins/orchestrator-form-api/src/api.ts

@@ -42,6 +42,8 @@ export type OrchestratorFormContextProps = {
   setAuthTokenDescriptors: (
     authTokenDescriptors: AuthTokenDescriptor[],
   ) => void;
+  getIsChangedByUser: (id: string) => boolean;
+  setIsChangedByUser: (id: string, isChangedByUser: boolean) => void;
 };
 
 /**

workspaces/orchestrator/plugins/orchestrator-form-react/src/components/OrchestratorForm.tsx

@@ -114,6 +114,20 @@ const OrchestratorForm = ({
     initialFormData ? () => structuredClone(initialFormData) : {},
   );
 
+  const [changedByUserMap, setChangedByUserMap] = useState<
+    Record<string, boolean>
+  >({});
+  const getIsChangedByUser = useCallback(
+    (id: string) => !!changedByUserMap[id],
+    [changedByUserMap],
+  );
+  const setIsChangedByUser = useCallback(
+    (id: string, isChangedByUser: boolean) => {
+      setChangedByUserMap(prev => ({ ...prev, [id]: isChangedByUser }));
+    },
+    [],
+  );
+
   const schema = useMemo(() => removeHiddenSteps(rawSchema), [rawSchema]);
 
   const numStepsInMultiStepSchema = useMemo(
@@ -162,6 +176,8 @@ const OrchestratorForm = ({
           formData={formData}
           setFormData={setFormData}
           setAuthTokenDescriptors={setAuthTokenDescriptors}
+          getIsChangedByUser={getIsChangedByUser}
+          setIsChangedByUser={setIsChangedByUser}
         >
           <Fragment />
         </OrchestratorFormWrapper> // it is required to pass the fragment so rjsf won't generate a Submit button
@@ -174,6 +190,8 @@ const OrchestratorForm = ({
           formData={formData}
           setFormData={setFormData}
           setAuthTokenDescriptors={setAuthTokenDescriptors}
+          getIsChangedByUser={getIsChangedByUser}
+          setIsChangedByUser={setIsChangedByUser}
         />
       )}
     </StepperContextProvider>

workspaces/orchestrator/plugins/orchestrator-form-react/src/components/SingleStepForm.tsx

@@ -32,6 +32,8 @@ type SingleStepFormProps = Pick<
   | 'formData'
   | 'setFormData'
   | 'setAuthTokenDescriptors'
+  | 'getIsChangedByUser'
+  | 'setIsChangedByUser'
 >;
 
 const SingleStepForm = (props: SingleStepFormProps) => {

workspaces/orchestrator/plugins/orchestrator-form-widgets/src/widgets/ActiveDropdown.tsx

@@ -60,6 +60,9 @@ export const ActiveDropdown: Widget<
 
   const { id, label, value, onChange, formContext } = props;
   const formData = formContext?.formData;
+  const isChangedByUser = !!formContext?.getIsChangedByUser(id);
+  const setIsChangedByUser = formContext?.setIsChangedByUser;
+
   const labelId = `${props.id}-label`;
 
   const uiProps = useMemo(
@@ -112,17 +115,22 @@ export const ActiveDropdown: Widget<
   }, [labelSelector, valueSelector, data, props.id]);
 
   const handleChange = useCallback(
-    (changed: string) => {
+    (changed: string, isByUser: boolean) => {
+      if (isByUser && setIsChangedByUser) {
+        // we must handle this change out of this component's state since the component can be (de)mounted on wizard transitions or by the SchemaUpdater
+        setIsChangedByUser(id, true);
+      }
       onChange(changed);
     },
-    [onChange],
+    [onChange, id, setIsChangedByUser],
   );
 
+  // set default value to the first one
   useEffect(() => {
-    if (!value && values && values.length > 0) {
-      handleChange(values[0]);
+    if (!isChangedByUser && values && values.length > 0) {
+      handleChange(values[0], false);
     }
-  }, [handleChange, value, values]);
+  }, [handleChange, value, values, isChangedByUser]);
 
   if (localError ?? error) {
     return <ErrorText text={localError ?? error ?? ''} id={id} />;
@@ -142,7 +150,7 @@ export const ActiveDropdown: Widget<
         value={value}
         label={label}
         disabled={isReadOnly}
-        onChange={event => handleChange(event.target.value as string)}
+        onChange={event => handleChange(event.target.value as string, true)}
         MenuProps={{
           PaperProps: { sx: { maxHeight: '20rem' } },
         }}

workspaces/orchestrator/plugins/orchestrator-form-widgets/src/widgets/ActiveMultiSelect.tsx

@@ -58,6 +58,8 @@ export const ActiveMultiSelect: Widget<
   const { id, name, label, value: rawValue, onChange, formContext } = props;
   const value = rawValue as string[];
   const formData = formContext?.formData;
+  const isChangedByUser = !!formContext?.getIsChangedByUser(id);
+  const setIsChangedByUser = formContext?.setIsChangedByUser;
 
   const uiProps = useMemo(
     () => (props.options.props ?? {}) as UiProps,
@@ -76,7 +78,6 @@ export const ActiveMultiSelect: Widget<
       ? undefined
       : `Missing fetch:response:autocomplete selector for ${id}`,
   );
-  const [isTouched, setIsTouched] = useState(false);
   const [inProgressItem, setInProgressItem] = useState<string | undefined>();
 
   const [autocompleteOptions, setAutocompleteOptions] = useState<string[]>();
@@ -115,7 +116,7 @@ export const ActiveMultiSelect: Widget<
       }
 
       let defaults: string[] = [];
-      if (!isTouched) {
+      if (!isChangedByUser) {
         // set this just once, when the user has not touched the field
         if (defaultValueSelector) {
           defaults = await applySelectorArray(
@@ -147,7 +148,7 @@ export const ActiveMultiSelect: Widget<
     autocompleteSelector,
     mandatorySelector,
     defaultValueSelector,
-    isTouched,
+    isChangedByUser,
     data,
     props.id,
     value,
@@ -158,7 +159,9 @@ export const ActiveMultiSelect: Widget<
     _: SyntheticEvent,
     changed: AutocompleteValue<string[], false, false, false>,
   ) => {
-    setIsTouched(true);
+    if (setIsChangedByUser) {
+      setIsChangedByUser(id, true);
+    }
     setInProgressItem(undefined);
     onChange(changed);
   };

workspaces/orchestrator/plugins/orchestrator-form-widgets/src/widgets/ActiveTextInput.tsx

@@ -56,6 +56,8 @@ export const ActiveTextInput: Widget<
 
   const { id, label, value, onChange, formContext } = props;
   const formData = formContext?.formData;
+  const isChangedByUser = !!formContext?.getIsChangedByUser(id);
+  const setIsChangedByUser = formContext?.setIsChangedByUser;
 
   const uiProps = useMemo(
     () => (props.options?.props ?? {}) as UiProps,
@@ -84,10 +86,14 @@ export const ActiveTextInput: Widget<
   const { data, error, loading } = useFetch(formData ?? {}, uiProps, retrigger);
 
   const handleChange = useCallback(
-    (changed: string) => {
+    (changed: string, isByUser: boolean) => {
+      if (isByUser && setIsChangedByUser) {
+        // we must handle this change out of this component's state since the component can be (de)mounted on wizard transitions or by the SchemaUpdater
+        setIsChangedByUser(id, true);
+      }
       onChange(changed);
     },
-    [onChange],
+    [onChange, id, setIsChangedByUser],
   );
 
   useEffect(() => {
@@ -96,15 +102,20 @@ export const ActiveTextInput: Widget<
     }
 
     const doItAsync = async () => {
-      if (value === undefined) {
-        // loading default so do it only once
+      if (!isChangedByUser) {
+        // loading default so replace the value unless the user touched the field
         const defaultValue = await applySelectorString(
           data,
           defaultValueSelector,
         );
 
-        if (defaultValue && defaultValue !== null && defaultValue !== 'null') {
-          handleChange(defaultValue);
+        if (
+          value !== defaultValue &&
+          defaultValue &&
+          defaultValue !== null &&
+          defaultValue !== 'null'
+        ) {
+          handleChange(defaultValue, false);
         }
       }
 
@@ -125,6 +136,7 @@ export const ActiveTextInput: Widget<
     props.id,
     value,
     handleChange,
+    isChangedByUser,
   ]);
 
   if (localError ?? error) {
@@ -140,7 +152,7 @@ export const ActiveTextInput: Widget<
       <TextField
         {...params}
         data-testid={`${id}-textfield`}
-        onChange={event => handleChange(event.target.value)}
+        onChange={event => handleChange(event.target.value, true)}
         label={label}
         disabled={isReadOnly}
       />
@@ -152,7 +164,7 @@ export const ActiveTextInput: Widget<
           options={autocompleteOptions}
           data-testid={`${id}-autocomplete`}
           value={value}
-          onChange={(_, v) => handleChange(v)}
+          onChange={(_, v) => handleChange(v, true)}
           disabled={isReadOnly}
           renderInput={renderInput}
           renderOption={(liProps, item, state) => {
@@ -180,7 +192,7 @@ export const ActiveTextInput: Widget<
       <TextField
         value={value ?? ''}
         data-testid={`${id}-textfield`}
-        onChange={event => handleChange(event.target.value)}
+        onChange={event => handleChange(event.target.value, true)}
         label={label}
       />
     </FormControl>