right click contextual menu in the limit sets edition

src/components/dialogs/limits/limits-groups-contextual-menu.tsx

@@ -13,19 +13,23 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import { ContentCopy, Delete } 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 { useCallback } from 'react';
 import { CurrentLimitsData } from '../../../services/study/network-map.type';
 import { OperationalLimitsGroupFormSchema } from './operational-limits-groups-types';
 
+export interface ContextMenuCoordinates {
+    x: null | number;
+    y: null | number;
+    tabIndex: null | number;
+}
+
 export interface LimitsGroupsContextualMenuProps {
     parentFormName: string;
     indexSelectedLimitSet: number | null;
     setIndexSelectedLimitSet: React.Dispatch<React.SetStateAction<number | null>>;
-    menuAnchorEl: PopoverProps['anchorEl'];
     handleCloseMenu: () => void;
-    activatedByMenuTabIndex: number | null;
+    contextMenuCoordinates: ContextMenuCoordinates;
     selectedLimitsGroups1: string;
     selectedLimitsGroups2: string;
     currentLimitsToModify: CurrentLimitsData[];
@@ -43,8 +47,8 @@ export function LimitsGroupsContextualMenu({
     parentFormName,
     indexSelectedLimitSet,
     setIndexSelectedLimitSet,
-    menuAnchorEl,
     handleCloseMenu,
+    contextMenuCoordinates,
     selectedLimitsGroups1,
     selectedLimitsGroups2,
     operationalLimitsGroups,
@@ -109,7 +113,16 @@ export function LimitsGroupsContextualMenu({
     ]);
 
     return (
-        <Menu anchorEl={menuAnchorEl} open={Boolean(menuAnchorEl)} onClose={handleCloseMenu}>
+        <Menu
+            open={contextMenuCoordinates.tabIndex != null}
+            onClose={handleCloseMenu}
+            anchorReference="anchorPosition"
+            anchorPosition={
+                contextMenuCoordinates.y !== null && contextMenuCoordinates.x !== null
+                    ? { top: contextMenuCoordinates.y, left: contextMenuCoordinates.x }
+                    : undefined
+            }
+        >
             <MenuItem onClick={handleDeleteTab}>
                 <ListItemIcon>
                     <Delete fontSize="small" />

src/components/dialogs/limits/limits-pane.tsx

@@ -154,17 +154,14 @@ export function LimitsPane({
                     <Box
                         sx={{
                             display: 'flex',
-                            justifyContent: 'space-between',
+                            alignItems: 'center',
                         }}
                     >
                         <GridSection title="LimitSets" />
                         <IconButton color="primary" onClick={onAddClick} disabled={!olgEditable}>
                             <AddIcon />
                         </IconButton>
                     </Box>
-                </Grid>
-                <Grid container item xs={6.25} />
-                <Grid item xs={4}>
                     <OperationalLimitsGroupsTabs
                         ref={myRef}
                         parentFormName={id}

src/components/dialogs/limits/limits-properties-side-stack.tsx

@@ -5,10 +5,10 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { LimitsTagChip } from './limits-tag-chip';
-import { Autocomplete, AutocompleteRenderInputParams, Box, Stack, TextField, IconButton } from '@mui/material';
+import { Autocomplete, AutocompleteRenderInputParams, Box, Stack, TextField, IconButton, Button } from '@mui/material';
 import { useCallback, useMemo, useState } from 'react';
 import { Delete } from '@mui/icons-material';
-import { useIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { LimitsProperty } from '../../../services/network-modification-types';
 import { useFieldArray } from 'react-hook-form';
 import { usePredefinedProperties } from '@gridsuite/commons-ui';
@@ -78,7 +78,7 @@ export function LimitsPropertiesSideStack({ name, disabled }: Readonly<LimitsPro
     }, []);
 
     return (
-        <Stack direction="column" spacing={2} paddingBottom={2} flexWrap="wrap">
+        <Stack direction="column" spacing={2} paddingTop={2} flexWrap="wrap">
             <Stack direction="row" sx={{ display: 'flex', flexWrap: 'wrap' }}>
                 {limitsProperties?.map((property: LimitsProperty, index: number) => (
                     <LimitsTagChip
@@ -90,14 +90,15 @@ export function LimitsPropertiesSideStack({ name, disabled }: Readonly<LimitsPro
                     />
                 ))}
                 {!isEditing && (
-                    <IconButton
+                    <Button
                         color="primary"
                         sx={{ verticalAlign: 'center' }}
                         onClick={() => setIsEditing(true)}
+                        startIcon={<AddIcon />}
                         disabled={disabled}
                     >
-                        <AddIcon />
-                    </IconButton>
+                        <FormattedMessage id="AddProperty" />
+                    </Button>
                 )}
             </Stack>
             {isEditing && !disabled ? (

src/components/dialogs/limits/limits-side-pane.tsx

@@ -225,15 +225,13 @@ export function LimitsSidePane({
 
     return (
         <Box sx={{ p: 2 }}>
+            <LimitsChart
+                limitsGroupFormName={limitsGroupFormName}
+                previousPermanentLimit={permanentCurrentLimitPreviousValue}
+            />
             {name && (
                 <Box>
-                    <Grid
-                        container
-                        justifyContent="flex-start"
-                        alignItems="stretch"
-                        spacing={2}
-                        sx={{ paddingBottom: '15px' }}
-                    >
+                    <Grid container justifyContent="flex-start" alignItems="stretch" spacing={2} sx={{ paddingY: 1 }}>
                         <Grid item xs={4}>
                             <TextInput
                                 name={`${name}.${NAME}`}
@@ -262,15 +260,8 @@ export function LimitsSidePane({
                     <ErrorInput InputField={FieldErrorAlert} name={`${name}.${OLG_IS_DUPLICATE}`} />
                 </Box>
             )}
-            <LimitsPropertiesSideStack name={`${name}.${LIMITS_PROPERTIES}`} disabled={disabled} />
-            <Box>
-                <LimitsChart
-                    limitsGroupFormName={limitsGroupFormName}
-                    previousPermanentLimit={permanentCurrentLimitPreviousValue}
-                />
-            </Box>
 
-            <Box component={`h4`}>
+            <Box component={`h4`} margin={1}>
                 <FormattedMessage id="TemporaryCurrentLimitsText" />
             </Box>
             <TemporaryLimitsTable
@@ -282,6 +273,7 @@ export function LimitsSidePane({
                 isValueModified={isValueModified}
                 disabled={disabled}
             />
+            <LimitsPropertiesSideStack name={`${name}.${LIMITS_PROPERTIES}`} disabled={disabled} />
         </Box>
     );
 }

src/components/dialogs/limits/operational-limits-group-tab-label.tsx

@@ -5,31 +5,28 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Box, FormHelperText, Stack, Typography } from '@mui/material';
+import { Box, FormHelperText, Stack, Typography, Tooltip, IconButton } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { APPLICABILITY } from '../../network/constants';
 import { LimitsPropertiesStack } from './limits-properties-stack';
 import { grey, red } from '@mui/material/colors';
-import IconButton from '@mui/material/IconButton';
-import MenuIcon from '@mui/icons-material/Menu';
 import { useFormState } from 'react-hook-form';
 import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined';
 import { LIMITS, OLG_IS_DUPLICATE, OPERATIONAL_LIMITS_GROUPS } from '../../utils/field-constants';
 import { LimitsFormSchema, OperationalLimitsGroupFormSchema } from './operational-limits-groups-types';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 
 interface OperationalLimitsGroupTabLabelProps {
     operationalLimitsGroup: OperationalLimitsGroupFormSchema;
     showIconButton: boolean;
-    editable: boolean;
     limitsPropertiesName: string;
-    handleOpenMenu: (event: React.MouseEvent<HTMLButtonElement>, index: number) => void;
+    handleOpenMenu: (event: React.MouseEvent<HTMLElement>, index: number) => void;
     index: number;
 }
 
 export function OperationalLimitsGroupTabLabel({
     operationalLimitsGroup,
     showIconButton,
-    editable,
     limitsPropertiesName,
     handleOpenMenu,
     index,
@@ -43,18 +40,37 @@ export function OperationalLimitsGroupTabLabel({
 
     return (
         <Box
-            sx={{ display: 'inline-flex', alignItems: 'center', boxSizing: 'inherit', justifyContent: 'space-between' }}
+            sx={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                boxSizing: 'inherit',
+                justifyContent: 'space-between',
+                paddingRight: 1,
+                paddingLeft: 1,
+            }}
         >
             <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
                 <Stack spacing={0}>
-                    <Stack direction={'row'} spacing={1} sx={{ alignItems: 'stretch' }}>
-                        <Typography color={hasError ? red[500] : undefined}>{operationalLimitsGroup.name}</Typography>
-                        {hasError && (
-                            <FormHelperText error>
-                                <ErrorOutlineOutlinedIcon />
-                            </FormHelperText>
-                        )}
-                    </Stack>
+                    <Tooltip title={operationalLimitsGroup.name}>
+                        <Stack direction={'row'} spacing={1} sx={{ alignItems: 'stretch' }}>
+                            <Typography
+                                variant="body1"
+                                color={hasError ? red[500] : undefined}
+                                sx={{
+                                    maxWidth: '10ch',
+                                    textOverflow: 'ellipsis',
+                                }}
+                                noWrap
+                            >
+                                {operationalLimitsGroup.name}
+                            </Typography>
+                            {hasError && (
+                                <FormHelperText error>
+                                    <ErrorOutlineOutlinedIcon />
+                                </FormHelperText>
+                            )}
+                        </Stack>
+                    </Tooltip>
                     {operationalLimitsGroup?.applicability ? (
                         <Typography noWrap align="left" color={grey[500]}>
                             <FormattedMessage
@@ -71,14 +87,9 @@ export function OperationalLimitsGroupTabLabel({
                 </Stack>
                 <LimitsPropertiesStack name={limitsPropertiesName} />
             </Stack>
-
             {showIconButton && (
-                <IconButton
-                    size="small"
-                    onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleOpenMenu(e, index)}
-                    disabled={editable}
-                >
-                    <MenuIcon fontSize="small" />
+                <IconButton size="small" onClick={(e) => handleOpenMenu(e, index)}>
+                    <MoreVertIcon fontSize="small" />
                 </IconButton>
             )}
         </Box>

src/components/dialogs/limits/operational-limits-groups-styles.ts

@@ -6,9 +6,33 @@
  */
 
 import type { MuiStyles } from '@gridsuite/commons-ui';
+import { stylesLayout } from '../../utils/tab-utils';
+import { blue } from '@mui/material/colors';
 
 export const limitsStyles = {
-    limitsBackground: {
+    tabs: () => ({
+        ...stylesLayout.listDisplay,
+        maxHeight: '45vh',
+        height: '100%',
+        borderRight: 1,
+        borderColor: 'divider',
+        transition: 'transform 0.3s ease-in-out',
+        '& .MuiTabs-indicator': {
+            borderRight: `3px solid ${blue[700]}`,
+        },
+        '.MuiTab-root.MuiButtonBase-root': {
+            textTransform: 'none',
+            textAlign: 'left',
+            alignItems: 'stretch',
+            p: 0,
+        },
+    }),
+    tabBackground: {
+        '&:hover': {
+            backgroundColor: 'rgba(25, 118, 210, 0.05)', // blue[700]
+        },
+        maxWidth: 600,
+        width: '100%',
         p: 1,
         minHeight: 60,
     },