fixing UXD review issue (#529)

* fixing UXD review issue fixing: #509 * added detail expandable sections
2021-04-20 14:28:21 +02:00 · 2021-04-20 14:28:21 +02:00 · 9e5104b668
commit 9e5104b668
parent b86db32ba8
7 changed files with 187 additions and 50 deletions
--- a/src/components/table-toolbar/KeycloakDataTable.tsx
+++ b/src/components/table-toolbar/KeycloakDataTable.tsx
@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useState } from "react";
+import React, { isValidElement, ReactNode, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useErrorHandler } from "react-error-boundary";
 import {
@ -20,21 +20,33 @@ import { asyncStateFetch } from "../../context/auth/AdminClient";
 import { ListEmptyState } from "../list-empty-state/ListEmptyState";
 import { SVGIconProps } from "@patternfly/react-icons/dist/js/createIcon";

-type Row<T> = {
+type TitleCell = { title: JSX.Element };
+type Cell<T> = keyof T | JSX.Element | TitleCell;
+
+type BaseRow<T> = {
  data: T;
+  cells: Cell<T>[];
+};
+
+type Row<T> = BaseRow<T> & {
  selected: boolean;
+  isOpen: boolean;
  disableSelection: boolean;
  disableActions: boolean;
-  cells: (keyof T | JSX.Element)[];
+};
+
+type SubRow<T> = BaseRow<T> & {
+  parent: number;
 };

 type DataTableProps<T> = {
  ariaLabelKey: string;
  columns: Field<T>[];
-  rows: Row<T>[];
+  rows: (Row<T> | SubRow<T>)[];
  actions?: IActions;
  actionResolver?: IActionsResolver;
  onSelect?: (isSelected: boolean, rowIndex: number) => void;
+  onCollapse?: (isOpen: boolean, rowIndex: number) => void;
  canSelectAll: boolean;
 };

@ -45,6 +57,7 @@ function DataTable<T>({
  actionResolver,
  ariaLabelKey,
  onSelect,
+  onCollapse,
  canSelectAll,
  ...props
 }: DataTableProps<T>) {
@ -58,6 +71,11 @@ function DataTable<T>({
          ? (_, isSelected, rowIndex) => onSelect(isSelected, rowIndex)
          : undefined
      }
+      onCollapse={
+        onCollapse
+          ? (_, rowIndex, isOpen) => onCollapse(isOpen, rowIndex)
+          : undefined
+      }
      canSelectAll={canSelectAll}
      cells={columns.map((column) => {
        return { ...column, title: t(column.displayKey || column.name) };
@ -81,6 +99,12 @@ export type Field<T> = {
  cellRenderer?: (row: T) => ReactNode;
 };

+export type DetailField<T> = {
+  name: string;
+  enabled?: (row: T) => boolean;
+  cellRenderer?: (row: T) => ReactNode;
+};
+
 export type Action<T> = IAction & {
  onRowClick?: (row: T) => Promise<boolean> | void;
 };
@ -89,6 +113,7 @@ export type DataListProps<T> = {
  loader: (first?: number, max?: number, search?: string) => Promise<T[]>;
  onSelect?: (value: T[]) => void;
  canSelectAll?: boolean;
+  detailColumns?: DetailField<T>[];
  isRowDisabled?: (value: T) => boolean;
  isPaginated?: boolean;
  ariaLabelKey: string;
@ -119,6 +144,7 @@ export type DataListProps<T> = {
 * @param {boolean} props.isPaginated - if true the the loader will be called with first, max and search and a pager will be added in the header
 * @param {(first?: number, max?: number, search?: string) => Promise<T[]>} props.loader - loader function that will fetch the data to display first, max and search are only applicable when isPaginated = true
 * @param {Field<T>} props.columns - definition of the columns
+ * @param {Field<T>} props.detailColumns - definition of the columns expandable columns
 * @param {Action[]} props.actions - the actions that appear on the row
 * @param {IActionsResolver} props.actionResolver Resolver for the given action
 * @param {ReactNode} props.toolbarItem - Toolbar items that appear on the top of the table {@link ToolbarItem}
@ -130,6 +156,7 @@ export function KeycloakDataTable<T>({
  isPaginated = false,
  onSelect,
  canSelectAll = false,
+  detailColumns,
  isRowDisabled,
  loader,
  columns,
@ -143,9 +170,9 @@ export function KeycloakDataTable<T>({
 }: DataListProps<T>) {
  const { t } = useTranslation();
  const [selected, setSelected] = useState<T[]>([]);
-  const [rows, setRows] = useState<Row<T>[]>();
+  const [rows, setRows] = useState<(Row<T> | SubRow<T>)[]>();
  const [unPaginatedData, setUnPaginatedData] = useState<T[]>();
-  const [filteredData, setFilteredData] = useState<Row<T>[]>();
+  const [filteredData, setFilteredData] = useState<(Row<T> | SubRow<T>)[]>();
  const [loading, setLoading] = useState(false);

  const [max, setMax] = useState(10);
@ -194,7 +221,7 @@ export function KeycloakDataTable<T>({
    );
  }, [key, first, max, search]);

-  const getNodeText = (node: keyof T | JSX.Element): string => {
+  const getNodeText = (node: Cell<T>): string => {
    if (["string", "number"].includes(typeof node)) {
      return node!.toString();
    }
@ -202,27 +229,55 @@ export function KeycloakDataTable<T>({
      return node.map(getNodeText).join("");
    }
    if (typeof node === "object" && node) {
-      return getNodeText(node.props.children);
+      return getNodeText(
+        isValidElement((node as TitleCell).title)
+          ? (node as TitleCell).title.props.children
+          : (node as JSX.Element).props.children
+      );
    }
    return "";
  };

-  const convertToColumns = (data: T[]) => {
-    return data!.map((value) => {
-      const disabledRow = isRowDisabled ? isRowDisabled(value) : false;
-      return {
-        data: value,
-        disableSelection: disabledRow,
-        disableActions: disabledRow,
-        selected: !!selected.find((v) => (v as any).id === (value as any).id),
-        cells: columns.map((col) => {
-          if (col.cellRenderer) {
-            return col.cellRenderer(value);
-          }
-          return _.get(value, col.name);
-        }),
-      };
-    });
+  const convertToColumns = (data: T[]): (Row<T> | SubRow<T>)[] => {
+    return data!
+      .map((value, index) => {
+        const disabledRow = isRowDisabled ? isRowDisabled(value) : false;
+        const row: (Row<T> | SubRow<T>)[] = [
+          {
+            data: value,
+            disableSelection: disabledRow,
+            disableActions: disabledRow,
+            selected: !!selected.find(
+              (v) => _.get(v, "id") === _.get(value, "id")
+            ),
+            isOpen: false,
+            cells: columns.map((col) => {
+              if (col.cellRenderer) {
+                return { title: col.cellRenderer(value) };
+              }
+              return _.get(value, col.name);
+            }),
+          },
+        ];
+        if (
+          detailColumns &&
+          detailColumns[0] &&
+          detailColumns[0].enabled &&
+          detailColumns[0].enabled(value)
+        ) {
+          row.push({
+            parent: index * 2,
+            cells: detailColumns!.map((col) => {
+              if (col.cellRenderer) {
+                return { title: col.cellRenderer(value) };
+              }
+              return _.get(value, col.name);
+            }),
+          } as SubRow<T>);
+        }
+        return row;
+      })
+      .flat();
  };

  const filter = (search: string) => {
@ -247,6 +302,9 @@ export function KeycloakDataTable<T>({
          (filteredData || rows)![rowIndex].data
        );
        if (result) {
+          if (!isPaginated) {
+            setFilteredData(undefined);
+          }
          refresh();
        }
      };
@ -264,12 +322,12 @@ export function KeycloakDataTable<T>({
    if (rowIndex === -1) {
      setRows(
        data!.map((row) => {
-          row.selected = isSelected;
+          (row as Row<T>).selected = isSelected;
          return row;
        })
      );
    } else {
-      data![rowIndex].selected = isSelected;
+      (data![rowIndex] as Row<T>).selected = isSelected;

      setRows([...rows!]);
    }
@ -284,13 +342,19 @@ export function KeycloakDataTable<T>({
    // Selected rows are any rows previously selected from a different page, plus current page selections
    const selectedRows = [
      ...difference,
-      ...data!.filter((row) => row.selected).map((row) => row.data),
+      ...data!.filter((row) => (row as Row<T>).selected).map((row) => row.data),
    ];

    setSelected(selectedRows);
    onSelect!(selectedRows);
  };

+  const onCollapse = (isOpen: boolean, rowIndex: number) => {
+    const data = filteredData || rows;
+    (data![rowIndex] as Row<T>).isOpen = isOpen;
+    setRows([...data!]);
+  };
+
  return (
    <>
      {rows && (
@ -319,6 +383,7 @@ export function KeycloakDataTable<T>({
              {...props}
              canSelectAll={canSelectAll}
              onSelect={onSelect ? _onSelect : undefined}
+              onCollapse={detailColumns ? onCollapse : undefined}
              actions={convertAction()}
              actionResolver={actionResolver}
              rows={filteredData || rows}
--- a/src/components/view-header/ViewHeader.tsx
+++ b/src/components/view-header/ViewHeader.tsx
@ -1,4 +1,4 @@
-import React, { ReactElement, useContext, useState } from "react";
+import React, { ReactElement, ReactNode, useContext, useState } from "react";
 import {
  Text,
  PageSection,
@ -27,7 +27,7 @@ export type ViewHeaderProps = {
  badge?: string;
  badgeId?: string;
  badgeIsRead?: boolean;
-  subKey: string;
+  subKey: string | ReactNode;
  actionsDropdownId?: string;
  subKeyLinkProps?: FormattedLinkProps;
  dropdownItems?: ReactElement[];
@ -133,7 +133,7 @@ export const ViewHeader = ({
        {enabled && (
          <TextContent id="view-header-subkey">
            <Text>
-              {t(subKey)}
+              {React.isValidElement(subKey) ? subKey : t(subKey as string)}
              {subKeyLinkProps && (
                <FormattedLink
                  {...subKeyLinkProps}
--- a/src/events/AdminEvents.tsx
+++ b/src/events/AdminEvents.tsx
@ -160,7 +160,7 @@ export const AdminEvents = () => {
          {
            name: "time",
            displayKey: "events:time",
-            cellRenderer: (row) => moment(row.time).fromNow(),
+            cellRenderer: (row) => moment(row.time).format("LLL"),
          },
          {
            name: "resourcePath",
--- a/src/events/EventsSection.tsx
+++ b/src/events/EventsSection.tsx
@ -1,32 +1,40 @@
 import React, { useContext, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { Trans, useTranslation } from "react-i18next";
+import moment from "moment";
 import {
  Button,
-  Label,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
  PageSection,
  Tab,
  TabTitleText,
  ToolbarItem,
+  Tooltip,
 } from "@patternfly/react-core";
-import moment from "moment";
+import { cellWidth, expandable } from "@patternfly/react-table";
+import { CheckCircleIcon, WarningTriangleIcon } from "@patternfly/react-icons";
 import EventRepresentation from "keycloak-admin/lib/defs/eventRepresentation";

 import { useAdminClient } from "../context/auth/AdminClient";
 import { ViewHeader } from "../components/view-header/ViewHeader";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { RealmContext } from "../context/realm-context/RealmContext";
-import { InfoCircleIcon } from "@patternfly/react-icons";
 import { AdminEvents } from "./AdminEvents";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";

+import "./events-section.css";
+
 export const EventsSection = () => {
  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 loader = async (first?: number, max?: number, search?: string) => {
    const params = {
@ -40,21 +48,72 @@ export const EventsSection = () => {
    return await adminClient.realms.findEvents({ ...params });
  };

-  const StatusRow = (event: EventRepresentation) => {
-    return (
-      <>
-        <Label color="red" icon={<InfoCircleIcon />}>
+  const StatusRow = (event: EventRepresentation) => (
+    <>
+      {!event.error && (
+        <span key={`status-${event.time}-${event.type}`}>
+          <CheckCircleIcon
+            color="green"
+            key={`circle-${event.time}-${event.type}`}
+          />{" "}
          {event.type}
-        </Label>
-      </>
-    );
-  };
+        </span>
+      )}
+      {event.error && (
+        <Tooltip
+          content={event.error}
+          key={`tooltip-${event.time}-${event.type}`}
+        >
+          <span key={`label-${event.time}-${event.type}`}>
+            <WarningTriangleIcon
+              color="orange"
+              key={`triangle-${event.time}-${event.type}`}
+            />{" "}
+            {event.type}
+          </span>
+        </Tooltip>
+      )}
+    </>
+  );
+
+  const UserDetailLink = (event: EventRepresentation) => (
+    <>
+      <Link
+        key={`link-${event.time}-${event.type}`}
+        to={`/${realm}/users/${event.userId}/details`}
+      >
+        {event.userId}
+      </Link>
+    </>
+  );
+
+  const DetailCell = (event: EventRepresentation) => (
+    <>
+      <DescriptionList isHorizontal className="keycloak_eventsection_details">
+        {Object.keys(event.details!).map((k) => (
+          <DescriptionListGroup key={`detail-${event.time}-${event.type}`}>
+            <DescriptionListTerm>{k}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {event.details![k]}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        ))}
+      </DescriptionList>
+    </>
+  );

  return (
    <>
      <ViewHeader
        titleKey="events:title"
-        subKey="events:eventExplain"
+        subKey={
+          <Trans i18nKey="events:eventExplain">
+            If you want to configure user events, Admin events or Event
+            listeners, please enter
+            <Link to={`/${realm}/`}>{t("eventConfig")}</Link>
+            page realm settings to configure.
+          </Trans>
+        }
        divider={false}
      />
      <PageSection variant="light" className="pf-u-p-0">
@ -66,6 +125,13 @@ export const EventsSection = () => {
            <KeycloakDataTable
              key={key}
              loader={loader}
+              detailColumns={[
+                {
+                  name: "details",
+                  enabled: (event) => event.details !== undefined,
+                  cellRenderer: DetailCell,
+                },
+              ]}
              isPaginated
              ariaLabelKey="events:title"
              searchPlaceholderKey="events:searchForEvent"
@ -80,11 +146,13 @@ export const EventsSection = () => {
                {
                  name: "time",
                  displayKey: "events:time",
-                  cellRenderer: (row) => moment(row.time).fromNow(),
+                  cellRenderer: (row) => moment(row.time).format("LLL"),
+                  cellFormatters: [expandable],
                },
                {
                  name: "userId",
                  displayKey: "events:user",
+                  cellRenderer: UserDetailLink,
                },
                {
                  name: "type",
@ -94,6 +162,7 @@ export const EventsSection = () => {
                {
                  name: "ipAddress",
                  displayKey: "events:ipAddress",
+                  transforms: [cellWidth(10)],
                },
                {
                  name: "clientId",
--- a/src/events/events-section.css
+++ b/src/events/events-section.css
@ -0,0 +1,4 @@
+
+.keycloak_eventsection_details {
+  --pf-c-description-list--m-horizontal__term--width: 15ch;
+}
--- a/src/events/messages.json
+++ b/src/events/messages.json
@ -1,7 +1,8 @@
 {
  "events": {
    "title": "Events",
-    "eventExplain": "If you want to configure user events, Admin events or Event listeners, please enter Event configs page realm settings to configure.",
+    "eventExplain": "If you want to configure user events, Admin events or Event listeners, please enter <1>Event configs</1> page realm settings to configure.",
+    "eventConfigs": "Event configs",
    "userEvents": "User events",
    "adminEvents": "Admin events",
    "searchForEvent": "Search user event",
--- a/src/realm-roles/RolesList.tsx
+++ b/src/realm-roles/RolesList.tsx
@ -7,7 +7,6 @@ import { useAdminClient } from "../context/auth/AdminClient";
 import RoleRepresentation from "keycloak-admin/lib/defs/roleRepresentation";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
-import { formattedLinkTableCell } from "../components/external-link/FormattedLink";
 import { useAlerts } from "../components/alert/Alerts";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { emptyFormatter, boolFormatter } from "../util";
@ -108,7 +107,6 @@ export const RolesList = ({
            name: "name",
            displayKey: "roles:roleName",
            cellRenderer: RoleDetailLink,
-            cellFormatters: [formattedLinkTableCell(), emptyFormatter()],
          },
          {
            name: "composite",