events: reverted to Flex (#1076)

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

src/events/AdminEvents.tsx

@@ -3,6 +3,8 @@ import {
   Button,
   Dropdown,
   DropdownToggle,
+  Flex,
+  FlexItem,
   Form,
   FormGroup,
   Modal,
@@ -11,7 +13,6 @@ import {
   SelectVariant,
   TextInput,
   Tooltip,
-  ToolbarItem,
 } from "@patternfly/react-core";
 import {
   cellWidth,
@@ -159,7 +160,11 @@ export const AdminEvents = () => {
   const adminEventSearchFormDisplay = () => {
     return (
       <>
-        <ToolbarItem>
+        <Flex
+          direction={{ default: "column" }}
+          spaceItems={{ default: "spaceItemsNone" }}
+        >
+          <FlexItem>
             <Dropdown
               id="admin-events-search-select"
               data-testid="AdminEventsSearchSelector"
@@ -288,7 +293,8 @@ export const AdminEvents = () => {
             >
               {t("refresh")}
             </Button>
-        </ToolbarItem>
+          </FlexItem>
+        </Flex>
       </>
     );
   };

src/events/EventsSection.tsx

@@ -9,6 +9,8 @@ import {
   DescriptionListTerm,
   Dropdown,
   DropdownToggle,
+  Flex,
+  FlexItem,
   Form,
   FormGroup,
   PageSection,
@@ -19,13 +21,12 @@ import {
   TabTitleText,
   TextInput,
   Tooltip,
-  ToolbarItem,
 } from "@patternfly/react-core";
 import { CheckCircleIcon, WarningTriangleIcon } from "@patternfly/react-icons";
 import { cellWidth, expandable } from "@patternfly/react-table";
-import type EventRepresentation from "@keycloak/keycloak-admin-client/lib/defs/eventRepresentation";
-import type EventType from "@keycloak/keycloak-admin-client/lib/defs/eventTypes";
-import type { RealmEventsConfigRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/realmEventsConfigRepresentation";
+import type EventRepresentation from "keycloak-admin/lib/defs/eventRepresentation";
+import type EventType from "keycloak-admin/lib/defs/eventTypes";
+import type { RealmEventsConfigRepresentation } from "keycloak-admin/lib/defs/realmEventsConfigRepresentation";
 import { pickBy } from "lodash";
 import moment from "moment";
 import React, { useState } from "react";
@@ -184,7 +185,11 @@ export const EventsSection = () => {
   const userEventSearchFormDisplay = () => {
     return (
       <>
-        <ToolbarItem>
+        <Flex
+          direction={{ default: "column" }}
+          spaceItems={{ default: "spaceItemsNone" }}
+        >
+          <FlexItem>
             <Dropdown
               id="user-events-search-select"
               data-testid="UserEventsSearchSelector"
@@ -346,8 +351,8 @@ export const EventsSection = () => {
             >
               {t("refresh")}
             </Button>
-        </ToolbarItem>
-        <ToolbarItem>
+          </FlexItem>
+          <FlexItem>
             {Object.entries(activeFilters).length > 0 && (
               <div className="keycloak__searchChips pf-u-ml-md">
                 {Object.entries(activeFilters).map((filter) => {
@@ -358,7 +363,7 @@ export const EventsSection = () => {
 
                   return (
                     <ChipGroup
-                    className="pf-u-mr-md pf-u-mb-md"
+                      className="pf-u-mt-md pf-u-mr-md"
                       key={key}
                       categoryName={filterLabels[key]}
                       isClosable
@@ -381,7 +386,8 @@ export const EventsSection = () => {
                 })}
               </div>
             )}
-        </ToolbarItem>
+          </FlexItem>
+        </Flex>
       </>
     );
   };
@@ -408,6 +414,7 @@ export const EventsSection = () => {
             eventKey="userEvents"
             title={<TabTitleText>{t("userEvents")}</TabTitleText>}
           >
+            <div className="keycloak__events_table">
               <KeycloakDataTable
                 key={key}
                 loader={loader}
@@ -457,6 +464,7 @@ export const EventsSection = () => {
                   </div>
                 }
               />
+            </div>
           </Tab>
           <Tab
             eventKey="adminEvents"