From d124b02a952e23cdada18555fd67cf59f3012c30 Mon Sep 17 00:00:00 2001
From: Jon Koops <jonkoops@gmail.com>
Date: Tue, 5 Mar 2024 18:04:47 +0100
Subject: [PATCH] Port logout panel to new form controls (#27419)

Signed-off-by: Jon Koops <jonkoops@gmail.com>
---
 .../manage/clients/CreateClientPage.ts        |  12 +-
 .../admin-ui/src/clients/add/LogoutPanel.tsx  | 112 +++++-------------
 2 files changed, 34 insertions(+), 90 deletions(-)

diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/CreateClientPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/CreateClientPage.ts
index 4dabc0f0fb..ce7b72cf11 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/CreateClientPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/CreateClientPage.ts
@@ -42,8 +42,8 @@ export default class CreateClientPage extends CommonPage {
   #frontChannelLogoutSwitch =
     '[for="kc-frontchannelLogout-switch"] > .pf-c-switch__toggle';
   #frontChannelLogoutSwitchInput = "#kc-frontchannelLogout-switch";
-  #frontChannelLogoutInput = "#frontchannelLogoutUrl";
-  #backChannelLogoutInput = "#backchannelLogoutUrl";
+  #frontChannelLogoutInput = "frontchannelLogoutUrl";
+  #backChannelLogoutInput = "backchannelLogoutUrl";
   #backChannelLogoutRequiredSwitchInput = "#backchannelLogoutSessionRequired";
   #backChannelLogoutRevoqueSwitch =
     '.pf-c-form__group-control [for="backchannelLogoutRevokeOfflineSessions"] > .pf-c-switch__toggle';
@@ -267,17 +267,17 @@ export default class CreateClientPage extends CommonPage {
   checkLogoutSettingsElements() {
     cy.get(this.#backChannelLogoutRevoqueSwitch).scrollIntoView();
     cy.get(this.#frontChannelLogoutSwitchInput).should("not.be.disabled");
-    cy.get(this.#frontChannelLogoutInput).should("not.be.disabled");
-    cy.get(this.#backChannelLogoutInput).should("not.be.disabled");
+    cy.findByTestId(this.#frontChannelLogoutInput).should("not.be.disabled");
+    cy.findByTestId(this.#backChannelLogoutInput).should("not.be.disabled");
     cy.get(this.#backChannelLogoutRequiredSwitchInput).should(
       "not.be.disabled",
     );
     cy.get(this.#backChannelLogoutRevoqueSwitchInput).should("not.be.disabled");
 
     cy.get(this.#frontChannelLogoutSwitch).click();
-    cy.get(this.#frontChannelLogoutInput).should("not.exist");
+    cy.findByTestId(this.#frontChannelLogoutInput).should("not.exist");
     cy.get(this.#frontChannelLogoutSwitch).click();
-    cy.get(this.#frontChannelLogoutInput).should("not.be.disabled");
+    cy.findByTestId(this.#frontChannelLogoutInput).should("not.be.disabled");
 
     return this;
   }
diff --git a/js/apps/admin-ui/src/clients/add/LogoutPanel.tsx b/js/apps/admin-ui/src/clients/add/LogoutPanel.tsx
index 884992ef1a..689b67345a 100644
--- a/js/apps/admin-ui/src/clients/add/LogoutPanel.tsx
+++ b/js/apps/admin-ui/src/clients/add/LogoutPanel.tsx
@@ -1,13 +1,12 @@
-import { FormGroup, Switch, ValidatedOptions } from "@patternfly/react-core";
+import { FormGroup, Switch } from "@patternfly/react-core";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { HelpItem } from "ui-shared";
+import { HelpItem, TextControl } 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 { beerify, convertAttributeNameToForm } from "../../util";
+import { convertAttributeNameToForm } from "../../util";
 import { FormFields } from "../ClientDetails";
 import type { ClientSettingsProps } from "../ClientSettings";
 
@@ -23,12 +22,7 @@ export const LogoutPanel = ({
   client: { access },
 }: ClientSettingsProps) => {
   const { t } = useTranslation();
-  const {
-    register,
-    control,
-    watch,
-    formState: { errors },
-  } = useFormContext<FormFields>();
+  const { control, watch } = useFormContext<FormFields>();
 
   const { hasAccess } = useAccess();
   const isManager = hasAccess("manage-clients") || access?.configure;
@@ -70,85 +64,35 @@ export const LogoutPanel = ({
         />
       </FormGroup>
       {protocol === "openid-connect" && frontchannelLogout && (
-        <FormGroup
+        <TextControl
+          data-testid="frontchannelLogoutUrl"
+          type="url"
+          name={convertAttributeNameToForm<FormFields>(
+            "attributes.frontchannel.logout.url",
+          )}
           label={t("frontchannelLogoutUrl")}
-          fieldId="frontchannelLogoutUrl"
-          labelIcon={
-            <HelpItem
-              helpText={t("frontchannelLogoutUrlHelp")}
-              fieldLabelId="frontchannelLogoutUrl"
-            />
-          }
-          helperTextInvalid={
-            errors.attributes?.[beerify("frontchannel.logout.url")]
-              ?.message as string
-          }
-          validated={
-            errors.attributes?.[beerify("frontchannel.logout.url")]?.message
-              ? ValidatedOptions.error
-              : ValidatedOptions.default
-          }
-        >
-          <KeycloakTextInput
-            id="frontchannelLogoutUrl"
-            type="url"
-            {...register(
-              convertAttributeNameToForm<FormFields>(
-                "attributes.frontchannel.logout.url",
-              ),
-              {
-                validate: (uri) =>
-                  validateUrl(uri, t("frontchannelUrlInvalid").toString()),
-              },
-            )}
-            validated={
-              errors.attributes?.[beerify("frontchannel.logout.url")]?.message
-                ? ValidatedOptions.error
-                : ValidatedOptions.default
-            }
-          />
-        </FormGroup>
+          labelIcon={t("frontchannelLogoutUrlHelp")}
+          rules={{
+            validate: (uri) =>
+              validateUrl(uri, t("frontchannelUrlInvalid").toString()),
+          }}
+        />
       )}
       {protocol === "openid-connect" && (
         <>
-          <FormGroup
+          <TextControl
+            data-testid="backchannelLogoutUrl"
+            type="url"
+            name={convertAttributeNameToForm<FormFields>(
+              "attributes.backchannel.logout.url",
+            )}
             label={t("backchannelLogoutUrl")}
-            fieldId="backchannelLogoutUrl"
-            labelIcon={
-              <HelpItem
-                helpText={t("backchannelLogoutUrlHelp")}
-                fieldLabelId="backchannelLogoutUrl"
-              />
-            }
-            helperTextInvalid={
-              errors.attributes?.[beerify("backchannel.logout.url")]
-                ?.message as string
-            }
-            validated={
-              errors.attributes?.[beerify("backchannel.logout.url")]?.message
-                ? ValidatedOptions.error
-                : ValidatedOptions.default
-            }
-          >
-            <KeycloakTextInput
-              id="backchannelLogoutUrl"
-              type="url"
-              {...register(
-                convertAttributeNameToForm<FormFields>(
-                  "attributes.backchannel.logout.url",
-                ),
-                {
-                  validate: (uri) =>
-                    validateUrl(uri, t("backchannelUrlInvalid").toString()),
-                },
-              )}
-              validated={
-                errors.attributes?.[beerify("backchannel.logout.url")]?.message
-                  ? ValidatedOptions.error
-                  : ValidatedOptions.default
-              }
-            />
-          </FormGroup>
+            labelIcon={t("backchannelLogoutUrlHelp")}
+            rules={{
+              validate: (uri) =>
+                validateUrl(uri, t("backchannelUrlInvalid").toString()),
+            }}
+          />
           <FormGroup
             label={t("backchannelLogoutSessionRequired")}
             labelIcon={