Add labels for supported applications to 'OTP Policy' (#3633)

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

@@ -20,7 +20,7 @@ describe("Policies", () => {
     });
 
     it("should change to hotp", () => {
-      otpPoliciesPage.checkSupportedActions("FreeOTP, Google Authenticator");
+      otpPoliciesPage.checkSupportedActions("FreeOTP", "Google Authenticator");
       otpPoliciesPage.setPolicyType("hotp").increaseInitialCounter().save();
       masthead.checkNotificationMessage("OTP policy successfully updated");
       otpPoliciesPage.checkSupportedActions("FreeOTP");

apps/admin-ui/cypress/support/pages/admin_console/manage/authentication/OTPPolicies.ts

@@ -14,8 +14,11 @@ export default class OTPPolicies {
     return this;
   }
 
-  checkSupportedActions(supportedActions: string) {
+  checkSupportedActions(...supportedActions: string[]) {
-    cy.findByTestId("supportedActions").should("have.value", supportedActions);
+    cy.findByTestId("supportedActions").should(
+      "have.text",
+      supportedActions.join("")
+    );
     return this;
   }
 

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

@@ -28,6 +28,10 @@
   "initialCounter": "Initial counter",
   "initialCounterErrorHint": "Value needs to be between 1 and 120",
   "supportedActions": "Supported actions",
+  "otpSupportedApplications": {
+    "totpAppFreeOTPName": "FreeOTP",
+    "totpAppGoogleName": "Google Authenticator"
+  },
   "updateOtpSuccess": "OTP policy successfully updated",
   "updateOtpError": "Could not update OTP policy: {{error}}",
   "webAuthnPolicySignatureAlgorithms": "Signature algorithms",

apps/admin-ui/src/authentication/policies/OtpPolicy.tsx

@@ -1,30 +1,31 @@
-import { useEffect } from "react";
+import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
-import { useTranslation } from "react-i18next";
-import { Controller, useForm, useWatch } from "react-hook-form";
 import {
-  PageSection,
-  FormGroup,
-  Radio,
-  Select,
-  SelectVariant,
-  SelectOption,
-  NumberInput,
   ActionGroup,
+  AlertVariant,
   Button,
   ButtonVariant,
-  AlertVariant,
+  Chip,
+  ChipGroup,
+  FormGroup,
+  NumberInput,
+  PageSection,
+  Radio,
+  Select,
+  SelectOption,
+  SelectVariant,
   Switch,
 } from "@patternfly/react-core";
+import { useEffect } from "react";
+import { Controller, useForm, useWatch } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 
-import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
+import { useAlerts } from "../../components/alert/Alerts";
 import { FormAccess } from "../../components/form-access/FormAccess";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
-import useToggle from "../../utils/useToggle";
 import { TimeSelector } from "../../components/time-selector/TimeSelector";
-import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { useAdminClient } from "../../context/auth/AdminClient";
 import { useRealm } from "../../context/realm-context/RealmContext";
-import { useAlerts } from "../../components/alert/Alerts";
+import useToggle from "../../utils/useToggle";
 
 import "./otp-policy.css";
 
@@ -41,7 +42,6 @@ export const OtpPolicy = ({ realm, realmUpdated }: OtpPolicyProps) => {
   const { t } = useTranslation("authentication");
   const {
     control,
-    register,
     reset,
     handleSubmit,
     formState: { isDirty, errors },
@@ -58,11 +58,7 @@ export const OtpPolicy = ({ realm, realmUpdated }: OtpPolicyProps) => {
     defaultValue: POLICY_TYPES[0],
   });
 
-  const setupForm = (realm: RealmRepresentation) =>
+  const setupForm = (realm: RealmRepresentation) => reset(realm);
-    reset({
-      ...realm,
-      otpSupportedApplications: realm.otpSupportedApplications?.join(", "),
-    });
 
   useEffect(() => setupForm(realm), []);
 
@@ -304,7 +300,6 @@ export const OtpPolicy = ({ realm, realmUpdated }: OtpPolicyProps) => {
         )}
         <FormGroup
           label={t("supportedActions")}
-          fieldId="supportedActions"
           labelIcon={
             <HelpItem
               helpText="authentication-help:supportedActions"
@@ -312,15 +307,13 @@ export const OtpPolicy = ({ realm, realmUpdated }: OtpPolicyProps) => {
             />
           }
         >
-          <KeycloakTextInput
+          <ChipGroup data-testid="supportedActions">
-            id="supportedActions"
+            {realm.otpSupportedApplications?.map((key) => (
-            name="otpSupportedApplications"
+              <Chip key={key} isReadOnly>
-            ref={register({
+                {t(`otpSupportedApplications.${key}`)}
-              setValueAs: (value) => value.split(", "),
+              </Chip>
-            })}
+            ))}
-            data-testid="supportedActions"
+          </ChipGroup>
-            isReadOnly
-          />
         </FormGroup>
 
         {otpType === POLICY_TYPES[0] && (