Events search fixes (#1056)

* events: uncommented test for searching user events

* events: added refresh btn and tidied up css

* events: increased search form width

* events: removed unwanted Divider

* events: fixed grey line issue when no events logged, fixed test

* events: renamed css classes to make them reusable for admin search

* events: added admin events search ui

* events: fixed refresh btn on user events tab

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

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

@@ -60,15 +60,14 @@ export default class EventsPage {
     cy.get("table").should("not.have.text", "LOGIN_ERROR");
     cy.get("table").should("not.have.text", "LOGOUT");
 
-    // cy.get('[id^=remove_pf]').click();
+    cy.get("[id^=remove_pf]").click();
-    // cy.get("table").contains("LOGIN");
 
-    // cy.get(this.searchEventDrpDwnBtn).click();
+    cy.get(this.searchEventDrpDwnBtn).click();
-    // cy.getId(this.userIdInputFld).type("11111");
+    cy.getId(this.userIdInputFld).type("11111");
-    // cy.get(this.eventsPageTitle).contains("No events logged");
+    cy.getId(this.searchEventsBtn).click();
-    // cy.getId(this.searchEventsBtn).click();
+    cy.get(this.eventsPageTitle).contains("No events logged");
-    // cy.get('[id^=remove_group]').click();
+    cy.get("[id^=remove_group]").click();
-    // cy.get("table").contains("LOGIN");
+    cy.get("table").contains("LOGIN");
   }
 
   shouldDoNoResultsSearch() {

src/events/AdminEvents.tsx

@@ -1,8 +1,17 @@
 import {
+  ActionGroup,
   Button,
+  Dropdown,
+  DropdownToggle,
+  Flex,
+  FlexItem,
+  Form,
+  FormGroup,
   Modal,
   ModalVariant,
-  ToolbarItem,
+  Select,
+  SelectVariant,
+  TextInput,
   Tooltip,
 } from "@patternfly/react-core";
 import {
@@ -15,18 +24,44 @@ import {
 import type AdminEventRepresentation from "keycloak-admin/lib/defs/adminEventRepresentation";
 import moment from "moment";
 import React, { FunctionComponent, useState } from "react";
+import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { useAdminClient } from "../context/auth/AdminClient";
 import { useRealm } from "../context/realm-context/RealmContext";
+import "./events.css";
 
 type DisplayDialogProps = {
   titleKey: string;
   onClose: () => void;
 };
 
+type AdminEventSearchForm = {
+  operationType: string[];
+  resourceType: string[];
+  resourcePath: string;
+  dateFrom: string;
+  dateTo: string;
+  client: string;
+  user: string;
+  realm: string[];
+  ipAddress: string;
+};
+
+const defaultValues: AdminEventSearchForm = {
+  operationType: [],
+  resourceType: [],
+  resourcePath: "",
+  dateFrom: "",
+  dateTo: "",
+  client: "",
+  user: "",
+  realm: [],
+  ipAddress: "",
+};
+
 const DisplayDialog: FunctionComponent<DisplayDialogProps> = ({
   titleKey,
   onClose,
@@ -72,12 +107,23 @@ export const AdminEvents = () => {
   const { realm } = useRealm();
 
   const [key, setKey] = useState(0);
+  const [searchDropdownOpen, setSearchDropdownOpen] = useState(false);
+  const [selectOpen, setSelectOpen] = useState(false);
   const refresh = () => setKey(new Date().getTime());
 
   const [authEvent, setAuthEvent] = useState<AdminEventRepresentation>();
   const [representationEvent, setRepresentationEvent] =
     useState<AdminEventRepresentation>();
 
+  const {
+    register,
+    formState: { isDirty },
+  } = useForm<AdminEventSearchForm>({
+    shouldUnregister: false,
+    mode: "onChange",
+    defaultValues,
+  });
+
   const loader = async (first?: number, max?: number, search?: string) => {
     const params = {
       first: first!,
@@ -111,6 +157,145 @@ export const AdminEvents = () => {
     </>
   );
 
+  const adminEventSearchFormDisplay = () => {
+    return (
+      <>
+        <Flex direction={{ default: "column" }}>
+          <FlexItem>
+            <Dropdown
+              id="admin-events-search-select"
+              data-testid="AdminEventsSearchSelector"
+              className="pf-u-mt-md pf-u-ml-md pf-u-mb-md"
+              toggle={
+                <DropdownToggle
+                  data-testid="adminEventsSearchSelectorToggle"
+                  onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
+                  className="keycloak__events_search_selector_dropdown__toggle"
+                >
+                  {t("searchForAdminEvent")}
+                </DropdownToggle>
+              }
+              isOpen={searchDropdownOpen}
+            >
+              <Form
+                isHorizontal
+                className="keycloak__events_search__form"
+                data-testid="searchForm"
+              >
+                <FormGroup
+                  label={t("resourceType")}
+                  fieldId="kc-resourceType"
+                  className="keycloak__events_search__form_label"
+                >
+                  <Select
+                    variant={SelectVariant.single}
+                    onToggle={(isOpen) => setSelectOpen(isOpen)}
+                    isOpen={selectOpen}
+                  ></Select>
+                </FormGroup>
+                <FormGroup
+                  label={t("operationType")}
+                  fieldId="kc-operationType"
+                  className="keycloak__events_search__form_label"
+                >
+                  <Select
+                    variant={SelectVariant.single}
+                    onToggle={(isOpen) => setSelectOpen(isOpen)}
+                    isOpen={selectOpen}
+                  ></Select>
+                </FormGroup>
+                <FormGroup
+                  label={t("user")}
+                  fieldId="kc-user"
+                  className="keycloak__events_search__form_label"
+                >
+                  <TextInput
+                    ref={register()}
+                    type="text"
+                    id="kc-user"
+                    name="user"
+                    data-testid="user-searchField"
+                  />
+                </FormGroup>
+                <FormGroup
+                  label={t("realm")}
+                  fieldId="kc-realm"
+                  className="keycloak__events_search__form_label"
+                >
+                  <Select
+                    variant={SelectVariant.single}
+                    onToggle={(isOpen) => setSelectOpen(isOpen)}
+                    isOpen={selectOpen}
+                  ></Select>
+                </FormGroup>
+                <FormGroup
+                  label={t("ipAddress")}
+                  fieldId="kc-ipAddress"
+                  className="keycloak__events_search__form_label"
+                >
+                  <TextInput
+                    ref={register()}
+                    type="text"
+                    id="kc-ipAddress"
+                    name="ipAddress"
+                    data-testid="ipAddress-searchField"
+                  />
+                </FormGroup>
+                <FormGroup
+                  label={t("dateFrom")}
+                  fieldId="kc-dateFrom"
+                  className="keycloak__events_search__form_label"
+                >
+                  <TextInput
+                    ref={register()}
+                    type="text"
+                    id="kc-dateFrom"
+                    name="dateFrom"
+                    className="pf-c-form-control pf-m-icon pf-m-calendar"
+                    placeholder="yyyy-MM-dd"
+                    data-testid="dateFrom-searchField"
+                  />
+                </FormGroup>
+                <FormGroup
+                  label={t("dateTo")}
+                  fieldId="kc-dateTo"
+                  className="keycloak__events_search__form_label"
+                >
+                  <TextInput
+                    ref={register()}
+                    type="text"
+                    id="kc-dateTo"
+                    name="dateTo"
+                    className="pf-c-form-control pf-m-icon pf-m-calendar"
+                    placeholder="yyyy-MM-dd"
+                    data-testid="dateTo-searchField"
+                  />
+                </FormGroup>
+                <ActionGroup>
+                  <Button
+                    className="keycloak__admin_events_search__form_btn"
+                    variant={"primary"}
+                    data-testid="search-events-btn"
+                    isDisabled={!isDirty}
+                  >
+                    {t("searchAdminEventsBtn")}
+                  </Button>
+                </ActionGroup>
+              </Form>
+            </Dropdown>
+            <Button
+              className="pf-u-ml-md"
+              onClick={refresh}
+              data-testid="refresh-btn"
+            >
+              {t("refresh")}
+            </Button>
+          </FlexItem>
+        </Flex>
+      </>
+    );
+  };
+
   return (
     <>
       {authEvent && (
@@ -139,14 +324,7 @@ export const AdminEvents = () => {
         loader={loader}
         isPaginated
         ariaLabelKey="events:adminEvents"
-        searchPlaceholderKey="events:searchForEvent"
+        toolbarItem={adminEventSearchFormDisplay()}
-        toolbarItem={
-          <>
-            <ToolbarItem>
-              <Button onClick={refresh}>{t("refresh")}</Button>
-            </ToolbarItem>
-          </>
-        }
         actions={[
           {
             title: t("auth"),

src/events/EventsSection.tsx

@@ -7,7 +7,6 @@ import {
   DescriptionListDescription,
   DescriptionListGroup,
   DescriptionListTerm,
-  Divider,
   Dropdown,
   DropdownToggle,
   Flex,
@@ -43,7 +42,7 @@ import { useRealm } from "../context/realm-context/RealmContext";
 import { toRealmSettings } from "../realm-settings/routes/RealmSettings";
 import { toUser } from "../user/routes/User";
 import { AdminEvents } from "./AdminEvents";
-import "./events-section.css";
+import "./events.css";
 
 type UserEventSearchForm = {
   client: string;
@@ -170,6 +169,10 @@ export const EventsSection = () => {
     setKey(key + 1);
   }
 
+  function refresh() {
+    commitFilters();
+  }
+
   const UserDetailLink = (event: EventRepresentation) => (
     <Link
       key={`link-${event.time}-${event.type}`}
@@ -179,54 +182,35 @@ export const EventsSection = () => {
     </Link>
   );
 
+  const userEventSearchFormDisplay = () => {
     return (
       <>
-      <ViewHeader
+        <Flex direction={{ default: "column" }}>
-        titleKey="events:title"
-        subKey={
-          <Trans i18nKey="events:eventExplain">
-            If you want to configure user events, Admin events or Event
-            listeners, please enter
-            <Link to={toRealmSettings({ realm, tab: "events" })}>
-              {t("eventConfig")}
-            </Link>
-            page realm settings to configure.
-          </Trans>
-        }
-        divider={false}
-      />
-      <PageSection variant="light" className="pf-u-p-0">
-        <KeycloakTabs isBox>
-          <Tab
-            eventKey="userEvents"
-            title={<TabTitleText>{t("userEvents")}</TabTitleText>}
-          >
-            <Flex>
           <FlexItem>
             <Dropdown
               id="user-events-search-select"
               data-testid="UserEventsSearchSelector"
-                  className="pf-u-mt-md pf-u-ml-md pf-u-mb-md"
+              className="pf-u-mt-md pf-u-ml-md"
               toggle={
                 <DropdownToggle
                   data-testid="userEventsSearchSelectorToggle"
                   onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
-                      className="keycloak__user_events_search_selector_dropdown__toggle"
+                  className="keycloak__events_search_selector_dropdown__toggle"
                 >
-                      {t("searchForEvent")}
+                  {t("searchForUserEvent")}
                 </DropdownToggle>
               }
               isOpen={searchDropdownOpen}
             >
               <Form
                 isHorizontal
-                    className="keycloak__user_events_search__form"
+                className="keycloak__events_search__form"
                 data-testid="searchForm"
               >
                 <FormGroup
                   label={t("userId")}
                   fieldId="kc-userId"
-                      className="keycloak__user_events_search__form_label"
+                  className="keycloak__events_search__form_label"
                 >
                   <TextInput
                     ref={register()}
@@ -239,7 +223,7 @@ export const EventsSection = () => {
                 <FormGroup
                   label={t("eventType")}
                   fieldId="kc-eventType"
-                      className="keycloak__user_events_search__form_label"
+                  className="keycloak__events_search__form_label"
                 >
                   <Controller
                     name="type"
@@ -252,7 +236,7 @@ export const EventsSection = () => {
                       value: EventType[];
                     }) => (
                       <Select
-                            className="keycloak__user_events_search__event_type_select"
+                        className="keycloak__events_search__event_type_select"
                         name="eventType"
                         data-testid="event-type-searchField"
                         chipGroupProps={{
@@ -265,8 +249,7 @@ export const EventsSection = () => {
                         onToggle={(isOpen) => setSelectOpen(isOpen)}
                         selections={value}
                         onSelect={(_, selectedValue) => {
-                              const option =
+                          const option = selectedValue.toString() as EventType;
-                                selectedValue.toString() as EventType;
                           const changedValue = value.includes(option)
                             ? value.filter((item) => item !== option)
                             : [...value, option];
@@ -286,10 +269,7 @@ export const EventsSection = () => {
                                 key={chip}
                                 onClick={(event) => {
                                   event.stopPropagation();
-
+                                  onChange(value.filter((val) => val !== chip));
-                                      onChange(
-                                        value.filter((val) => val !== chip)
-                                      );
                                 }}
                               >
                                 {chip}
@@ -308,7 +288,7 @@ export const EventsSection = () => {
                 <FormGroup
                   label={t("client")}
                   fieldId="kc-client"
-                      className="keycloak__user_events_search__form_label"
+                  className="keycloak__events_search__form_label"
                 >
                   <TextInput
                     ref={register()}
@@ -321,7 +301,7 @@ export const EventsSection = () => {
                 <FormGroup
                   label={t("dateFrom")}
                   fieldId="kc-dateFrom"
-                      className="keycloak__user_events_search__form_label"
+                  className="keycloak__events_search__form_label"
                 >
                   <TextInput
                     ref={register()}
@@ -336,7 +316,7 @@ export const EventsSection = () => {
                 <FormGroup
                   label={t("dateTo")}
                   fieldId="kc-dateTo"
-                      className="keycloak__user_events_search__form_label"
+                  className="keycloak__events_search__form_label"
                 >
                   <TextInput
                     ref={register()}
@@ -356,13 +336,20 @@ export const EventsSection = () => {
                     data-testid="search-events-btn"
                     isDisabled={!isDirty}
                   >
-                        {t("searchBtn")}
+                    {t("searchUserEventsBtn")}
                   </Button>
                 </ActionGroup>
               </Form>
             </Dropdown>
+            <Button
+              className="pf-u-ml-md"
+              onClick={refresh}
+              data-testid="refresh-btn"
+            >
+              {t("refresh")}
+            </Button>
           </FlexItem>
-            </Flex>
+          <FlexItem>
             {Object.entries(activeFilters).length > 0 && (
               <div className="keycloak__searchChips pf-u-ml-md">
                 {Object.entries(activeFilters).map((filter) => {
@@ -396,6 +383,34 @@ export const EventsSection = () => {
                 })}
               </div>
             )}
+          </FlexItem>
+        </Flex>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <ViewHeader
+        titleKey="events:title"
+        subKey={
+          <Trans i18nKey="events:eventExplain">
+            If you want to configure user events, Admin events or Event
+            listeners, please enter
+            <Link to={toRealmSettings({ realm, tab: "events" })}>
+              {t("eventConfig")}
+            </Link>
+            page realm settings to configure.
+          </Trans>
+        }
+        divider={false}
+      />
+      <PageSection variant="light" className="pf-u-p-0">
+        <KeycloakTabs isBox>
+          <Tab
+            eventKey="userEvents"
+            title={<TabTitleText>{t("userEvents")}</TabTitleText>}
+          >
             <div className="keycloak__events_table">
               <KeycloakDataTable
                 key={key}
@@ -409,6 +424,7 @@ export const EventsSection = () => {
                 ]}
                 isPaginated
                 ariaLabelKey="events:title"
+                toolbarItem={userEventSearchFormDisplay()}
                 columns={[
                   {
                     name: "time",
@@ -438,7 +454,6 @@ export const EventsSection = () => {
                 ]}
                 emptyState={
                   <div className="pf-u-mt-md">
-                    <Divider className="keycloak__events_empty_state_divider" />
                     <ListEmptyState
                       message={t("emptyEvents")}
                       instructions={t("emptyEventsInstructions")}

src/events/events.css

@@ -2,41 +2,30 @@
   --pf-c-description-list--m-horizontal__term--width: 15ch;
 }
 
-.keycloak__user_events_search_selector_dropdown__toggle {
+.keycloak__events_search_selector_dropdown__toggle {
   --pf-c-dropdown__toggle--MinWidth: 21rem;
-}
-
-.keycloak__refresh_btn,
-.keycloak__searchChips,
-.keycloak__user_events_search_selector_dropdown__toggle {
   position: relative;
   z-index: 1;
 }
 
-.keycloak__user_events_search__form {
+.keycloak__events_search__form {
-  margin: 0 0 var(--pf-global--spacer--lg) var(--pf-global--spacer--lg);
+  margin: 0 var(--pf-global--spacer--lg) var(--pf-global--spacer--lg) var(--pf-global--spacer--lg);
   --pf-c-form__group--m-action--MarginTop: 0rem;
-  --pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 12rem;
+  --pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 24rem;
   --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 5rem;
 }
 
-.keycloak__user_events_search__form_label {
+.keycloak__events_search__form_label {
   --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 5rem;
 }
 
-.keycloak__user_events_search__event_type_select .pf-c-select__menu {
+.keycloak__events_search__event_type_select .pf-c-select__menu {
   max-height: 200px;
   overflow: auto;
 }
 
 .pf-c-toolbar {
   background-color: transparent;
-}
+  --pf-c-toolbar--PaddingTop: 0;
-
+  --pf-c-toolbar--PaddingBottom: 0;
-.keycloak__events_table {
-  margin-top: -4.25rem;
-}
-
-.keycloak__events_empty_state_divider {
-  margin-top: 4.25rem;
 }

src/events/messages.ts

@@ -6,7 +6,8 @@ export default {
     eventConfigs: "Event configs",
     userEvents: "User events",
     adminEvents: "Admin events",
-    searchForEvent: "Search user event",
+    searchForUserEvent: "Search user event",
+    searchForAdminEvent: "Search admin event",
     refresh: "Refresh",
     emptyEvents: "No events logged",
     emptyEventsInstructions: "Configure event logging in the realm settings",
@@ -20,7 +21,9 @@ export default {
     client: "Client",
     dateFrom: "Date(from)",
     dateTo: "Date(to)",
-    searchBtn: "Search events",
+    searchUserEventsBtn: "Search events",
+    searchAdminEventsBtn: "Search admin events",
+    realm: "Realm",
     resourcePath: "Resource path",
     resourceType: "Resource type",
     operationType: "Operation type",