Fix labels for user vs admin clear events (#1079)
* fix labels for user vs admin clear events * fix lint issue unrelated to fixed issue
This commit is contained in:
mfrances17
GitHub
parent
e062603ff2
commit
299993d30b
3 changed files with 207 additions and 206 deletions
|
|
@ -184,211 +184,209 @@ export const EventsSection = () => {
|
|||
|
||||
const userEventSearchFormDisplay = () => {
|
||||
return (
|
||||
<>
|
||||
<Flex
|
||||
direction={{ default: "column" }}
|
||||
spaceItems={{ default: "spaceItemsNone" }}
|
||||
>
|
||||
<FlexItem>
|
||||
<Dropdown
|
||||
id="user-events-search-select"
|
||||
data-testid="UserEventsSearchSelector"
|
||||
className="pf-u-ml-md"
|
||||
toggle={
|
||||
<DropdownToggle
|
||||
data-testid="userEventsSearchSelectorToggle"
|
||||
onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
|
||||
className="keycloak__events_search_selector_dropdown__toggle"
|
||||
>
|
||||
{t("searchForUserEvent")}
|
||||
</DropdownToggle>
|
||||
}
|
||||
isOpen={searchDropdownOpen}
|
||||
>
|
||||
<Form
|
||||
isHorizontal
|
||||
className="keycloak__user_events_search__form"
|
||||
data-testid="searchForm"
|
||||
<Flex
|
||||
direction={{ default: "column" }}
|
||||
spaceItems={{ default: "spaceItemsNone" }}
|
||||
>
|
||||
<FlexItem>
|
||||
<Dropdown
|
||||
id="user-events-search-select"
|
||||
data-testid="UserEventsSearchSelector"
|
||||
className="pf-u-ml-md"
|
||||
toggle={
|
||||
<DropdownToggle
|
||||
data-testid="userEventsSearchSelectorToggle"
|
||||
onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
|
||||
className="keycloak__events_search_selector_dropdown__toggle"
|
||||
>
|
||||
<FormGroup
|
||||
label={t("userId")}
|
||||
fieldId="kc-userId"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-userId"
|
||||
name="user"
|
||||
data-testid="userId-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("eventType")}
|
||||
fieldId="kc-eventType"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<Controller
|
||||
name="type"
|
||||
control={control}
|
||||
render={({
|
||||
onChange,
|
||||
value,
|
||||
}: {
|
||||
onChange: (newValue: EventType[]) => void;
|
||||
value: EventType[];
|
||||
}) => (
|
||||
<Select
|
||||
className="keycloak__events_search__event_type_select"
|
||||
name="eventType"
|
||||
data-testid="event-type-searchField"
|
||||
chipGroupProps={{
|
||||
numChips: 1,
|
||||
expandedText: "Hide",
|
||||
collapsedText: "Show ${remaining}",
|
||||
}}
|
||||
variant={SelectVariant.typeaheadMulti}
|
||||
typeAheadAriaLabel="Select"
|
||||
onToggle={(isOpen) => setSelectOpen(isOpen)}
|
||||
selections={value}
|
||||
onSelect={(_, selectedValue) => {
|
||||
const option = selectedValue.toString() as EventType;
|
||||
const changedValue = value.includes(option)
|
||||
? value.filter((item) => item !== option)
|
||||
: [...value, option];
|
||||
|
||||
onChange(changedValue);
|
||||
}}
|
||||
onClear={(event) => {
|
||||
event.stopPropagation();
|
||||
onChange([]);
|
||||
}}
|
||||
isOpen={selectOpen}
|
||||
aria-labelledby={"eventType"}
|
||||
chipGroupComponent={
|
||||
<ChipGroup>
|
||||
{value.map((chip) => (
|
||||
<Chip
|
||||
key={chip}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onChange(value.filter((val) => val !== chip));
|
||||
}}
|
||||
>
|
||||
{chip}
|
||||
</Chip>
|
||||
))}
|
||||
</ChipGroup>
|
||||
}
|
||||
>
|
||||
{events?.enabledEventTypes?.map((option) => (
|
||||
<SelectOption key={option} value={option} />
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("client")}
|
||||
fieldId="kc-client"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-client"
|
||||
name="client"
|
||||
data-testid="client-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("dateFrom")}
|
||||
fieldId="kc-dateFrom"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-dateFrom"
|
||||
name="dateFrom"
|
||||
className="pf-c-form-control pf-m-icon pf-m-calendar"
|
||||
placeholder="yyyy-MM-dd"
|
||||
data-testid="dateFrom-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("dateTo")}
|
||||
fieldId="kc-dateTo"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-dateTo"
|
||||
name="dateTo"
|
||||
className="pf-c-form-control pf-m-icon pf-m-calendar"
|
||||
placeholder="yyyy-MM-dd"
|
||||
data-testid="dateTo-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<ActionGroup>
|
||||
<Button
|
||||
className="keycloak__user_events_search__form_btn"
|
||||
variant={"primary"}
|
||||
onClick={submitSearch}
|
||||
data-testid="search-events-btn"
|
||||
isDisabled={!isDirty}
|
||||
>
|
||||
{t("searchUserEventsBtn")}
|
||||
</Button>
|
||||
</ActionGroup>
|
||||
</Form>
|
||||
</Dropdown>
|
||||
<Button
|
||||
className="pf-u-ml-md"
|
||||
onClick={refresh}
|
||||
data-testid="refresh-btn"
|
||||
{t("searchForUserEvent")}
|
||||
</DropdownToggle>
|
||||
}
|
||||
isOpen={searchDropdownOpen}
|
||||
>
|
||||
<Form
|
||||
isHorizontal
|
||||
className="keycloak__user_events_search__form"
|
||||
data-testid="searchForm"
|
||||
>
|
||||
{t("refresh")}
|
||||
</Button>
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
{Object.entries(activeFilters).length > 0 && (
|
||||
<div className="keycloak__searchChips pf-u-ml-md">
|
||||
{Object.entries(activeFilters).map((filter) => {
|
||||
const [key, value] = filter as [
|
||||
keyof UserEventSearchForm,
|
||||
string | EventType[]
|
||||
];
|
||||
<FormGroup
|
||||
label={t("userId")}
|
||||
fieldId="kc-userId"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-userId"
|
||||
name="user"
|
||||
data-testid="userId-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("eventType")}
|
||||
fieldId="kc-eventType"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<Controller
|
||||
name="type"
|
||||
control={control}
|
||||
render={({
|
||||
onChange,
|
||||
value,
|
||||
}: {
|
||||
onChange: (newValue: EventType[]) => void;
|
||||
value: EventType[];
|
||||
}) => (
|
||||
<Select
|
||||
className="keycloak__events_search__event_type_select"
|
||||
name="eventType"
|
||||
data-testid="event-type-searchField"
|
||||
chipGroupProps={{
|
||||
numChips: 1,
|
||||
expandedText: "Hide",
|
||||
collapsedText: "Show ${remaining}",
|
||||
}}
|
||||
variant={SelectVariant.typeaheadMulti}
|
||||
typeAheadAriaLabel="Select"
|
||||
onToggle={(isOpen) => setSelectOpen(isOpen)}
|
||||
selections={value}
|
||||
onSelect={(_, selectedValue) => {
|
||||
const option = selectedValue.toString() as EventType;
|
||||
const changedValue = value.includes(option)
|
||||
? value.filter((item) => item !== option)
|
||||
: [...value, option];
|
||||
|
||||
return (
|
||||
<ChipGroup
|
||||
className="pf-u-mt-md pf-u-mr-md"
|
||||
key={key}
|
||||
categoryName={filterLabels[key]}
|
||||
isClosable
|
||||
onClick={() => removeFilter(key)}
|
||||
onChange(changedValue);
|
||||
}}
|
||||
onClear={(event) => {
|
||||
event.stopPropagation();
|
||||
onChange([]);
|
||||
}}
|
||||
isOpen={selectOpen}
|
||||
aria-labelledby={"eventType"}
|
||||
chipGroupComponent={
|
||||
<ChipGroup>
|
||||
{value.map((chip) => (
|
||||
<Chip
|
||||
key={chip}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onChange(value.filter((val) => val !== chip));
|
||||
}}
|
||||
>
|
||||
{chip}
|
||||
</Chip>
|
||||
))}
|
||||
</ChipGroup>
|
||||
}
|
||||
>
|
||||
{typeof value === "string" ? (
|
||||
<Chip isReadOnly>{value}</Chip>
|
||||
) : (
|
||||
value.map((entry) => (
|
||||
<Chip
|
||||
key={entry}
|
||||
onClick={() => removeFilterValue(key, entry)}
|
||||
>
|
||||
{entry}
|
||||
</Chip>
|
||||
))
|
||||
)}
|
||||
</ChipGroup>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</FlexItem>
|
||||
</Flex>
|
||||
</>
|
||||
{events?.enabledEventTypes?.map((option) => (
|
||||
<SelectOption key={option} value={option} />
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("client")}
|
||||
fieldId="kc-client"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-client"
|
||||
name="client"
|
||||
data-testid="client-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("dateFrom")}
|
||||
fieldId="kc-dateFrom"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-dateFrom"
|
||||
name="dateFrom"
|
||||
className="pf-c-form-control pf-m-icon pf-m-calendar"
|
||||
placeholder="yyyy-MM-dd"
|
||||
data-testid="dateFrom-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("dateTo")}
|
||||
fieldId="kc-dateTo"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-dateTo"
|
||||
name="dateTo"
|
||||
className="pf-c-form-control pf-m-icon pf-m-calendar"
|
||||
placeholder="yyyy-MM-dd"
|
||||
data-testid="dateTo-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<ActionGroup>
|
||||
<Button
|
||||
className="keycloak__user_events_search__form_btn"
|
||||
variant={"primary"}
|
||||
onClick={submitSearch}
|
||||
data-testid="search-events-btn"
|
||||
isDisabled={!isDirty}
|
||||
>
|
||||
{t("searchUserEventsBtn")}
|
||||
</Button>
|
||||
</ActionGroup>
|
||||
</Form>
|
||||
</Dropdown>
|
||||
<Button
|
||||
className="pf-u-ml-md"
|
||||
onClick={refresh}
|
||||
data-testid="refresh-btn"
|
||||
>
|
||||
{t("refresh")}
|
||||
</Button>
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
{Object.entries(activeFilters).length > 0 && (
|
||||
<div className="keycloak__searchChips pf-u-ml-md">
|
||||
{Object.entries(activeFilters).map((filter) => {
|
||||
const [key, value] = filter as [
|
||||
keyof UserEventSearchForm,
|
||||
string | EventType[]
|
||||
];
|
||||
|
||||
return (
|
||||
<ChipGroup
|
||||
className="pf-u-mt-md pf-u-mr-md"
|
||||
key={key}
|
||||
categoryName={filterLabels[key]}
|
||||
isClosable
|
||||
onClick={() => removeFilter(key)}
|
||||
>
|
||||
{typeof value === "string" ? (
|
||||
<Chip isReadOnly>{value}</Chip>
|
||||
) : (
|
||||
value.map((entry) => (
|
||||
<Chip
|
||||
key={entry}
|
||||
onClick={() => removeFilterValue(key, entry)}
|
||||
>
|
||||
{entry}
|
||||
</Chip>
|
||||
))
|
||||
)}
|
||||
</ChipGroup>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</FlexItem>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -161,12 +161,14 @@ export const EventConfigForm = ({
|
|||
</ActionGroup>
|
||||
<Divider />
|
||||
<FormGroup
|
||||
label={t("clearEvents")}
|
||||
label={type === "user" ? t("clearUserEvents") : t("clearAdminEvents")}
|
||||
fieldId={`clear-${type}-events`}
|
||||
labelIcon={
|
||||
<HelpItem
|
||||
helpText={`realm-settings-help:${type}-clearEvents`}
|
||||
forLabel={t("clearEvents")}
|
||||
forLabel={
|
||||
type === "user" ? t("clearUserEvents") : t("clearAdminEvents")
|
||||
}
|
||||
forID={`clear-${type}-events`}
|
||||
/>
|
||||
}
|
||||
|
|
@ -177,7 +179,7 @@ export const EventConfigForm = ({
|
|||
data-testid={`clear-${type}-events`}
|
||||
onClick={() => clear()}
|
||||
>
|
||||
{t("clearEvents")}
|
||||
{type === "user" ? t("clearUserEvents") : t("clearAdminEvents")}
|
||||
</Button>
|
||||
</FormGroup>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -30,11 +30,12 @@ export default {
|
|||
events: "Events",
|
||||
userEventsConfig: "User events configuration",
|
||||
userEventsSettings: "User events settings",
|
||||
adminEventsConfig: "Admin events config",
|
||||
adminEventsConfig: "Admin events configuration",
|
||||
adminEventsSettings: "Admin events settings",
|
||||
saveEvents: "Save events",
|
||||
expiration: "Expiration",
|
||||
clearEvents: "Clear user events",
|
||||
clearUserEvents: "Clear user events",
|
||||
clearAdminEvents: "Clear admin events",
|
||||
includeRepresentation: "Include representation",
|
||||
email: "Email",
|
||||
template: "Template",
|
||||
|
|
|
|||
Loading…
Reference in a new issue