add create client policy form; WIP (#1448)

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

editClientPolicy

edit client policy

add client policy conditions form

fix bug in create form

remove comment

update help text

fixes

breadcrumbs

add support for adding multiple conditions, deleting conditions, and list conditions in data table

clean up names

add delete functionality to conditions form

PR feedback from Jon

useMemo for conditions

remove comments and logs

remove unused hook

add profiles modal wip

addprofiles wip

profiles wip

help text wip

add help text

remove comments

remove duplicate message

update data test id

PR feedback from Jon 1

Apply suggestions from code review

Co-authored-by: Jon Koops <jonkoops@gmail.com>

remove fragment

create policy detail attribute type

PR feedback from Jon 2

support editing profile name and description

add edit functionality and restore tests

Delete EditCondition.ts

Apply suggestions from code review

Co-authored-by: Jon Koops <jonkoops@gmail.com>

format

fix path

use route fn

cypress/integration/realm_settings_test.spec.ts

@@ -537,7 +537,7 @@ describe("Realm settings tests", () => {
     });
   });
 
-  describe.skip("Realm settings client policies tab tests", () => {
+  describe("Realm settings client policies tab tests", () => {
     beforeEach(() => {
       keycloakBefore();
       loginPage.logIn();

cypress/support/pages/admin_console/manage/realm_settings/RealmSettingsPage.ts

@@ -171,6 +171,7 @@ export default class RealmSettingsPage {
   private jsonEditorReloadBtn = "jsonEditor-reloadBtn";
   private jsonEditor = ".monaco-scrollable-element.editor-scrollable.vs";
   private createClientDrpDwn = ".pf-c-dropdown.pf-m-align-right";
+  private clientPolicyDrpDwn = "action-dropdown";
   private searchFld = "[id^=realm-settings][id$=profilesinput]";
   private searchFldPolicies = "[id^=realm-settings][id$=clientPoliciesinput]";
   private clientProfileOne = 'a[href*="realm-settings/clientPolicies/Test"]';
@@ -855,7 +856,7 @@ export default class RealmSettingsPage {
     );
     cy.findByTestId(this.saveNewClientPolicyBtn).click();
     cy.get(this.alertMessage).should("be.visible", "New client policy created");
-    cy.get(this.createClientDrpDwn).contains("Action").click();
+    cy.findByTestId(this.clientPolicyDrpDwn).contains("Action").click();
     cy.findByTestId("deleteClientPolicyDropdown").click();
     cy.findByTestId("modalConfirm").contains("Delete").click();
     cy.get(this.alertMessage).should("be.visible", "Client profile deleted");

src/realm-settings/ClientProfileForm.tsx

@@ -35,7 +35,7 @@ import "./RealmSettingsSection.css";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { toAddExecutor } from "./routes/AddExecutor";
 import { useServerInfo } from "../context/server-info/ServerInfoProvider";
-import type { ClientProfileParams } from "./routes/ClientProfile";
+import { ClientProfileParams, toClientProfile } from "./routes/ClientProfile";
 
 type ClientProfileForm = Required<ClientProfileRepresentation>;
 
@@ -106,7 +106,7 @@ export default function ClientProfileForm() {
         AlertVariant.success
       );
 
-      history.push(`/${realm}/realm-settings/clientPolicies/${form.name}`);
+      history.push(toClientProfile({ realm, profileName: form.name }));
     } catch (error) {
       addError(
         editMode
@@ -159,9 +159,7 @@ export default function ClientProfileForm() {
             globalProfiles,
           });
           addAlert(t("deleteExecutorSuccess"), AlertVariant.success);
-          history.push(
-            `/${realm}/realm-settings/clientPolicies/${profileName}/edit-profile`
-          );
+          history.push(toClientProfile({ realm, profileName }));
         } catch (error) {
           addError(t("deleteExecutorError"), error);
         }

src/realm-settings/ExecutorForm.tsx

@@ -21,7 +21,7 @@ import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import type ComponentTypeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentTypeRepresentation";
 import type { ConfigPropertyRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/authenticatorConfigInfoRepresentation";
 import type ClientProfileRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientProfileRepresentation";
-import type { ClientProfileParams } from "./routes/ClientProfile";
+import { ClientProfileParams, toClientProfile } from "./routes/ClientProfile";
 import {
   COMPONENTS,
   isValidComponentType,
@@ -94,9 +94,7 @@ export default function ExecutorForm() {
         globalProfiles: globalProfiles,
       });
       addAlert(t("realm-settings:addExecutorSuccess"), AlertVariant.success);
-      history.push(
-        `/${realm}/realm-settings/clientPolicies/${profileName}/edit-profile`
-      );
+      history.push(toClientProfile({ realm, profileName }));
     } catch (error) {
       addError("realm-settings:addExecutorError", error);
     }
@@ -192,10 +190,7 @@ export default function ExecutorForm() {
             <Button
               variant="link"
               component={(props) => (
-                <Link
-                  {...props}
-                  to={`/${realm}/realm-settings/clientPolicies/${profileName}/edit-profile`}
-                />
+                <Link {...props} to={toClientProfile({ realm, profileName })} />
               )}
               data-testid="addExecutor-cancelBtn"
             >

src/realm-settings/NewClientPolicyForm.tsx

@@ -93,6 +93,8 @@ export default function NewClientPolicyForm() {
   const [key, setKey] = useState(0);
   const refresh = () => setKey(new Date().getTime());
 
+  const formValues = form.getValues();
+
   useFetch(
     async () => {
       const [policies, profiles] = await Promise.all([
@@ -143,8 +145,6 @@ export default function NewClientPolicyForm() {
       "org.keycloak.services.clientpolicy.condition.ClientPolicyConditionProvider"
     ];
 
-  const formValues = form.getValues();
-
   const save = async () => {
     const createdForm = form.getValues();
     const createdPolicy = {
@@ -153,19 +153,26 @@ export default function NewClientPolicyForm() {
       conditions: [],
     };
 
-    const policyNameExists = policies.find(
-      (policy) => policy.name === createdPolicy.name
-    );
+    const getAllPolicies = () => {
+      const policyNameExists = policies.some(
+        (policy) => policy.name === createdPolicy.name
+      );
 
-    const res = policies.map((policy) =>
-      policy.name === createdPolicy.name ? createdPolicy : policy
-    );
-
-    const allPolicies = policyNameExists ? res : policies.concat(createdForm);
+      if (policyNameExists) {
+        return policies.map((policy) =>
+          policy.name === createdPolicy.name ? createdPolicy : policy
+        );
+      } else if (createdForm.name !== policyName) {
+        return policies
+          .filter((item) => item.name !== policyName)
+          .concat(createdForm);
+      }
+      return policies.concat(createdForm);
+    };
 
     try {
       await adminClient.clientPolicies.updatePolicy({
-        policies: allPolicies,
+        policies: getAllPolicies(),
       });
       addAlert(
         t("realm-settings:createClientPolicySuccess"),
@@ -328,7 +335,6 @@ export default function NewClientPolicyForm() {
         t("realm-settings:addClientProfileSuccess"),
         AlertVariant.success
       );
-      refresh();
     } catch (error) {
       addError("realm-settings:addClientProfileError", error);
     }
@@ -350,7 +356,7 @@ export default function NewClientPolicyForm() {
       <ViewHeader
         titleKey={
           showAddConditionsAndProfilesForm || policyName
-            ? policyName!
+            ? formValues.name!
             : t("createPolicy")
         }
         divider