Realm settings(Client policies -> policies): Add switch for enabling/disabling policy (#1495)

* add switch for enabling/disabling policy

fix tests

* testing duplicate policy test with added wait

* unskip tests

* ccomment out JSON policies test

cypress/integration/realm_settings_test.spec.ts

@@ -602,10 +602,10 @@ describe("Realm settings tests", () => {
       realmSettingsPage.shouldNavigateBetweenFormAndJSONViewPolicies();
     });
 
-    /*       it("Check saving changed JSON policies", () => {
+    /*     it("Check saving changed JSON policies", () => {
-        realmSettingsPage.shouldSaveChangedJSONPolicies();
+      realmSettingsPage.shouldSaveChangedJSONPolicies();
-        realmSettingsPage.shouldDeleteClientPolicyDialog();
+      realmSettingsPage.shouldDeleteClientPolicyDialog();
-      }); */
+    }); */
 
     it("Should not create duplicate client profile", () => {
       realmSettingsPage.shouldCompleteAndCreateNewClientPolicyFromEmptyState();
@@ -615,7 +615,7 @@ describe("Realm settings tests", () => {
       cy.findByTestId("rs-policies-clientPolicies-tab").click();
       realmSettingsPage.shouldCompleteAndCreateNewClientPolicy();
       realmSettingsPage.shouldNotCreateDuplicateClientPolicy();
-
+      cy.wait(200);
       sidebarPage.goToRealmSettings();
       cy.findByTestId("rs-clientPolicies-tab").click();
       cy.findByTestId("rs-policies-clientPolicies-tab").click();

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

@@ -951,6 +951,7 @@ export default class RealmSettingsPage {
     );
     cy.findByTestId(this.saveNewClientPolicyBtn).click();
     cy.get(this.alertMessage).should("be.visible", "New client policy created");
+    cy.wait(200);
     cy.findByTestId(this.clientPolicyDrpDwn).contains("Action").click();
     cy.findByTestId("deleteClientPolicyDropdown").click();
     cy.findByTestId("modalConfirm").contains("Delete").click();

src/realm-settings/NewClientPolicyForm.tsx

@@ -22,7 +22,7 @@ import {
   ValidatedOptions,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import { FormAccess } from "../components/form-access/FormAccess";
 import { ViewHeader } from "../components/view-header/ViewHeader";
 import { Link, useHistory, useParams } from "react-router-dom";
@@ -96,6 +96,72 @@ export default function NewClientPolicyForm() {
 
   const formValues = form.getValues();
 
+  type ClientPoliciesHeaderProps = {
+    onChange: (value: boolean) => void;
+    value: boolean;
+    save: () => void;
+    realmName: string;
+    refresh: () => void;
+  };
+
+  const ClientPoliciesHeader = ({
+    save,
+    onChange,
+    value,
+  }: ClientPoliciesHeaderProps) => {
+    const { t } = useTranslation("realm-settings");
+
+    const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({
+      titleKey: "realm-settings:disablePolicyConfirmTitle",
+      messageKey: "realm-settings:disablePolicyConfirm",
+      continueButtonLabel: "common:disable",
+      onConfirm: () => {
+        onChange(!value);
+        save();
+      },
+    });
+
+    return (
+      <>
+        <DisableConfirm />
+        <DeleteConfirm />
+        <ViewHeader
+          titleKey={
+            showAddConditionsAndProfilesForm || policyName
+              ? formValues.name!
+              : t("createPolicy")
+          }
+          divider
+          dropdownItems={
+            showAddConditionsAndProfilesForm || policyName
+              ? [
+                  <DropdownItem
+                    key="delete"
+                    value="delete"
+                    onClick={() => {
+                      toggleDeleteDialog();
+                    }}
+                    data-testid="deleteClientPolicyDropdown"
+                  >
+                    {t("deleteClientPolicy")}
+                  </DropdownItem>,
+                ]
+              : undefined
+          }
+          isEnabled={value}
+          onToggle={(value) => {
+            if (!value) {
+              toggleDisableDialog();
+            } else {
+              onChange(value);
+              save();
+            }
+          }}
+        />
+      </>
+    );
+  };
+
   useFetch(
     async () => {
       const [policies, profiles] = await Promise.all([
@@ -176,7 +242,9 @@ export default function NewClientPolicyForm() {
         policies: getAllPolicies(),
       });
       addAlert(
-        t("realm-settings:createClientPolicySuccess"),
+        policyName
+          ? t("realm-settings:updateClientPolicySuccess")
+          : t("realm-settings:createClientPolicySuccess"),
         AlertVariant.success
       );
       history.push(
@@ -299,6 +367,10 @@ export default function NewClientPolicyForm() {
     form.setValue("description", currentPolicy?.description);
   };
 
+  const refreshHeader = () => {
+    setKey(new Date().getTime());
+  };
+
   const toggleModal = () => {
     setProfilesModalOpen(!profilesModalOpen);
   };
@@ -343,7 +415,6 @@ export default function NewClientPolicyForm() {
 
   return (
     <>
-      <DeleteConfirm />
       <DeleteConditionConfirm />
       <DeleteProfileConfirm />
       <AddClientProfileModal
@@ -354,29 +425,19 @@ export default function NewClientPolicyForm() {
         open={profilesModalOpen}
         toggleDialog={toggleModal}
       />
-      <ViewHeader
+      <Controller
-        titleKey={
+        name="enabled"
-          showAddConditionsAndProfilesForm || policyName
+        defaultValue={true}
-            ? formValues.name!
+        control={form.control}
-            : t("createPolicy")
+        render={({ onChange, value }) => (
-        }
+          <ClientPoliciesHeader
-        divider
+            value={value}
-        dropdownItems={
+            onChange={onChange}
-          showAddConditionsAndProfilesForm || policyName
+            realmName={realm}
-            ? [
+            refresh={refreshHeader}
-                <DropdownItem
+            save={save}
-                  key="delete"
+          />
-                  value="delete"
+        )}
-                  onClick={() => {
-                    toggleDeleteDialog();
-                  }}
-                  data-testid="deleteClientPolicyDropdown"
-                >
-                  {t("deleteClientPolicy")}
-                </DropdownItem>,
-              ]
-            : undefined
-        }
       />
       <PageSection variant="light">
         <FormAccess

src/realm-settings/messages.ts

@@ -18,6 +18,9 @@ export default {
     disableConfirmTitle: "Disable realm?",
     disableConfirm:
       "User and clients can't access the realm if it's disabled. Are you sure you want to continue?",
+    disablePolicyConfirmTitle: "Disable policy?",
+    disablePolicyConfirm:
+      "Users and clients can't access the policy if it's disabled. Are you sure you want to continue?",
     editProvider: "Edit provider",
     saveSuccess: "Realm successfully updated",
     saveProviderSuccess: "The provider has been saved successfully.",
@@ -198,6 +201,7 @@ export default {
     createPolicy: "Create policy",
     createClientPolicy: "Create client policy",
     createClientPolicySuccess: "New policy created",
+    updateClientPolicySuccess: "Client policy updated",
     createClientConditionSuccess: "Condition created successfully.",
     createClientConditionError: "Error creating condition: {{error}}",
     updateClientConditionSuccess: "Condition updated successfully.",