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:
Jenny 2021-10-13 16:54:51 -04:00 committed by GitHub
parent d1f216e4dc
commit d22095fc03
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 69 additions and 19 deletions

View file

@ -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>

View file

@ -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",

View file

@ -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;

View 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),
});

View file

@ -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 = (