Fix. 1359-Can't view all scopes. (#1675)

cypress/integration/client_scopes_test.spec.ts

@@ -6,6 +6,7 @@ import CreateClientScopePage from "../support/pages/admin_console/manage/client_
 import { keycloakBefore } from "../support/util/keycloak_before";
 import RoleMappingTab from "../support/pages/admin_console/manage/RoleMappingTab";
 import ModalUtils from "../support/util/ModalUtils";
+import AdminClient from "../support/util/AdminClient";
 
 let itemId = "client_scope_crud";
 const loginPage = new LoginPage();
@@ -16,6 +17,48 @@ const createClientScopePage = new CreateClientScopePage();
 const modalUtils = new ModalUtils();
 
 describe("Client Scopes test", () => {
+  describe("Client Scope list items ", () => {
+    const clientScopeName = "client-scope-test";
+    const clientScope = {
+      name: clientScopeName,
+      description: "",
+      protocol: "openid-connect",
+      attributes: {
+        "include.in.token.scope": "true",
+        "display.on.consent.screen": "true",
+        "gui.order": "1",
+        "consent.screen.text": "",
+      },
+    };
+
+    before(async () => {
+      const client = new AdminClient();
+      for (let i = 0; i < 5; i++) {
+        clientScope.name = clientScopeName + i;
+        await client.createClientScope(clientScope);
+      }
+    });
+
+    beforeEach(() => {
+      keycloakBefore();
+      loginPage.logIn();
+      sidebarPage.goToClientScopes();
+    });
+
+    after(async () => {
+      const client = new AdminClient();
+      for (let i = 0; i < 5; i++) {
+        await client.deleteClientScope(clientScopeName + i);
+      }
+    });
+
+    it("should show items on next page are more than 11", () => {
+      listingPage.showNextPageTableItems();
+
+      cy.get(listingPage.tableRowItem).its("length").should("be.gt", 1);
+    });
+  });
+
   describe("Client Scope creation", () => {
     beforeEach(() => {
       keycloakBefore();

cypress/integration/clients_test.spec.ts

@@ -10,6 +10,7 @@ import InitialAccessTokenTab from "../support/pages/admin_console/manage/clients
 import { keycloakBefore } from "../support/util/keycloak_before";
 import RoleMappingTab from "../support/pages/admin_console/manage/RoleMappingTab";
 import KeysTab from "../support/pages/admin_console/manage/clients/KeysTab";
+import ClientScopesTab from "../support/pages/admin_console/manage/clients/ClientScopesTab";
 
 let itemId = "client_crud";
 const loginPage = new LoginPage();
@@ -20,6 +21,62 @@ const createClientPage = new CreateClientPage();
 const modalUtils = new ModalUtils();
 
 describe("Clients test", () => {
+  describe("Client details - Client scopes subtab", () => {
+    const clientScopesTab = new ClientScopesTab();
+    const client = new AdminClient();
+    const clientId = "client-scopes-subtab-test";
+    const clientScopeName = "client-scope-test";
+    const clientScope = {
+      name: clientScopeName,
+      description: "",
+      protocol: "openid-connect",
+      attributes: {
+        "include.in.token.scope": "true",
+        "display.on.consent.screen": "true",
+        "gui.order": "1",
+        "consent.screen.text": "",
+      },
+    };
+
+    before(async () => {
+      client.createClient({
+        clientId,
+        protocol: "openid-connect",
+        publicClient: false,
+      });
+      for (let i = 0; i < 5; i++) {
+        clientScope.name = clientScopeName + i;
+        await client.createClientScope(clientScope);
+        await client.addDefaultClientScopeInClient(
+          clientScopeName + i,
+          clientId
+        );
+      }
+    });
+
+    beforeEach(() => {
+      keycloakBefore();
+      loginPage.logIn();
+      sidebarPage.goToClients();
+      cy.intercept("/auth/admin/realms/master/clients/*").as("fetchClient");
+      listingPage.searchItem(clientId).goToItemDetails(clientId);
+      cy.wait("@fetchClient");
+      clientScopesTab.goToTab();
+    });
+
+    after(async () => {
+      client.deleteClient(clientId);
+      for (let i = 0; i < 5; i++) {
+        await client.deleteClientScope(clientScopeName + i);
+      }
+    });
+
+    it("should show items on next page are more than 11", () => {
+      listingPage.showNextPageTableItems();
+      cy.get(listingPage.tableRowItem).its("length").should("be.gt", 1);
+    });
+  });
+
   describe("Client creation", () => {
     beforeEach(() => {
       keycloakBefore();

cypress/support/pages/admin_console/ListingPage.ts

@@ -10,6 +10,23 @@ export default class ListingPage {
     ".pf-c-page__main .pf-c-toolbar__content-section .pf-m-primary:visible";
   private importBtn =
     ".pf-c-page__main .pf-c-toolbar__content-section .pf-m-link";
+  private previousPageBtn =
+    "div[class=pf-c-pagination__nav-control] button[data-action=previous]:visible";
+  private nextPageBtn =
+    "div[class=pf-c-pagination__nav-control] button[data-action=next]:visible";
+  public tableRowItem = "tbody tr[data-ouia-component-type]:visible";
+
+  showPreviousPageTableItems() {
+    cy.get(this.previousPageBtn).first().click();
+
+    return this;
+  }
+
+  showNextPageTableItems() {
+    cy.get(this.nextPageBtn).first().click();
+
+    return this;
+  }
 
   goToCreateItem() {
     cy.get(this.createBtn).click();

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

@@ -0,0 +1,8 @@
+export default class ClientScopesTab {
+  private clientScopesTab = "#pf-tab-clientScopes-clientScopes";
+
+  goToTab() {
+    cy.get(this.clientScopesTab).click();
+    return this;
+  }
+}

cypress/support/util/AdminClient.ts

@@ -1,6 +1,7 @@
 import KeycloakAdminClient from "@keycloak/keycloak-admin-client";
 import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
 import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
+import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientScopeRepresentation";
 
 export default class AdminClient {
   private client: KeycloakAdminClient;
@@ -85,4 +86,47 @@ export default class AdminClient {
     const user = await this.client.users.find({ username });
     await this.client.users.del({ id: user[0].id! });
   }
+
+  async createClientScope(scope: ClientScopeRepresentation) {
+    await this.login();
+    return await this.client.clientScopes.create(scope);
+  }
+
+  async deleteClientScope(clientScopeName: string) {
+    await this.login();
+    const clientScope = await this.client.clientScopes.findOneByName({
+      name: clientScopeName,
+    });
+    return await this.client.clientScopes.del({ id: clientScope?.id! });
+  }
+
+  async addDefaultClientScopeInClient(
+    clientScopeName: string,
+    clientId: string
+  ) {
+    await this.login();
+    const scope = await this.client.clientScopes.findOneByName({
+      name: clientScopeName,
+    });
+    const client = await this.client.clients.find({ clientId: clientId });
+    return await this.client.clients.addDefaultClientScope({
+      id: client[0]?.id!,
+      clientScopeId: scope?.id!,
+    });
+  }
+
+  async removeDefaultClientScopeInClient(
+    clientScopeName: string,
+    clientId: string
+  ) {
+    await this.login();
+    const scope = await this.client.clientScopes.findOneByName({
+      name: clientScopeName,
+    });
+    const client = await this.client.clients.find({ clientId: clientId });
+    return await this.client.clients.delDefaultClientScope({
+      id: client[0]?.id!,
+      clientScopeId: scope?.id!,
+    });
+  }
 }

src/client-scopes/ClientScopesSection.tsx

@@ -100,7 +100,7 @@ export default function ClientScopesSection() {
       })
       .filter(filter)
       .sort((a, b) => a.name!.localeCompare(b.name!, whoAmI.getLocale()))
-      .slice(first, max);
+      .slice(first, Number(first) + Number(max));
   };
 
   const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({

src/clients/scopes/ClientScopes.tsx

@@ -110,7 +110,7 @@ export const ClientScopes = ({
 
     const filter =
       searchType === "name" ? nameFilter(search) : typeFilter(searchTypeType);
-    return rows.filter(filter).slice(first, max);
+    return rows.filter(filter).slice(first, Number(first) + Number(max));
   };
 
   const TypeSelector = (scope: Row) => (