Add thTooltipText prop to DraggableTable component (#4444)

This commit adds a new prop called thTooltipText to the DraggableTable component, which allows users to add a tooltip next to the column name in the th of the table.

apps/admin-ui/public/resources/en/authentication-help.json

@@ -7,6 +7,7 @@
   "addExecution": "Execution can have a wide range of actions, from sending a reset email to validating an OTP",
   "addSubFlow": "Sub-Flows can be either generic or form. The form type is used to construct a sub-flow that generates a single flow for the user. Sub-flows are a special type of execution that evaluate as successful depending on how the executions they contain evaluate.",
   "alias": "Name of the configuration",
+  "authDefaultActionTooltip": "If enabled, any new user will have this required action assigned to it.",
   "otpType": "totp is Time-Based One Time Password. 'hotp' is a counter base one time password in which the server keeps a counter to hash against.",
   "webAuthnPolicyRpEntityName": "Human-readable server name as WebAuthn Relying Party",
   "otpHashAlgorithm": "What hashing algorithm should be used to generate the OTP.",
@@ -47,4 +48,4 @@
   "cibaExpiresIn": "The expiration time of the \"auth_req_id\" in seconds since the authentication request was received.",
   "cibaInterval": "The minimum amount of time in seconds that the CD (Consumption Device) must wait between polling requests to the token endpoint. If set to 0, the CD must use 5 as the default value according to the CIBA specification.",
   "cibaAuthRequestedUserHint": "The way of identifying the end-user for whom authentication is being requested. Currently only \"login_hint\" is supported."
-}
+}

apps/admin-ui/src/authentication/RequiredActions.tsx

@@ -152,6 +152,7 @@ export const RequiredActions = () => {
         {
           name: "default",
           displayKey: "authentication:setAsDefaultAction",
+          thTooltipText: "authentication-help:authDefaultActionTooltip",
           cellRenderer: (row) => (
             <Switch
               id={`default-${toKey(row.name)}`}

apps/admin-ui/src/authentication/components/DraggableTable.tsx

@@ -18,12 +18,14 @@ import {
   Thead,
   Tr,
 } from "@patternfly/react-table";
+import { ThInfoType } from "@patternfly/react-table/components/Table/base/types";
 import styles from "@patternfly/react-styles/css/components/DataList/data-list";
 
 export type Field<T> = {
   name: string;
   displayKey?: string;
   cellRenderer?: (row: T) => ReactNode;
+  thTooltipText?: string;
 };
 
 export type Action<T> = IAction & { isActionable?: (item: T) => boolean };
@@ -179,6 +181,14 @@ export function DraggableTable<T>({
     });
   };
 
+  const thInfo = (column: Field<T>): ThInfoType | undefined => {
+    if (!column.thTooltipText) return undefined;
+    return {
+      popover: <div>{t(column.thTooltipText)}</div>,
+      ariaLabel: t(column.thTooltipText),
+    };
+  };
+
   return (
     <TableComposable
       aria-label="Draggable table"
@@ -189,7 +199,9 @@ export function DraggableTable<T>({
         <Tr>
           <Th />
           {columns.map((column) => (
-            <Th key={column.name}>{t(column.displayKey || column.name)}</Th>
+            <Th key={column.name} info={thInfo(column)}>
+              {t(column.displayKey || column.name)}
+            </Th>
           ))}
         </Tr>
       </Thead>