Port client login settings to new form controls (#27414)

Signed-off-by: Jon Koops <jonkoops@gmail.com>

js/apps/admin-ui/cypress/e2e/clients_saml_test.spec.ts

@@ -167,18 +167,18 @@ describe("Clients SAML tests", () => {
       const homeUrlError =
         "Client could not be updated: Base URL is not a valid URL";
 
-      cy.get("#kc-root-url").type("Invalid URL");
+      cy.findByTestId("rootUrl").type("Invalid URL");
       settingsTab.clickSaveBtn();
       masthead.checkNotificationMessage(rootUrlError);
-      cy.get("#kc-root-url").clear();
+      cy.findByTestId("rootUrl").clear();
 
-      cy.get("#kc-home-url").type("Invalid URL");
+      cy.findByTestId("baseUrl").type("Invalid URL");
       settingsTab.clickSaveBtn();
       masthead.checkNotificationMessage(homeUrlError);
-      cy.get("#kc-home-url").clear();
+      cy.findByTestId("baseUrl").clear();
 
-      cy.get("#kc-root-url").type(validUrl);
+      cy.findByTestId("rootUrl").type(validUrl);
-      cy.get("#kc-home-url").type(validUrl);
+      cy.findByTestId("baseUrl").type(validUrl);
       settingsTab.clickSaveBtn();
       masthead.checkNotificationMessage("Client successfully updated");
 

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/CreateClientPage.ts

@@ -25,11 +25,11 @@ export default class CreateClientPage extends CommonPage {
   #deviceAuthGrantChkBx = "#kc-oauth-device-authorization-grant";
   #serviceAccountRolesChkBx = "#kc-flow-service-account";
 
-  #rootUrlInput = "#kc-root-url";
+  #rootUrlInput = "rootUrl";
-  #homeUrlInput = "#kc-home-url";
+  #homeUrlInput = "baseUrl";
   #firstValidRedirectUrlInput = "redirectUris0";
   #firstWebOriginsInput = "webOrigins0";
-  #adminUrlInput = "#kc-admin-url";
+  #adminUrlInput = "adminUrl";
 
   #loginThemeDrpDwn = "#loginTheme";
   #loginThemeList = 'ul[aria-label="Login theme"]';
@@ -227,12 +227,12 @@ export default class CreateClientPage extends CommonPage {
   }
 
   checkAccessSettingsElements() {
-    cy.get(this.#adminUrlInput).scrollIntoView();
+    cy.findByTestId(this.#adminUrlInput).scrollIntoView();
-    cy.get(this.#rootUrlInput).should("not.be.disabled");
+    cy.findByTestId(this.#rootUrlInput).should("not.be.disabled");
-    cy.get(this.#homeUrlInput).should("not.be.disabled");
+    cy.findByTestId(this.#homeUrlInput).should("not.be.disabled");
     cy.findByTestId(this.#firstValidRedirectUrlInput).should("not.be.disabled");
     cy.findByTestId(this.#firstWebOriginsInput).should("not.be.disabled");
-    cy.get(this.#adminUrlInput).should("not.be.disabled");
+    cy.findByTestId(this.#adminUrlInput).should("not.be.disabled");
 
     return this;
   }

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/tabs/SettingsTab.ts

@@ -35,9 +35,9 @@ export default class SettingsTab extends PageObject {
 
   #redirectUris = "redirectUris";
 
-  #idpInitiatedSsoUrlName = "idpInitiatedSsoUrlName";
+  #idpInitiatedSsoUrlName = "attributes.saml_idp_initiated_sso_url_name";
-  #idpInitiatedSsoRelayState = "idpInitiatedSsoRelayState";
+  #idpInitiatedSsoRelayState = "attributes.saml_idp_initiated_sso_relay_state";
-  #masterSamlProcessingUrl = "masterSamlProcessingUrl";
+  #masterSamlProcessingUrl = "adminUrl";
 
   public clickSaveBtn() {
     cy.findByTestId(this.#saveBtn).click();

js/apps/admin-ui/src/clients/add/AccessSettings.tsx

@@ -1,11 +1,9 @@
-import { FormGroup } from "@patternfly/react-core";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { TextControl } from "ui-shared";
 
-import { HelpItem } from "ui-shared";
 import { FixedButtonsGroup } from "../../components/form/FixedButtonGroup";
 import { FormAccess } from "../../components/form/FormAccess";
-import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { useAccess } from "../../context/access/Access";
 import { FormFields } from "../ClientDetails";
 import type { ClientSettingsProps } from "../ClientSettings";
@@ -17,7 +15,7 @@ export const AccessSettings = ({
   reset,
 }: ClientSettingsProps) => {
   const { t } = useTranslation();
-  const { register, watch } = useFormContext<FormFields>();
+  const { watch } = useFormContext<FormFields>();
 
   const { hasAccess } = useAccess();
   const isManager = hasAccess("manage-clients") || client.access?.configure;
@@ -32,19 +30,12 @@ export const AccessSettings = ({
     >
       {!client.bearerOnly && <LoginSettings protocol={protocol} />}
       {protocol !== "saml" && (
-        <FormGroup
+        <TextControl
-          label={t("adminURL")}
-          fieldId="kc-admin-url"
-          labelIcon={
-            <HelpItem helpText={t("adminURLHelp")} fieldLabelId="adminURL" />
-          }
-        >
-          <KeycloakTextInput
-            id="kc-admin-url"
           type="url"
-            {...register("adminUrl")}
+          name="adminUrl"
+          label={t("adminURL")}
+          labelIcon={t("adminURLHelp")}
         />
-        </FormGroup>
       )}
       {client.bearerOnly && (
         <FixedButtonsGroup

js/apps/admin-ui/src/clients/add/LoginSettings.tsx

@@ -1,63 +1,38 @@
 import { FormGroup } from "@patternfly/react-core";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { HelpItem, TextControl } from "ui-shared";
 
-import { HelpItem } from "ui-shared";
-import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { MultiLineInput } from "../../components/multi-line-input/MultiLineInput";
-import { useRealm } from "../../context/realm-context/RealmContext";
-import environment from "../../environment";
 import { convertAttributeNameToForm } from "../../util";
 import { FormFields } from "../ClientDetails";
 
 type LoginSettingsProps = {
   protocol?: string;
-  isDisabled?: boolean;
 };
 
 export const LoginSettings = ({
   protocol = "openid-connect",
-  ...rest
 }: LoginSettingsProps) => {
   const { t } = useTranslation();
-  const { register, watch } = useFormContext<FormFields>();
+  const { watch } = useFormContext<FormFields>();
-  const { realm } = useRealm();
-
-  const idpInitiatedSsoUrlName: string = watch(
-    "attributes.saml_idp_initiated_sso_url_name",
-  );
 
   const standardFlowEnabled = watch("standardFlowEnabled");
+
   return (
     <>
-      <FormGroup
+      <TextControl
+        type="url"
+        name="rootUrl"
         label={t("rootUrl")}
-        fieldId="kc-root-url"
+        labelIcon={t("rootURLHelp")}
-        labelIcon={
-          <HelpItem helpText={t("rootURLHelp")} fieldLabelId="rootUrl" />
-        }
-      >
-        <KeycloakTextInput
-          id="kc-root-url"
-          type="url"
-          {...register("rootUrl")}
-          {...rest}
       />
-      </FormGroup>
+      <TextControl
-      <FormGroup
+        type="url"
+        name="baseUrl"
         label={t("homeURL")}
-        fieldId="kc-home-url"
+        labelIcon={t("homeURLHelp")}
-        labelIcon={
-          <HelpItem helpText={t("homeURLHelp")} fieldLabelId="homeURL" />
-        }
-      >
-        <KeycloakTextInput
-          id="kc-home-url"
-          type="url"
-          {...register("baseUrl")}
-          {...rest}
       />
-      </FormGroup>
       {standardFlowEnabled && (
         <>
           <FormGroup
@@ -75,7 +50,6 @@ export const LoginSettings = ({
               name="redirectUris"
               aria-label={t("validRedirectUri")}
               addButtonLabel="addRedirectUri"
-              {...rest}
             />
           </FormGroup>
           <FormGroup
@@ -96,71 +70,28 @@ export const LoginSettings = ({
               aria-label={t("validPostLogoutRedirectUri")}
               addButtonLabel="addPostLogoutRedirectUri"
               stringify
-              {...rest}
             />
-          </FormGroup>{" "}
+          </FormGroup>
         </>
       )}
       {protocol === "saml" && (
         <>
-          <FormGroup
+          <TextControl
+            name="attributes.saml_idp_initiated_sso_url_name"
             label={t("idpInitiatedSsoUrlName")}
-            fieldId="idpInitiatedSsoUrlName"
+            labelIcon={t("idpInitiatedSsoUrlNameHelp")}
-            labelIcon={
-              <HelpItem
-                helpText={t("idpInitiatedSsoUrlNameHelp")}
-                fieldLabelId="idpInitiatedSsoUrlName"
           />
-            }
+          <TextControl
-            helperText={
+            name="attributes.saml_idp_initiated_sso_relay_state"
-              idpInitiatedSsoUrlName !== "" &&
-              t("idpInitiatedSsoUrlNameHelp", {
-                url: `${environment.authServerUrl}/realms/${realm}/protocol/saml/clients/${idpInitiatedSsoUrlName}`,
-              })
-            }
-          >
-            <KeycloakTextInput
-              id="idpInitiatedSsoUrlName"
-              data-testid="idpInitiatedSsoUrlName"
-              {...register("attributes.saml_idp_initiated_sso_url_name")}
-              {...rest}
-            />
-          </FormGroup>
-          <FormGroup
             label={t("idpInitiatedSsoRelayState")}
-            fieldId="idpInitiatedSsoRelayState"
+            labelIcon={t("idpInitiatedSsoRelayStateHelp")}
-            labelIcon={
-              <HelpItem
-                helpText={t("idpInitiatedSsoRelayStateHelp")}
-                fieldLabelId="idpInitiatedSsoRelayState"
           />
-            }
+          <TextControl
-          >
-            <KeycloakTextInput
-              id="idpInitiatedSsoRelayState"
-              data-testid="idpInitiatedSsoRelayState"
-              {...register("attributes.saml_idp_initiated_sso_relay_state")}
-              {...rest}
-            />
-          </FormGroup>
-          <FormGroup
-            label={t("masterSamlProcessingUrl")}
-            fieldId="masterSamlProcessingUrl"
-            labelIcon={
-              <HelpItem
-                helpText={t("masterSamlProcessingUrlHelp")}
-                fieldLabelId="masterSamlProcessingUrl"
-              />
-            }
-          >
-            <KeycloakTextInput
-              id="masterSamlProcessingUrl"
             type="url"
-              data-testid="masterSamlProcessingUrl"
+            name="adminUrl"
-              {...register("adminUrl")}
+            label={t("masterSamlProcessingUrl")}
-              {...rest}
+            labelIcon={t("masterSamlProcessingUrlHelp")}
           />
-          </FormGroup>
         </>
       )}
       {protocol !== "saml" && standardFlowEnabled && (
@@ -179,7 +110,6 @@ export const LoginSettings = ({
             name="webOrigins"
             aria-label={t("webOrigins")}
             addButtonLabel="addWebOrigins"
-            {...rest}
           />
         </FormGroup>
       )}