Fix intermittent failures of the users tests (#21924)

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/users/UserGroupsPage.ts

@@ -1,51 +1,56 @@
-import ModalUtils from "apps/admin-ui/cypress/support/util/ModalUtils";
+import ModalUtils from "../../../../../support/util/ModalUtils";
 
 const modalUtils = new ModalUtils();
 
 export default class UserGroupsPage {
-  userGroupsTab: string;
-  addGroupButton: string;
-  joinGroupButton: string;
-  leaveGroupButton: string;
-
-  constructor() {
-    this.userGroupsTab = "user-groups-tab";
-    this.addGroupButton = "add-group-button";
-    this.joinGroupButton = "users:join-button";
-    this.leaveGroupButton = "leave-group-button";
-  }
+  #userGroupsTab = "user-groups-tab";
+  #noGroupsAddGroupButton = "no-groups-empty-action";
+  #addGroupButton = "add-group-button";
+  #joinGroupButton = "users:join-button";
+  #leaveGroupButton = "leave-group-button";
 
   goToGroupsTab() {
-    cy.findByTestId(this.userGroupsTab).click();
-
+    cy.findByTestId(this.#userGroupsTab).click();
     return this;
   }
 
   toggleAddGroupModal() {
-    cy.findByTestId(this.addGroupButton).click({ force: true });
+    // This is dumb, but it's what Cypress wants, so we'll do it 🤷
+    // See: https://docs.cypress.io/guides/core-concepts/conditional-testing#Element-existence
+    cy.get("body")
+      .then(($body) => {
+        if (
+          $body.find(`[data-testid="${this.#noGroupsAddGroupButton}"]`).length
+        ) {
+          return this.#noGroupsAddGroupButton;
+        }
+
+        return this.#addGroupButton;
+      })
+      .then((buttonTestId) => {
+        cy.findByTestId(buttonTestId).click({ force: true });
+      });
 
     return this;
   }
 
   joinGroups() {
-    cy.findByTestId(this.joinGroupButton).click();
-
-    return this;
+    cy.findByTestId(this.#joinGroupButton).click();
   }
 
   leaveGroup() {
-    cy.findByTestId(this.leaveGroupButton).click();
+    cy.findByTestId(this.#leaveGroupButton).click();
     modalUtils.confirmModal();
     return this;
   }
 
   leaveGroupButtonDisabled() {
-    cy.findByTestId(this.leaveGroupButton).should("be.disabled");
+    cy.findByTestId(this.#leaveGroupButton).should("be.disabled");
     return this;
   }
 
   leaveGroupButtonEnabled() {
-    cy.findByTestId(this.leaveGroupButton).should("not.be.disabled");
+    cy.findByTestId(this.#leaveGroupButton).should("not.be.disabled");
     return this;
   }
 }

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/users/user_details/UserDetailsPage.ts

@@ -33,9 +33,14 @@ export default class UserDetailsPage extends PageObject {
   }
 
   public goToIdentityProviderLinksTab() {
+    cy.intercept("/admin/realms/master/identity-provider/instances").as(
+      "idpInstances",
+    );
+    cy.intercept("/admin/realms/master/users/*/federated-identity").as(
+      "fedIdentity",
+    );
     cy.findByTestId(this.identityProviderLinksTab).click();
-    cy.intercept("/admin/realms/master").as("load");
-    cy.wait(["@load"]);
+    cy.wait(["@idpInstances", "@fedIdentity"]);
 
     return this;
   }

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/users/user_details/tabs/IdentityProviderLinksTab.ts

@@ -47,8 +47,6 @@ export default class IdentityProviderLinksTab {
 
   public clickLinkAccountModalLinkBtn() {
     modalUtils.confirmModal();
-    cy.intercept("/admin/realms/master").as("load");
-    cy.wait(["@load"]);
     return this;
   }
 

js/apps/admin-ui/src/components/scroll-form/FormPanel.tsx

@@ -5,7 +5,7 @@ import {
   CardTitle,
   Title,
 } from "@patternfly/react-core";
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, useId } from "react";
 
 import "./form-panel.css";
 
@@ -21,8 +21,10 @@ export const FormPanel = ({
   scrollId,
   className,
 }: PropsWithChildren<FormPanelProps>) => {
+  const id = useId();
+
   return (
-    <Card className={className} isFlat>
+    <Card id={id} className={className} isFlat>
       <CardHeader className="kc-form-panel__header">
         <CardTitle tabIndex={0}>
           <Title

js/apps/admin-ui/src/components/table-toolbar/KeycloakDataTable.tsx

@@ -19,6 +19,7 @@ import {
   ReactNode,
   isValidElement,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -220,6 +221,7 @@ export function KeycloakDataTable<T>({
 
   const [key, setKey] = useState(0);
   const refresh = () => setKey(new Date().getTime());
+  const id = useId();
 
   const renderCell = (columns: (Field<T> | DetailField<T>)[], value: T) => {
     return columns.map((col) => {
@@ -415,7 +417,7 @@ export function KeycloakDataTable<T>({
     <>
       {(loading || !noData || searching) && (
         <PaginatingTableToolbar
-          id={ariaLabelKey}
+          id={id}
           count={rowLength}
           first={first}
           max={max}