Propagate suggestions to embedded entities and allow 0 as valid defau…

…lt input (Issue #5717, PR #5725)

# Description

1. Propagate suggested values to embedded fields
2. Allow 0 as a valid default value.

closes : #5717 and #5713

https://github.com/inmanta/web-console/assets/44098050/33b19622-55b4-48b0-b242-a1e0522262a8

changelogs/unreleased/5717-suggested-values-embedded-entities.yml

@@ -0,0 +1,6 @@
+description: "Propagate suggestions to embedded entities and allow 0 as valid default input"
+issue-nr: 5717
+change-type: patch
+destination-branches: [master, iso7]
+sections:
+  minor-improvement: "{{description}}"

src/Test/Data/ServiceInstance/index.ts

@@ -66,7 +66,7 @@ export const nestedEditable: ServiceInstanceModelWithTargetStates = {
       {
         my_attr: 0,
         bool_attr: null,
-        dict_attr: { a: "b" },
+        dict_attr: {},
         embedded_single: { attr4: [2, 4] },
       },
     ],

src/UI/Components/ServiceInstanceForm/Components/FieldInput.tsx

@@ -87,6 +87,20 @@ export const FieldInput: React.FC<Props> = ({
   ).useOneTime();
   const [suggestionsList, setSuggestionsList] = useState<string[] | null>(null);
 
+  // Get the controlled value for the field
+  // If the value is an object or an array, it needs to be converted.
+  function getControlledValue(value) {
+    if (value === null || value === undefined) {
+      return "";
+    } else if (Array.isArray(value)) {
+      return value.join(", ");
+    } else if (typeof value === "object") {
+      return JSON.stringify(value);
+    } else {
+      return value;
+    }
+  }
+
   //callback was used to avoid re-render in useEffect used in SelectFormInput
   const getEnumUpdate = useCallback(
     (value) => {
@@ -205,7 +219,9 @@ export const FieldInput: React.FC<Props> = ({
         <TextFormInput
           aria-label={`TextFieldInput-${field.name}`}
           attributeName={field.name}
-          attributeValue={get(formState, makePath(path, field.name)) as string}
+          attributeValue={getControlledValue(
+            get(formState, makePath(path, field.name)),
+          )}
           description={field.description}
           isOptional={field.isOptional}
           shouldBeDisabled={
@@ -428,6 +444,7 @@ const NestedFieldInput: React.FC<NestedProps> = ({
             originalState={originalState}
             getUpdate={getUpdate}
             path={makePath(path, field.name)}
+            suggestions={childField.suggestion}
           />
         ))}
     </StyledFormFieldGroupExpandable>
@@ -595,6 +612,7 @@ const DictListFieldInput: React.FC<DictListProps> = ({
               isNew={addedItemsPaths.includes(
                 `${makePath(path, field.name)}.${index}`,
               )}
+              suggestions={childField.suggestion}
             />
           ))}
         </StyledFormFieldGroupExpandable>

src/UI/Components/ServiceInstanceForm/Components/TextFormInput.tsx

@@ -32,7 +32,7 @@ interface Props {
  * @component
  * @param {Props} props - The props for the TextListFormInput component.
  *  @prop {string} attributeName - The name of the attribute.
- *  @prop {string[]} attributeValue - The value of the attribute.
+ *  @prop {string} attributeValue - The value of the attribute.
  *  @prop {string} description - The description of the attribute.
  *  @prop {boolean} isOptional - Whether the attribute is optional.
  *  @prop {boolean} shouldBeDisabled - Whether the attribute should be disabled. Default is false.
@@ -58,7 +58,7 @@ export const TextFormInput: React.FC<Props> = ({
 }) => {
   const inputRef = React.useRef<HTMLInputElement>(null);
   const [isOpen, setIsOpen] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState(attributeValue || "");
+  const [inputValue, setInputValue] = React.useState(attributeValue);
 
   /**
    * Handles the input change.
@@ -124,7 +124,7 @@ export const TextFormInput: React.FC<Props> = ({
             placeholder={placeholder}
             aria-describedby={`${attributeName}-helper`}
             aria-label={`TextInput-${attributeName}`}
-            value={inputValue || ""}
+            value={inputValue}
             onChange={(_event, value) => handleChange(value)}
             isDisabled={shouldBeDisabled}
             onFocus={() => setIsOpen(true)}

src/UI/Components/ServiceInstanceForm/Helpers/createFormState.spec.ts

@@ -47,7 +47,7 @@ test("Given createEditFormState v1 WHEN passed editable nested fields and curren
         },
         my_attr: 0,
         bool_attr: null,
-        dict_attr: '{"a":"b"}',
+        dict_attr: "{}",
       },
     ],
   });