Backport to update realm when changing bind (#31212)

agagancarczyk · web-flow · commit 9efe7e8e2439 · 2024-07-11T13:13:30.000+02:00
Signed-off-by: Agnieszka Gancarczyk &lt;agancarc@redhat.com&gt;
Co-authored-by: Agnieszka Gancarczyk &lt;agancarc@redhat.com&gt;
diff --git a/js/apps/admin-ui/src/authentication/AuthenticationSection.tsx b/js/apps/admin-ui/src/authentication/AuthenticationSection.tsx
@@ -244,9 +244,7 @@ export default function AuthenticationSection() {
                 {
                   name: "usedBy",
                   displayKey: "usedBy",
-                  cellRenderer: (row) => (
-                    <UsedBy authType={row} realm={realm} />
-                  ),
+                  cellRenderer: (row) => <UsedBy authType={row} />,
                 },
                 {
                   name: "description",
diff --git a/js/apps/admin-ui/src/authentication/BindFlowDialog.tsx b/js/apps/admin-ui/src/authentication/BindFlowDialog.tsx
@@ -29,16 +29,15 @@ export const BindFlowDialog = ({ flowAlias, onClose }: BindFlowDialogProps) => {
   const { t } = useTranslation();
   const form = useForm<BindingForm>();
   const { addAlert, addError } = useAlerts();
-  const { realm } = useRealm();
+  const { realm, realmRepresentation: realmRep, refresh } = useRealm();
 
   const onSubmit = async ({ bindingType }: BindingForm) => {
-    const realmRep = await adminClient.realms.findOne({ realm });
-
     try {
       await adminClient.realms.update(
         { realm },
         { ...realmRep, [bindingType]: flowAlias },
       );
+      refresh();
       addAlert(t("updateFlowSuccess"), AlertVariant.success);
     } catch (error) {
       addError("updateFlowError", error);
diff --git a/js/apps/admin-ui/src/authentication/components/UsedBy.tsx b/js/apps/admin-ui/src/authentication/components/UsedBy.tsx
@@ -1,4 +1,3 @@
-import RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
 import {
   Button,
   Modal,
@@ -17,10 +16,10 @@ import useToggle from "../../utils/useToggle";
 import { AuthenticationType, REALM_FLOWS } from "../AuthenticationSection";
 
 import style from "./used-by.module.css";
+import { useRealm } from "../../context/realm-context/RealmContext";
 
 type UsedByProps = {
   authType: AuthenticationType;
-  realm: RealmRepresentation;
 };
 
 const Label = ({ label }: { label: string }) => (
@@ -96,11 +95,12 @@ const UsedByModal = ({ id, isSpecificClient, onClose }: UsedByModalProps) => {
   );
 };
 
-export const UsedBy = ({ authType: { id, usedBy }, realm }: UsedByProps) => {
+export const UsedBy = ({ authType: { id, usedBy } }: UsedByProps) => {
   const { t } = useTranslation();
+  const { realmRepresentation: realm } = useRealm();
   const [open, toggle] = useToggle();
 
-  const key = Object.entries(realm).find(
+  const key = Object.entries(realm!).find(
     (e) => e[1] === usedBy?.values[0],
   )?.[0];
 

Original file line number	Diff line number	Diff line change
`@@ -244,9 +244,7 @@ export default function AuthenticationSection() {`
`244`	`244`	`{`
`245`	`245`	`name: "usedBy",`
`246`	`246`	`displayKey: "usedBy",`
`247`		`- cellRenderer: (row) => (`
`248`		`- <UsedBy authType={row} realm={realm} />`
`249`		`- ),`
	`247`	`+ cellRenderer: (row) => <UsedBy authType={row} />,`
`250`	`248`	`},`
`251`	`249`	`{`
`252`	`250`	`name: "description",`