Hide certain elements on the page if client is a realm (#1245)

cypress/integration/clients_test.spec.ts

@@ -226,4 +226,36 @@ describe("Clients test", function () {
       );
     });
   });
+
+  describe("Realm client", () => {
+    const clientName = "master-realm";
+
+    beforeEach(() => {
+      keycloakBefore();
+      loginPage.logIn();
+      sidebarPage.goToClients();
+      listingPage.searchItem(clientName).goToItemDetails(clientName);
+    });
+
+    it("displays the correct tabs", () => {
+      cy.findByTestId("client-tabs")
+        .find("#pf-tab-settings-settings")
+        .should("exist");
+
+      cy.findByTestId("client-tabs")
+        .find("#pf-tab-roles-roles")
+        .should("exist");
+
+      cy.findByTestId("client-tabs")
+        .find("#pf-tab-advanced-advanced")
+        .should("exist");
+
+      cy.findByTestId("client-tabs").find("li").should("have.length", 3);
+    });
+
+    it("hides the delete action", () => {
+      cy.findByTestId("action-dropdown").click();
+      cy.findByTestId("delete-client").should("not.exist");
+    });
+  });
 });

src/clients/ClientDetails.tsx

@@ -53,6 +53,8 @@ import { ClientScopes } from "./scopes/ClientScopes";
 import { EvaluateScopes } from "./scopes/EvaluateScopes";
 import { ServiceAccount } from "./service-account/ServiceAccount";
 
+const isRealmClient = (client: ClientRepresentation) => !client.protocol;
+
 type ClientDetailHeaderProps = {
   onChange: (value: boolean) => void;
   value: boolean;
@@ -97,6 +99,27 @@ const ClientDetailHeader = ({
     return [{ text }];
   }, [client]);
 
+  const dropdownItems = [
+    <DropdownItem key="download" onClick={() => toggleDownloadDialog()}>
+      {t("downloadAdapterConfig")}
+    </DropdownItem>,
+    <DropdownItem key="export" onClick={() => exportClient(client)}>
+      {t("common:export")}
+    </DropdownItem>,
+    ...(!isRealmClient(client)
+      ? [
+          <Divider key="divider" />,
+          <DropdownItem
+            data-testid="delete-client"
+            key="delete"
+            onClick={() => toggleDeleteDialog()}
+          >
+            {t("common:delete")}
+          </DropdownItem>,
+        ]
+      : []),
+  ];
+
   return (
     <>
       <DisableConfirm />
@@ -106,18 +129,7 @@ const ClientDetailHeader = ({
         badges={badges}
         divider={false}
         helpTextKey="clients-help:enableDisable"
-        dropdownItems={[
+        dropdownItems={dropdownItems}
-          <DropdownItem key="download" onClick={() => toggleDownloadDialog()}>
-            {t("downloadAdapterConfig")}
-          </DropdownItem>,
-          <DropdownItem key="export" onClick={() => exportClient(client)}>
-            {t("common:export")}
-          </DropdownItem>,
-          <Divider key="divider" />,
-          <DropdownItem key="delete" onClick={() => toggleDeleteDialog()}>
-            {t("common:delete")}
-          </DropdownItem>,
-        ]}
         isEnabled={value}
         onToggle={(value) => {
           if (!value) {
@@ -262,6 +274,7 @@ export const ClientDetails = () => {
       </div>
     );
   }
+
   return (
     <>
       <ConfirmDialogModal
@@ -306,7 +319,7 @@ export const ClientDetails = () => {
       />
       <PageSection variant="light" className="pf-u-p-0">
         <FormProvider {...form}>
-          <KeycloakTabs isBox>
+          <KeycloakTabs data-testid="client-tabs" isBox>
             <Tab
               id="settings"
               eventKey="settings"
@@ -317,7 +330,7 @@ export const ClientDetails = () => {
                 reset={() => setupForm(client)}
               />
             </Tab>
-            {!client.publicClient && (
+            {!client.publicClient && !isRealmClient(client) && (
               <Tab
                 id="keys"
                 eventKey="keys"
@@ -326,7 +339,7 @@ export const ClientDetails = () => {
                 <Keys clientId={clientId} save={() => save()} />
               </Tab>
             )}
-            {!client.publicClient && (
+            {!client.publicClient && !isRealmClient(client) && (
               <Tab
                 id="credentials"
                 eventKey="credentials"
@@ -346,37 +359,39 @@ export const ClientDetails = () => {
                 messageBundle="clients"
               />
             </Tab>
-            <Tab
+            {!isRealmClient(client) && (
-              id="clientScopes"
+              <Tab
-              eventKey="clientScopes"
+                id="clientScopes"
-              title={<TabTitleText>{t("clientScopes")}</TabTitleText>}
+                eventKey="clientScopes"
-            >
+                title={<TabTitleText>{t("clientScopes")}</TabTitleText>}
-              <Tabs
-                activeKey={activeTab2}
-                onSelect={(_, key) => setActiveTab2(key as number)}
               >
-                <Tab
+                <Tabs
-                  id="setup"
+                  activeKey={activeTab2}
-                  eventKey={30}
+                  onSelect={(_, key) => setActiveTab2(key as number)}
-                  title={<TabTitleText>{t("setup")}</TabTitleText>}
                 >
-                  <ClientScopes
+                  <Tab
-                    clientId={clientId}
+                    id="setup"
-                    protocol={client!.protocol!}
+                    eventKey={30}
-                  />
+                    title={<TabTitleText>{t("setup")}</TabTitleText>}
-                </Tab>
+                  >
-                <Tab
+                    <ClientScopes
-                  id="evaluate"
+                      clientId={clientId}
-                  eventKey={31}
+                      protocol={client!.protocol!}
-                  title={<TabTitleText>{t("evaluate")}</TabTitleText>}
+                    />
-                >
+                  </Tab>
-                  <EvaluateScopes
+                  <Tab
-                    clientId={clientId}
+                    id="evaluate"
-                    protocol={client!.protocol!}
+                    eventKey={31}
-                  />
+                    title={<TabTitleText>{t("evaluate")}</TabTitleText>}
-                </Tab>
+                  >
-              </Tabs>
+                    <EvaluateScopes
-            </Tab>
+                      clientId={clientId}
+                      protocol={client!.protocol!}
+                    />
+                  </Tab>
+                </Tabs>
+              </Tab>
+            )}
             {client!.serviceAccountsEnabled && (
               <Tab
                 id="serviceAccount"