Enable client consent text when client consent is enabled (#3145)

cypress/e2e/client_scopes_test.spec.ts

@@ -285,6 +285,25 @@ describe("Client Scopes test", () => {
       );
     });
 
+    it("hides 'consent text' field when 'display consent' switch is disabled", () => {
+      sidebarPage.waitForPageLoad();
+      listingPage.goToCreateItem();
+
+      createClientScopePage
+        .getSwitchDisplayOnConsentScreenInput()
+        .should("be.checked");
+
+      createClientScopePage.getConsentScreenTextInput().should("exist");
+
+      createClientScopePage.switchDisplayOnConsentScreen();
+
+      createClientScopePage
+        .getSwitchDisplayOnConsentScreenInput()
+        .should("not.be.checked");
+
+      createClientScopePage.getConsentScreenTextInput().should("not.exist");
+    });
+
     it("Client scope CRUD test", () => {
       itemId += "_" + (Math.random() + 1).toString(36).substring(7);
 

cypress/support/pages/admin_console/manage/client_scopes/CreateClientScopePage.ts

@@ -8,6 +8,7 @@ export default class CreateClientScopePage extends CommonPage {
   clientScopeDescriptionInput: string;
   clientScopeTypeDrpDwn: string;
   clientScopeTypeList: string;
+  displayOnConsentInput: string;
   displayOnConsentSwitch: string;
   consentScreenTextInput: string;
   includeInTokenSwitch: string;
@@ -25,8 +26,9 @@ export default class CreateClientScopePage extends CommonPage {
     this.clientScopeDescriptionInput = "#kc-description";
     this.clientScopeTypeDrpDwn = "#kc-protocol";
     this.clientScopeTypeList = "#kc-protocol + ul";
+    this.displayOnConsentInput = '[id="kc-display.on.consent.screen-switch"]';
     this.displayOnConsentSwitch =
-      '[id="kc-display.on.consent.screen"] + .pf-c-switch__toggle';
+      this.displayOnConsentInput + " + .pf-c-switch__toggle";
     this.consentScreenTextInput = "#kc-consent-screen-text";
     this.includeInTokenSwitch =
       '[id="includeInTokenScope"] + .pf-c-switch__toggle';
@@ -77,6 +79,14 @@ export default class CreateClientScopePage extends CommonPage {
     return this;
   }
 
+  getSwitchDisplayOnConsentScreenInput() {
+    return cy.get(this.displayOnConsentInput);
+  }
+
+  getConsentScreenTextInput() {
+    return cy.get(this.consentScreenTextInput);
+  }
+
   switchDisplayOnConsentScreen() {
     cy.get(this.displayOnConsentSwitch).click();
 

src/client-scopes/details/ScopeForm.tsx

@@ -44,9 +44,7 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
     handleSubmit,
     setValue,
     formState: { errors },
-  } = useForm<ClientScopeRepresentation>({
+  } = useForm<ClientScopeRepresentation>();
-    defaultValues: { attributes: { "display.on.consent.screen": "true" } },
-  });
   const { realm } = useRealm();
 
   const providers = useLoginProviders();
@@ -54,11 +52,12 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
   const [openType, setOpenType] = useState(false);
   const { id } = useParams<{ id: string }>();
 
-  const displayOnConsentScreen = useWatch({
+  const displayOnConsentScreen = useWatch<string>({
     control,
-    name: "attributes.display.on.consent.screen",
+    name: convertAttributeNameToForm("attributes.display.on.consent.screen"),
     defaultValue:
-      clientScope.attributes?.["display.on.consent.screen"] ?? "true",
+      clientScope.attributes?.["display.on.consent.screen"] ??
+      (id ? "false" : "true"),
   });
 
   useEffect(() => {

src/clients/add/LoginSettingsPanel.tsx

@@ -24,7 +24,7 @@ export const LoginSettingsPanel = ({ access }: { access?: boolean }) => {
   const loginThemes = useServerInfo().themes!["login"];
   const consentRequired = watch("consentRequired");
   const displayOnConsentScreen: string = watch(
-    "attributes.display.on.consent.screen"
+    convertAttributeNameToForm("attributes.display.on.consent.screen")
   );
 
   return (