Added status for when user and admin events saving is turned off

Signed-off-by: Agnieszka Gancarczyk <[email protected]>

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

@@ -3332,4 +3332,6 @@ UNMANAGED=Unmanaged
 deleteConfirmUsers_one=Delete user {{name}}?
 deleteConfirmUsers_other=Delete {{count}} users?
 downloadThemeJar=Download theme JAR
-themeColorInfo=Here you can set the patternfly color variables and create a "theme jar" file that you can download and put in your providers folder to apply the theme to your realm.
+themeColorInfo=Here you can set the patternfly color variables and create a "theme jar" file that you can download and put in your providers folder to apply the theme to your realm.
+savingUserEventsOff=Saving user events turned off
+savingAdminEventsOff=Saving admin events turned off

js/apps/admin-ui/src/Banners.tsx

@@ -5,13 +5,21 @@ import { useTranslation } from "react-i18next";
 
 type WarnBannerProps = {
   msg: string;
+  className?: string;
 };
 
-const WarnBanner = ({ msg }: WarnBannerProps) => {
+type EventsBannerType = "userEvents" | "adminEvents";
+
+const WarnBanner = ({ msg, className }: WarnBannerProps) => {
   const { t } = useTranslation();
 
   return (
-    <Banner screenReaderText={t(msg)} variant="gold" isSticky>
+    <Banner
+      screenReaderText={t(msg)}
+      variant="gold"
+      className={className}
+      isSticky
+    >
       <Flex
         spaceItems={{ default: "spaceItemsSm" }}
         flexWrap={{ default: "wrap" }}
@@ -30,3 +38,10 @@ export const Banners = () => {
 
   if (whoAmI.isTemporary()) return <WarnBanner msg="loggedInAsTempAdminUser" />;
 };
+
+export const EventsBanners = ({ type }: { type: EventsBannerType }) => {
+  const msg =
+    type === "userEvents" ? "savingUserEventsOff" : "savingAdminEventsOff";
+
+  return <WarnBanner msg={msg} className="pf-v5-u-mt-md pf-v5-u-mx-md" />;
+};

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

@@ -6,6 +6,7 @@ import {
   ListEmptyState,
   SelectVariant,
   TextControl,
+  useFetch,
 } from "@keycloak/keycloak-ui-shared";
 import {
   ActionGroup,
@@ -47,6 +48,7 @@ import { useServerInfo } from "../context/server-info/ServerInfoProvider";
 import { prettyPrintJSON } from "../util";
 import useFormatDate, { FORMAT_DATE_AND_TIME } from "../utils/useFormatDate";
 import { CellResourceLinkRenderer } from "./ResourceLinks";
+import { EventsBanners } from "../Banners";
 
 import "./events.css";
 
@@ -135,6 +137,7 @@ export const AdminEvents = () => {
   >({});
 
   const [authEvent, setAuthEvent] = useState<AdminEventRepresentation>();
+  const [adminEventsEnabled, setAdminEventsEnabled] = useState<boolean>();
   const [representationEvent, setRepresentationEvent] =
     useState<AdminEventRepresentation>();
 
@@ -161,6 +164,14 @@ export const AdminEvents = () => {
     control,
   } = form;
 
+  useFetch(
+    () => adminClient.realms.getConfigEvents({ realm }),
+    (events) => {
+      setAdminEventsEnabled(events?.adminEventsEnabled!);
+    },
+    [],
+  );
+
   function loader(first?: number, max?: number) {
     return adminClient.realms.findAdminEvents({
       // The admin client wants 'dateFrom' and 'dateTo' to be Date objects, however it cannot actually handle them so we need to cast to any.
@@ -271,8 +282,8 @@ export const AdminEvents = () => {
           />
         </DisplayDialog>
       )}
+      {!adminEventsEnabled && <EventsBanners type="adminEvents" />}
       <KeycloakDataTable
-        className="keycloak__events_table"
         key={key}
         loader={loader}
         detailColumns={[

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

@@ -39,6 +39,7 @@ import { useRealm } from "../context/realm-context/RealmContext";
 import { toUser } from "../user/routes/User";
 import useFormatDate, { FORMAT_DATE_AND_TIME } from "../utils/useFormatDate";
 import useLocaleSort from "../utils/useLocaleSort";
+import { EventsBanners } from "../Banners";
 
 import "./events.css";
 
@@ -127,6 +128,7 @@ export const UserEvents = ({ user, client }: UserEventsProps) => {
   const [searchDropdownOpen, setSearchDropdownOpen] = useState(false);
   const [selectOpen, setSelectOpen] = useState(false);
   const [events, setEvents] = useState<string[]>();
+  const [userEventsEnabled, setUserEventsEnabled] = useState<boolean>();
   const [activeFilters, setActiveFilters] = useState<
     Partial<UserEventSearchForm>
   >({});
@@ -164,8 +166,10 @@ export const UserEvents = ({ user, client }: UserEventsProps) => {
 
   useFetch(
     () => adminClient.realms.getConfigEvents({ realm }),
-    (events) =>
-      setEvents(localeSort(events?.enabledEventTypes || [], (e) => e)),
+    (events) => {
+      setUserEventsEnabled(events?.eventsEnabled!);
+      setEvents(localeSort(events?.enabledEventTypes || [], (e) => e));
+    },
     [],
   );
 
@@ -429,7 +433,8 @@ export const UserEvents = ({ user, client }: UserEventsProps) => {
   };
 
   return (
-    <div className="keycloak__events_table">
+    <>
+      {!userEventsEnabled && <EventsBanners type="userEvents" />}
       <KeycloakDataTable
         key={key}
         loader={loader}
@@ -485,6 +490,6 @@ export const UserEvents = ({ user, client }: UserEventsProps) => {
         }
         isSearching={Object.keys(activeFilters).length > 0}
       />
-    </div>
+    </>
   );
 };

js/apps/admin-ui/src/realm-settings/NewAttributeSettings.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import type {
   UserProfileAttribute,
   UserProfileConfig,