changed id of dropdown (#17512)

fixes: https://github.com/keycloak/keycloak-ui/issues/4483

js/apps/admin-ui/src/components/table-toolbar/KeycloakDataTable.tsx

@@ -407,6 +407,7 @@ export function KeycloakDataTable<T>({
     <>
       {(loading || !noData || searching) && (
         <PaginatingTableToolbar
+          id={ariaLabelKey}
           count={rowLength}
           first={first}
           max={max}

js/apps/admin-ui/src/components/table-toolbar/PaginatingTableToolbar.tsx

@@ -7,13 +7,18 @@ import { PropsWithChildren, ReactNode } from "react";
 
 import { TableToolbar } from "./TableToolbar";
 
-type TableToolbarProps = {
+type KeycloakPaginationProps = {
+  id?: string;
   count: number;
   first: number;
   max: number;
   onNextClick: (page: number) => void;
   onPreviousClick: (page: number) => void;
   onPerPageSelect: (max: number, first: number) => void;
+  variant?: "top" | "bottom";
+};
+
+type TableToolbarProps = KeycloakPaginationProps & {
   searchTypeComponent?: ReactNode;
   toolbarItem?: ReactNode;
   subToolbar?: ReactNode;
@@ -22,28 +27,20 @@ type TableToolbarProps = {
   inputGroupOnEnter?: (value: string) => void;
 };
 
-export const PaginatingTableToolbar = ({
+const KeycloakPagination = ({
+  id,
+  variant = "top",
   count,
   first,
   max,
   onNextClick,
   onPreviousClick,
   onPerPageSelect,
-  searchTypeComponent,
+}: KeycloakPaginationProps) => {
-  toolbarItem,
-  subToolbar,
-  children,
-  inputGroupName,
-  inputGroupPlaceholder,
-  inputGroupOnEnter,
-}: PropsWithChildren<TableToolbarProps>) => {
   const page = Math.round(first / max);
-  const KeycloakPagination = ({
+  return (
-    variant = "top",
-  }: {
-    variant?: "top" | "bottom";
-  }) => (
     <Pagination
+      widgetId={id}
       isCompact
       toggleTemplate={({ firstIndex, lastIndex }: ToggleTemplateProps) => (
         <b>
@@ -59,7 +56,19 @@ export const PaginatingTableToolbar = ({
       variant={variant}
     />
   );
+};
 
+export const PaginatingTableToolbar = ({
+  count,
+  searchTypeComponent,
+  toolbarItem,
+  subToolbar,
+  children,
+  inputGroupName,
+  inputGroupPlaceholder,
+  inputGroupOnEnter,
+  ...rest
+}: PropsWithChildren<TableToolbarProps>) => {
   return (
     <TableToolbar
       searchTypeComponent={searchTypeComponent}
@@ -67,7 +76,7 @@ export const PaginatingTableToolbar = ({
         <>
           {toolbarItem}
           <ToolbarItem variant="pagination">
-            <KeycloakPagination />
+            <KeycloakPagination count={count} {...rest} />
           </ToolbarItem>
         </>
       }
@@ -75,7 +84,7 @@ export const PaginatingTableToolbar = ({
       toolbarItemFooter={
         count !== 0 ? (
           <ToolbarItem>
-            <KeycloakPagination variant="bottom" />
+            <KeycloakPagination count={count} variant="bottom" {...rest} />
           </ToolbarItem>
         ) : null
       }

js/apps/admin-ui/src/realm-settings/event-config/AddEventTypesDialog.tsx

@@ -46,6 +46,7 @@ export const AddEventTypesDialog = ({
       ]}
     >
       <EventsTypeTable
+        ariaLabelKey="addTypes"
         onSelect={(selected) => setSelectedTypes(selected)}
         eventTypes={enums!["eventType"].filter(
           (type) => !configured.includes(type)

js/apps/admin-ui/src/realm-settings/event-config/EventsTypeTable.tsx

@@ -9,6 +9,7 @@ export type EventType = {
 };
 
 type EventsTypeTableProps = {
+  ariaLabelKey?: string;
   eventTypes: string[];
   addTypes?: () => void;
   onSelect?: (value: EventType[]) => void;
@@ -16,6 +17,7 @@ type EventsTypeTableProps = {
 };
 
 export function EventsTypeTable({
+  ariaLabelKey = "userEventsRegistered",
   eventTypes,
   addTypes,
   onSelect,
@@ -29,7 +31,7 @@ export function EventsTypeTable({
   }));
   return (
     <KeycloakDataTable
-      ariaLabelKey="userEventsRegistered"
+      ariaLabelKey={ariaLabelKey}
       searchPlaceholderKey="realm-settings:searchEventType"
       loader={data}
       onSelect={onSelect ? onSelect : undefined}