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

src/realm-settings/NewClientPolicyForm.tsx

@@ -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 {
+  const { errors, reset: resetForm } = useForm<NewClientPolicyForm>({
-    register,
-    errors,
-    handleSubmit,
-    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
+          showAddConditionsAndProfilesForm || policyName
-            ? createdPolicy?.name!
+            ? 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>

src/realm-settings/PoliciesTab.tsx

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

src/realm-settings/routes.ts

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

src/realm-settings/routes/EditClientPolicy.ts

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

src/realm-settings/routes/NewClientPolicy.ts

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