1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Make MenuActions deterministic in unit tests

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
Janne Savolainen 2022-07-06 11:15:36 +03:00
parent e377cfedee
commit 0a7aacd3f2
No known key found for this signature in database
GPG Key ID: 8C6CFB2FFFE8F68A
17 changed files with 94 additions and 78 deletions

View File

@ -524,7 +524,7 @@ exports[`cluster - order of sidebar items when rendered renders 1`] = `
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_15" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
> >
<span <span
@ -538,7 +538,7 @@ exports[`cluster - order of sidebar items when rendered renders 1`] = `
</div> </div>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_17" id="tooltip_target_16"
tabindex="0" tabindex="0"
> >
<span <span
@ -551,7 +551,7 @@ exports[`cluster - order of sidebar items when rendered renders 1`] = `
</i> </i>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_18" id="tooltip_target_17"
tabindex="0" tabindex="0"
> >
<span <span
@ -1127,7 +1127,7 @@ exports[`cluster - order of sidebar items when rendered when parent is expanded
> >
<i <i
class="Icon material interactive focusable small" class="Icon material interactive focusable small"
id="tooltip_target_54" id="tooltip_target_52"
tabindex="0" tabindex="0"
> >
<span <span
@ -1152,7 +1152,7 @@ exports[`cluster - order of sidebar items when rendered when parent is expanded
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_55" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
> >
<span <span
@ -1166,7 +1166,7 @@ exports[`cluster - order of sidebar items when rendered when parent is expanded
</div> </div>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_57" id="tooltip_target_54"
tabindex="0" tabindex="0"
> >
<span <span
@ -1179,7 +1179,7 @@ exports[`cluster - order of sidebar items when rendered when parent is expanded
</i> </i>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_58" id="tooltip_target_55"
tabindex="0" tabindex="0"
> >
<span <span

View File

@ -468,7 +468,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
> >
<i <i
class="Icon material interactive focusable small" class="Icon material interactive focusable small"
id="tooltip_target_186" id="tooltip_target_177"
tabindex="0" tabindex="0"
> >
<span <span
@ -493,7 +493,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_187" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
> >
<span <span
@ -507,7 +507,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div> </div>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_189" id="tooltip_target_179"
tabindex="0" tabindex="0"
> >
<span <span
@ -520,7 +520,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</i> </i>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_190" id="tooltip_target_180"
tabindex="0" tabindex="0"
> >
<span <span
@ -1007,7 +1007,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
> >
<i <i
class="Icon material interactive focusable small" class="Icon material interactive focusable small"
id="tooltip_target_226" id="tooltip_target_215"
tabindex="0" tabindex="0"
> >
<span <span
@ -1032,7 +1032,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_227" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
> >
<span <span
@ -1046,7 +1046,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div> </div>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_229" id="tooltip_target_217"
tabindex="0" tabindex="0"
> >
<span <span
@ -1059,7 +1059,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</i> </i>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_230" id="tooltip_target_218"
tabindex="0" tabindex="0"
> >
<span <span
@ -1568,7 +1568,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
> >
<i <i
class="Icon material interactive focusable small" class="Icon material interactive focusable small"
id="tooltip_target_286" id="tooltip_target_272"
tabindex="0" tabindex="0"
> >
<span <span
@ -1593,7 +1593,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_287" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
> >
<span <span
@ -1607,7 +1607,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div> </div>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_289" id="tooltip_target_274"
tabindex="0" tabindex="0"
> >
<span <span
@ -1620,7 +1620,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</i> </i>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_290" id="tooltip_target_275"
tabindex="0" tabindex="0"
> >
<span <span
@ -2013,7 +2013,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
> >
<i <i
class="Icon material interactive focusable small" class="Icon material interactive focusable small"
id="tooltip_target_349" id="tooltip_target_332"
tabindex="0" tabindex="0"
> >
<span <span
@ -2038,7 +2038,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_350" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
> >
<span <span
@ -2052,7 +2052,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div> </div>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_352" id="tooltip_target_334"
tabindex="0" tabindex="0"
> >
<span <span
@ -2065,7 +2065,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</i> </i>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_353" id="tooltip_target_335"
tabindex="0" tabindex="0"
> >
<span <span
@ -2460,7 +2460,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_15" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
> >
<span <span
@ -2474,7 +2474,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div> </div>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_17" id="tooltip_target_16"
tabindex="0" tabindex="0"
> >
<span <span
@ -2487,7 +2487,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</i> </i>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_18" id="tooltip_target_17"
tabindex="0" tabindex="0"
> >
<span <span
@ -2996,7 +2996,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
> >
<i <i
class="Icon material interactive focusable small" class="Icon material interactive focusable small"
id="tooltip_target_86" id="tooltip_target_82"
tabindex="0" tabindex="0"
> >
<span <span
@ -3021,7 +3021,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_87" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
> >
<span <span
@ -3035,7 +3035,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div> </div>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_89" id="tooltip_target_84"
tabindex="0" tabindex="0"
> >
<span <span
@ -3048,7 +3048,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</i> </i>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_90" id="tooltip_target_85"
tabindex="0" tabindex="0"
> >
<span <span
@ -3535,7 +3535,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
> >
<i <i
class="Icon material interactive focusable small" class="Icon material interactive focusable small"
id="tooltip_target_146" id="tooltip_target_139"
tabindex="0" tabindex="0"
> >
<span <span
@ -3560,7 +3560,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_147" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
> >
<span <span
@ -3574,7 +3574,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div> </div>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_149" id="tooltip_target_141"
tabindex="0" tabindex="0"
> >
<span <span
@ -3587,7 +3587,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</i> </i>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_150" id="tooltip_target_142"
tabindex="0" tabindex="0"
> >
<span <span

View File

@ -492,7 +492,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_10" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
tooltip="New tab" tooltip="New tab"
> >
@ -1028,7 +1028,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_12" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
tooltip="New tab" tooltip="New tab"
> >
@ -1604,7 +1604,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_15" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
tooltip="New tab" tooltip="New tab"
> >
@ -2103,7 +2103,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_18" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
tooltip="New tab" tooltip="New tab"
> >
@ -2602,7 +2602,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_27" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
tooltip="New tab" tooltip="New tab"
> >
@ -3060,7 +3060,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_1" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
tooltip="New tab" tooltip="New tab"
> >
@ -3636,7 +3636,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_5" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
tooltip="New tab" tooltip="New tab"
> >
@ -4172,7 +4172,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_8" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
tooltip="New tab" tooltip="New tab"
> >

View File

@ -463,7 +463,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_14" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
> >
<span <span
@ -477,7 +477,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
</div> </div>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_16" id="tooltip_target_15"
tabindex="0" tabindex="0"
> >
<span <span
@ -490,7 +490,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
</i> </i>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_17" id="tooltip_target_16"
tabindex="0" tabindex="0"
> >
<span <span
@ -991,7 +991,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
> >
<i <i
class="Icon material interactive focusable small" class="Icon material interactive focusable small"
id="tooltip_target_51" id="tooltip_target_49"
tabindex="0" tabindex="0"
> >
<span <span
@ -1016,7 +1016,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_52" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
> >
<span <span
@ -1030,7 +1030,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
</div> </div>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_54" id="tooltip_target_51"
tabindex="0" tabindex="0"
> >
<span <span
@ -1043,7 +1043,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
</i> </i>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_55" id="tooltip_target_52"
tabindex="0" tabindex="0"
> >
<span <span

View File

@ -433,7 +433,7 @@ exports[`helm-charts - navigation to Helm charts when navigating to Helm charts
> >
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="menu_actions_27" id="menu-actions-for-item-object-list-content"
tabindex="0" tabindex="0"
> >
<span <span
@ -541,7 +541,7 @@ exports[`helm-charts - navigation to Helm charts when navigating to Helm charts
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_14" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
> >
<span <span
@ -555,7 +555,7 @@ exports[`helm-charts - navigation to Helm charts when navigating to Helm charts
</div> </div>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_16" id="tooltip_target_15"
tabindex="0" tabindex="0"
> >
<span <span
@ -568,7 +568,7 @@ exports[`helm-charts - navigation to Helm charts when navigating to Helm charts
</i> </i>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_17" id="tooltip_target_16"
tabindex="0" tabindex="0"
> >
<span <span

View File

@ -95,6 +95,7 @@ class NonInjectedCatalogEntityDrawerMenu<T extends CatalogEntity> extends React.
return ( return (
<MenuActions <MenuActions
id="menu-actions-for-catalog-entity-drawer-menu"
className={cssNames("CatalogEntityDrawerMenu", className)} className={cssNames("CatalogEntityDrawerMenu", className)}
toolbar toolbar
{...menuProps} {...menuProps}

View File

@ -198,7 +198,7 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
}; };
return ( return (
<MenuActions onOpen={onOpen}> <MenuActions id="menu-actions-for-catalog" onOpen={onOpen}>
<MenuItem <MenuItem
key="open-details" key="open-details"
onClick={() => this.props.catalogEntityStore.selectedItemId.set(entity.getId())} onClick={() => this.props.catalogEntityStore.selectedItemId.set(entity.getId())}

View File

@ -102,7 +102,10 @@ const NonInjectedInstalledExtensions = observer(({ extensionDiscovery, extension
</div> </div>
), ),
actions: ( actions: (
<MenuActions usePortal toolbar={false}> <MenuActions
id="menu-actions-for-installed-extensions"
usePortal
toolbar={false}>
{isCompatible && ( {isCompatible && (
<> <>
{isEnabled ? ( {isEnabled ? (

View File

@ -78,6 +78,7 @@ class NonInjectedHelmReleaseMenu extends React.Component<HelmReleaseMenuProps &
return ( return (
<MenuActions <MenuActions
id="menu-actions-for-release-menu"
{...menuProps} {...menuProps}
className={cssNames("HelmReleaseMenu", className)} className={cssNames("HelmReleaseMenu", className)}
removeAction={this.remove} removeAction={this.remove}

View File

@ -121,6 +121,7 @@ class NonInjectedPortForwardMenu<Props extends PortForwardMenuProps & Dependenci
return ( return (
<MenuActions <MenuActions
id="menu-actions-for-port-forward-menu"
{...menuProps} {...menuProps}
className={cssNames("PortForwardMenu", className)} className={cssNames("PortForwardMenu", className)}
removeAction={this.remove} removeAction={this.remove}

View File

@ -89,6 +89,7 @@ export class ClusterIconSetting extends React.Component<ClusterIconSettingProps>
/> />
</div> </div>
<MenuActions <MenuActions
id="menu-actions-for-cluster-icon-settings"
toolbar={false} toolbar={false}
autoCloseOnSelect={true} autoCloseOnSelect={true}
triggerIcon={{ material: "more_horiz" }} triggerIcon={{ material: "more_horiz" }}

View File

@ -161,6 +161,7 @@ class NonInjectedDock extends React.Component<DockProps & Dependencies> {
<div className={cssNames("toolbar flex gaps align-center box grow", { "pl-0": tabs.length == 0 })}> <div className={cssNames("toolbar flex gaps align-center box grow", { "pl-0": tabs.length == 0 })}>
<div className="dock-menu box grow"> <div className="dock-menu box grow">
<MenuActions <MenuActions
id="menu-actions-for-dock"
usePortal usePortal
triggerIcon={{ material: "add", className: "new-dock-tab", tooltip: "New tab" }} triggerIcon={{ material: "add", className: "new-dock-tab", tooltip: "New tab" }}
closeOnScroll={false} closeOnScroll={false}

View File

@ -343,6 +343,7 @@ class NonInjectedItemListLayoutContent<
return ( return (
<MenuActions <MenuActions
id="menu-actions-for-item-object-list-content"
className="ItemListLayoutVisibilityMenu" className="ItemListLayoutVisibilityMenu"
toolbar={false} toolbar={false}
autoCloseOnSelect={false} autoCloseOnSelect={false}

View File

@ -6,6 +6,7 @@ exports[`kube-object-menu given kube object renders 1`] = `
<div> <div>
<ul <ul
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom" class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
id="menu-actions-for-kube-object-menu-for-some-uid"
> >
<li> <li>
Some menu item Some menu item
@ -45,6 +46,7 @@ exports[`kube-object-menu given kube object when removing kube object renders 1`
<div> <div>
<ul <ul
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom" class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
id="menu-actions-for-kube-object-menu-for-some-uid"
> >
<li> <li>
Some menu item Some menu item
@ -136,6 +138,7 @@ exports[`kube-object-menu given kube object when rerendered with different kube
<div> <div>
<ul <ul
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom" class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
id="menu-actions-for-kube-object-menu-for-some-other-uid"
> >
<li <li
class="MenuItem" class="MenuItem"
@ -172,6 +175,7 @@ exports[`kube-object-menu given kube object when rerendered with different kube
<div> <div>
<ul <ul
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom" class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
id="menu-actions-for-kube-object-menu-for-some-other-uid"
> >
<li <li
class="MenuItem" class="MenuItem"
@ -260,6 +264,7 @@ exports[`kube-object-menu given kube object with namespace when removing kube ob
<div> <div>
<ul <ul
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom" class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
id="menu-actions-for-kube-object-menu-for-some-uid"
> >
<li> <li>
Some menu item Some menu item
@ -351,6 +356,7 @@ exports[`kube-object-menu given kube object without namespace when removing kube
<div> <div>
<ul <ul
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom" class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
id="menu-actions-for-kube-object-menu-for-some-uid"
> >
<li> <li>
Some menu item Some menu item
@ -441,6 +447,7 @@ exports[`kube-object-menu given no kube object, renders 1`] = `
<div> <div>
<ul <ul
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom" class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
id="menu-actions-for-kube-object-menu-for-undefined"
/> />
</div> </div>
</body> </body>

View File

@ -187,6 +187,7 @@ class NonInjectedKubeObjectMenu<Kube extends KubeObject> extends React.Component
return ( return (
<MenuActions <MenuActions
id={`menu-actions-for-kube-object-menu-for-${object?.getId()}`}
className={cssNames("KubeObjectMenu", className)} className={cssNames("KubeObjectMenu", className)}
onOpen={object ? () => this.emitOnContextMenuOpen(object) : undefined} onOpen={object ? () => this.emitOnContextMenuOpen(object) : undefined}
{...menuProps} {...menuProps}

View File

@ -13,12 +13,12 @@ import type { IconProps } from "../icon";
import { Icon } from "../icon"; import { Icon } from "../icon";
import type { MenuProps } from "./menu"; import type { MenuProps } from "./menu";
import { Menu, MenuItem } from "./menu"; import { Menu, MenuItem } from "./menu";
import uniqueId from "lodash/uniqueId";
import isString from "lodash/isString"; import isString from "lodash/isString";
import type { TooltipDecoratorProps } from "../tooltip"; import type { TooltipDecoratorProps } from "../tooltip";
import type { OpenConfirmDialog } from "../confirm-dialog/open.injectable"; import type { OpenConfirmDialog } from "../confirm-dialog/open.injectable";
import { withInjectables } from "@ogre-tools/injectable-react"; import { withInjectables } from "@ogre-tools/injectable-react";
import openConfirmDialogInjectable from "../confirm-dialog/open.injectable"; import openConfirmDialogInjectable from "../confirm-dialog/open.injectable";
import getRandomIdInjectable from "../../../common/utils/get-random-id.injectable";
export interface MenuActionsProps extends Partial<MenuProps> { export interface MenuActionsProps extends Partial<MenuProps> {
className?: string; className?: string;
@ -38,6 +38,7 @@ export interface MenuActionsProps extends Partial<MenuProps> {
*/ */
removeAction?: () => void | Promise<void>; removeAction?: () => void | Promise<void>;
onOpen?: () => void; onOpen?: () => void;
id?: string;
} }
interface Dependencies { interface Dependencies {
@ -50,9 +51,6 @@ class NonInjectedMenuActions extends React.Component<MenuActionsProps & Dependen
removeConfirmationMessage: "Remove item?", removeConfirmationMessage: "Remove item?",
}; };
// TODO: Make deterministic
public id = uniqueId("menu_actions_");
@observable isOpen = !!this.props.toolbar; @observable isOpen = !!this.props.toolbar;
toggle = () => { toggle = () => {
@ -100,10 +98,10 @@ class NonInjectedMenuActions extends React.Component<MenuActionsProps & Dependen
if (isValidElement<HTMLElement>(triggerIcon)) { if (isValidElement<HTMLElement>(triggerIcon)) {
className = cssNames(triggerIcon.props.className, { active: this.isOpen }); className = cssNames(triggerIcon.props.className, { active: this.isOpen });
return React.cloneElement(triggerIcon, { id: this.id, className }); return React.cloneElement(triggerIcon, { id: this.props.id, className });
} }
const iconProps: IconProps & TooltipDecoratorProps = { const iconProps: IconProps & TooltipDecoratorProps = {
id: this.id, id: this.props.id,
interactive: true, interactive: true,
material: isString(triggerIcon) ? triggerIcon : undefined, material: isString(triggerIcon) ? triggerIcon : undefined,
active: this.isOpen, active: this.isOpen,
@ -131,7 +129,7 @@ class NonInjectedMenuActions extends React.Component<MenuActionsProps & Dependen
{this.renderTriggerIcon()} {this.renderTriggerIcon()}
<Menu <Menu
htmlFor={this.id} htmlFor={this.props.id}
isOpen={this.isOpen} isOpen={this.isOpen}
open={this.toggle} open={this.toggle}
close={this.toggle} close={this.toggle}
@ -175,7 +173,8 @@ class NonInjectedMenuActions extends React.Component<MenuActionsProps & Dependen
export const MenuActions = withInjectables<Dependencies, MenuActionsProps>(NonInjectedMenuActions, { export const MenuActions = withInjectables<Dependencies, MenuActionsProps>(NonInjectedMenuActions, {
getProps: (di, props) => ({ getProps: (di, props) => ({
...props, id: di.inject(getRandomIdInjectable)(),
openConfirmDialog: di.inject(openConfirmDialogInjectable), openConfirmDialog: di.inject(openConfirmDialogInjectable),
...props,
}), }),
}); });

View File

@ -402,7 +402,7 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
> >
<i <i
class="Icon material interactive focusable small" class="Icon material interactive focusable small"
id="tooltip_target_58" id="tooltip_target_56"
tabindex="0" tabindex="0"
> >
<span <span
@ -427,7 +427,7 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_59" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
> >
<span <span
@ -441,7 +441,7 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
</div> </div>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_61" id="tooltip_target_58"
tabindex="0" tabindex="0"
> >
<span <span
@ -454,7 +454,7 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
</i> </i>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_62" id="tooltip_target_59"
tabindex="0" tabindex="0"
> >
<span <span
@ -907,7 +907,7 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_17" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
> >
<span <span
@ -921,7 +921,7 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
</div> </div>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_19" id="tooltip_target_18"
tabindex="0" tabindex="0"
> >
<span <span
@ -934,7 +934,7 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
</i> </i>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_20" id="tooltip_target_19"
tabindex="0" tabindex="0"
> >
<span <span
@ -1418,7 +1418,7 @@ exports[`<ClusterFrame /> given cluster without list nodes, but with namespaces
> >
<i <i
class="Icon material interactive focusable small" class="Icon material interactive focusable small"
id="tooltip_target_98" id="tooltip_target_94"
tabindex="0" tabindex="0"
> >
<span <span
@ -1443,7 +1443,7 @@ exports[`<ClusterFrame /> given cluster without list nodes, but with namespaces
> >
<i <i
class="Icon new-dock-tab material interactive focusable" class="Icon new-dock-tab material interactive focusable"
id="menu_actions_99" id="menu-actions-for-dock"
tabindex="0" tabindex="0"
> >
<span <span
@ -1457,7 +1457,7 @@ exports[`<ClusterFrame /> given cluster without list nodes, but with namespaces
</div> </div>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_101" id="tooltip_target_96"
tabindex="0" tabindex="0"
> >
<span <span
@ -1470,7 +1470,7 @@ exports[`<ClusterFrame /> given cluster without list nodes, but with namespaces
</i> </i>
<i <i
class="Icon material interactive focusable" class="Icon material interactive focusable"
id="tooltip_target_102" id="tooltip_target_97"
tabindex="0" tabindex="0"
> >
<span <span