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,190 +182,174 @@ export const EventsSection = () => {
     </Link>
   );
 
-  return (
+  const userEventSearchFormDisplay = () => {
-    <>
+    return (
-      <ViewHeader
+      <>
-        titleKey="events:title"
+        <Flex direction={{ default: "column" }}>
-        subKey={
+          <FlexItem>
-          <Trans i18nKey="events:eventExplain">
+            <Dropdown
-            If you want to configure user events, Admin events or Event
+              id="user-events-search-select"
-            listeners, please enter
+              data-testid="UserEventsSearchSelector"
-            <Link to={toRealmSettings({ realm, tab: "events" })}>
+              className="pf-u-mt-md pf-u-ml-md"
-              {t("eventConfig")}
+              toggle={
-            </Link>
+                <DropdownToggle
-            page realm settings to configure.
+                  data-testid="userEventsSearchSelectorToggle"
-          </Trans>
+                  onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
-        }
+                  className="keycloak__events_search_selector_dropdown__toggle"
-        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"
-                  toggle={
-                    <DropdownToggle
-                      data-testid="userEventsSearchSelectorToggle"
-                      onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
-                      className="keycloak__user_events_search_selector_dropdown__toggle"
-                    >
-                      {t("searchForEvent")}
-                    </DropdownToggle>
-                  }
-                  isOpen={searchDropdownOpen}
                 >
-                  <Form
+                  {t("searchForUserEvent")}
-                    isHorizontal
+                </DropdownToggle>
-                    className="keycloak__user_events_search__form"
+              }
-                    data-testid="searchForm"
+              isOpen={searchDropdownOpen}
-                  >
+            >
-                    <FormGroup
+              <Form
-                      label={t("userId")}
+                isHorizontal
-                      fieldId="kc-userId"
+                className="keycloak__events_search__form"
-                      className="keycloak__user_events_search__form_label"
+                data-testid="searchForm"
-                    >
+              >
-                      <TextInput
+                <FormGroup
-                        ref={register()}
+                  label={t("userId")}
-                        type="text"
+                  fieldId="kc-userId"
-                        id="kc-userId"
+                  className="keycloak__events_search__form_label"
-                        name="user"
+                >
-                        data-testid="userId-searchField"
+                  <TextInput
-                      />
+                    ref={register()}
-                    </FormGroup>
+                    type="text"
-                    <FormGroup
+                    id="kc-userId"
-                      label={t("eventType")}
+                    name="user"
-                      fieldId="kc-eventType"
+                    data-testid="userId-searchField"
-                      className="keycloak__user_events_search__form_label"
+                  />
-                    >
+                </FormGroup>
-                      <Controller
+                <FormGroup
-                        name="type"
+                  label={t("eventType")}
-                        control={control}
+                  fieldId="kc-eventType"
-                        render={({
+                  className="keycloak__events_search__form_label"
-                          onChange,
+                >
-                          value,
+                  <Controller
-                        }: {
+                    name="type"
-                          onChange: (newValue: EventType[]) => void;
+                    control={control}
-                          value: EventType[];
+                    render={({
-                        }) => (
+                      onChange,
-                          <Select
+                      value,
-                            className="keycloak__user_events_search__event_type_select"
+                    }: {
-                            name="eventType"
+                      onChange: (newValue: EventType[]) => void;
-                            data-testid="event-type-searchField"
+                      value: EventType[];
-                            chipGroupProps={{
+                    }) => (
-                              numChips: 1,
+                      <Select
-                              expandedText: "Hide",
+                        className="keycloak__events_search__event_type_select"
-                              collapsedText: "Show ${remaining}",
+                        name="eventType"
-                            }}
+                        data-testid="event-type-searchField"
-                            variant={SelectVariant.typeaheadMulti}
+                        chipGroupProps={{
-                            typeAheadAriaLabel="Select"
+                          numChips: 1,
-                            onToggle={(isOpen) => setSelectOpen(isOpen)}
+                          expandedText: "Hide",
-                            selections={value}
+                          collapsedText: "Show ${remaining}",
-                            onSelect={(_, selectedValue) => {
+                        }}
-                              const option =
+                        variant={SelectVariant.typeaheadMulti}
-                                selectedValue.toString() as EventType;
+                        typeAheadAriaLabel="Select"
-                              const changedValue = value.includes(option)
+                        onToggle={(isOpen) => setSelectOpen(isOpen)}
-                                ? value.filter((item) => item !== option)
+                        selections={value}
-                                : [...value, option];
+                        onSelect={(_, selectedValue) => {
+                          const option = selectedValue.toString() as EventType;
+                          const changedValue = value.includes(option)
+                            ? value.filter((item) => item !== option)
+                            : [...value, option];
 
-                              onChange(changedValue);
+                          onChange(changedValue);
-                            }}
+                        }}
-                            onClear={(event) => {
+                        onClear={(event) => {
-                              event.stopPropagation();
+                          event.stopPropagation();
-                              onChange([]);
+                          onChange([]);
-                            }}
+                        }}
-                            isOpen={selectOpen}
+                        isOpen={selectOpen}
-                            aria-labelledby={"eventType"}
+                        aria-labelledby={"eventType"}
-                            chipGroupComponent={
+                        chipGroupComponent={
-                              <ChipGroup>
+                          <ChipGroup>
-                                {value.map((chip) => (
+                            {value.map((chip) => (
-                                  <Chip
+                              <Chip
-                                    key={chip}
+                                key={chip}
-                                    onClick={(event) => {
+                                onClick={(event) => {
-                                      event.stopPropagation();
+                                  event.stopPropagation();
-
+                                  onChange(value.filter((val) => val !== chip));
-                                      onChange(
+                                }}
-                                        value.filter((val) => val !== chip)
+                              >
-                                      );
+                                {chip}
-                                    }}
+                              </Chip>
-                                  >
-                                    {chip}
-                                  </Chip>
-                                ))}
-                              </ChipGroup>
-                            }
-                          >
-                            {events?.enabledEventTypes?.map((option) => (
-                              <SelectOption key={option} value={option} />
                             ))}
-                          </Select>
+                          </ChipGroup>
-                        )}
+                        }
-                      />
-                    </FormGroup>
-                    <FormGroup
-                      label={t("client")}
-                      fieldId="kc-client"
-                      className="keycloak__user_events_search__form_label"
-                    >
-                      <TextInput
-                        ref={register()}
-                        type="text"
-                        id="kc-client"
-                        name="client"
-                        data-testid="client-searchField"
-                      />
-                    </FormGroup>
-                    <FormGroup
-                      label={t("dateFrom")}
-                      fieldId="kc-dateFrom"
-                      className="keycloak__user_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__user_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__user_events_search__form_btn"
-                        variant={"primary"}
-                        onClick={submitSearch}
-                        data-testid="search-events-btn"
-                        isDisabled={!isDirty}
                       >
-                        {t("searchBtn")}
+                        {events?.enabledEventTypes?.map((option) => (
-                      </Button>
+                          <SelectOption key={option} value={option} />
-                    </ActionGroup>
+                        ))}
-                  </Form>
+                      </Select>
-                </Dropdown>
+                    )}
-              </FlexItem>
+                  />
-            </Flex>
+                </FormGroup>
+                <FormGroup
+                  label={t("client")}
+                  fieldId="kc-client"
+                  className="keycloak__events_search__form_label"
+                >
+                  <TextInput
+                    ref={register()}
+                    type="text"
+                    id="kc-client"
+                    name="client"
+                    data-testid="client-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__user_events_search__form_btn"
+                    variant={"primary"}
+                    onClick={submitSearch}
+                    data-testid="search-events-btn"
+                    isDisabled={!isDirty}
+                  >
+                    {t("searchUserEventsBtn")}
+                  </Button>
+                </ActionGroup>
+              </Form>
+            </Dropdown>
+            <Button
+              className="pf-u-ml-md"
+              onClick={refresh}
+              data-testid="refresh-btn"
+            >
+              {t("refresh")}
+            </Button>
+          </FlexItem>
+          <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",