Admin events auth dialog (#1131)

* admin-events-list: updated keys for Auth modal

* admin-events-list:added cypress test for auth dialog

* admin-events-list:added cypress test for representation dialog

* admin-events-list: fixed keys def

* admin-events-list: fixed keys def

Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>

cypress/integration/events_test.spec.ts

@@ -13,7 +13,7 @@ const adminEventsTab = new AdminEventsTab();
 const realmSettingsPage = new RealmSettingsPage();
 const masthead = new Masthead();
 
-describe("Search events tests", function () {
+describe("Events tests", function () {
   describe("Search user events", function () {
     beforeEach(function () {
       keycloakBefore();
@@ -99,4 +99,21 @@ describe("Search events tests", function () {
       adminEventsTab.shouldHaveSearchBtnEnabled();
     });
   });
+
+  describe("Check more button opens auth and representation dialogs", function () {
+    beforeEach(function () {
+      keycloakBefore();
+      loginPage.logIn();
+      sidebarPage.goToEvents();
+      cy.getId("admin-events-tab").click();
+    });
+
+    it("Check auth dialog opens and is not empty", () => {
+      adminEventsTab.shouldCheckAuthDialogOpensAndIsNotEmpty();
+    });
+
+    it("Check representation dialog opens and is not empty", () => {
+      adminEventsTab.shouldCheckRepDialogOpensAndIsNotEmpty();
+    });
+  });
 });

cypress/support/pages/admin_console/manage/events/AdminEventsTab.ts

@@ -11,12 +11,17 @@ export default class AdminEventsTab {
   dateFromInputFld = "dateFrom-searchField";
   dateToInputFld = "dateTo-searchField";
   searchEventsBtn = "search-events-btn";
-
   operationTypesList = ".pf-c-form-control";
   operationTypesOption = ".pf-c-select__menu-item";
   operationTypesInputFld = ".pf-c-form-control.pf-c-select__toggle-typeahead";
   operationTypesBtn = ".pf-c-button.pf-c-select__toggle-button.pf-m-plain";
   adminEventsTabTitle = ".pf-c-title";
+  moreBtn = ".pf-c-dropdown__toggle.pf-m-plain";
+  moreDrpDwnItems = ".pf-c-dropdown__menu";
+  dialogTitle = ".pf-c-modal-box__title-text";
+  dialogClose = `[aria-label="Close"]`;
+  authAttrDataRow = 'tbody > tr > [data-label="Attribute"]';
+  authValDataRow = 'tbody > tr > [data-label="Value"]';
 
   shouldHaveFormFields() {
     cy.getId(this.searchAdminEventDrpDwnBtn).click();
@@ -63,4 +68,23 @@ export default class AdminEventsTab {
     cy.getId(this.searchEventsBtn).click();
     cy.get(this.adminEventsTabTitle).contains("No events logged");
   }
+
+  shouldCheckAuthDialogOpensAndIsNotEmpty() {
+    cy.get(this.moreBtn).last().click();
+    cy.get(this.moreDrpDwnItems).contains("Auth").click();
+    cy.get(this.dialogTitle).contains("Auth");
+    cy.get(this.authAttrDataRow).contains("Realm");
+    cy.get(this.authAttrDataRow).contains("Client");
+    cy.get(this.authAttrDataRow).contains("User");
+    cy.get(this.authAttrDataRow).contains("IP address");
+    cy.get(this.authValDataRow).should("exist");
+    cy.get(this.dialogClose).click();
+  }
+
+  shouldCheckRepDialogOpensAndIsNotEmpty() {
+    cy.get(this.moreBtn).last().click();
+    cy.get(this.moreDrpDwnItems).contains("Representation").click();
+    cy.get(this.dialogTitle).contains("Representation");
+    cy.get(this.dialogClose).click();
+  }
 }

src/events/AdminEvents.tsx

@@ -194,7 +194,6 @@ export const AdminEvents = () => {
       (value) => value !== "" || (Array.isArray(value) && value.length > 0)
     );
 
-    console.log(newFilters);
     setActiveFilters(newFilters);
     setKey(key + 1);
   }
@@ -534,15 +533,23 @@ export const AdminEvents = () => {
     );
   };
 
+  const rows = [
+    [t("realm"), authEvent?.authDetails?.realmId],
+    [t("client"), authEvent?.authDetails?.clientId],
+    [t("user"), authEvent?.authDetails?.userId],
+    [t("ipAddress"), authEvent?.authDetails?.ipAddress],
+  ];
+
   return (
     <>
       {authEvent && (
         <DisplayDialog titleKey="auth" onClose={() => setAuthEvent(undefined)}>
           <Table
             aria-label="authData"
+            data-testid="auth-dialog"
             variant={TableVariant.compact}
             cells={[t("attribute"), t("value")]}
-            rows={Object.entries(authEvent.authDetails!)}
+            rows={rows}
           >
             <TableHeader />
             <TableBody />
@@ -552,6 +559,7 @@ export const AdminEvents = () => {
       {representationEvent && (
         <DisplayDialog
           titleKey="representation"
+          data-testid="representation-dialog"
           onClose={() => setRepresentationEvent(undefined)}
         >
           some json from the changed values