Add "always display" switch (#2165)

* add always display switch

* add optional param to fillClientData

* add frontchannelLogout to SAML settings

* fix test

cypress/support/pages/admin_console/manage/clients/CreateClientPage.ts

@@ -1,42 +1,24 @@
 export default class CreateClientPage {
-  clientTypeDrpDwn: string;
-  clientTypeError: string;
-  clientTypeList: string;
-  clientIdInput: string;
-  clientIdError: string;
-  clientDescriptionInput: string;
-  clientAuthenticationSwitch: string;
-  standardFlowChkBx: string;
-  directAccessChkBx: string;
-  implicitFlowChkBx: string;
-  serviceAccountRolesChkBx: string;
-  continueBtn: string;
-  backBtn: string;
-  cancelBtn: string;
-  clientNameInput: string;
+  clientTypeDrpDwn = ".pf-c-select__toggle";
+  clientTypeError = ".pf-c-select + div";
+  clientTypeList = ".pf-c-select__toggle + ul";
+  clientIdInput = "#kc-client-id";
+  clientIdError = "#kc-client-id + div";
+  clientNameInput = "#kc-name";
+  clientDescriptionInput = "#kc-description";
+  alwaysDisplayInConsoleSwitch =
+    '[for="kc-always-display-in-console-switch"]  .pf-c-switch__toggle';
+  frontchannelLogoutSwitch =
+    '[for="kc-frontchannelLogout-switch"]  .pf-c-switch__toggle';
+  clientAuthenticationSwitch = '[for="kc-authentication"] .pf-c-switch__toggle';
+  standardFlowChkBx = "#kc-flow-standard";
+  directAccessChkBx = "#kc-flow-direct";
+  implicitFlowChkBx = "#kc-flow-implicit";
+  serviceAccountRolesChkBx = "#kc-flow-service-account";
 
-  constructor() {
-    this.clientTypeDrpDwn = ".pf-c-select__toggle";
-    this.clientTypeError = ".pf-c-select + div";
-    this.clientTypeList = ".pf-c-select__toggle + ul";
-    this.clientIdInput = "#kc-client-id";
-    this.clientIdError = "#kc-client-id + div";
-    this.clientNameInput = "#kc-name";
-    this.clientDescriptionInput = "#kc-description";
-
-    this.clientAuthenticationSwitch =
-      '[for="kc-authentication"] .pf-c-switch__toggle';
-    this.clientAuthenticationSwitch =
-      '[for="kc-authorization"] .pf-c-switch__toggle';
-    this.standardFlowChkBx = "#kc-flow-standard";
-    this.directAccessChkBx = "#kc-flow-direct";
-    this.implicitFlowChkBx = "#kc-flow-implicit";
-    this.serviceAccountRolesChkBx = "#kc-flow-service-account";
-
-    this.continueBtn = ".pf-c-wizard__footer .pf-m-primary";
-    this.backBtn = ".pf-c-wizard__footer .pf-m-secondary";
-    this.cancelBtn = ".pf-c-wizard__footer .pf-m-link";
-  }
+  continueBtn = ".pf-c-wizard__footer .pf-m-primary";
+  backBtn = ".pf-c-wizard__footer .pf-m-secondary";
+  cancelBtn = ".pf-c-wizard__footer .pf-m-link";
 
   //#region General Settings
   selectClientType(clientType: string) {
@@ -46,7 +28,13 @@ export default class CreateClientPage {
     return this;
   }
 
-  fillClientData(id: string, name = "", description = "") {
+  fillClientData(
+    id: string,
+    name = "",
+    description = "",
+    alwaysDisplay?: boolean,
+    frontchannelLogout?: boolean
+  ) {
     cy.get(this.clientIdInput).clear();
 
     if (id) {
@@ -61,6 +49,14 @@ export default class CreateClientPage {
       cy.get(this.clientDescriptionInput).type(description);
     }
 
+    if (alwaysDisplay) {
+      cy.get(this.alwaysDisplayInConsoleSwitch).click();
+    }
+
+    if (frontchannelLogout) {
+      cy.get(this.frontchannelLogoutSwitch).click();
+    }
+
     return this;
   }
 

src/clients/ClientDescription.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { useFormContext } from "react-hook-form";
+import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import {
   FormGroup,
+  Switch,
   TextArea,
   TextInput,
   ValidatedOptions,
@@ -13,9 +14,13 @@ import { HelpItem } from "../components/help-enabler/HelpItem";
 import { FormAccess } from "../components/form-access/FormAccess";
 import type { ClientForm } from "./ClientDetails";
 
-export const ClientDescription = () => {
+type ClientDescriptionProps = {
+  protocol?: string;
+};
+
+export const ClientDescription = ({ protocol }: ClientDescriptionProps) => {
   const { t } = useTranslation("clients");
-  const { register, errors } = useFormContext<ClientForm>();
+  const { register, errors, control } = useFormContext<ClientForm>();
   return (
     <FormAccess role="manage-clients" unWrap>
       <FormGroup
@@ -80,6 +85,62 @@ export const ClientDescription = () => {
           }
         />
       </FormGroup>
+      {protocol === "saml" && (
+        <>
+          <FormGroup
+            label={t("clients:alwaysDisplayInConsole")}
+            labelIcon={
+              <HelpItem
+                helpText="clients-help:alwaysDisplayInConsole"
+                fieldLabelId="clients:alwaysDisplayInConsole"
+              />
+            }
+            fieldId="kc-always-display-in-console"
+            hasNoPaddingTop
+          >
+            <Controller
+              name="alwaysDisplayInConsole"
+              defaultValue={false}
+              control={control}
+              render={({ onChange, value }) => (
+                <Switch
+                  id="kc-always-display-in-console-switch"
+                  label={t("common:on")}
+                  labelOff={t("common:off")}
+                  isChecked={value}
+                  onChange={onChange}
+                />
+              )}
+            />
+          </FormGroup>
+          <FormGroup
+            label={t("frontchannelLogout")}
+            labelIcon={
+              <HelpItem
+                helpText="clients-help:frontchannelLogout"
+                fieldLabelId="clients:frontchannelLogout"
+              />
+            }
+            fieldId="kc-frontchannelLogout"
+            hasNoPaddingTop
+          >
+            <Controller
+              name="frontchannelLogout"
+              defaultValue={true}
+              control={control}
+              render={({ onChange, value }) => (
+                <Switch
+                  id="kc-frontchannelLogout-switch"
+                  label={t("common:on")}
+                  labelOff={t("common:off")}
+                  isChecked={value.toString() === "true"}
+                  onChange={(value) => onChange(value.toString())}
+                />
+              )}
+            />
+          </FormGroup>
+        </>
+      )}
     </FormAccess>
   );
 };

src/clients/ClientSettings.tsx

@@ -68,7 +68,7 @@ export const ClientSettings = ({
       sections={sections.map((section) => t(section))}
     >
       <Form isHorizontal>
-        <ClientDescription />
+        <ClientDescription protocol={client.protocol} />
       </Form>
       {protocol === "saml" ? (
         <SamlConfig />

src/clients/help.ts

@@ -22,6 +22,8 @@ export default {
     validRedirectURIs:
       "Valid URI pattern a browser can redirect to after a successful login or logout. Simple wildcards are allowed such as 'http://example.com/*'. Relative path can be specified too such as /my/relative/path/*. Relative paths are relative to the client root URL, or if none is specified the auth server root URL is used. For SAML, you must set valid URI patterns if you are relying on the consumer service URL embedded with the login request.",
     nameIdFormat: "The name ID format to use for the subject.",
+    alwaysDisplayInConsole:
+      "Always list this client in the Account Console, even if the user does not have an active session.",
     forceNameIdFormat:
       "Ignore requested NameID subject format and use admin console configured one.",
     forcePostBinding: "Always use POST binding for responses.",
@@ -169,6 +171,8 @@ export default {
       "SAML ARTIFACT Binding URL for the client's single logout service. You can leave this blank if you are using a different binding.",
     artifactBindingUrl:
       "URL to send the HTTP ARTIFACT messages to. You can leave this blank if you are using a different binding. This value should be set when forcing ARTIFACT binding together with IdP initiated login.",
+    frontchannelLogout:
+      "When true, logout requires a browser redirect to client. When false, server performs a background invocation for logout.",
     backchannelLogoutUrl:
       "URL that will cause the client to log itself out when a logout request is sent to this realm (via end_session_endpoint). If omitted, no logout request will be sent to the client is this case.",
     backchannelLogoutSessionRequired:

src/clients/messages.ts

@@ -295,6 +295,7 @@ export default {
     clientSettings: "Client details",
     selectEncryptionType: "Select Encryption type",
     generalSettings: "General Settings",
+    alwaysDisplayInConsole: "Always display in console",
     capabilityConfig: "Capability config",
     clientsExplain:
       "Clients are applications and services that can request authentication of a user.",
@@ -365,6 +366,7 @@ export default {
     backchannelLogoutSessionRequired: "Backchannel logout session required",
     backchannelLogoutRevokeOfflineSessions:
       "Backchannel logout revoke offline sessions",
+    frontchannelLogout: "Front channel logout",
     accessSettings: "Access settings",
     rootUrl: "Root URL",
     validRedirectUri: "Valid redirect URIs",