Added check to see if unique (#3642)

apps/admin-ui/cypress/e2e/realm_settings_client_policies_test.spec.ts

@@ -147,13 +147,11 @@ describe("Realm settings client policies tab tests", () => {
 
     realmSettingsPage.createNewClientPolicyFromList(
       "Test",
-      "Test Again Description"
+      "Test Again Description",
+      true
     );
-    cy.wait("@save");
-
-    // TODO: UNCOMMENT WHEN THE ISSUE 2050 IS FIXED
-    //realmSettingsPage.checkAlertMessage("Could not create client policy: 'proposed client policy name duplicated.'");
 
+    realmSettingsPage.shouldShowErrorWhenDuplicate();
     sidebarPage.goToRealmSettings();
 
     realmSettingsPage
@@ -174,10 +172,9 @@ describe("Realm settings client policies tab tests", () => {
       "Test again",
       "Test Again Description"
     );
-    masthead.checkNotificationMessage("New policy created", true);
+    masthead.checkNotificationMessage("New policy created");
     sidebarPage.waitForPageLoad();
     cy.wait("@save");
-    masthead.closeAllAlertMessages();
     realmSettingsPage.deleteClientPolicyFromDetails();
     modalUtils.confirmModal();
     masthead.checkNotificationMessage("Client policy deleted");

apps/admin-ui/cypress/support/pages/admin_console/manage/realm_settings/RealmSettingsPage.ts

@@ -801,6 +801,13 @@ export default class RealmSettingsPage extends CommonPage {
     cy.get("form").should("not.have.text", "Required field");
   }
 
+  shouldShowErrorWhenDuplicate() {
+    cy.get("form").should(
+      "not.have.text",
+      "The name must be unique within the realm"
+    );
+  }
+
   shouldReloadClientProfileEdits() {
     cy.get(this.clientProfileTwo).click();
     cy.findByTestId(this.newClientProfileNameInput).type("Reloading");

apps/admin-ui/src/realm-settings/NewClientPolicyForm.tsx

@@ -67,12 +67,6 @@ type PolicyDetailAttributes = {
 
 export default function NewClientPolicyForm() {
   const { t } = useTranslation("realm-settings");
-  const {
-    reset: resetForm,
-    formState: { errors },
-  } = useForm<NewClientPolicyForm>({
-    defaultValues,
-  });
   const { realm } = useRealm();
   const { addAlert, addError } = useAlerts();
   const { adminClient } = useAdminClient();
@@ -99,7 +93,10 @@ export default function NewClientPolicyForm() {
   const { policyName } = useParams<EditClientPolicyParams>();
 
   const navigate = useNavigate();
-  const form = useForm<ClientPolicyRepresentation>({ mode: "onChange" });
+  const form = useForm<NewClientPolicyForm>({
+    mode: "onChange",
+    defaultValues,
+  });
   const { handleSubmit } = form;
 
   const formValues = form.getValues();
@@ -206,7 +203,7 @@ export default function NewClientPolicyForm() {
   );
 
   const setupForm = (policy: ClientPolicyRepresentation) => {
-    resetForm();
+    form.reset();
     Object.entries(policy).map(([key, value]) => {
       form.setValue(key, value);
     });
@@ -465,17 +462,30 @@ export default function NewClientPolicyForm() {
             label={t("common:name")}
             fieldId="kc-client-profile-name"
             isRequired
-            helperTextInvalid={t("common:required")}
+            helperTextInvalid={form.errors.name?.message}
             validated={
-              errors.name ? ValidatedOptions.error : ValidatedOptions.default
+              form.errors.name
+                ? ValidatedOptions.error
+                : ValidatedOptions.default
             }
           >
             <KeycloakTextInput
-              ref={form.register({ required: true })}
+              ref={form.register({
+                required: { value: true, message: t("common:required") },
+                validate: (value) =>
+                  policies?.some((policy) => policy.name === value)
+                    ? t("createClientProfileNameHelperText").toString()
+                    : true,
+              })}
               type="text"
               id="kc-client-profile-name"
               name="name"
               data-testid="client-policy-name"
+              validated={
+                form.errors.name
+                  ? ValidatedOptions.error
+                  : ValidatedOptions.default
+              }
             />
           </FormGroup>
           <FormGroup label={t("common:description")} fieldId="kc-description">
@@ -493,7 +503,7 @@ export default function NewClientPolicyForm() {
               variant="primary"
               type="submit"
               data-testid="saveCreatePolicy"
-              isDisabled={!formValues.name}
+              isDisabled={!form.formState.isValid}
             >
               {t("common:save")}
             </Button>