diff --git a/src/events/AdminEvents.tsx b/src/events/AdminEvents.tsx
index 7b9c2fbbd5..a21c1829bd 100644
--- a/src/events/AdminEvents.tsx
+++ b/src/events/AdminEvents.tsx
@@ -1,10 +1,12 @@
import React, { ReactNode, useContext, useState } from "react";
+import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import {
Button,
Modal,
ModalVariant,
ToolbarItem,
+ Tooltip,
} from "@patternfly/react-core";
import moment from "moment";
@@ -12,6 +14,7 @@ import { useAdminClient } from "../context/auth/AdminClient";
import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
import { RealmContext } from "../context/realm-context/RealmContext";
import {
+ cellWidth,
Table,
TableBody,
TableHeader,
@@ -40,13 +43,34 @@ const DisplayDialog = ({ titleKey, onClose, children }: DisplayDialogProps) => {
);
};
+const MAX_TEXT_LENGTH = 38;
+const Truncate = ({
+ text,
+ children,
+}: {
+ text?: string;
+ children: (text: string) => any;
+}) => {
+ const definedText = text || "";
+ const needsTruncation = definedText.length > MAX_TEXT_LENGTH;
+ const truncatedText = definedText.substr(0, MAX_TEXT_LENGTH);
+ return (
+ <>
+ {needsTruncation && (
+ {children(truncatedText + "...")}
+ )}
+ {!needsTruncation && <>{children(definedText)}>}
+ >
+ );
+};
+
export const AdminEvents = () => {
const { t } = useTranslation("events");
const adminClient = useAdminClient();
const { realm } = useContext(RealmContext);
- const [key, setKey] = useState("");
- const refresh = () => setKey(`${new Date().getTime()}`);
+ const [key, setKey] = useState(0);
+ const refresh = () => setKey(new Date().getTime());
const [authEvent, setAuthEvent] = useState();
const [representationEvent, setRepresentationEvent] = useState<
@@ -65,6 +89,27 @@ export const AdminEvents = () => {
return await adminClient.realms.findAdminEvents({ ...params });
};
+ const LinkResource = (row: AdminEventRepresentation) => (
+ <>
+
+ {(text) => (
+ <>
+ {row.resourceType !== "COMPONENT" && (
+
+ {text}
+
+ )}
+ {row.resourceType === "COMPONENT" && {text}}
+ >
+ )}
+
+ >
+ );
+
return (
<>
{authEvent && (
@@ -120,6 +165,7 @@ export const AdminEvents = () => {
{
name: "resourcePath",
displayKey: "events:resourcePath",
+ cellRenderer: LinkResource,
},
{
name: "resourceType",
@@ -128,6 +174,7 @@ export const AdminEvents = () => {
{
name: "operationType",
displayKey: "events:operationType",
+ transforms: [cellWidth(10)],
},
{
name: "",
diff --git a/src/user/UsersSection.tsx b/src/user/UsersSection.tsx
index 7abc1dacc1..95343ee0b8 100644
--- a/src/user/UsersSection.tsx
+++ b/src/user/UsersSection.tsx
@@ -74,7 +74,7 @@ export const UsersSection = () => {
const UserDetailLink = (user: UserRepresentation) => (
<>
-
+
{user.username}
>
diff --git a/src/user/UsersTabs.tsx b/src/user/UsersTabs.tsx
index bb23e04b61..658f469a92 100644
--- a/src/user/UsersTabs.tsx
+++ b/src/user/UsersTabs.tsx
@@ -66,7 +66,7 @@ export const UsersTabs = () => {
{id && (
{t("details")}}
>