libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases Packages Activity Actions

fixed tabbing issues in dropdown forms (#26827)

Browse source 
Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>
Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>
This commit is contained in:
agagancarczyk 2024-02-06 14:21:02 +00:00 committed by GitHub
parent c4b1fd092a
commit f0e5172b11
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 41 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
js/apps/admin-ui/cypress/support/pages/admin-ui/manage/events/tabs/AdminEventsTab.ts
View file

@ -30,7 +30,7 @@ const emptyStatePage = new EmptyStatePage();
const modalUtils = new ModalUtils();
export default class AdminEventsTab extends PageObject {
#searchAdminEventDrpDwnBtn = "adminEventsSearchSelectorToggle";
#searchAdminEventDrpDwnBtn = "dropdown-panel-btn";
#searchEventsBtn = "search-events-btn";
#operationTypesInputFld = ".pf-c-form-control.pf-c-select__toggle-typeahead";
#authAttrDataRow = 'tbody > tr > [data-label="Attribute"]';

2
js/apps/admin-ui/cypress/support/pages/admin-ui/manage/events/tabs/UserEventsTab.ts
View file

@ -22,7 +22,7 @@ export class UserEventSearchData {
const emptyStatePage = new EmptyStatePage();
export default class UserEventsTab extends PageObject {
#searchUserEventDrpDwnToggle = "userEventsSearchSelectorToggle";
#searchUserEventDrpDwnToggle = "dropdown-panel-btn";
#searchUserIdInput = "#kc-userId";
#searchEventTypeSelectToggle =
".pf-c-select.keycloak__events_search__type_select";

30
js/apps/admin-ui/src/components/dropdown-panel/DropdownPanel.tsx
View file

@ -1,34 +1,21 @@
import { useEffect, useRef } from "react";
import { Button, Icon } from "@patternfly/react-core";
import { Icon } from "@patternfly/react-core";
import { CaretDownIcon } from "@patternfly/react-icons";
import "./dropdown-panel.css";
type DropdownPanelProps = {
actionButtonText: string;
actionButtonVariant:
| "primary"
| "secondary"
| "tertiary"
| "danger"
| "link"
| "plain"
| "control";
buttonText: string;
children: React.ReactNode;
setSearchDropdownOpen: (open: boolean) => void;
searchDropdownOpen: boolean;
onSubmitAction: () => void;
width: string;
};
const DropdownPanel: React.FC<DropdownPanelProps> = ({
actionButtonText,
actionButtonVariant,
buttonText,
children,
setSearchDropdownOpen,
searchDropdownOpen,
children,
onSubmitAction,
width,
}) => {
const dropdownRef = useRef<HTMLDivElement>(null);
@ -60,12 +47,13 @@ const DropdownPanel: React.FC<DropdownPanelProps> = ({
}, [setSearchDropdownOpen]);
return (
<div ref={dropdownRef}>
<span ref={dropdownRef}>
<button
className="kc-dropdown-panel"
onClick={() => setSearchDropdownOpen(!searchDropdownOpen)}
aria-label={buttonText}
style={{ width }}
data-testid="dropdown-panel-btn"
>
{buttonText}
<Icon className="kc-dropdown-panel-icon">
@ -75,15 +63,7 @@ const DropdownPanel: React.FC<DropdownPanelProps> = ({
{searchDropdownOpen && (
<div className="kc-dropdown-panel-content">{children}</div>
)}
<Button
variant={actionButtonVariant}
className="pf-u-ml-md"
onClick={onSubmitAction}
data-testid="dropdownPanelBtn"
>
{actionButtonText}
</Button>
</div>
</span>
);
};

1
js/apps/admin-ui/src/components/dropdown-panel/dropdown-panel.css
View file

@ -9,6 +9,7 @@
border-style: solid;
text-align: left;
cursor: pointer;
height: 2.25rem;
}
.kc-dropdown-panel:hover {

24
js/apps/admin-ui/src/components/users/UserDataTableToolbarItems.tsx
View file

@ -5,7 +5,6 @@ import {
ButtonVariant,
Dropdown,
DropdownItem,
DropdownToggle,
InputGroup,
KebabToggle,
SearchInput,
@ -19,6 +18,7 @@ import { useAccess } from "../../context/access/Access";
import { SearchDropdown, SearchType } from "../../user/details/SearchFilter";
import { UserAttribute } from "./UserDataTable";
import { UserDataTableAttributeSearchForm } from "./UserDataTableAttributeSearchForm";
import DropdownPanel from "../dropdown-panel/DropdownPanel";
type UserDataTableToolbarItemsProps = {
realm: RealmRepresentation;
@ -119,21 +119,11 @@ export function UserDataTableToolbarItems({
const attributeSearchInput = () => {
return (
<>
<Dropdown
id="user-attribute-search-select"
data-testid="UserAttributeSearchSelector"
toggle={
<DropdownToggle
data-testid="userAttributeSearchSelectorToggle"
onToggle={(isOpen) => {
setSearchDropdownOpen(isOpen);
}}
className="keycloak__user_attribute_search_selector_dropdown__toggle"
>
{t("selectAttributes")}
</DropdownToggle>
}
isOpen={searchDropdownOpen}
<DropdownPanel
buttonText={t("selectAttributes")}
setSearchDropdownOpen={setSearchDropdownOpen}
searchDropdownOpen={searchDropdownOpen}
width="15vw"
>
<UserDataTableAttributeSearchForm
activeFilters={activeFilters}
@ -142,7 +132,7 @@ export function UserDataTableToolbarItems({
createAttributeSearchChips={createAttributeSearchChips}
searchUserWithAttributes={searchUserWithAttributes}
/>
</Dropdown>
</DropdownPanel>
<Button
icon={<ArrowRightIcon />}
variant="control"

24
js/apps/admin-ui/src/events/AdminEvents.tsx
View file

@ -6,8 +6,6 @@ import {
Chip,
ChipGroup,
DatePicker,
Dropdown,
DropdownToggle,
Flex,
FlexItem,
Form,
@ -37,6 +35,7 @@ import {
Action,
KeycloakDataTable,
} from "../components/table-toolbar/KeycloakDataTable";
import DropdownPanel from "../components/dropdown-panel/DropdownPanel";
import { useRealm } from "../context/realm-context/RealmContext";
import { useServerInfo } from "../context/server-info/ServerInfoProvider";
import { prettyPrintJSON } from "../util";
@ -199,20 +198,11 @@ export const AdminEvents = () => {
spaceItems={{ default: "spaceItemsNone" }}
>
<FlexItem>
<Dropdown
id="admin-events-search-select"
data-testid="AdminEventsSearchSelector"
className="pf-u-ml-md"
toggle={
<DropdownToggle
data-testid="adminEventsSearchSelectorToggle"
onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
className="keycloak__events_search_selector_dropdown__toggle"
>
{t("searchForAdminEvent")}
</DropdownToggle>
}
isOpen={searchDropdownOpen}
<DropdownPanel
buttonText={t("searchForAdminEvent")}
setSearchDropdownOpen={setSearchDropdownOpen}
searchDropdownOpen={searchDropdownOpen}
width="15vw"
>
<Form
isHorizontal
@ -450,7 +440,7 @@ export const AdminEvents = () => {
</Button>
</ActionGroup>
</Form>
</Dropdown>
</DropdownPanel>
<Button
className="pf-u-ml-md"
onClick={refresh}

24
js/apps/admin-ui/src/events/EventsSection.tsx
View file

@ -11,8 +11,6 @@ import {
DescriptionListDescription,
DescriptionListGroup,
DescriptionListTerm,
Dropdown,
DropdownToggle,
Flex,
FlexItem,
Form,
@ -42,6 +40,7 @@ import {
} from "../components/routable-tabs/RoutableTabs";
import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
import { ViewHeader } from "../components/view-header/ViewHeader";
import DropdownPanel from "../components/dropdown-panel/DropdownPanel";
import { useRealm } from "../context/realm-context/RealmContext";
import helpUrls from "../help-urls";
import { toRealmSettings } from "../realm-settings/routes/RealmSettings";
@ -232,20 +231,11 @@ export default function EventsSection() {
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}
<DropdownPanel
buttonText={t("searchForUserEvent")}
setSearchDropdownOpen={setSearchDropdownOpen}
searchDropdownOpen={searchDropdownOpen}
width="15vw"
>
<Form
data-testid="searchForm"
@ -403,7 +393,7 @@ export default function EventsSection() {
</Button>
</ActionGroup>
</Form>
</Dropdown>
</DropdownPanel>
<Button
className="pf-u-ml-md"
onClick={refresh}

9
js/apps/admin-ui/src/events/events.css
View file

@ -2,15 +2,10 @@
--pf-c-description-list--m-horizontal__term--width: 15ch;
}
.keycloak__events_search_selector_dropdown__toggle {
--pf-c-dropdown__toggle--MinWidth: 21rem;
position: relative;
z-index: 1;
}
.keycloak__events_search__form {
--pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 24rem;
margin: 0 var(--pf-global--spacer--lg) var(--pf-global--spacer--lg) var(--pf-global--spacer--lg);
margin: 0 var(--pf-global--spacer--lg) var(--pf-global--spacer--lg)
var(--pf-global--spacer--lg);
--pf-c-form__group--m-action--MarginTop: 0rem;
--pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 5rem;
}

13
js/apps/admin-ui/src/realm-settings/localization/EffectiveMessageBundles.tsx
View file

@ -199,13 +199,10 @@ export const EffectiveMessageBundles = ({
</FlexItem>
<FlexItem>
<DropdownPanel
actionButtonText={t("refresh")}
actionButtonVariant="primary"
buttonText={t("searchForEffectiveMessageBundles")}
setSearchDropdownOpen={setSearchDropdownOpen}
searchDropdownOpen={searchDropdownOpen}
onSubmitAction={submitSearch}
width="20vw"
width="15vw"
>
<Form
isHorizontal
@ -474,6 +471,14 @@ export const EffectiveMessageBundles = ({
</ActionGroup>
</Form>
</DropdownPanel>
<Button
variant="primary"
className="pf-u-ml-md"
onClick={() => submitSearch()}
data-testid="refresh-effective-message-bundles-btn"
>
{t("refresh")}
</Button>
</FlexItem>
<FlexItem>
{Object.entries(activeFilters).length > 0 && (