Added validation on realm name (#4259)

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

@@ -15,11 +15,12 @@ const realmSettings = new RealmSettings();
 const modalUtils = new ModalUtils();
 
 const testRealmName =
-  "Test realm " + (Math.random() + 1).toString(36).substring(7);
+  "Test-realm-" + (Math.random() + 1).toString(36).substring(7);
 const newRealmName =
-  "New Test realm " + (Math.random() + 1).toString(36).substring(7);
+  "New-Test-realm-" + (Math.random() + 1).toString(36).substring(7);
 const editedRealmName =
-  "Edited Test realm " + (Math.random() + 1).toString(36).substring(7);
+  "Edited-Test-realm-" + (Math.random() + 1).toString(36).substring(7);
+const testDisabledName = "Test-Disabled";
 
 describe("Realm tests", () => {
   before(() => {
@@ -67,21 +68,22 @@ describe("Realm tests", () => {
   it("should create Test Disabled realm", () => {
     sidebarPage.goToCreateRealm();
     sidebarPage.waitForPageLoad();
-    createRealmPage.fillRealmName("Test Disabled").createRealm();
+
+    createRealmPage.fillRealmName(testDisabledName).createRealm();
     createRealmPage.disableRealm();
 
     masthead.checkNotificationMessage("Realm created successfully");
   });
 
   it("Should cancel deleting Test Disabled realm", () => {
-    sidebarPage.goToRealm("Test Disabled").goToRealmSettings();
+    sidebarPage.goToRealm(testDisabledName).goToRealmSettings();
     realmSettings.clickActionMenu();
     cy.findByText("Delete").click();
     modalUtils.cancelModal();
   });
 
   it("Should delete Test Disabled realm", () => {
-    sidebarPage.goToRealm("Test Disabled").goToRealmSettings();
+    sidebarPage.goToRealm(testDisabledName).goToRealmSettings();
     realmSettings.clickActionMenu();
     cy.findByText("Delete").click();
     modalUtils.confirmModal();

apps/admin-ui/public/resources/en/realm.json

@@ -1,6 +1,7 @@
 {
   "uploadFile": "Upload JSON file",
   "realmName": "Realm name",
+  "invalidRealmName": "Realm name can't contain special characters",
   "enabled": "Enabled",
   "createRealm": "Create realm",
   "realmExplain": "A realm manages a set of users, credentials, roles, and groups. A user belongs to and logs into a realm. Realms are isolated from one another and can only manage and authenticate the users that they control.",

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

@@ -48,7 +48,7 @@ export const RealmSettingsGeneralTab = ({
     control,
     handleSubmit,
     setValue,
-    formState: { isDirty },
+    formState: { isDirty, errors },
   } = form;
   const isFeatureEnabled = useIsFeatureEnabled();
   const [open, setOpen] = useState(false);
@@ -79,10 +79,23 @@ export const RealmSettingsGeneralTab = ({
         className="pf-u-mt-lg"
         onSubmit={handleSubmit(save)}
       >
-        <FormGroup label={t("realmId")} fieldId="kc-realm-id" isRequired>
+        <FormGroup
+          label={t("realmId")}
+          fieldId="kc-realm-id"
+          isRequired
+          validated={errors.realm ? "error" : "default"}
+          helperTextInvalid={errors.realm?.message}
+        >
           <Controller
             name="realm"
             control={control}
+            rules={{
+              required: { value: true, message: t("common:required") },
+              pattern: {
+                value: /^[a-zA-Z0-9-_]+$/,
+                message: t("realm:invalidRealmName"),
+              },
+            }}
             defaultValue=""
             render={({ field }) => (
               <ClipboardCopy data-testid="realmName" onChange={field.onChange}>

apps/admin-ui/src/realm/add/NewRealmForm.tsx

@@ -81,13 +81,19 @@ export default function NewRealmForm() {
             isRequired
             fieldId="kc-realm-name"
             validated={errors.realm ? "error" : "default"}
-            helperTextInvalid={t("common:required")}
+            helperTextInvalid={errors.realm?.message}
           >
             <KeycloakTextInput
               isRequired
               id="kc-realm-name"
               validated={errors.realm ? "error" : "default"}
-              {...register("realm", { required: true })}
+              {...register("realm", {
+                required: { value: true, message: t("common:required") },
+                pattern: {
+                  value: /^[a-zA-Z0-9-_]+$/,
+                  message: t("invalidRealmName"),
+                },
+              })}
             />
           </FormGroup>
           <FormGroup label={t("enabled")} fieldId="kc-realm-enabled-switch">