add onOpenChange to all dropdown and selects (#31230)

* add onOpenChange to all dropdown and selects

fixes: #31166
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

* fixed test

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

---------

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-07-23 11:34:20 +02:00 committed by GitHub
parent 5db3772d45
commit b5597c6293
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
34 changed files with 38 additions and 2 deletions

View file

@ -192,9 +192,11 @@ describe("Client Scopes test", () => {
.checkDropdownItemIsDisabled("Delete")
.clickItemCheckbox(itemName)
.checkInSearchBarChangeTypeToButtonIsDisabled(false)
.clickSearchBarActionButton()
.checkDropdownItemIsDisabled("Delete", false)
.clickItemCheckbox(itemName)
.checkInSearchBarChangeTypeToButtonIsDisabled()
.clickSearchBarActionButton()
.checkDropdownItemIsDisabled("Delete");
});

View file

@ -49,6 +49,7 @@ export const AddFlowDropdown = ({
position: "right",
}}
isOpen={open}
onOpenChange={(isOpen) => setOpen(isOpen)}
toggle={(ref) => (
<MenuToggle
ref={ref}

View file

@ -38,6 +38,7 @@ export const ChangeTypeDropdown = ({
return (
<Select
aria-label="change-type-to"
onOpenChange={(isOpen) => setOpen(isOpen)}
isOpen={open}
toggle={(ref) => (
<MenuToggle

View file

@ -257,6 +257,7 @@ export default function ClientScopesSection() {
<ToolbarItem>
<Dropdown
shouldFocusToggleOnSelect
onOpenChange={(isOpen) => setKebabOpen(isOpen)}
toggle={(ref) => (
<MenuToggle
data-testid="kebab"

View file

@ -114,6 +114,7 @@ export const MapperList = ({
toolbarItem={
<Dropdown
onSelect={() => setMapperAction(false)}
onOpenChange={(isOpen) => setMapperAction(isOpen)}
toggle={(ref) => (
<MenuToggle
ref={ref}

View file

@ -72,6 +72,7 @@ export const SearchDropdown = ({
return (
<Dropdown
onOpenChange={(isOpen) => setSearchToggle(isOpen)}
toggle={(ref) => (
<MenuToggle
data-testid="clientScopeSearch"

View file

@ -174,6 +174,7 @@ export const AdvancedSettings = ({
</MenuToggle>
)}
isOpen={open}
onOpenChange={(isOpen) => setOpen(isOpen)}
onSelect={(_, value) => {
field.onChange(value);
setOpen(false);

View file

@ -71,6 +71,7 @@ export const TokenLifespan = ({
</MenuToggle>
)}
isOpen={open}
onOpenChange={(isOpen) => setOpen(isOpen)}
onSelect={(_, value) => {
field.onChange(value);
setOpen(false);

View file

@ -208,6 +208,7 @@ export const AuthorizationPermissions = ({
</ToolbarItem>
<ToolbarItem>
<Dropdown
onOpenChange={toggleCreate}
toggle={(ref) => (
<MenuToggle
ref={ref}

View file

@ -55,6 +55,7 @@ export const SearchDropdown = ({
return (
<Dropdown
onOpenChange={toggle}
toggle={(ref) => (
<MenuToggle
data-testid="searchdropdown_dorpdown"

View file

@ -169,6 +169,7 @@ export const AddScopeDialog = ({
popperProps={{
direction: "up",
}}
onOpenChange={(isOpen) => setAddToggle(isOpen)}
className="keycloak__client-scopes-add__add-dropdown"
key="add-dropdown"
isOpen={addToggle}
@ -215,6 +216,7 @@ export const AddScopeDialog = ({
onSelect={() => {
onFilterTypeDropdownSelect(filterType);
}}
onOpenChange={toggleIsFilterTypeDropdownOpen}
toggle={(ref) => (
<MenuToggle
ref={ref}
@ -246,6 +248,7 @@ export const AddScopeDialog = ({
onSelect={() => {
onFilterTypeDropdownSelect(filterType);
}}
onOpenChange={toggleIsFilterTypeDropdownOpen}
data-testid="filter-type-dropdown"
toggle={(ref) => (
<MenuToggle

View file

@ -298,6 +298,7 @@ export const ClientScopes = ({
</ToolbarItem>
<ToolbarItem>
<Dropdown
onOpenChange={(isOpen) => setKebabOpen(isOpen)}
toggle={(ref) => (
<MenuToggle
data-testid="kebab"

View file

@ -86,6 +86,7 @@ export const CellDropdown = ({
</MenuToggle>
)}
isOpen={open}
onOpenChange={(isOpen) => setOpen(isOpen)}
selected={[type]}
onSelect={(_, value) => {
onSelect(

View file

@ -125,6 +125,7 @@ export const DownloadDialog = ({
>
<Select
isOpen={openType}
onOpenChange={(isOpen) => setOpenType(isOpen)}
toggle={(ref) => (
<MenuToggle
id="type"

View file

@ -62,6 +62,7 @@ export const HelpHeader = () => {
popperProps={{
position: "right",
}}
onOpenChange={(isOpen) => setOpen(isOpen)}
isOpen={open}
toggle={(ref) => (
<MenuToggle

View file

@ -50,6 +50,7 @@ export const KeycloakCard = ({
popperProps={{
position: "right",
}}
onOpenChange={onDropdownToggle}
toggle={(ref: React.Ref<MenuToggleElement>) => (
<MenuToggle
ref={ref}

View file

@ -162,6 +162,7 @@ export const RealmSelector = () => {
id="realm-select"
className="keycloak__realm_selector__dropdown"
isOpen={open}
onOpenChange={(isOpen) => setOpen(isOpen)}
toggle={(ref) => (
<MenuToggle
ref={ref}

View file

@ -144,6 +144,7 @@ export const AddRoleMappingModal = ({
canViewRealmRoles && (
<ToolbarItem>
<Dropdown
onOpenChange={(isOpen) => setSearchToggle(isOpen)}
onSelect={() => {
setFilterType(filterType === "roles" ? "clients" : "roles");
setSearchToggle(false);

View file

@ -169,6 +169,7 @@ export function UserDataTableToolbarItems({
) : (
<ToolbarItem>
<Dropdown
onOpenChange={(isOpen) => setKebabOpen(isOpen)}
toggle={(ref) => (
<MenuToggle
ref={ref}

View file

@ -110,6 +110,7 @@ export const UserSelect = ({
render={({ field }) => (
<Select
id={name!}
onOpenChange={toggleOpen}
toggle={(ref) => (
<MenuToggle
data-testid={name!}

View file

@ -152,6 +152,7 @@ export const ViewHeader = ({
popperProps={{
position: "right",
}}
onOpenChange={onDropdownToggle}
toggle={(ref) => (
<MenuToggle
ref={ref}
@ -195,6 +196,7 @@ export const ViewHeader = ({
{lowerDropdownItems && (
<Dropdown
className="keycloak__user-federation__dropdown"
onOpenChange={onLowerDropdownToggle}
toggle={(ref) => (
<MenuToggle
ref={ref}

View file

@ -213,6 +213,7 @@ export const Members = () => {
</ToolbarItem>
<ToolbarItem>
<Dropdown
onOpenChange={(isOpen) => setIsKebabOpen(isOpen)}
toggle={(ref) => (
<MenuToggle
ref={ref}

View file

@ -45,6 +45,7 @@ export const GroupToolbar = ({
</ToolbarItem>
<ToolbarItem>
<Dropdown
onOpenChange={toggleKebab}
toggle={(ref) => (
<MenuToggle
ref={ref}

View file

@ -107,6 +107,7 @@ const GroupTreeContextMenu = ({
popperProps={{
position: "right",
}}
onOpenChange={toggleOpen}
toggle={(ref) => (
<MenuToggle
ref={ref}

View file

@ -251,6 +251,7 @@ export default function IdentityProvidersSection() {
<ToolbarItem>
<Dropdown
data-testid="addProviderDropdown"
onOpenChange={(isOpen) => setAddProviderOpen(isOpen)}
toggle={(ref) => (
<MenuToggle
ref={ref}

View file

@ -120,6 +120,7 @@ export const IdentityProviderSelect = ({
render={({ field }) => (
<Select
id={name!}
onOpenChange={toggleOpen}
toggle={(ref) => (
<MenuToggle
data-testid={name!}

View file

@ -111,6 +111,7 @@ export const Members = () => {
<>
<ToolbarItem>
<Dropdown
onOpenChange={toggle}
toggle={(ref) => (
<MenuToggle
ref={ref}

View file

@ -172,6 +172,7 @@ export const DefaultsGroupsTab = () => {
</ToolbarItem>
<ToolbarItem>
<Dropdown
onOpenChange={toggleKebab}
toggle={(ref) => (
<MenuToggle
ref={ref}

View file

@ -384,6 +384,7 @@ export const RealmOverrides = ({
</Button>
<ToolbarItem>
<Dropdown
onOpenChange={(isOpen) => setKebabOpen(isOpen)}
toggle={(ref) => (
<MenuToggle
ref={ref}

View file

@ -43,6 +43,7 @@ export const SearchDropdown = ({
return (
<Dropdown
className="keycloak__users__searchtype"
onOpenChange={(isOpen) => setSearchToggle(isOpen)}
toggle={(ref) => (
<MenuToggle
ref={ref}

View file

@ -94,6 +94,7 @@ export const CredentialRow = ({
popperProps={{
position: "right",
}}
onOpenChange={toggleKebab}
toggle={(ref) => (
<MenuToggle
ref={ref}

View file

@ -28,6 +28,7 @@ export const KeycloakDropdown = ({
popperProps={{
position: "right",
}}
onOpenChange={(isOpen) => setOpen(isOpen)}
toggle={(ref) => (
<MenuToggle
data-testid={`${rest["data-testid"]}-toggle`}

View file

@ -54,7 +54,7 @@ export const SingleSelect = ({
}}
{...props}
onClick={toggle}
onOpenChange={() => setOpen(false)}
onOpenChange={(isOpen) => setOpen(isOpen)}
selected={selections}
onSelect={(_, value) => {
onSelect?.(value || "");

View file

@ -113,7 +113,7 @@ export const TypeaheadSelect = ({
<Select
{...rest}
onClick={toggle}
onOpenChange={() => onToggle?.(false)}
onOpenChange={(isOpen) => onToggle?.(isOpen)}
onSelect={(_, value) => onSelect?.(value || "")}
maxMenuHeight={propertyToString(maxHeight)}
popperProps={{ direction, width: propertyToString(width) }}