From d7388c479bea2565f11e46cfe119c3e3da333aaf Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Thu, 9 Mar 2023 14:50:11 +0100
Subject: [PATCH] changed id of dropdown (#17512)

fixes: https://github.com/keycloak/keycloak-ui/issues/4483
---
 .../table-toolbar/KeycloakDataTable.tsx       |  1 +
 .../table-toolbar/PaginatingTableToolbar.tsx  | 43 +++++++++++--------
 .../event-config/AddEventTypesDialog.tsx      |  1 +
 .../event-config/EventsTypeTable.tsx          |  4 +-
 4 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/js/apps/admin-ui/src/components/table-toolbar/KeycloakDataTable.tsx b/js/apps/admin-ui/src/components/table-toolbar/KeycloakDataTable.tsx
index 1ee368e8d4..1e118f38af 100644
--- a/js/apps/admin-ui/src/components/table-toolbar/KeycloakDataTable.tsx
+++ b/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}
diff --git a/js/apps/admin-ui/src/components/table-toolbar/PaginatingTableToolbar.tsx b/js/apps/admin-ui/src/components/table-toolbar/PaginatingTableToolbar.tsx
index 7467604e05..d128e4ea88 100644
--- a/js/apps/admin-ui/src/components/table-toolbar/PaginatingTableToolbar.tsx
+++ b/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,
-  toolbarItem,
-  subToolbar,
-  children,
-  inputGroupName,
-  inputGroupPlaceholder,
-  inputGroupOnEnter,
-}: PropsWithChildren<TableToolbarProps>) => {
+}: KeycloakPaginationProps) => {
   const page = Math.round(first / max);
-  const KeycloakPagination = ({
-    variant = "top",
-  }: {
-    variant?: "top" | "bottom";
-  }) => (
+  return (
     <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
       }
diff --git a/js/apps/admin-ui/src/realm-settings/event-config/AddEventTypesDialog.tsx b/js/apps/admin-ui/src/realm-settings/event-config/AddEventTypesDialog.tsx
index 47973d188d..0fa89dcb53 100644
--- a/js/apps/admin-ui/src/realm-settings/event-config/AddEventTypesDialog.tsx
+++ b/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)
diff --git a/js/apps/admin-ui/src/realm-settings/event-config/EventsTypeTable.tsx b/js/apps/admin-ui/src/realm-settings/event-config/EventsTypeTable.tsx
index 7bb0090b4e..5244b67c93 100644
--- a/js/apps/admin-ui/src/realm-settings/event-config/EventsTypeTable.tsx
+++ b/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}