diff --git a/src/components/dialogs/limits/limits-groups-contextual-menu.tsx b/src/components/dialogs/limits/limits-groups-contextual-menu.tsx index b053f1e63a..991335f365 100644 --- a/src/components/dialogs/limits/limits-groups-contextual-menu.tsx +++ b/src/components/dialogs/limits/limits-groups-contextual-menu.tsx @@ -22,18 +22,22 @@ import ListItemIcon from '@mui/material/ListItemIcon'; import { ContentCopy, Delete, Edit } from '@mui/icons-material'; import ListItemText from '@mui/material/ListItemText'; import { useIntl } from 'react-intl'; -import { PopoverProps } from '@mui/material/Popover'; import { APPLICABILITY } from '../../network/constants'; import { OperationalLimitsGroupFormInfos } from '../network-modifications/line/modification/line-modification-type'; import { CurrentLimits } from '../../../services/network-modification-types'; +export interface ContextMenuCoordinates { + x: null | number; + y: null | number; + tabIndex: null | number; +} + export interface LimitsGroupsContextualMenuProps { parentFormName: string; indexSelectedLimitSet: number | null; setIndexSelectedLimitSet: React.Dispatch>; - menuAnchorEl: PopoverProps['anchorEl']; handleCloseMenu: () => void; - activatedByMenuTabIndex: number | null; + contextMenuCoordinates: ContextMenuCoordinates; startEditingLimitsGroup: (index: number, name: string | null) => void; selectedLimitsGroups1: string; selectedLimitsGroups2: string; @@ -45,9 +49,8 @@ export function LimitsGroupsContextualMenu({ parentFormName, indexSelectedLimitSet, setIndexSelectedLimitSet, - menuAnchorEl, handleCloseMenu, - activatedByMenuTabIndex, + contextMenuCoordinates, startEditingLimitsGroup, selectedLimitsGroups1, selectedLimitsGroups2, @@ -112,12 +115,22 @@ export function LimitsGroupsContextualMenu({ }; return ( - + {!isModification /* TODO : Remove this when the removal of operational limits groups will be possible in powsybl network store */ && ( <> - activatedByMenuTabIndex != null && startEditingLimitsGroup(activatedByMenuTabIndex, null) + contextMenuCoordinates.tabIndex != null && + startEditingLimitsGroup(contextMenuCoordinates.tabIndex, null) } > diff --git a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx index a1061c62ca..98e4f3a5ab 100644 --- a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx +++ b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx @@ -5,8 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { Box, Stack, Tab, Tabs, TextField, Typography } from '@mui/material'; -import IconButton from '@mui/material/IconButton'; +import { Stack, Tab, Tabs, TextField, Typography } from '@mui/material'; import { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react'; import { APPLICABIlITY, @@ -25,8 +24,7 @@ import { } from '../../utils/field-constants'; import { useFormContext, useWatch } from 'react-hook-form'; import { CurrentLimitsData, OperationalLimitsGroup } from '../../../services/network-modification-types'; -import MenuIcon from '@mui/icons-material/Menu'; -import { LimitsGroupsContextualMenu } from './limits-groups-contextual-menu'; +import { ContextMenuCoordinates, LimitsGroupsContextualMenu } from './limits-groups-contextual-menu'; import { isBlankOrEmpty } from '../../utils/validation-functions'; import { FormattedMessage } from 'react-intl'; import { tabStyles } from 'components/utils/tab-utils'; @@ -98,10 +96,12 @@ export const OperationalLimitsGroupsTabs = forwardRef { - const [hoveredRowIndex, setHoveredRowIndex] = useState(-1); const [editingTabIndex, setEditingTabIndex] = useState(-1); - const [menuAnchorEl, setMenuAnchorEl] = useState(null); - const [activatedByMenuTabIndex, setActivatedByMenuTabIndex] = useState(null); + const [contextMenuCoordinates, setContextMenuCoordinates] = useState({ + x: null, + y: null, + tabIndex: null, + }); const [editedLimitGroupName, setEditedLimitGroupName] = useState(''); const [editionError, setEditionError] = useState(''); const { setValue, getValues } = useFormContext(); @@ -135,19 +135,26 @@ export const OperationalLimitsGroupsTabs = forwardRef, index: number): void => { + (event: React.MouseEvent, index: number): void => { + event.preventDefault(); event.stopPropagation(); - setMenuAnchorEl(event.currentTarget); setIndexSelectedLimitSet(index); - setActivatedByMenuTabIndex(index); + setContextMenuCoordinates({ + x: event.clientX, + y: event.clientY, + tabIndex: index, + }); }, - [setMenuAnchorEl, setIndexSelectedLimitSet, setActivatedByMenuTabIndex] + [setIndexSelectedLimitSet, setContextMenuCoordinates] ); const handleCloseMenu = useCallback(() => { - setMenuAnchorEl(null); - setActivatedByMenuTabIndex(null); - }, [setMenuAnchorEl, setActivatedByMenuTabIndex]); + setContextMenuCoordinates({ + x: null, + y: null, + tabIndex: null, + }); + }, [setContextMenuCoordinates]); const startEditingLimitsGroup = useCallback( (index: number, name: string | null) => { @@ -295,8 +302,7 @@ export const OperationalLimitsGroupsTabs = forwardRef {limitsGroups.map((opLg: OperationalLimitsGroupFormInfos, index: number) => ( setHoveredRowIndex(index)} - onMouseLeave={() => setHoveredRowIndex(-1)} + onContextMenu={(e) => handleOpenMenu(e, index)} key={opLg.id + index} label={ editingTabIndex === index ? ( @@ -314,51 +320,29 @@ export const OperationalLimitsGroupsTabs = forwardRef ) : ( - - - - {opLg.name} - {opLg?.applicability ? ( - - item.id === opLg.applicability - )?.label - } - /> - - ) : ( - '' - )} - - {!isAModification && ( - + + + {opLg.name} + {opLg?.applicability ? ( + + item.id === opLg.applicability + )?.label + } + /> + + ) : ( + '' )} - - {(index === hoveredRowIndex || index === activatedByMenuTabIndex) && ( - ) => - handleOpenMenu(e, index) - } - // during the naming of a limit set no other limit set manipulation is allowed : - disabled={!editable || editingTabIndex !== -1} - > - - + {!isAModification && ( + )} - + ) } sx={limitsStyles.limitsBackground} @@ -369,9 +353,8 @@ export const OperationalLimitsGroupsTabs = forwardRef