changed to use ui-shared (#27983)

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

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

@@ -47,7 +47,7 @@ describe("Clients SAML tests", () => {
     it("should save force name id format", () => {
       cy.get(".pf-c-jump-links__list").contains("SAML capabilities").click();
 
-      cy.findByTestId("forceNameIdFormat").click({
+      cy.findByTestId("attributes.saml🍺force🍺post🍺binding").click({
         force: true,
       });
       cy.findByTestId("settings-save").click();

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

@@ -11,19 +11,20 @@ export enum NameIdFormat {
 const masthead = new Masthead();
 
 export default class SettingsTab extends PageObject {
-  #samlNameIdFormat = "#samlNameIdFormat";
-  #forceNameIdFormat = "forceNameIdFormat";
-  #forcePostBinding = "forcePostBinding";
-  #forceArtifactBinding = "forceArtifactBinding";
-  #includeAuthnStatement = "includeAuthnStatement";
-  #includeOneTimeUseCondition = "includeOneTimeUseCondition";
-  #optimizeLookup = "optimizeLookup";
+  #samlNameIdFormat = "#saml_name_id_format";
+  #forceNameIdFormat = "attributes.saml_force_name_id_format";
+  #forcePostBinding = "attributes.saml🍺force🍺post🍺binding";
+  #forceArtifactBinding = "attributes.saml🍺artifact🍺binding";
+  #includeAuthnStatement = "attributes.saml🍺authnstatement";
+  #includeOneTimeUseCondition = "attributes.saml🍺onetimeuse🍺condition";
+  #optimizeLookup = "attributes.saml🍺server🍺signature🍺keyinfo🍺ext";
 
-  #signDocumentsSwitch = "signDocuments";
-  #signAssertionsSwitch = "signAssertions";
-  #signatureAlgorithm = "#signatureAlgorithm";
-  #signatureKeyName = "#signatureKeyName";
-  #canonicalization = "#canonicalization";
+  #signDocumentsSwitch = "attributes.saml🍺server🍺signature";
+  #signAssertionsSwitch = "attributes.saml🍺assertion🍺signature";
+  #signatureAlgorithm = "#saml🍺signature🍺algorithm";
+  #signatureKeyName =
+    "#saml🍺server🍺signature🍺keyinfo🍺xmlSigKeyInfoKeyNameTransformer";
+  #canonicalization = "#saml_signature_canonicalization_method";
 
   #loginTheme = "#loginTheme";
   #consentSwitch = "#kc-consent-switch";

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

@@ -1,16 +1,8 @@
-import {
-  FormGroup,
-  Select,
-  SelectOption,
-  SelectVariant,
-  Switch,
-} from "@patternfly/react-core";
-import { useState } from "react";
-import { Controller, Path, PathValue, useFormContext } from "react-hook-form";
+import { Path, PathValue } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-
+import { SelectControl } from "ui-shared";
+import { DefaultSwitchControl } from "../../components/SwitchControl";
 import { FormAccess } from "../../components/form/FormAccess";
-import { HelpItem } from "ui-shared";
 import { convertAttributeNameToForm } from "../../util";
 import { FormFields } from "../ClientDetails";
 
@@ -20,84 +12,35 @@ type ToggleProps = {
 };
 export const Toggle = ({ name, label }: ToggleProps) => {
   const { t } = useTranslation();
-  const { control } = useFormContext<FormFields>();
 
   return (
-    <FormGroup
-      hasNoPaddingTop
+    <DefaultSwitchControl
+      name={name}
       label={t(label)}
-      fieldId={label}
-      labelIcon={<HelpItem helpText={t(`${label}Help`)} fieldLabelId={label} />}
-    >
-      <Controller
-        name={name}
-        defaultValue="false"
-        control={control}
-        render={({ field }) => (
-          <Switch
-            id={name!}
-            data-testid={label}
-            label={t("on")}
-            labelOff={t("off")}
-            isChecked={field.value === "true"}
-            onChange={(value) => field.onChange(value.toString())}
-            aria-label={t(label)}
-          />
-        )}
-      />
-    </FormGroup>
+      labelIcon={t(`${label}Help`)}
+      stringify
+    />
   );
 };
 
 export const SamlConfig = () => {
   const { t } = useTranslation();
-  const { control } = useFormContext<FormFields>();
 
-  const [nameFormatOpen, setNameFormatOpen] = useState(false);
   return (
     <FormAccess
       isHorizontal
       role="manage-clients"
       className="keycloak__capability-config__form"
     >
-      <FormGroup
+      <SelectControl
+        name="attributes.saml_name_id_format"
         label={t("nameIdFormat")}
-        fieldId="nameIdFormat"
-        labelIcon={
-          <HelpItem
-            helpText={t("nameIdFormatHelp")}
-            fieldLabelId="nameIdFormat"
-          />
-        }
-      >
-        <Controller
-          name="attributes.saml_name_id_format"
-          defaultValue="username"
-          control={control}
-          render={({ field }) => (
-            <Select
-              toggleId="samlNameIdFormat"
-              onToggle={setNameFormatOpen}
-              onSelect={(_, value) => {
-                field.onChange(value.toString());
-                setNameFormatOpen(false);
-              }}
-              selections={field.value}
-              variant={SelectVariant.single}
-              aria-label={t("nameIdFormat")}
-              isOpen={nameFormatOpen}
-            >
-              {["username", "email", "transient", "persistent"].map((name) => (
-                <SelectOption
-                  selected={name === field.value}
-                  key={name}
-                  value={name}
-                />
-              ))}
-            </Select>
-          )}
-        />
-      </FormGroup>
+        labelIcon={t("nameIdFormatHelp")}
+        controller={{
+          defaultValue: "username",
+        }}
+        options={["username", "email", "transient", "persistent"]}
+      />
       <Toggle
         name="attributes.saml_force_name_id_format"
         label="forceNameIdFormat"

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

@@ -1,15 +1,7 @@
-import {
-  FormGroup,
-  Select,
-  SelectOption,
-  SelectVariant,
-} from "@patternfly/react-core";
-import { useState } from "react";
-import { Controller, useFormContext } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-
+import { SelectControl } from "ui-shared";
 import { FormAccess } from "../../components/form/FormAccess";
-import { HelpItem } from "ui-shared";
 import { convertAttributeNameToForm } from "../../util";
 import { FormFields } from "../ClientDetails";
 import { Toggle } from "./SamlConfig";
@@ -43,11 +35,7 @@ const CANONICALIZATION = [
 
 export const SamlSignature = () => {
   const { t } = useTranslation();
-  const [algOpen, setAlgOpen] = useState(false);
-  const [keyOpen, setKeyOpen] = useState(false);
-  const [canOpen, setCanOpen] = useState(false);
-
-  const { control, watch } = useFormContext<FormFields>();
+  const { watch } = useFormContext<FormFields>();
 
   const signDocs = watch(
     convertAttributeNameToForm<FormFields>("attributes.saml.server.signature"),
@@ -74,129 +62,40 @@ export const SamlSignature = () => {
       />
       {(signDocs === "true" || signAssertion === "true") && (
         <>
-          <FormGroup
+          <SelectControl
+            name={convertAttributeNameToForm<FormFields>(
+              "attributes.saml.signature.algorithm",
+            )}
             label={t("signatureAlgorithm")}
-            fieldId="signatureAlgorithm"
-            labelIcon={
-              <HelpItem
-                helpText={t("signatureAlgorithmHelp")}
-                fieldLabelId="signatureAlgorithm"
-              />
-            }
-          >
-            <Controller
-              name={convertAttributeNameToForm<FormFields>(
-                "attributes.saml.signature.algorithm",
-              )}
-              defaultValue={SIGNATURE_ALGORITHMS[0]}
-              control={control}
-              render={({ field }) => (
-                <Select
-                  toggleId="signatureAlgorithm"
-                  onToggle={setAlgOpen}
-                  onSelect={(_, value) => {
-                    field.onChange(value.toString());
-                    setAlgOpen(false);
-                  }}
-                  selections={field.value}
-                  variant={SelectVariant.single}
-                  aria-label={t("signatureAlgorithm")}
-                  isOpen={algOpen}
-                >
-                  {SIGNATURE_ALGORITHMS.map((algorithm) => (
-                    <SelectOption
-                      selected={algorithm === field.value}
-                      key={algorithm}
-                      value={algorithm}
-                    />
-                  ))}
-                </Select>
-              )}
-            />
-          </FormGroup>
-          <FormGroup
+            labelIcon={t("signatureAlgorithmHelp")}
+            controller={{
+              defaultValue: SIGNATURE_ALGORITHMS[0],
+            }}
+            options={[...SIGNATURE_ALGORITHMS]}
+          />
+          <SelectControl
+            name={convertAttributeNameToForm<FormFields>(
+              "attributes.saml.server.signature.keyinfo.xmlSigKeyInfoKeyNameTransformer",
+            )}
             label={t("signatureKeyName")}
-            fieldId="signatureKeyName"
-            labelIcon={
-              <HelpItem
-                helpText={t("signatureKeyNameHelp")}
-                fieldLabelId="signatureKeyName"
-              />
-            }
-          >
-            <Controller
-              name={convertAttributeNameToForm<FormFields>(
-                "attributes.saml.server.signature.keyinfo.xmlSigKeyInfoKeyNameTransformer",
-              )}
-              defaultValue={KEYNAME_TRANSFORMER[0]}
-              control={control}
-              render={({ field }) => (
-                <Select
-                  toggleId="signatureKeyName"
-                  onToggle={setKeyOpen}
-                  onSelect={(_, value) => {
-                    field.onChange(value.toString());
-                    setKeyOpen(false);
-                  }}
-                  selections={field.value}
-                  variant={SelectVariant.single}
-                  aria-label={t("signatureKeyName")}
-                  isOpen={keyOpen}
-                >
-                  {KEYNAME_TRANSFORMER.map((key) => (
-                    <SelectOption
-                      selected={key === field.value}
-                      key={key}
-                      value={key}
-                    />
-                  ))}
-                </Select>
-              )}
-            />
-          </FormGroup>
-          <FormGroup
+            labelIcon={t("signatureKeyNameHelp")}
+            controller={{
+              defaultValue: KEYNAME_TRANSFORMER[0],
+            }}
+            options={[...KEYNAME_TRANSFORMER]}
+          />
+          <SelectControl
+            name="attributes.saml_signature_canonicalization_method"
             label={t("canonicalization")}
-            fieldId="canonicalization"
-            labelIcon={
-              <HelpItem
-                helpText={t("canonicalizationHelp")}
-                fieldLabelId="canonicalization"
-              />
-            }
-          >
-            <Controller
-              name="attributes.saml_signature_canonicalization_method"
-              defaultValue={CANONICALIZATION[0].value}
-              control={control}
-              render={({ field }) => (
-                <Select
-                  toggleId="canonicalization"
-                  onToggle={setCanOpen}
-                  onSelect={(_, value) => {
-                    field.onChange(value.toString());
-                    setCanOpen(false);
-                  }}
-                  selections={
-                    CANONICALIZATION.find((can) => can.value === field.value)
-                      ?.name
-                  }
-                  variant={SelectVariant.single}
-                  aria-label={t("canonicalization")}
-                  isOpen={canOpen}
-                >
-                  {CANONICALIZATION.map((can) => (
-                    <SelectOption
-                      selected={can.value === field.value}
-                      key={can.name}
-                      value={can.value}
-                    >
-                      {can.name}
-                    </SelectOption>
-                  ))}
-                </Select>
-              )}
-            />
-          </FormGroup>
+            labelIcon={t("canonicalizationHelp")}
+            controller={{
+              defaultValue: CANONICALIZATION[0].value,
+            }}
+            options={CANONICALIZATION.map(({ name, value }) => ({
+              key: value,
+              value: name,
+            }))}
+          />
         </>
       )}
     </FormAccess>