Feature to filter Login Events by IP Address (#19341)

Closes #19289

js/apps/admin-ui/cypress/e2e/events_test.spec.ts

@@ -231,6 +231,17 @@ describe.skip("Events tests", () => {
       listingPage.itemsGreaterThan(0);
     });
 
+    it("Search by Ip Adress to", () => {
+      userEventsTab
+        .assertIpAddressChipGroupExist(true)
+        .assertUserIdChipGroupExist(false)
+        .assertEventTypeChipGroupExist(false)
+        .assertClientChipGroupExist(false)
+        .assertDateFromChipGroupExist(false)
+        .assertDateToChipGroupExist(false);
+      listingPage.itemsGreaterThan(0);
+    });
+
     it("Search by all elements", () => {
       const searchData = new UserEventSearchData();
       searchData.client = eventsTestUserClientId;
@@ -247,6 +258,13 @@ describe.skip("Events tests", () => {
         .assertDateToChipGroupExist(true);
       listingPage.itemsGreaterThan(0);
     });
+
+    it("Check `search user events` button enabled", () => {
+      userEventsTab
+        .openSearchUserEventDropdownMenu()
+        .typeIpAddress("11111")
+        .assertSearchEventBtnIsEnabled(true);
+    });
   });
 
   describe("Admin events list", () => {

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/events/tabs/UserEventsTab.ts

@@ -7,6 +7,7 @@ enum UserEventsTabSearchFormFieldsLabel {
   Client = "Client",
   DateFrom = "Date(from)",
   DateTo = "Date(to)",
+  IpAddress = "IP Address",
 }
 
 export class UserEventSearchData {
@@ -15,6 +16,7 @@ export class UserEventSearchData {
   client?: string;
   dateFrom?: string;
   dateTo?: string;
+  ipAddress?: string;
 }
 
 const emptyStatePage = new EmptyStatePage();
@@ -27,6 +29,7 @@ export default class UserEventsTab extends PageObject {
   private searchClientInput = "#kc-client";
   private searchDateFromInput = "#kc-dateFrom";
   private searchDateToInput = "#kc-dateTo";
+  private searchIpAddress = "#kc-ipAddress";
   private searchEventsBtn = "search-events-btn";
   private refreshBtn = "refresh-btn";
 
@@ -80,6 +83,11 @@ export default class UserEventsTab extends PageObject {
     return this;
   }
 
+  public typeIpAddress(ipAddress: string) {
+    cy.get(this.searchIpAddress).type(ipAddress);
+    return this;
+  }
+
   public searchUserEvent(searchData: UserEventSearchData) {
     this.openSearchUserEventDropdownMenu();
     if (searchData.userId) {
@@ -101,6 +109,9 @@ export default class UserEventsTab extends PageObject {
     if (searchData.dateTo) {
       cy.get(this.searchDateToInput).type(searchData.dateTo);
     }
+    if (searchData.ipAddress) {
+      cy.get(this.searchIpAddress).type(searchData.ipAddress);
+    }
     cy.findByTestId(this.searchEventsBtn).click();
     return this;
   }
@@ -140,6 +151,13 @@ export default class UserEventsTab extends PageObject {
     return this;
   }
 
+  public searchUserEventByIpAddress(ipAddress: string) {
+    const searchData = new UserEventSearchData();
+    searchData.ipAddress = ipAddress;
+    this.searchUserEvent(searchData);
+    return this;
+  }
+
   public removeEventTypeChipGroupItem(itemName: string) {
     super.removeChipGroupItem(
       UserEventsTabSearchFormFieldsLabel.EventType,
@@ -197,6 +215,14 @@ export default class UserEventsTab extends PageObject {
     return this;
   }
 
+  public assertIpAddressChipGroupExist(exist: boolean) {
+    super.assertChipGroupExist(
+      UserEventsTabSearchFormFieldsLabel.IpAddress,
+      exist
+    );
+    return this;
+  }
+
   public assertNoSearchResultsExist(exist: boolean) {
     emptyStatePage.checkIfExists(exist);
     return this;

js/apps/admin-ui/src/events/EventsSection.tsx

@@ -58,6 +58,7 @@ type UserEventSearchForm = {
   dateTo: string;
   user: string;
   type: EventType[];
+  authIpAddress: string;
 };
 
 const defaultValues: UserEventSearchForm = {
@@ -66,6 +67,7 @@ const defaultValues: UserEventSearchForm = {
   dateTo: "",
   user: "",
   type: [],
+  authIpAddress: "",
 };
 
 const StatusRow = (event: EventRepresentation) =>
@@ -141,6 +143,7 @@ export default function EventsSection() {
     dateTo: t("dateTo"),
     user: t("userId"),
     type: t("eventType"),
+    authIpAddress: t("ipAddress"),
   };
 
   const {
@@ -369,6 +372,17 @@ export default function EventsSection() {
                   )}
                 />
               </FormGroup>
+              <FormGroup
+                label={t("ipAddress")}
+                fieldId="kc-ipAddress"
+                className="keycloak__events_search__form_label"
+              >
+                <KeycloakTextInput
+                  id="kc-ipAddress"
+                  data-testid="ipAddress-searchField"
+                  {...register("authIpAddress")}
+                />
+              </FormGroup>
               <ActionGroup>
                 <Button
                   data-testid="search-events-btn"