diff --git a/src/realm-settings/ClientProfileForm.tsx b/src/realm-settings/ClientProfileForm.tsx index 25b4ce218f..17a1d209b2 100644 --- a/src/realm-settings/ClientProfileForm.tsx +++ b/src/realm-settings/ClientProfileForm.tsx @@ -37,6 +37,7 @@ import { toAddExecutor } from "./routes/AddExecutor"; import { useServerInfo } from "../context/server-info/ServerInfoProvider"; import { ClientProfileParams, toClientProfile } from "./routes/ClientProfile"; import { toExecutor } from "./routes/Executor"; +import { toClientPolicies } from "./routes/ClientPolicies"; type ClientProfileForm = Required; @@ -175,7 +176,7 @@ export default function ClientProfileForm() { globalProfiles, }); addAlert(t("deleteClientSuccess"), AlertVariant.success); - history.push(`/${realm}/realm-settings/clientPolicies`); + history.push(toClientPolicies({ realm })); } catch (error) { addError(t("deleteClientError"), error); } diff --git a/src/realm-settings/PoliciesTab.tsx b/src/realm-settings/PoliciesTab.tsx index f0aaf1fdb2..798fbf3d3a 100644 --- a/src/realm-settings/PoliciesTab.tsx +++ b/src/realm-settings/PoliciesTab.tsx @@ -8,6 +8,7 @@ import { FlexItem, PageSection, Radio, + Switch, Title, ToolbarItem, } from "@patternfly/react-core"; @@ -16,7 +17,7 @@ import { ListEmptyState } from "../components/list-empty-state/ListEmptyState"; import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable"; import { useTranslation } from "react-i18next"; import { useAdminClient, useFetch } from "../context/auth/AdminClient"; -import { prettyPrintJSON, upperCaseFormatter } from "../util"; +import { prettyPrintJSON } from "../util"; import { CodeEditor, Language } from "@patternfly/react-code-editor"; import { Link, useHistory } from "react-router-dom"; import type ClientPolicyRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientPolicyRepresentation"; @@ -28,7 +29,8 @@ import { useRealm } from "../context/realm-context/RealmContext"; import { toAddClientPolicy } from "./routes/AddClientPolicy"; import { toEditClientPolicy } from "./routes/EditClientPolicy"; import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner"; - +import { Controller, useForm } from "react-hook-form"; +import { toClientPolicies } from "./routes/ClientPolicies"; export const PoliciesTab = () => { const { t } = useTranslation("realm-settings"); const adminClient = useAdminClient(); @@ -43,9 +45,10 @@ export const PoliciesTab = () => { const [code, setCode] = useState(); const [tablePolicies, setTablePolicies] = useState(); - const refresh = () => setKey(key + 1); + const form = useForm>({ mode: "onChange" }); + useFetch( () => adminClient.clientPolicies.listPolicies(), (policies) => { @@ -58,10 +61,60 @@ export const PoliciesTab = () => { const loader = async () => policies ?? []; + const saveStatus = async () => { + const switchValues = form.getValues(); + + const updatedPolicies = policies?.map( + (policy) => { + const enabled = switchValues[policy.name!]; + + return { + ...policy, + enabled, + }; + } + ); + + try { + await adminClient.clientPolicies.updatePolicy({ + policies: updatedPolicies, + }); + history.push(toClientPolicies({ realm })); + addAlert( + t("realm-settings:updateClientPolicySuccess"), + AlertVariant.success + ); + } catch (error) { + addError("realm-settings:updateClientPolicyError", error); + } + }; + const ClientPolicyDetailLink = ({ name }: ClientPolicyRepresentation) => ( {name} ); + const SwitchRenderer = (clientPolicy: ClientPolicyRepresentation) => { + return ( + ( + { + onChange(value); + saveStatus(); + }} + /> + )} + /> + ); + }; + const save = async () => { if (!code) { return; @@ -193,7 +246,8 @@ export const PoliciesTab = () => { }, { name: "enabled", - cellFormatters: [upperCaseFormatter()], + displayKey: "realm-settings:status", + cellRenderer: SwitchRenderer, }, { name: "description",