added test saml advanced tab (#20880)

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

@@ -0,0 +1,59 @@
+import LoginPage from "../support/pages/LoginPage";
+import Masthead from "../support/pages/admin-ui/Masthead";
+import ListingPage from "../support/pages/admin-ui/ListingPage";
+import SidebarPage from "../support/pages/admin-ui/SidebarPage";
+import adminClient from "../support/util/AdminClient";
+import { keycloakBefore } from "../support/util/keycloak_hooks";
+import { AdvancedSamlTab } from "../support/pages/admin-ui/manage/clients/client_details/tabs/AdvancedSamlTab";
+import ClientDetailsPage from "../support/pages/admin-ui/manage/clients/client_details/ClientDetailsPage";
+
+const loginPage = new LoginPage();
+const masthead = new Masthead();
+const sidebarPage = new SidebarPage();
+const listingPage = new ListingPage();
+const advancedTab = new AdvancedSamlTab();
+
+describe("Clients Saml advanced tab", () => {
+  describe("Fine Grain SAML Endpoint Configuration", () => {
+    const clientName = "advanced-tab";
+
+    before(() => {
+      adminClient.createClient({
+        protocol: "saml",
+        clientId: clientName,
+        publicClient: false,
+      });
+    });
+
+    after(() => {
+      adminClient.deleteClient(clientName);
+    });
+
+    beforeEach(() => {
+      loginPage.logIn();
+      keycloakBefore();
+      sidebarPage.goToClients();
+      listingPage.searchItem(clientName).goToItemDetails(clientName);
+      new ClientDetailsPage().goToAdvancedTab();
+    });
+
+    it("Should Terms of service URL", () => {
+      const termsOfServiceUrl = "http://some.url/terms-of-service.html";
+      advancedTab.termsOfServiceUrl(termsOfServiceUrl).saveFineGrain();
+      masthead.checkNotificationMessage("Client successfully updated");
+
+      advancedTab
+        .termsOfServiceUrl("http://not.saveing.this/")
+        .revertFineGrain();
+      advancedTab.checkTermsOfServiceUrl(termsOfServiceUrl);
+    });
+
+    it("Invalid terms of service URL", () => {
+      advancedTab.termsOfServiceUrl("not a url").saveFineGrain();
+
+      masthead.checkNotificationMessage(
+        "Client could not be updated: Terms of service URL is not a valid URL"
+      );
+    });
+  });
+});

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

@@ -0,0 +1,27 @@
+import PageObject from "../../../../components/PageObject";
+
+export class AdvancedSamlTab extends PageObject {
+  private termsOfServiceUrlId = "attributes.tosUri";
+
+  saveFineGrain() {
+    cy.findAllByTestId("fineGrainSave").click();
+  }
+
+  revertFineGrain() {
+    cy.findByTestId("fineGrainRevert").click();
+  }
+
+  termsOfServiceUrl(termsOfServiceUrl: string) {
+    cy.findAllByTestId(this.termsOfServiceUrlId).clear();
+    cy.findAllByTestId(this.termsOfServiceUrlId).type(termsOfServiceUrl);
+    return this;
+  }
+
+  checkTermsOfServiceUrl(termsOfServiceUrl: string) {
+    cy.findAllByTestId(this.termsOfServiceUrlId).should(
+      "have.value",
+      termsOfServiceUrl
+    );
+    return this;
+  }
+}

js/apps/admin-ui/src/clients/advanced/ApplicationUrls.tsx

@@ -1,11 +1,5 @@
-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 { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
-import { convertAttributeNameToForm } from "../../util";
-import { FormFields } from "../ClientDetails";
 
 type ApplicationUrlsProps = {
   isDisabled?: boolean;
@@ -13,70 +7,30 @@ type ApplicationUrlsProps = {
 
 export const ApplicationUrls = (props: ApplicationUrlsProps) => {
   const { t } = useTranslation("clients");
-  const { register } = useFormContext();
 
   return (
     <>
-      <FormGroup
+      <TextControl
-        label={t("logoUrl")}
+        name="attributes.logoUri"
-        fieldId="logoUrl"
+        label={t("clients:logoUrl")}
-        labelIcon={
+        labelIcon={t("clients-help:logoUrl")}
-          <HelpItem
+        type="url"
-            helpText={t("clients-help:logoUrl")}
+        {...props}
-            fieldLabelId="clients:logoUrl"
+      />
-          />
+      <TextControl
-        }
+        name="attributes.policyUri"
-      >
+        label={t("clients:policyUrl")}
-        <KeycloakTextInput
+        labelIcon={t("clients-help:policyUrl")}
-          id="logoUrl"
+        type="url"
-          type="url"
+        {...props}
-          data-testid="logoUrl"
+      />
-          {...register(
+      <TextControl
-            convertAttributeNameToForm<FormFields>("attributes.logoUri")
+        name="attributes.tosUri"
-          )}
+        label={t("clients:termsOfServiceUrl")}
-          {...props}
+        labelIcon={t("clients-help:termsOfServiceUrl")}
-        />
+        type="url"
-      </FormGroup>
+        {...props}
-      <FormGroup
+      />
-        label={t("policyUrl")}
-        fieldId="policyUrl"
-        labelIcon={
-          <HelpItem
-            helpText={t("clients-help:policyUrl")}
-            fieldLabelId="clients:policyUrl"
-          />
-        }
-      >
-        <KeycloakTextInput
-          id="policyUrl"
-          data-testid="policyUrl"
-          type="url"
-          {...register(
-            convertAttributeNameToForm<FormFields>("attributes.policyUri")
-          )}
-          {...props}
-        />
-      </FormGroup>
-      <FormGroup
-        label={t("termsOfServiceUrl")}
-        fieldId="termsOfServiceUrl"
-        labelIcon={
-          <HelpItem
-            helpText={t("clients-help:termsOfServiceUrl")}
-            fieldLabelId="clients:termsOfServiceUrl"
-          />
-        }
-      >
-        <KeycloakTextInput
-          id="termsOfServiceUrl"
-          type="url"
-          data-testid="termsOfServiceUrl"
-          {...register(
-            convertAttributeNameToForm<FormFields>("attributes.tosUri")
-          )}
-          {...props}
-        />
-      </FormGroup>
     </>
   );
 };

js/apps/admin-ui/src/clients/advanced/FineGrainSamlEndpointConfig.tsx

@@ -1,10 +1,8 @@
-import { ActionGroup, Button, FormGroup } from "@patternfly/react-core";
+import { ActionGroup, Button } from "@patternfly/react-core";
-import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
 import { FormAccess } from "../../components/form/FormAccess";
-import { HelpItem } from "ui-shared";
+import { TextControl } from "ui-shared";
-import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { ApplicationUrls } from "./ApplicationUrls";
 
 type FineGrainSamlEndpointConfigProps = {
@@ -17,146 +15,63 @@ export const FineGrainSamlEndpointConfig = ({
   reset,
 }: FineGrainSamlEndpointConfigProps) => {
   const { t } = useTranslation("clients");
-  const { register } = useFormContext();
   return (
     <FormAccess role="manage-realm" isHorizontal>
       <ApplicationUrls />
-      <FormGroup
+      <TextControl
+        name="attributes.saml_assertion_consumer_url_post"
         label={t("assertionConsumerServicePostBindingURL")}
-        fieldId="assertionConsumerServicePostBindingURL"
+        labelIcon={t("clients-help:assertionConsumerServicePostBindingURL")}
-        labelIcon={
+        type="url"
-          <HelpItem
+      />
-            helpText={t("clients-help:assertionConsumerServicePostBindingURL")}
+      <TextControl
-            fieldLabelId="clients:assertionConsumerServicePostBindingURL"
+        name="attributes.saml_assertion_consumer_url_redirect"
-          />
-        }
-      >
-        <KeycloakTextInput
-          id="assertionConsumerServicePostBindingURL"
-          type="url"
-          {...register("attributes.saml_assertion_consumer_url_post")}
-        />
-      </FormGroup>
-      <FormGroup
         label={t("assertionConsumerServiceRedirectBindingURL")}
-        fieldId="assertionConsumerServiceRedirectBindingURL"
+        labelIcon={t("clients-help:assertionConsumerServiceRedirectBindingURL")}
-        labelIcon={
+        type="url"
-          <HelpItem
+      />
-            helpText={t(
+      <TextControl
-              "clients-help:assertionConsumerServiceRedirectBindingURL"
+        name="attributes.saml_single_logout_service_url_post"
-            )}
-            fieldLabelId="clients:assertionConsumerServiceRedirectBindingURL"
-          />
-        }
-      >
-        <KeycloakTextInput
-          id="assertionConsumerServiceRedirectBindingURL"
-          type="url"
-          {...register("attributes.saml_assertion_consumer_url_redirect")}
-        />
-      </FormGroup>
-      <FormGroup
         label={t("logoutServicePostBindingURL")}
-        fieldId="logoutServicePostBindingURL"
+        labelIcon={t("clients-help:logoutServicePostBindingURL")}
-        labelIcon={
+        type="url"
-          <HelpItem
+      />
-            helpText={t("clients-help:logoutServicePostBindingURL")}
+      <TextControl
-            fieldLabelId="clients:logoutServicePostBindingURL"
+        name="attributes.saml_single_logout_service_url_redirect"
-          />
-        }
-      >
-        <KeycloakTextInput
-          id="logoutServicePostBindingURL"
-          type="url"
-          {...register("attributes.saml_single_logout_service_url_post")}
-        />
-      </FormGroup>
-      <FormGroup
         label={t("logoutServiceRedirectBindingURL")}
-        fieldId="logoutServiceRedirectBindingURL"
+        labelIcon={t("clients-help:logoutServiceRedirectBindingURL")}
-        labelIcon={
+        type="url"
-          <HelpItem
+      />
-            helpText={t("clients-help:logoutServiceRedirectBindingURL")}
+      <TextControl
-            fieldLabelId="clients:logoutServiceRedirectBindingURL"
+        name="attributes.saml_single_logout_service_url_soap"
-          />
-        }
-      >
-        <KeycloakTextInput
-          id="logoutServiceRedirectBindingURL"
-          type="url"
-          {...register("attributes.saml_single_logout_service_url_redirect")}
-        />
-      </FormGroup>
-      <FormGroup
         label={t("logoutServiceSoapBindingUrl")}
-        fieldId="logoutServiceSoapBindingUrl"
+        labelIcon={t("clients-help:logoutServiceSoapBindingUrl")}
-        labelIcon={
+        type="url"
-          <HelpItem
+      />
-            helpText="clients-help:logoutServiceSoapBindingUrl"
+      <TextControl
-            fieldLabelId="clients:logoutServiceSoapBindingUrl"
+        name="attributes.saml_single_logout_service_url_artifact"
-          />
-        }
-      >
-        <KeycloakTextInput
-          id="logoutServiceSoapBindingUrl"
-          type="url"
-          {...register("attributes.saml_single_logout_service_url_soap")}
-        />
-      </FormGroup>
-      <FormGroup
         label={t("logoutServiceArtifactBindingUrl")}
-        fieldId="logoutServiceArtifactBindingUrl"
+        labelIcon={t("clients-help:logoutServiceArtifactBindingUrl")}
-        labelIcon={
+        type="url"
-          <HelpItem
+      />
-            helpText={t("clients-help:logoutServiceArtifactBindingUrl")}
+      <TextControl
-            fieldLabelId="clients:logoutServiceArtifactBindingUrl"
+        name="attributes.saml_artifact_binding_url"
-          />
-        }
-      >
-        <KeycloakTextInput
-          id="logoutServiceArtifactBindingUrl"
-          type="url"
-          {...register("attributes.saml_single_logout_service_url_artifact")}
-        />
-      </FormGroup>
-      <FormGroup
         label={t("artifactBindingUrl")}
-        fieldId="artifactBindingUrl"
+        labelIcon={t("clients-help:artifactBindingUrl")}
-        labelIcon={
+        type="url"
-          <HelpItem
+      />
-            helpText={t("clients-help:artifactBindingUrl")}
+      <TextControl
-            fieldLabelId="clients:artifactBindingUrl"
+        name="attributes.saml_artifact_resolution_service_url"
-          />
-        }
-      >
-        <KeycloakTextInput
-          id="artifactBindingUrl"
-          type="url"
-          {...register("attributes.saml_artifact_binding_url")}
-        />
-      </FormGroup>
-      <FormGroup
         label={t("artifactResolutionService")}
-        fieldId="artifactResolutionService"
+        labelIcon={t("clients-help:artifactResolutionService")}
-        labelIcon={
+        type="url"
-          <HelpItem
+      />
-            helpText={t("clients-help:artifactResolutionService")}
-            fieldLabelId="clients:artifactResolutionService"
-          />
-        }
-      >
-        <KeycloakTextInput
-          id="artifactResolutionService"
-          type="url"
-          {...register("attributes.saml_artifact_resolution_service_url")}
-        />
-      </FormGroup>
 
       <ActionGroup>
-        <Button variant="tertiary" onClick={save}>
+        <Button variant="tertiary" onClick={save} data-testid="fineGrainSave">
           {t("common:save")}
         </Button>
-        <Button variant="link" onClick={reset}>
+        <Button variant="link" onClick={reset} data-testid="fineGrainRevert">
           {t("common:revert")}
         </Button>
       </ActionGroup>

js/libs/ui-shared/src/controls/TextControl.tsx

@@ -1,4 +1,4 @@
-import { ValidatedOptions } from "@patternfly/react-core";
+import { TextInputProps, ValidatedOptions } from "@patternfly/react-core";
 import {
   FieldPath,
   FieldValues,
@@ -13,11 +13,12 @@ import { FormLabel } from "./FormLabel";
 export type TextControlProps<
   T extends FieldValues,
   P extends FieldPath<T> = FieldPath<T>
-> = UseControllerProps<T, P> & {
+> = UseControllerProps<T, P> &
-  label: string;
+  TextInputProps & {
-  labelIcon?: string;
+    label: string;
-  isDisabled?: boolean;
+    labelIcon?: string;
-};
+    isDisabled?: boolean;
+  };
 
 export const TextControl = <
   T extends FieldValues,
@@ -49,6 +50,7 @@ export const TextControl = <
           fieldState.error ? ValidatedOptions.error : ValidatedOptions.default
         }
         isDisabled={props.isDisabled}
+        {...props}
         {...field}
       />
     </FormLabel>