fixed messages and replaced KeyckloakTextInput (#27591)

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

js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties

@@ -3099,3 +3099,7 @@ addTranslationDialogOkBtn=Ok
 translationError=Please add translations before saving
 fetchRoles=Fetch Roles
 fetchRolesHelp=By default, only the roles available from the token sent with the authorization requests are used to check if the user is granted with a role. If this setting is enabled, the policy will ignore roles from the token and check any role associated with the user instead.
+emptyAdminEvents=No admin events
+emptyAdminEventsInstructions=There are no admin events in this realm.
+emptyUserEvents=No user events
+emptyUserEventsInstructions=There are no user events in this realm.

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

@@ -528,8 +528,8 @@ export const AdminEvents = () => {
         ]}
         emptyState={
           <ListEmptyState
-            message={t("emptyEvents")}
+            message={t("emptyAdminEvents")}
-            instructions={t("emptyEventsInstructions")}
+            instructions={t("emptyAdminEventsInstructions")}
           />
         }
         isSearching={Object.keys(activeFilters).length > 0}

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

@@ -27,12 +27,11 @@ import { CheckCircleIcon, WarningTriangleIcon } from "@patternfly/react-icons";
 import { cellWidth, expandable } from "@patternfly/react-table";
 import { pickBy } from "lodash-es";
 import { useState } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { Controller, FormProvider, useForm } from "react-hook-form";
 import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 import { adminClient } from "../admin-client";
-import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import {
   RoutableTabs,
@@ -49,6 +48,7 @@ import { useFetch } from "../utils/useFetch";
 import useFormatDate, { FORMAT_DATE_AND_TIME } from "../utils/useFormatDate";
 import { AdminEvents } from "./AdminEvents";
 import { EventsTab, toEvents } from "./routes/Events";
+import { TextControl } from "ui-shared";
 
 import "./events.css";
 
@@ -145,17 +145,18 @@ export default function EventsSection() {
     ipAddress: t("ipAddress"),
   };
 
+  const form = useForm<UserEventSearchForm>({
+    mode: "onChange",
+    defaultValues,
+  });
+
   const {
     getValues,
-    register,
     reset,
     formState: { isDirty },
     control,
     handleSubmit,
-  } = useForm<UserEventSearchForm>({
+  } = form;
-    mode: "onChange",
-    defaultValues,
-  });
 
   useFetch(
     () => adminClient.realms.getConfigEvents({ realm }),
@@ -222,6 +223,7 @@ export default function EventsSection() {
 
   const userEventSearchFormDisplay = () => {
     return (
+      <FormProvider {...form}>
         <Flex
           direction={{ default: "column" }}
           spaceItems={{ default: "spaceItemsNone" }}
@@ -240,17 +242,11 @@ export default function EventsSection() {
                 onSubmit={handleSubmit(onSubmit)}
                 isHorizontal
               >
-              <FormGroup
+                <TextControl
+                  name="user"
                   label={t("userId")}
-                fieldId="kc-userId"
-                className="keycloak__events_search__form_label"
-              >
-                <KeycloakTextInput
-                  id="kc-userId"
                   data-testid="userId-searchField"
-                  {...register("user")}
                 />
-              </FormGroup>
                 <FormGroup
                   label={t("eventType")}
                   fieldId="kc-eventType"
@@ -314,17 +310,11 @@ export default function EventsSection() {
                     )}
                   />
                 </FormGroup>
-              <FormGroup
+                <TextControl
+                  name="client"
                   label={t("client")}
-                fieldId="kc-client"
-                className="keycloak__events_search__form_label"
-              >
-                <KeycloakTextInput
-                  id="kc-client"
                   data-testid="client-searchField"
-                  {...register("client")}
                 />
-              </FormGroup>
                 <FormGroup
                   label={t("dateFrom")}
                   fieldId="kc-dateFrom"
@@ -361,17 +351,11 @@ export default function EventsSection() {
                     )}
                   />
                 </FormGroup>
-              <FormGroup
+                <TextControl
+                  name="ipAddress"
                   label={t("ipAddress")}
-                fieldId="kc-ipAddress"
-                className="keycloak__events_search__form_label"
-              >
-                <KeycloakTextInput
-                  id="kc-ipAddress"
                   data-testid="ipAddress-searchField"
-                  {...register("ipAddress")}
                 />
-              </FormGroup>
                 <ActionGroup>
                   <Button
                     data-testid="search-events-btn"
@@ -428,6 +412,7 @@ export default function EventsSection() {
             )}
           </FlexItem>
         </Flex>
+      </FormProvider>
     );
   };
 
@@ -501,8 +486,8 @@ export default function EventsSection() {
                 ]}
                 emptyState={
                   <ListEmptyState
-                    message={t("emptyEvents")}
+                    message={t("emptyUserEvents")}
-                    instructions={t("emptyEventsInstructions")}
+                    instructions={t("emptyUserEventsInstructions")}
                   />
                 }
                 isSearching={Object.keys(activeFilters).length > 0}