Edit client policy (#1337)
* add create client policy form; WIP add client policy tests checkout realm settings test from master RealmSettingsPage.ts master remove comment and add missing translation fix tests PR feedback from Jon and Erik * rebase * replace hardcoded URL with path * fix tests * editClientPolicy * edit client policy * rename test * feedback from jon
This commit is contained in:
parent
d1f216e4dc
commit
d22095fc03
5 changed files with 69 additions and 19 deletions
|
@ -20,7 +20,7 @@ import { useTranslation } from "react-i18next";
|
|||
import { useForm } from "react-hook-form";
|
||||
import { FormAccess } from "../components/form-access/FormAccess";
|
||||
import { ViewHeader } from "../components/view-header/ViewHeader";
|
||||
import { Link, useHistory } from "react-router-dom";
|
||||
import { Link, useHistory, useParams } from "react-router-dom";
|
||||
import { useRealm } from "../context/realm-context/RealmContext";
|
||||
import { useAlerts } from "../components/alert/Alerts";
|
||||
import { useAdminClient, useFetch } from "../context/auth/AdminClient";
|
||||
|
@ -31,6 +31,7 @@ import "./RealmSettingsSection.css";
|
|||
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
|
||||
import type ClientPolicyRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientPolicyRepresentation";
|
||||
import { toClientPolicies } from "./routes/ClientPolicies";
|
||||
import type { EditClientPolicyParams } from "./routes/EditClientPolicy";
|
||||
|
||||
type NewClientPolicyForm = Required<ClientPolicyRepresentation>;
|
||||
|
||||
|
@ -44,15 +45,11 @@ const defaultValues: NewClientPolicyForm = {
|
|||
|
||||
export const NewClientPolicyForm = () => {
|
||||
const { t } = useTranslation("realm-settings");
|
||||
const {
|
||||
register,
|
||||
errors,
|
||||
handleSubmit,
|
||||
reset: resetForm,
|
||||
} = useForm<NewClientPolicyForm>({
|
||||
const { errors, reset: resetForm } = useForm<NewClientPolicyForm>({
|
||||
defaultValues,
|
||||
});
|
||||
const { realm } = useRealm();
|
||||
const { policyName } = useParams<EditClientPolicyParams>();
|
||||
const { addAlert, addError } = useAlerts();
|
||||
const adminClient = useAdminClient();
|
||||
const [policies, setPolicies] = useState<ClientProfileRepresentation[]>([]);
|
||||
|
@ -65,23 +62,46 @@ export const NewClientPolicyForm = () => {
|
|||
useState<ClientPolicyRepresentation>();
|
||||
|
||||
const history = useHistory();
|
||||
const form = useForm<ClientPolicyRepresentation>({ mode: "onChange" });
|
||||
|
||||
useFetch(
|
||||
() => adminClient.clientPolicies.listPolicies(),
|
||||
(policies) => {
|
||||
setPolicies(policies.policies ?? []);
|
||||
const currentPolicy = policies.policies?.find(
|
||||
(item) => item.name === policyName
|
||||
);
|
||||
if (currentPolicy) {
|
||||
setupForm(currentPolicy);
|
||||
}
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const save = async (form: NewClientPolicyForm) => {
|
||||
const setupForm = (policy: ClientPolicyRepresentation) => {
|
||||
resetForm();
|
||||
Object.entries(policy).map(([key, value]) => {
|
||||
form.setValue(key, value);
|
||||
});
|
||||
};
|
||||
|
||||
const save = async () => {
|
||||
const createdForm = form.getValues();
|
||||
const createdPolicy = {
|
||||
...form,
|
||||
...createdForm,
|
||||
profiles: [],
|
||||
conditions: [],
|
||||
};
|
||||
|
||||
const allPolicies = policies.concat(createdPolicy);
|
||||
const policyNameExists = policies.find(
|
||||
(policy) => policy.name === createdPolicy.name
|
||||
);
|
||||
|
||||
const res = policies.map((policy) =>
|
||||
policy.name === createdPolicy.name ? createdPolicy : policy
|
||||
);
|
||||
|
||||
const allPolicies = policyNameExists ? res : policies.concat(createdForm);
|
||||
|
||||
try {
|
||||
await adminClient.clientPolicies.updatePolicy({
|
||||
|
@ -125,8 +145,8 @@ export const NewClientPolicyForm = () => {
|
|||
<DeleteConfirm />
|
||||
<ViewHeader
|
||||
titleKey={
|
||||
showAddConditionsAndProfilesForm
|
||||
? createdPolicy?.name!
|
||||
showAddConditionsAndProfilesForm || policyName
|
||||
? createdPolicy?.name! || policyName
|
||||
: t("createPolicy")
|
||||
}
|
||||
divider
|
||||
|
@ -159,7 +179,7 @@ export const NewClientPolicyForm = () => {
|
|||
}
|
||||
>
|
||||
<TextInput
|
||||
ref={register({ required: true })}
|
||||
ref={form.register({ required: true })}
|
||||
type="text"
|
||||
id="kc-client-profile-name"
|
||||
name="name"
|
||||
|
@ -170,7 +190,7 @@ export const NewClientPolicyForm = () => {
|
|||
<TextArea
|
||||
name="description"
|
||||
aria-label={t("description")}
|
||||
ref={register()}
|
||||
ref={form.register()}
|
||||
type="text"
|
||||
id="kc-client-policy-description"
|
||||
data-testid="client-policy-description"
|
||||
|
@ -179,14 +199,14 @@ export const NewClientPolicyForm = () => {
|
|||
<ActionGroup>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleSubmit(save)}
|
||||
onClick={save}
|
||||
data-testid="saveCreatePolicy"
|
||||
isDisabled={showAddConditionsAndProfilesForm}
|
||||
>
|
||||
{t("common:save")}
|
||||
</Button>
|
||||
<Button
|
||||
id="cancelCreatePolicy"
|
||||
variant="secondary"
|
||||
onClick={() =>
|
||||
showAddConditionsAndProfilesForm
|
||||
? resetForm(createdPolicy)
|
||||
|
@ -199,7 +219,7 @@ export const NewClientPolicyForm = () => {
|
|||
: t("common:cancel")}
|
||||
</Button>
|
||||
</ActionGroup>
|
||||
{showAddConditionsAndProfilesForm && (
|
||||
{(showAddConditionsAndProfilesForm || policyName) && (
|
||||
<>
|
||||
<Flex>
|
||||
<FlexItem>
|
||||
|
@ -236,7 +256,7 @@ export const NewClientPolicyForm = () => {
|
|||
</Text>
|
||||
</>
|
||||
)}
|
||||
{showAddConditionsAndProfilesForm && (
|
||||
{(showAddConditionsAndProfilesForm || policyName) && (
|
||||
<>
|
||||
<Flex>
|
||||
<FlexItem>
|
||||
|
|
|
@ -27,6 +27,7 @@ import { useAlerts } from "../components/alert/Alerts";
|
|||
import "./RealmSettingsSection.css";
|
||||
import { useRealm } from "../context/realm-context/RealmContext";
|
||||
import { toNewClientPolicy } from "./routes/NewClientPolicy";
|
||||
import { toEditClientPolicy } from "./routes/EditClientPolicy";
|
||||
export const PoliciesTab = () => {
|
||||
const { t } = useTranslation("realm-settings");
|
||||
const adminClient = useAdminClient();
|
||||
|
@ -56,6 +57,10 @@ export const PoliciesTab = () => {
|
|||
|
||||
const loader = async () => policies ?? [];
|
||||
|
||||
const ClientPolicyDetailLink = ({ name }: ClientPolicyRepresentation) => (
|
||||
<Link to={toEditClientPolicy({ realm, policyName: name! })}>{name}</Link>
|
||||
);
|
||||
|
||||
const save = async () => {
|
||||
if (!code) {
|
||||
return;
|
||||
|
@ -187,6 +192,7 @@ export const PoliciesTab = () => {
|
|||
columns={[
|
||||
{
|
||||
name: "name",
|
||||
cellRenderer: ClientPolicyDetailLink,
|
||||
},
|
||||
{
|
||||
name: "enabled",
|
||||
|
|
|
@ -9,6 +9,7 @@ import { RsaSettingsRoute } from "./routes/RsaSettings";
|
|||
import { ClientPoliciesRoute } from "./routes/ClientPolicies";
|
||||
import { NewClientProfileRoute } from "./routes/NewClientProfile";
|
||||
import { NewClientPolicyRoute } from "./routes/NewClientPolicy";
|
||||
import { EditClientPolicyRoute } from "./routes/EditClientPolicy";
|
||||
|
||||
const routes: RouteDef[] = [
|
||||
RealmSettingsRoute,
|
||||
|
@ -21,6 +22,7 @@ const routes: RouteDef[] = [
|
|||
ClientPoliciesRoute,
|
||||
NewClientProfileRoute,
|
||||
NewClientPolicyRoute,
|
||||
EditClientPolicyRoute,
|
||||
];
|
||||
|
||||
export default routes;
|
||||
|
|
22
src/realm-settings/routes/EditClientPolicy.ts
Normal file
22
src/realm-settings/routes/EditClientPolicy.ts
Normal file
|
@ -0,0 +1,22 @@
|
|||
import type { LocationDescriptorObject } from "history";
|
||||
import { generatePath } from "react-router-dom";
|
||||
import type { RouteDef } from "../../route-config";
|
||||
import { NewClientPolicyForm } from "../NewClientPolicyForm";
|
||||
|
||||
export type EditClientPolicyParams = {
|
||||
realm: string;
|
||||
policyName: string;
|
||||
};
|
||||
|
||||
export const EditClientPolicyRoute: RouteDef = {
|
||||
path: "/:realm/realm-settings/clientPolicies/:policyName/edit-policy",
|
||||
component: NewClientPolicyForm,
|
||||
access: "manage-realm",
|
||||
breadcrumb: (t) => t("identity-providers:editIdPMapper"),
|
||||
};
|
||||
|
||||
export const toEditClientPolicy = (
|
||||
params: EditClientPolicyParams
|
||||
): LocationDescriptorObject => ({
|
||||
pathname: generatePath(EditClientPolicyRoute.path, params),
|
||||
});
|
|
@ -9,7 +9,7 @@ export const NewClientPolicyRoute: RouteDef = {
|
|||
path: "/:realm/realm-settings/clientPolicies/new-client-policy",
|
||||
component: NewClientPolicyForm,
|
||||
breadcrumb: (t) => t("realm-settings:createPolicy"),
|
||||
access: "manage-realm",
|
||||
access: "manage-clients",
|
||||
};
|
||||
|
||||
export const toNewClientPolicy = (
|
||||
|
|
Loading…
Reference in a new issue