Fix initial values in edit form when using profiles on nodes (#7623)

* fix use effect for initial profiles

* add changelog

* update dep

Author: pa-lem

changelog/+profiles.fixed.md

@@ -0,0 +1 @@
+Fix initial values in edit form when using profiles on nodes

frontend/app/src/shared/components/form/profiles-selector.tsx

@@ -42,12 +42,6 @@ export const ProfilesSelector = ({
 }: ProfilesSelectorProps) => {
   const id = useId();
 
-  useEffect(() => {
-    if (!value && defaultValue) {
-      onChange(defaultValue);
-    }
-  }, [defaultValue]);
-
   const genericSchemas = useAtomValue(genericSchemasAtom);
   const profileSchemas = useAtomValue(profileSchemasAtom);
 
@@ -96,10 +90,6 @@ export const ProfilesSelector = ({
 
   const { data, error, loading } = useQuery(query);
 
-  if (loading) return <LoadingIndicator className="p-4" />;
-
-  if (error) return <ErrorScreen message={error.message} />;
-
   // Get all profiles name to retrieve the information from the result
   const profilesNameList: string[] = profilesList
     .map((profile) => profile?.name ?? "")
@@ -114,6 +104,26 @@ export const ProfilesSelector = ({
     []
   );
 
+  useEffect(() => {
+    if (!value && defaultValue && profiles.length && !loading) {
+      const defaultProfiles = defaultValue
+        .map((defaultProfile) => {
+          return profiles.find((profile) => {
+            return profile.id === defaultProfile.id;
+          });
+        })
+        .filter((profile): profile is ProfileData => {
+          return !!profile?.id;
+        });
+
+      onChange(defaultProfiles);
+    }
+  }, [defaultValue, loading, profiles]);
+
+  if (loading) return <LoadingIndicator className="p-4" />;
+
+  if (error) return <ErrorScreen message={error.message} />;
+
   if (!profiles || profiles.length === 0) return null;
 
   const selectedValues = value ?? [];