add select all to event table (#39444)

fixes: #37532

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2025-05-12 19:41:22 +02:00 committed by GitHub
parent 8e99d04668
commit 375be14fd8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 43 additions and 18 deletions

View File

@ -149,6 +149,15 @@ export const EventsTab = ({ realm }: EventsTabProps) => {
refresh();
};
const removeEvents = async (eventTypes: EventType[] = []) => {
const values = eventTypes.map((type) => type.id);
const enabledEventTypes = events?.enabledEventTypes?.filter(
(e) => !values.includes(e),
);
addEvents(enabledEventTypes);
setEvents({ ...events, enabledEventTypes });
};
return (
<>
<DeleteConfirm />
@ -202,13 +211,8 @@ export const EventsTab = ({ realm }: EventsTabProps) => {
key={tableKey}
addTypes={() => setAddEventType(true)}
eventTypes={events?.enabledEventTypes || []}
onDelete={(value) => {
const enabledEventTypes = events?.enabledEventTypes?.filter(
(e) => e !== value.id,
);
addEvents(enabledEventTypes);
setEvents({ ...events, enabledEventTypes });
}}
onDelete={(value) => removeEvents([value])}
onDeleteAll={removeEvents}
/>
</PageSection>
</Tab>

View File

@ -1,7 +1,11 @@
import {
Action,
KeycloakDataTable,
ListEmptyState,
} from "@keycloak/keycloak-ui-shared";
import { Button, ToolbarItem } from "@patternfly/react-core";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { ListEmptyState } from "@keycloak/keycloak-ui-shared";
import { Action, KeycloakDataTable } from "@keycloak/keycloak-ui-shared";
import { translationFormatter } from "../../utils/translationFormatter";
export type EventType = {
@ -14,6 +18,7 @@ type EventsTypeTableProps = {
addTypes?: () => void;
onSelect?: (value: EventType[]) => void;
onDelete?: (value: EventType) => void;
onDeleteAll?: (value: EventType[]) => void;
};
export function EventsTypeTable({
@ -22,8 +27,10 @@ export function EventsTypeTable({
addTypes,
onSelect,
onDelete,
onDeleteAll,
}: EventsTypeTableProps) {
const { t } = useTranslation();
const [selectedTypes, setSelectedTypes] = useState<EventType[]>([]);
const data = eventTypes.map((type) => ({
id: type,
@ -35,16 +42,30 @@ export function EventsTypeTable({
ariaLabelKey={ariaLabelKey}
searchPlaceholderKey="searchEventType"
loader={data}
onSelect={onSelect ? onSelect : undefined}
canSelectAll={!!onSelect}
onSelect={onSelect ? onSelect : setSelectedTypes}
canSelectAll
toolbarItem={
addTypes && (
<ToolbarItem>
<Button id="addTypes" onClick={addTypes} data-testid="addTypes">
{t("addSavedTypes")}
</Button>
</ToolbarItem>
)
<>
{addTypes && (
<ToolbarItem>
<Button id="addTypes" onClick={addTypes} data-testid="addTypes">
{t("addSavedTypes")}
</Button>
</ToolbarItem>
)}
{onDeleteAll && (
<ToolbarItem>
<Button
onClick={() => onDeleteAll(selectedTypes)}
data-testid="removeAll"
variant="secondary"
isDisabled={selectedTypes.length === 0}
>
{t("remove")}
</Button>
</ToolbarItem>
)}
</>
}
actions={
!onDelete