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")}} >