BACKPORT: Events tab on client and user (keycloak#35512)

* [issue-33569] Show User Events on dedicated tab on Client-/User-Details (keycloak#33574) Fixes keycloak#33569 Signed-off-by: Oliver Cremerius <[email protected]> Signed-off-by: Erik Jan de Wit <[email protected]> * use user and client from form when on the events section (keycloak#35098) fixes: keycloak#35048 Signed-off-by: Erik Jan de Wit <[email protected]> * Remove columns and un-clearable filters (keycloak#34735) fixes: keycloak#34734 Signed-off-by: Erik Jan de Wit <[email protected]> --------- Signed-off-by: Oliver Cremerius <[email protected]> Signed-off-by: Erik Jan de Wit <[email protected]> Co-authored-by: Oliver <[email protected]> Signed-off-by: Erik Jan de Wit <[email protected]>
edewit · Dec 11, 2024 · a290543 · a290543
1 parent 9be23e9
commit a290543
Show file tree

Hide file tree

Showing 9 changed files with 606 additions and 524 deletions.
diff --git a/...dmin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/ClientDetailsPage.ts b/...dmin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/ClientDetailsPage.ts
@@ -19,6 +19,7 @@ export enum ClientsDetailsTab {
   ServiceAccountsRoles = "Service accounts roles",
   Advanced = "Advanced",
   Scope = "Scope",
+  UserEvents = "Events",
 }
 
 export default class ClientDetailsPage extends CommonPage {

diff --git a/js/apps/admin-ui/src/clients/ClientDetails.tsx b/js/apps/admin-ui/src/clients/ClientDetails.tsx
@@ -72,6 +72,7 @@ import { ClientScopes } from "./scopes/ClientScopes";
 import { EvaluateScopes } from "./scopes/EvaluateScopes";
 import { ServiceAccount } from "./service-account/ServiceAccount";
 import { getProtocolName, isRealmClient } from "./utils";
+import { UserEvents } from "../events/UserEvents";
 
 type ClientDetailHeaderProps = {
   onChange: (value: boolean) => void;
@@ -190,7 +191,7 @@ export default function ClientDetails() {
 
   const { t } = useTranslation();
   const { addAlert, addError } = useAlerts();
-  const { realm } = useRealm();
+  const { realm, realmRepresentation } = useRealm();
   const { hasAccess } = useAccess();
   const isFeatureEnabled = useIsFeatureEnabled();
 
@@ -225,54 +226,65 @@ export default function ClientDetails() {
     return sortBy(roles, (role) => role.name?.toUpperCase());
   };
 
-  const useTab = (tab: ClientTab) =>
-    useRoutableTab(
-      toClient({
-        realm,
-        clientId,
-        tab,
-      }),
-    );
-
-  const settingsTab = useTab("settings");
-  const keysTab = useTab("keys");
-  const credentialsTab = useTab("credentials");
-  const rolesTab = useTab("roles");
-  const clientScopesTab = useTab("clientScopes");
-  const authorizationTab = useTab("authorization");
-  const serviceAccountTab = useTab("serviceAccount");
-  const sessionsTab = useTab("sessions");
-  const permissionsTab = useTab("permissions");
-  const advancedTab = useTab("advanced");
-
-  const useClientScopesTab = (tab: ClientScopesTab) =>
-    useRoutableTab(
-      toClientScopesTab({
-        realm,
-        clientId,
-        tab,
-      }),
-    );
+  const tab = (tab: ClientTab) =>
+    toClient({
+      realm,
+      clientId,
+      tab,
+    });
+
+  const settingsTab = useRoutableTab(tab("settings"));
+  const keysTab = useRoutableTab(tab("keys"));
+  const credentialsTab = useRoutableTab(tab("credentials"));
+  const rolesTab = useRoutableTab(tab("roles"));
+  const clientScopesTab = useRoutableTab(tab("clientScopes"));
+  const authorizationTab = useRoutableTab(tab("authorization"));
+  const serviceAccountTab = useRoutableTab(tab("serviceAccount"));
+  const sessionsTab = useRoutableTab(tab("sessions"));
+  const permissionsTab = useRoutableTab(tab("permissions"));
+  const advancedTab = useRoutableTab(tab("advanced"));
+  const userEventsTab = useRoutableTab(tab("user-events"));
+
+  const clientScopesTabRoute = (tab: ClientScopesTab) =>
+    toClientScopesTab({
+      realm,
+      clientId,
+      tab,
+    });
+
+  const clientScopesSetupTab = useRoutableTab(clientScopesTabRoute("setup"));
+  const clientScopesEvaluateTab = useRoutableTab(
+    clientScopesTabRoute("evaluate"),
+  );
 
-  const clientScopesSetupTab = useClientScopesTab("setup");
-  const clientScopesEvaluateTab = useClientScopesTab("evaluate");
+  const authorizationTabRoute = (tab: AuthorizationTab) =>
+    toAuthorizationTab({
+      realm,
+      clientId,
+      tab,
+    });
 
-  const useAuthorizationTab = (tab: AuthorizationTab) =>
-    useRoutableTab(
-      toAuthorizationTab({
-        realm,
-        clientId,
-        tab,
-      }),
-    );
-
-  const authorizationSettingsTab = useAuthorizationTab("settings");
-  const authorizationResourcesTab = useAuthorizationTab("resources");
-  const authorizationScopesTab = useAuthorizationTab("scopes");
-  const authorizationPoliciesTab = useAuthorizationTab("policies");
-  const authorizationPermissionsTab = useAuthorizationTab("permissions");
-  const authorizationEvaluateTab = useAuthorizationTab("evaluate");
-  const authorizationExportTab = useAuthorizationTab("export");
+  const authorizationSettingsTab = useRoutableTab(
+    authorizationTabRoute("settings"),
+  );
+  const authorizationResourcesTab = useRoutableTab(
+    authorizationTabRoute("resources"),
+  );
+  const authorizationScopesTab = useRoutableTab(
+    authorizationTabRoute("scopes"),
+  );
+  const authorizationPoliciesTab = useRoutableTab(
+    authorizationTabRoute("policies"),
+  );
+  const authorizationPermissionsTab = useRoutableTab(
+    authorizationTabRoute("permissions"),
+  );
+  const authorizationEvaluateTab = useRoutableTab(
+    authorizationTabRoute("evaluate"),
+  );
+  const authorizationExportTab = useRoutableTab(
+    authorizationTabRoute("export"),
+  );
 
   const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
     titleKey: "clientDeleteConfirmTitle",
@@ -663,6 +675,15 @@ export default function ClientDetails() {
             >
               <AdvancedTab save={save} client={client} />
             </Tab>
+            {hasAccess("view-events") && realmRepresentation?.eventsEnabled && (
+              <Tab
+                data-testid="user-events-tab"
+                title={<TabTitleText>{t("events")}</TabTitleText>}
+                {...userEventsTab}
+              >
+                <UserEvents client={client.clientId} />
+              </Tab>
+            )}
           </RoutableTabs>
         </FormProvider>
       </PageSection>

diff --git a/js/apps/admin-ui/src/clients/routes/Client.tsx b/js/apps/admin-ui/src/clients/routes/Client.tsx
@@ -14,7 +14,8 @@ export type ClientTab =
   | "authorization"
   | "serviceAccount"
   | "permissions"
-  | "sessions";
+  | "sessions"
+  | "user-events";
 
 export type ClientParams = {
   realm: string;