Hide capability config for bearer-only clients (#1279)

cypress/integration/clients_test.spec.ts

@@ -279,13 +279,20 @@ describe("Clients test", () => {
       keycloakBefore();
       loginPage.logIn();
       sidebarPage.goToClients();
+      cy.intercept("/auth/admin/realms/master/clients/*").as("fetchClient");
       listingPage.searchItem(clientId).goToItemDetails(clientId);
+      cy.wait("@fetchClient");
     });
 
     it("shows an explainer text for bearer only clients", () => {
       cy.findByTestId("bearer-only-explainer-label").trigger("mouseenter");
       cy.findByTestId("bearer-only-explainer-tooltip").should("exist");
     });
+
+    it("hides the capability config section", () => {
+      cy.findByTestId("capability-config-form").should("not.exist");
+      cy.findByTestId("jump-link-capability-config").should("not.exist");
+    });
   });
 
   describe("SAML test", () => {

src/clients/ClientDetails.tsx

@@ -337,6 +337,7 @@ export const ClientDetails = () => {
               title={<TabTitleText>{t("common:settings")}</TabTitleText>}
             >
               <ClientSettings
+                client={client}
                 save={() => save()}
                 reset={() => setupForm(client)}
               />

src/clients/ClientSettings.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
+import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   FormGroup,
@@ -25,26 +26,16 @@ import { SamlSignature } from "./add/SamlSignature";
 import type { ClientForm } from "./ClientDetails";
 
 type ClientSettingsProps = {
+  client: ClientRepresentation;
   save: () => void;
   reset: () => void;
 };
 
-const baseSections = [
+export const ClientSettings = ({
-  "generalSettings",
+  client,
-  "capabilityConfig",
+  save,
-  "accessSettings",
+  reset,
-  "loginSettings",
+}: ClientSettingsProps) => {
-] as const;
-
-const samlSections = [
-  "generalSettings",
-  "samlCapabilityConfig",
-  "signatureAndEncryption",
-  "accessSettings",
-  "loginSettings",
-] as const;
-
-export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
   const { register, control, watch } = useFormContext<ClientForm>();
   const { t } = useTranslation("clients");
 
@@ -55,7 +46,18 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
     "attributes.display-on-consent-screen"
   );
   const protocol = watch("protocol");
-  const sections = protocol === "saml" ? samlSections : baseSections;
+
+  const sections = useMemo(() => {
+    let result = ["generalSettings"];
+
+    if (protocol === "saml") {
+      result = [...result, "samlCapabilityConfig", "signatureAndEncryption"];
+    } else if (!client.bearerOnly) {
+      result = [...result, "capabilityConfig"];
+    }
+
+    return [...result, "accessSettings", "loginSettings"];
+  }, [protocol, client]);
 
   return (
     <ScrollForm
@@ -65,7 +67,11 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
       <Form isHorizontal>
         <ClientDescription />
       </Form>
-      {protocol === "saml" ? <SamlConfig /> : <CapabilityConfig />}
+      {protocol === "saml" ? (
+        <SamlConfig />
+      ) : (
+        !client.bearerOnly && <CapabilityConfig />
+      )}
       {protocol === "saml" && <SamlSignature />}
       <FormAccess isHorizontal role="manage-clients">
         <FormGroup

src/clients/add/CapabilityConfig.tsx

@@ -37,6 +37,7 @@ export const CapabilityConfig = ({
       role="manage-clients"
       unWrap={unWrap}
       className="keycloak__capability-config__form"
+      data-testid="capability-config-form"
     >
       {protocol === "openid-connect" && (
         <>

src/components/scroll-form/ScrollForm.tsx

@@ -31,29 +31,33 @@ export const ScrollForm: FunctionComponent<ScrollFormProps> = ({
   ...rest
 }) => {
   const { t } = useTranslation("common");
-
   const nodes = Children.toArray(children);
+
   return (
     <Grid hasGutter {...rest}>
       <GridItem span={8}>
-        {sections.map((cat, index) => (
+        {sections.map((cat, index) => {
-          <Fragment key={cat}>
+          const scrollId = spacesToHyphens(cat.toLowerCase());
-            {!borders && (
+
-              <ScrollPanel scrollId={spacesToHyphens(cat)} title={cat}>
+          return (
-                {nodes[index]}
+            <Fragment key={cat}>
-              </ScrollPanel>
+              {!borders && (
-            )}
+                <ScrollPanel scrollId={scrollId} title={cat}>
-            {borders && (
+                  {nodes[index]}
-              <FormPanel
+                </ScrollPanel>
-                scrollId={spacesToHyphens(cat)}
+              )}
-                title={cat}
+              {borders && (
-                className="kc-form-panel__panel"
+                <FormPanel
-              >
+                  scrollId={scrollId}
-                {nodes[index]}
+                  title={cat}
-              </FormPanel>
+                  className="kc-form-panel__panel"
-            )}
+                >
-          </Fragment>
+                  {nodes[index]}
-        ))}
+                </FormPanel>
+              )}
+            </Fragment>
+          );
+        })}
       </GridItem>
       <GridItem span={4}>
         <PageSection className="kc-scroll-form--sticky">
@@ -65,12 +69,20 @@ export const ScrollForm: FunctionComponent<ScrollFormProps> = ({
             label={t("jumpToSection")}
             offset={100}
           >
-            {sections.map((cat) => (
+            {sections.map((cat) => {
-              // note that JumpLinks currently does not work with spaces in the href
+              const scrollId = spacesToHyphens(cat.toLowerCase());
-              <JumpLinksItem key={cat} href={`#${spacesToHyphens(cat)}`}>
+
-                {cat}
+              return (
-              </JumpLinksItem>
+                // note that JumpLinks currently does not work with spaces in the href
-            ))}
+                <JumpLinksItem
+                  key={cat}
+                  href={`#${scrollId}`}
+                  data-testid={`jump-link-${scrollId}`}
+                >
+                  {cat}
+                </JumpLinksItem>
+              );
+            })}
           </JumpLinks>
         </PageSection>
       </GridItem>