no longer use subgroup cache (#21783)

* no longer use subgroup cache

fixes: #21693

* pr review

js/apps/admin-ui/src/groups/GroupAttributes.tsx

@@ -1,9 +1,10 @@
+import GroupRepresentation from "@keycloak/keycloak-admin-client/lib/defs/groupRepresentation";
 import {
   AlertVariant,
   PageSection,
   PageSectionVariants,
 } from "@patternfly/react-core";
-import { useEffect } from "react";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
@@ -14,11 +15,9 @@ import {
   AttributeForm,
   AttributesForm,
 } from "../components/key-value-form/AttributeForm";
-import {
-  arrayToKeyValue,
-  keyValueToArray,
-} from "../components/key-value-form/key-value-convert";
-import { useSubGroups } from "./SubGroupsContext";
+import { arrayToKeyValue } from "../components/key-value-form/key-value-convert";
+import { convertFormValuesToObject, convertToFormValues } from "../util";
+import { useFetch } from "../utils/useFetch";
 import { getLastId } from "./groupIdUtils";
 
 export const GroupAttributes = () => {
@@ -29,27 +28,27 @@ export const GroupAttributes = () => {
   });
 
   const location = useLocation();
-  const id = getLastId(location.pathname);
-  const { currentGroup, subGroups, setSubGroups } = useSubGroups();
+  const id = getLastId(location.pathname)!;
+  const [currentGroup, setCurrentGroup] = useState<GroupRepresentation>();
 
-  const convertAttributes = (attr?: Record<string, any>) => {
-    return arrayToKeyValue(attr || currentGroup()?.attributes!);
-  };
-
-  useEffect(() => {
-    form.setValue("attributes", convertAttributes());
-  }, [subGroups]);
+  useFetch(
+    () => adminClient.groups.findOne({ id }),
+    (group) => {
+      convertToFormValues(group!, form.setValue);
+      setCurrentGroup(group);
+    },
+    [],
+  );
 
   const save = async (attributeForm: AttributeForm) => {
     try {
-      const group = currentGroup();
-      const attributes = keyValueToArray(attributeForm.attributes!);
-      await adminClient.groups.update({ id: id! }, { ...group, attributes });
+      const attributes = convertFormValuesToObject(attributeForm).attributes;
+      await adminClient.groups.update(
+        { id: id! },
+        { ...currentGroup, attributes },
+      );
 
-      setSubGroups([
-        ...subGroups.slice(0, subGroups.length - 1),
-        { ...group, attributes },
-      ]);
+      setCurrentGroup({ ...currentGroup, attributes });
       addAlert(t("groupUpdated"), AlertVariant.success);
     } catch (error) {
       addError("groups:groupUpdateError", error);
@@ -61,10 +60,10 @@ export const GroupAttributes = () => {
       <AttributesForm
         form={form}
         save={save}
-        fineGrainedAccess={currentGroup()?.access?.manage}
+        fineGrainedAccess={currentGroup?.access?.manage}
         reset={() =>
           form.reset({
-            attributes: convertAttributes(),
+            attributes: arrayToKeyValue(currentGroup?.attributes!),
           })
         }
       />