From a76e400f05e08b7c442be2721605981aa8c1550d Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Fri, 31 Oct 2025 15:08:03 +0100 Subject: [PATCH 01/20] right click contextual menu in the limit sets edition Signed-off-by: Mathieu DEHARBE --- .../limits/limits-groups-contextual-menu.tsx | 27 +++-- .../limits/operational-limits-groups-tabs.tsx | 103 ++++++++---------- 2 files changed, 63 insertions(+), 67 deletions(-) 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 Date: Mon, 10 Nov 2025 13:08:13 +0100 Subject: [PATCH 02/20] disableRipple Signed-off-by: Mathieu DEHARBE --- src/components/dialogs/limits/operational-limits-groups-tabs.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx index 98e4f3a5ab..cafadadc64 100644 --- a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx +++ b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx @@ -304,6 +304,7 @@ export const OperationalLimitsGroupsTabs = forwardRef handleOpenMenu(e, index)} key={opLg.id + index} + disableRipple label={ editingTabIndex === index ? ( Date: Mon, 10 Nov 2025 15:13:08 +0100 Subject: [PATCH 03/20] OperationalLimitsGroupTab + flexBasis: 'fit-content' Signed-off-by: Mathieu DEHARBE --- .../limits/operational-limits-group-tab.tsx | 95 +++++++++++++++++++ .../limits/operational-limits-groups-tabs.tsx | 86 ++++------------- 2 files changed, 115 insertions(+), 66 deletions(-) create mode 100644 src/components/dialogs/limits/operational-limits-group-tab.tsx diff --git a/src/components/dialogs/limits/operational-limits-group-tab.tsx b/src/components/dialogs/limits/operational-limits-group-tab.tsx new file mode 100644 index 0000000000..69f905f899 --- /dev/null +++ b/src/components/dialogs/limits/operational-limits-group-tab.tsx @@ -0,0 +1,95 @@ +import { useCallback, useEffect, useState } from 'react'; +import { OperationalLimitsGroupFormInfos } from '../network-modifications/line/modification/line-modification-type'; +import { Stack, TextField, Typography } from '@mui/material'; +import { FormattedMessage } from 'react-intl'; +import { grey } from '@mui/material/colors'; +import { APPLICABILITY } from '../../network/constants'; +import { LimitsPropertiesStack } from './limits-properties-stack'; +import { LIMITS_PROPERTIES, OPERATIONAL_LIMITS_GROUPS } from '../../utils/field-constants'; + +export interface OperationalLimitsGroupTabProps { + editing: boolean; + opLg: OperationalLimitsGroupFormInfos; + isAModification: boolean; + editionError: string; + parentFormName: string; + editedLimitGroupName: string; + index: number; + finishEditingLimitsGroup: () => void; + setEditedLimitGroupName: React.Dispatch>; +} + +export function OperationalLimitsGroupTab({ + editing, + opLg, + isAModification, + finishEditingLimitsGroup, + editionError, + parentFormName, + editedLimitGroupName, + setEditedLimitGroupName, + index, +}: Readonly) { + // control of the focus on the edited tab + const [editLimitGroupRef, setEditLimitGroupRef] = useState(); + useEffect(() => { + if (editing && editLimitGroupRef) { + editLimitGroupRef.focus(); + } + }, [editing, editLimitGroupRef]); + const onRefSet = useCallback((ref: HTMLInputElement) => { + setEditLimitGroupRef(ref); + }, []); + + const handleKeyDown = useCallback( + (event: React.KeyboardEvent) => { + if (event.key === 'Enter') { + finishEditingLimitsGroup(); + } + }, + [finishEditingLimitsGroup] + ); + + return ( + <> + {editing ? ( + ) => { + setEditedLimitGroupName(event.target.value); + }} + onKeyDown={handleKeyDown} + inputRef={onRefSet} + onBlur={() => finishEditingLimitsGroup()} + error={!!editionError} + helperText={!!editionError && } + size="small" + fullWidth + /> + ) : ( + + + {opLg.name} + {opLg?.applicability ? ( + + item.id === opLg.applicability) + ?.label + } + /> + + ) : ( + '' + )} + + {!isAModification && ( + + )} + + )} + + ); +} diff --git a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx index cafadadc64..1b850640ff 100644 --- a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx +++ b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx @@ -5,7 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { Stack, Tab, Tabs, TextField, Typography } from '@mui/material'; +import { Tab, Tabs } from '@mui/material'; import { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react'; import { APPLICABIlITY, @@ -26,16 +26,15 @@ import { useFormContext, useWatch } from 'react-hook-form'; import { CurrentLimitsData, OperationalLimitsGroup } from '../../../services/network-modification-types'; 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'; import { APPLICABILITY } from '../../network/constants'; import { type MuiStyles, NAME } from '@gridsuite/commons-ui'; -import { grey } from '@mui/material/colors'; import { OperationalLimitsGroupFormInfos } from '../network-modifications/line/modification/line-modification-type'; -import { LimitsPropertiesStack } from './limits-properties-stack'; +import { OperationalLimitsGroupTab } from './operational-limits-group-tab'; const limitsStyles = { - limitsBackground: { + tabBackground: { + flexBasis: 'fit-content', p: 1, minHeight: 60, }, @@ -112,17 +111,6 @@ export const OperationalLimitsGroupsTabs = forwardRef(); - const onRefSet = useCallback((ref: HTMLInputElement) => { - setEditLimitGroupRef(ref); - }, []); - useEffect(() => { - if (editingTabIndex !== -1 && editLimitGroupRef) { - editLimitGroupRef.focus(); - } - }, [editingTabIndex, editLimitGroupRef]); - const handleTabChange = useCallback( (event: React.SyntheticEvent, newValue: number): void => { // if editing do not change index @@ -136,6 +124,9 @@ export const OperationalLimitsGroupsTabs = forwardRef, index: number): void => { + if (!editable) { + return; + } event.preventDefault(); event.stopPropagation(); setIndexSelectedLimitSet(index); @@ -145,7 +136,7 @@ export const OperationalLimitsGroupsTabs = forwardRef { @@ -260,15 +251,6 @@ export const OperationalLimitsGroupsTabs = forwardRef { - if (event.key === 'Enter') { - finishEditingLimitsGroup(); - } - }, - [finishEditingLimitsGroup] - ); - const addNewLimitSet = useCallback(() => { const formName: string = `${parentFormName}.${OPERATIONAL_LIMITS_GROUPS}`; const operationalLimiSetGroups: OperationalLimitsGroup[] = getValues(formName); @@ -305,48 +287,20 @@ export const OperationalLimitsGroupsTabs = forwardRef handleOpenMenu(e, index)} key={opLg.id + index} disableRipple + sx={limitsStyles.tabBackground} label={ - editingTabIndex === index ? ( - ) => { - setEditedLimitGroupName(event.target.value); - }} - onKeyDown={handleKeyDown} - inputRef={onRefSet} - onBlur={() => finishEditingLimitsGroup()} - error={!!editionError} - helperText={!!editionError && } - size="small" - fullWidth - /> - ) : ( - - - {opLg.name} - {opLg?.applicability ? ( - - item.id === opLg.applicability - )?.label - } - /> - - ) : ( - '' - )} - - {!isAModification && ( - - )} - - ) + } - sx={limitsStyles.limitsBackground} /> ))} From 73e28907519cb4947a459a4c8d971e2ad5fdcd26 Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Wed, 12 Nov 2025 15:32:46 +0100 Subject: [PATCH 04/20] correction post merge main/conflicts Signed-off-by: Mathieu DEHARBE --- .../operational-limits-group-tab-label.tsx | 20 ---- .../limits/operational-limits-group-tab.tsx | 95 ------------------- .../limits/operational-limits-groups-tabs.tsx | 25 ++++- 3 files changed, 21 insertions(+), 119 deletions(-) delete mode 100644 src/components/dialogs/limits/operational-limits-group-tab.tsx diff --git a/src/components/dialogs/limits/operational-limits-group-tab-label.tsx b/src/components/dialogs/limits/operational-limits-group-tab-label.tsx index 75206764d4..3743a85ef0 100644 --- a/src/components/dialogs/limits/operational-limits-group-tab-label.tsx +++ b/src/components/dialogs/limits/operational-limits-group-tab-label.tsx @@ -10,26 +10,16 @@ import { FormattedMessage } from 'react-intl'; import { APPLICABILITY } from '../../network/constants'; import { OperationalLimitsGroupFormInfos } from '../network-modifications/line/modification/line-modification-type'; import { LimitsPropertiesStack } from './limits-properties-stack'; -import IconButton from '@mui/material/IconButton'; import { grey } from '@mui/material/colors'; -import MenuIcon from '@mui/icons-material/Menu'; interface OperationalLimitsGroupTabLabelProps { operationalLimitsGroup: OperationalLimitsGroupFormInfos; - showIconButton: boolean; - editable: boolean; limitsPropertiesName: string; - handleOpenMenu: (event: React.MouseEvent, index: number) => void; - index: number; } export function OperationalLimitsGroupTabLabel({ operationalLimitsGroup, - showIconButton, - editable, limitsPropertiesName, - handleOpenMenu, - index, }: Readonly) { return ( - - {showIconButton && ( - ) => handleOpenMenu(e, index)} - disabled={editable} - > - - - )} ); } diff --git a/src/components/dialogs/limits/operational-limits-group-tab.tsx b/src/components/dialogs/limits/operational-limits-group-tab.tsx deleted file mode 100644 index 69f905f899..0000000000 --- a/src/components/dialogs/limits/operational-limits-group-tab.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import { useCallback, useEffect, useState } from 'react'; -import { OperationalLimitsGroupFormInfos } from '../network-modifications/line/modification/line-modification-type'; -import { Stack, TextField, Typography } from '@mui/material'; -import { FormattedMessage } from 'react-intl'; -import { grey } from '@mui/material/colors'; -import { APPLICABILITY } from '../../network/constants'; -import { LimitsPropertiesStack } from './limits-properties-stack'; -import { LIMITS_PROPERTIES, OPERATIONAL_LIMITS_GROUPS } from '../../utils/field-constants'; - -export interface OperationalLimitsGroupTabProps { - editing: boolean; - opLg: OperationalLimitsGroupFormInfos; - isAModification: boolean; - editionError: string; - parentFormName: string; - editedLimitGroupName: string; - index: number; - finishEditingLimitsGroup: () => void; - setEditedLimitGroupName: React.Dispatch>; -} - -export function OperationalLimitsGroupTab({ - editing, - opLg, - isAModification, - finishEditingLimitsGroup, - editionError, - parentFormName, - editedLimitGroupName, - setEditedLimitGroupName, - index, -}: Readonly) { - // control of the focus on the edited tab - const [editLimitGroupRef, setEditLimitGroupRef] = useState(); - useEffect(() => { - if (editing && editLimitGroupRef) { - editLimitGroupRef.focus(); - } - }, [editing, editLimitGroupRef]); - const onRefSet = useCallback((ref: HTMLInputElement) => { - setEditLimitGroupRef(ref); - }, []); - - const handleKeyDown = useCallback( - (event: React.KeyboardEvent) => { - if (event.key === 'Enter') { - finishEditingLimitsGroup(); - } - }, - [finishEditingLimitsGroup] - ); - - return ( - <> - {editing ? ( - ) => { - setEditedLimitGroupName(event.target.value); - }} - onKeyDown={handleKeyDown} - inputRef={onRefSet} - onBlur={() => finishEditingLimitsGroup()} - error={!!editionError} - helperText={!!editionError && } - size="small" - fullWidth - /> - ) : ( - - - {opLg.name} - {opLg?.applicability ? ( - - item.id === opLg.applicability) - ?.label - } - /> - - ) : ( - '' - )} - - {!isAModification && ( - - )} - - )} - - ); -} diff --git a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx index 18403483ae..e7aaef4e77 100644 --- a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx +++ b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx @@ -31,6 +31,7 @@ import { APPLICABILITY } from '../../network/constants'; import { type MuiStyles, NAME } from '@gridsuite/commons-ui'; import { OperationalLimitsGroupFormInfos } from '../network-modifications/line/modification/line-modification-type'; import { OperationalLimitsGroupTabLabel } from './operational-limits-group-tab-label'; +import { FormattedMessage } from 'react-intl'; const limitsStyles = { tabBackground: { @@ -111,6 +112,17 @@ export const OperationalLimitsGroupsTabs = forwardRef(); + const onRefSet = useCallback((ref: HTMLInputElement) => { + setEditLimitGroupRef(ref); + }, []); + useEffect(() => { + if (editingTabIndex !== -1 && editLimitGroupRef) { + editLimitGroupRef.focus(); + } + }, [editingTabIndex, editLimitGroupRef]); + const handleTabChange = useCallback( (event: React.SyntheticEvent, newValue: number): void => { // if editing do not change index @@ -251,6 +263,15 @@ export const OperationalLimitsGroupsTabs = forwardRef { + if (event.key === 'Enter') { + finishEditingLimitsGroup(); + } + }, + [finishEditingLimitsGroup] + ); + const addNewLimitSet = useCallback(() => { const formName: string = `${parentFormName}.${OPERATIONAL_LIMITS_GROUPS}`; const operationalLimiSetGroups: OperationalLimitsGroup[] = getValues(formName); @@ -306,11 +327,7 @@ export const OperationalLimitsGroupsTabs = forwardRef ) } From 0af363a38e75c41356ccc454fbf1164d40a65995 Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Thu, 13 Nov 2025 16:37:49 +0100 Subject: [PATCH 05/20] corrections post review Signed-off-by: Mathieu DEHARBE --- .../dialogs/limits/limits-groups-contextual-menu.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/dialogs/limits/limits-groups-contextual-menu.tsx b/src/components/dialogs/limits/limits-groups-contextual-menu.tsx index 0c93ff1d5e..25c4c61df0 100644 --- a/src/components/dialogs/limits/limits-groups-contextual-menu.tsx +++ b/src/components/dialogs/limits/limits-groups-contextual-menu.tsx @@ -115,8 +115,8 @@ export function LimitsGroupsContextualMenu({ ]); const handleRenameTab = useCallback(() => { - activatedByMenuTabIndex != null && startEditingLimitsGroup(activatedByMenuTabIndex, null); - }, [activatedByMenuTabIndex, startEditingLimitsGroup]); + contextMenuCoordinates.tabIndex != null && startEditingLimitsGroup(contextMenuCoordinates.tabIndex, null); + }, [contextMenuCoordinates.tabIndex, startEditingLimitsGroup]); return ( + > From 83acfa4b63467c6512690f664b885592c8440f0d Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Fri, 14 Nov 2025 14:32:59 +0100 Subject: [PATCH 06/20] corrections post conflicts Signed-off-by: Mathieu DEHARBE --- .../dialogs/limits/operational-limits-group-tab-label.tsx | 6 ++---- .../dialogs/limits/operational-limits-groups-tabs.tsx | 4 +++- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/dialogs/limits/operational-limits-group-tab-label.tsx b/src/components/dialogs/limits/operational-limits-group-tab-label.tsx index 233211ff9a..5de5caae66 100644 --- a/src/components/dialogs/limits/operational-limits-group-tab-label.tsx +++ b/src/components/dialogs/limits/operational-limits-group-tab-label.tsx @@ -10,8 +10,6 @@ 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, OPERATIONAL_LIMITS_GROUPS } from '../../utils/field-constants'; @@ -19,14 +17,14 @@ import { LimitsFormSchema, OperationalLimitsGroupFormSchema } from './operationa interface OperationalLimitsGroupTabLabelProps { operationalLimitsGroup: OperationalLimitsGroupFormSchema; - showIconButton: boolean; - editable: boolean; limitsPropertiesName: string; + index: number; } export function OperationalLimitsGroupTabLabel({ operationalLimitsGroup, limitsPropertiesName, + index, }: Readonly) { const { errors } = useFormState({ name: `${LIMITS}.${OPERATIONAL_LIMITS_GROUPS}` }); diff --git a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx index f94e6e7f3f..99322e8af1 100644 --- a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx +++ b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx @@ -24,7 +24,7 @@ import { } from '../../utils/field-constants'; import { useFieldArray, useFormContext, useWatch } from 'react-hook-form'; import { OperationalLimitsGroup } from '../../../services/network-modification-types'; -import { LimitsGroupsContextualMenu } from './limits-groups-contextual-menu'; +import { ContextMenuCoordinates, LimitsGroupsContextualMenu } from './limits-groups-contextual-menu'; import { isBlankOrEmpty } from '../../utils/validation-functions'; import { tabStyles } from 'components/utils/tab-utils'; import { APPLICABILITY } from '../../network/constants'; @@ -32,6 +32,7 @@ import { type MuiStyles, NAME } from '@gridsuite/commons-ui'; import { OperationalLimitsGroupTabLabel } from './operational-limits-group-tab-label'; import { OperationalLimitsGroupFormSchema, TemporaryLimitFormSchema } from './operational-limits-groups-types'; import { CurrentLimitsData } from 'services/study/network-map.type'; +import { FormattedMessage } from 'react-intl'; const limitsStyles = { tabBackground: { @@ -336,6 +337,7 @@ export const OperationalLimitsGroupsTabs = forwardRef ) } From dcd66219464aa3fde237374b40dd82ffa1eedc00 Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Fri, 14 Nov 2025 14:47:29 +0100 Subject: [PATCH 07/20] specific limitsStyles.tabs Signed-off-by: Mathieu DEHARBE --- .../limits/operational-limits-groups-tabs.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx index 99322e8af1..8028f41bdc 100644 --- a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx +++ b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx @@ -26,7 +26,7 @@ import { useFieldArray, useFormContext, useWatch } from 'react-hook-form'; import { OperationalLimitsGroup } from '../../../services/network-modification-types'; import { ContextMenuCoordinates, LimitsGroupsContextualMenu } from './limits-groups-contextual-menu'; import { isBlankOrEmpty } from '../../utils/validation-functions'; -import { tabStyles } from 'components/utils/tab-utils'; +import { stylesLayout } from 'components/utils/tab-utils'; import { APPLICABILITY } from '../../network/constants'; import { type MuiStyles, NAME } from '@gridsuite/commons-ui'; import { OperationalLimitsGroupTabLabel } from './operational-limits-group-tab-label'; @@ -35,6 +35,15 @@ import { CurrentLimitsData } from 'services/study/network-map.type'; import { FormattedMessage } from 'react-intl'; const limitsStyles = { + tabs: () => ({ + ...stylesLayout.listDisplay, + '.MuiTab-root.MuiButtonBase-root': { + textTransform: 'none', //tab text not upper-case + textAlign: 'left', + alignItems: 'stretch', + p: 0, + }, + }), tabBackground: { flexBasis: 'fit-content', p: 1, @@ -309,7 +318,7 @@ export const OperationalLimitsGroupsTabs = forwardRef {limitsGroups.map((opLg: OperationalLimitsGroupFormSchema, index: number) => ( From 9b4ae9dfb19b66c4755ec9bfb92f620e4e7bdb14 Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Fri, 14 Nov 2025 15:09:02 +0100 Subject: [PATCH 08/20] grey line on the right side of tabs Signed-off-by: Mathieu DEHARBE --- .../dialogs/limits/operational-limits-groups-tabs.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx index 8028f41bdc..5a4697c9e9 100644 --- a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx +++ b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx @@ -37,6 +37,9 @@ import { FormattedMessage } from 'react-intl'; const limitsStyles = { tabs: () => ({ ...stylesLayout.listDisplay, + '& .MuiTab-root': { + borderRight: '1px solid grey', + }, '.MuiTab-root.MuiButtonBase-root': { textTransform: 'none', //tab text not upper-case textAlign: 'left', From 9ff2acd5b1575243c03657a20809b774ac8d3bf1 Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Fri, 14 Nov 2025 16:01:48 +0100 Subject: [PATCH 09/20] limit limit sets name size in tab Signed-off-by: Mathieu DEHARBE --- .../operational-limits-group-tab-label.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/dialogs/limits/operational-limits-group-tab-label.tsx b/src/components/dialogs/limits/operational-limits-group-tab-label.tsx index 5de5caae66..d6fb8b75ce 100644 --- a/src/components/dialogs/limits/operational-limits-group-tab-label.tsx +++ b/src/components/dialogs/limits/operational-limits-group-tab-label.tsx @@ -5,7 +5,7 @@ * 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 } from '@mui/material'; import { FormattedMessage } from 'react-intl'; import { APPLICABILITY } from '../../network/constants'; import { LimitsPropertiesStack } from './limits-properties-stack'; @@ -37,9 +37,19 @@ export function OperationalLimitsGroupTabLabel({ > - - {operationalLimitsGroup.name} - + + + {operationalLimitsGroup.name} + + {operationalLimitsGroup?.applicability ? ( Date: Mon, 17 Nov 2025 14:12:19 +0100 Subject: [PATCH 10/20] tabs styles / scroll Signed-off-by: Mathieu DEHARBE --- .../operational-limits-group-tab-label.tsx | 4 ++-- .../limits/operational-limits-groups-tabs.tsx | 16 +++++++++++----- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/components/dialogs/limits/operational-limits-group-tab-label.tsx b/src/components/dialogs/limits/operational-limits-group-tab-label.tsx index d6fb8b75ce..b63c3f033f 100644 --- a/src/components/dialogs/limits/operational-limits-group-tab-label.tsx +++ b/src/components/dialogs/limits/operational-limits-group-tab-label.tsx @@ -9,7 +9,7 @@ import { Box, FormHelperText, Stack, Typography, Tooltip } 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 { blue, grey, red } from '@mui/material/colors'; import { useFormState } from 'react-hook-form'; import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined'; import { LIMITS, OPERATIONAL_LIMITS_GROUPS } from '../../utils/field-constants'; @@ -40,7 +40,7 @@ export function OperationalLimitsGroupTabLabel({ ({ ...stylesLayout.listDisplay, + maxHeight: '50vh', + overflow: 'auto', + transition: 'transform 0.3s ease-in-out', '& .MuiTab-root': { borderRight: '1px solid grey', }, + '& .MuiTabs-indicator': { + borderRight: `3px solid ${blue[700]}`, + }, '.MuiTab-root.MuiButtonBase-root': { - textTransform: 'none', //tab text not upper-case + textTransform: 'none', textAlign: 'left', alignItems: 'stretch', p: 0, @@ -315,13 +322,12 @@ export const OperationalLimitsGroupsTabs = forwardRef ({ addNewLimitSet })); return ( - <> + {limitsGroups.map((opLg: OperationalLimitsGroupFormSchema, index: number) => ( @@ -370,7 +376,7 @@ export const OperationalLimitsGroupsTabs = forwardRef - + ); } ); From 8173f5f9dd75e86d8283d2c279a496727bdaea71 Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Mon, 17 Nov 2025 15:53:41 +0100 Subject: [PATCH 11/20] updates scrollbar after Stephane remarks Signed-off-by: Mathieu DEHARBE --- .../limits/operational-limits-group-tab-label.tsx | 2 +- .../limits/operational-limits-groups-tabs.tsx | 13 ++++++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/dialogs/limits/operational-limits-group-tab-label.tsx b/src/components/dialogs/limits/operational-limits-group-tab-label.tsx index b63c3f033f..e1817d3559 100644 --- a/src/components/dialogs/limits/operational-limits-group-tab-label.tsx +++ b/src/components/dialogs/limits/operational-limits-group-tab-label.tsx @@ -40,7 +40,7 @@ export function OperationalLimitsGroupTabLabel({ ({ ...stylesLayout.listDisplay, maxHeight: '50vh', - overflow: 'auto', + height: '100%', + borderRight: 1, + borderColor: 'divider', transition: 'transform 0.3s ease-in-out', - '& .MuiTab-root': { - borderRight: '1px solid grey', - }, '& .MuiTabs-indicator': { borderRight: `3px solid ${blue[700]}`, }, @@ -322,13 +321,13 @@ export const OperationalLimitsGroupsTabs = forwardRef ({ addNewLimitSet })); return ( - + {limitsGroups.map((opLg: OperationalLimitsGroupFormSchema, index: number) => ( Date: Mon, 17 Nov 2025 17:07:07 +0100 Subject: [PATCH 12/20] tab icon on the button + hover Signed-off-by: Mathieu DEHARBE --- .../operational-limits-group-tab-label.tsx | 14 ++++++++++++-- .../limits/operational-limits-groups-tabs.tsx | 17 ++++++++++++----- 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/src/components/dialogs/limits/operational-limits-group-tab-label.tsx b/src/components/dialogs/limits/operational-limits-group-tab-label.tsx index e1817d3559..a0cbab05ea 100644 --- a/src/components/dialogs/limits/operational-limits-group-tab-label.tsx +++ b/src/components/dialogs/limits/operational-limits-group-tab-label.tsx @@ -5,25 +5,30 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { Box, FormHelperText, Stack, Typography, Tooltip } 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 { blue, grey, red } from '@mui/material/colors'; +import { grey, red } from '@mui/material/colors'; import { useFormState } from 'react-hook-form'; import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined'; import { LIMITS, 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; limitsPropertiesName: string; + handleOpenMenu: (event: React.MouseEvent, index: number) => void; index: number; } export function OperationalLimitsGroupTabLabel({ operationalLimitsGroup, + showIconButton, limitsPropertiesName, + handleOpenMenu, index, }: Readonly) { const { errors } = useFormState({ name: `${LIMITS}.${OPERATIONAL_LIMITS_GROUPS}` }); @@ -71,6 +76,11 @@ export function OperationalLimitsGroupTabLabel({ )} + {showIconButton && ( + handleOpenMenu(e, index)}> + + + )} ); } diff --git a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx index e803406fd1..4eec938454 100644 --- a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx +++ b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx @@ -5,7 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { Box, Tab, Tabs, TextField } from '@mui/material'; +import { Tab, Tabs, TextField } from '@mui/material'; import { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react'; import { APPLICABIlITY, @@ -54,7 +54,10 @@ const limitsStyles = { }, }), tabBackground: { - flexBasis: 'fit-content', + '&:hover': { + backgroundColor: 'rgba(25, 118, 210, 0.05)', // blue[700] + }, + width: '100%', p: 1, minHeight: 60, }, @@ -113,6 +116,7 @@ export const OperationalLimitsGroupsTabs = forwardRef { + const [hoveredRowIndex, setHoveredRowIndex] = useState(-1); const [editingTabIndex, setEditingTabIndex] = useState(-1); const [contextMenuCoordinates, setContextMenuCoordinates] = useState({ x: null, @@ -163,7 +167,7 @@ export const OperationalLimitsGroupsTabs = forwardRef, index: number): void => { + (event: React.MouseEvent, index: number): void => { if (!editable) { return; } @@ -321,7 +325,7 @@ export const OperationalLimitsGroupsTabs = forwardRef ({ addNewLimitSet })); return ( - + <> {limitsGroups.map((opLg: OperationalLimitsGroupFormSchema, index: number) => ( setHoveredRowIndex(index)} onContextMenu={(e) => handleOpenMenu(e, index)} key={opLg.id + index} disableRipple @@ -353,7 +358,9 @@ export const OperationalLimitsGroupsTabs = forwardRef ) @@ -375,7 +382,7 @@ export const OperationalLimitsGroupsTabs = forwardRef - + ); } ); From 18b2a28fa93791cc11f6c1fec2a0ffb2acc5a005 Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Mon, 17 Nov 2025 17:18:32 +0100 Subject: [PATCH 13/20] override tabBackground maxWidth Signed-off-by: Mathieu DEHARBE --- src/components/dialogs/limits/operational-limits-groups-tabs.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx index 4eec938454..5a5e678e58 100644 --- a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx +++ b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx @@ -57,6 +57,7 @@ const limitsStyles = { '&:hover': { backgroundColor: 'rgba(25, 118, 210, 0.05)', // blue[700] }, + maxWidth: 600, width: '100%', p: 1, minHeight: 60, From eb56dd878c077e31d0d61f8ed5fa41843e4ced61 Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Tue, 25 Nov 2025 15:24:43 +0100 Subject: [PATCH 14/20] corrections post merge conflicts Signed-off-by: Mathieu DEHARBE --- .../limits/limits-groups-contextual-menu.tsx | 1 - .../operational-limits-group-tab-label.tsx | 36 ++++++------- .../operational-limits-groups-styles.ts | 26 ++++++++- .../limits/operational-limits-groups-tabs.tsx | 54 +------------------ 4 files changed, 44 insertions(+), 73 deletions(-) diff --git a/src/components/dialogs/limits/limits-groups-contextual-menu.tsx b/src/components/dialogs/limits/limits-groups-contextual-menu.tsx index a70ebbd087..0412270dc8 100644 --- a/src/components/dialogs/limits/limits-groups-contextual-menu.tsx +++ b/src/components/dialogs/limits/limits-groups-contextual-menu.tsx @@ -30,7 +30,6 @@ export interface LimitsGroupsContextualMenuProps { setIndexSelectedLimitSet: React.Dispatch>; handleCloseMenu: () => void; contextMenuCoordinates: ContextMenuCoordinates; - startEditingLimitsGroup: (index: number, name: string | null) => void; selectedLimitsGroups1: string; selectedLimitsGroups2: string; currentLimitsToModify: CurrentLimitsData[]; diff --git a/src/components/dialogs/limits/operational-limits-group-tab-label.tsx b/src/components/dialogs/limits/operational-limits-group-tab-label.tsx index 274c5c4a2d..3cc6f5c004 100644 --- a/src/components/dialogs/limits/operational-limits-group-tab-label.tsx +++ b/src/components/dialogs/limits/operational-limits-group-tab-label.tsx @@ -44,24 +44,24 @@ export function OperationalLimitsGroupTabLabel({ - - - {operationalLimitsGroup.name} - - {hasError && ( - - - - )} - + + + {operationalLimitsGroup.name} + + {hasError && ( + + + + )} + {operationalLimitsGroup?.applicability ? ( diff --git a/src/components/dialogs/limits/operational-limits-groups-styles.ts b/src/components/dialogs/limits/operational-limits-groups-styles.ts index d7d3856fc6..d9cd350e2d 100644 --- a/src/components/dialogs/limits/operational-limits-groups-styles.ts +++ b/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: '50vh', + 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, }, diff --git a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx index bbdc9f5d2f..4960e12c4f 100644 --- a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx +++ b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx @@ -16,62 +16,12 @@ import { import { useFieldArray, useFormContext, useWatch } from 'react-hook-form'; import { OperationalLimitsGroup } from '../../../services/network-modification-types'; import { ContextMenuCoordinates, LimitsGroupsContextualMenu } from './limits-groups-contextual-menu'; -import { isBlankOrEmpty } from '../../utils/validation-functions'; -import { stylesLayout } from 'components/utils/tab-utils'; -import { APPLICABILITY } from '../../network/constants'; -import { type MuiStyles, NAME } from '@gridsuite/commons-ui'; -import { LimitsGroupsContextualMenu } from './limits-groups-contextual-menu'; -import { tabStyles } from 'components/utils/tab-utils'; import { OperationalLimitsGroupTabLabel } from './operational-limits-group-tab-label'; import { OperationalLimitsGroupFormSchema } from './operational-limits-groups-types'; import { CurrentLimitsData } from 'services/study/network-map.type'; -import { FormattedMessage } from 'react-intl'; -import { blue } from '@mui/material/colors'; import { generateEmptyOperationalLimitsGroup, generateUniqueId } from './operational-limits-groups-utils'; import { limitsStyles } from './operational-limits-groups-styles'; -const limitsStyles = { - tabs: () => ({ - ...stylesLayout.listDisplay, - maxHeight: '50vh', - 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, - }, - copyLimitsToRightBackground: { - height: 200, - display: 'flex', - }, - copyLimitsToLeftBackground: { - height: '50%', - }, - copyLimitsButtons: { - alignSelf: 'flex-end', - minWidth: '0px', - height: 'auto', - padding: '1', - }, -} as const satisfies MuiStyles; - export interface OperationalLimitsGroupsTabsProps { parentFormName: string; limitsGroups: OperationalLimitsGroupFormSchema[]; @@ -202,8 +152,7 @@ export const OperationalLimitsGroupsTabs = forwardRef Date: Tue, 25 Nov 2025 15:29:53 +0100 Subject: [PATCH 15/20] remove unused variables Signed-off-by: Mathieu DEHARBE --- .../limits/operational-limits-groups-tabs.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx index 4960e12c4f..b5f497e1e2 100644 --- a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx +++ b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx @@ -6,7 +6,7 @@ */ import { Tab, Tabs } from '@mui/material'; -import { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react'; +import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react'; import { LIMITS_PROPERTIES, OPERATIONAL_LIMITS_GROUPS, @@ -44,14 +44,11 @@ export const OperationalLimitsGroupsTabs = forwardRef { const [hoveredRowIndex, setHoveredRowIndex] = useState(-1); - const [editingTabIndex, setEditingTabIndex] = useState(-1); const [contextMenuCoordinates, setContextMenuCoordinates] = useState({ x: null, y: null, tabIndex: null, }); - const [editedLimitGroupName, setEditedLimitGroupName] = useState(''); - const [editionError, setEditionError] = useState(''); const { getValues } = useFormContext(); const operationalLimitsGroupsFormName: string = `${parentFormName}.${OPERATIONAL_LIMITS_GROUPS}`; const { @@ -112,12 +109,12 @@ export const OperationalLimitsGroupsTabs = forwardRef { const formName: string = `${parentFormName}.${OPERATIONAL_LIMITS_GROUPS}`; - const operationalLimiSetGroups: OperationalLimitsGroup[] = getValues(formName); + const operationalLimitSetGroups: OperationalLimitsGroup[] = getValues(formName); let name = 'DEFAULT'; // Try to generate unique name - if (operationalLimiSetGroups?.length > 0) { - const ids: string[] = operationalLimiSetGroups.map((l) => l.name); + if (operationalLimitSetGroups?.length > 0) { + const ids: string[] = operationalLimitSetGroups.map((l) => l.name); name = generateUniqueId('DEFAULT', ids); } prependEmptyOperationalLimitsGroup(name); @@ -127,7 +124,7 @@ export const OperationalLimitsGroupsTabs = forwardRef ({ addNewLimitSet })); const handleTabChange = useCallback( - (event: React.SyntheticEvent, newValue: number): void => { + (_event: React.SyntheticEvent, newValue: number): void => { setIndexSelectedLimitSet(newValue); }, [setIndexSelectedLimitSet] From 1d7280f279d196a0d40b3a0dfcc392d828c66a7f Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Tue, 25 Nov 2025 17:16:33 +0100 Subject: [PATCH 16/20] post review Signed-off-by: Mathieu DEHARBE --- src/components/dialogs/limits/limits-pane.tsx | 8 ++++---- .../limits/operational-limits-group-tab-label.tsx | 9 ++++++++- .../dialogs/limits/operational-limits-groups-styles.ts | 2 +- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/dialogs/limits/limits-pane.tsx b/src/components/dialogs/limits/limits-pane.tsx index 5eec9511ca..bd411e5e38 100644 --- a/src/components/dialogs/limits/limits-pane.tsx +++ b/src/components/dialogs/limits/limits-pane.tsx @@ -5,7 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { Box, Grid } from '@mui/material'; +import { Grid } from '@mui/material'; import { ENABLE_OLG_MODIFICATION, LIMITS, @@ -141,17 +141,17 @@ export function LimitsPane({ {/* limits */} - - + diff --git a/src/components/dialogs/limits/operational-limits-group-tab-label.tsx b/src/components/dialogs/limits/operational-limits-group-tab-label.tsx index 3cc6f5c004..54ad6783c5 100644 --- a/src/components/dialogs/limits/operational-limits-group-tab-label.tsx +++ b/src/components/dialogs/limits/operational-limits-group-tab-label.tsx @@ -39,7 +39,14 @@ export function OperationalLimitsGroupTabLabel({ return ( diff --git a/src/components/dialogs/limits/operational-limits-groups-styles.ts b/src/components/dialogs/limits/operational-limits-groups-styles.ts index d9cd350e2d..39ab02ef4b 100644 --- a/src/components/dialogs/limits/operational-limits-groups-styles.ts +++ b/src/components/dialogs/limits/operational-limits-groups-styles.ts @@ -12,7 +12,7 @@ import { blue } from '@mui/material/colors'; export const limitsStyles = { tabs: () => ({ ...stylesLayout.listDisplay, - maxHeight: '50vh', + maxHeight: '45vh', height: '100%', borderRight: 1, borderColor: 'divider', From 0f85760d297d48135b9947aa666410fa49ea4d7f Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Wed, 26 Nov 2025 11:16:21 +0100 Subject: [PATCH 17/20] remove bad Grid Signed-off-by: Mathieu DEHARBE --- src/components/dialogs/limits/limits-pane.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/dialogs/limits/limits-pane.tsx b/src/components/dialogs/limits/limits-pane.tsx index bd411e5e38..a25500d9f0 100644 --- a/src/components/dialogs/limits/limits-pane.tsx +++ b/src/components/dialogs/limits/limits-pane.tsx @@ -5,7 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { Grid } from '@mui/material'; +import { Box, Grid } from '@mui/material'; import { ENABLE_OLG_MODIFICATION, LIMITS, @@ -141,7 +141,7 @@ export function LimitsPane({ {/* limits */} - - + From 47535374fb1c15d0061a83a70e6faf88396029a9 Mon Sep 17 00:00:00 2001 From: Mathieu DEHARBE Date: Thu, 27 Nov 2025 16:09:44 +0100 Subject: [PATCH 18/20] limit side pane style Signed-off-by: Mathieu DEHARBE --- src/components/dialogs/limits/limits-pane.tsx | 3 --- .../limits/limits-properties-side-stack.tsx | 13 +++++++------ .../dialogs/limits/limits-side-pane.tsx | 16 +++++++--------- .../limits/operational-limits-groups-tabs.tsx | 6 +++--- .../dialogs/limits/temporary-limits-table.tsx | 6 +----- 5 files changed, 18 insertions(+), 26 deletions(-) diff --git a/src/components/dialogs/limits/limits-pane.tsx b/src/components/dialogs/limits/limits-pane.tsx index a25500d9f0..b7208b9998 100644 --- a/src/components/dialogs/limits/limits-pane.tsx +++ b/src/components/dialogs/limits/limits-pane.tsx @@ -152,9 +152,6 @@ export function LimitsPane({ - - - + {limitsProperties?.map((property: LimitsProperty, index: number) => ( ))} {!isEditing && ( - setIsEditing(true)} + startIcon={} disabled={disabled} > - - + + )} {isEditing && !disabled ? ( diff --git a/src/components/dialogs/limits/limits-side-pane.tsx b/src/components/dialogs/limits/limits-side-pane.tsx index d700084afb..880e7a08be 100644 --- a/src/components/dialogs/limits/limits-side-pane.tsx +++ b/src/components/dialogs/limits/limits-side-pane.tsx @@ -225,6 +225,10 @@ export function LimitsSidePane({ return ( + {name && ( )} - - - - - + + ); } diff --git a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx index b5f497e1e2..7dbf76b06f 100644 --- a/src/components/dialogs/limits/operational-limits-groups-tabs.tsx +++ b/src/components/dialogs/limits/operational-limits-groups-tabs.tsx @@ -5,7 +5,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { Tab, Tabs } from '@mui/material'; +import { Grid, Tab, Tabs } from '@mui/material'; import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react'; import { LIMITS_PROPERTIES, @@ -131,7 +131,7 @@ export const OperationalLimitsGroupsTabs = forwardRef + - + ); } ); diff --git a/src/components/dialogs/limits/temporary-limits-table.tsx b/src/components/dialogs/limits/temporary-limits-table.tsx index c2dc11d38b..499fbcc1e8 100644 --- a/src/components/dialogs/limits/temporary-limits-table.tsx +++ b/src/components/dialogs/limits/temporary-limits-table.tsx @@ -157,11 +157,7 @@ function TemporaryLimitsTable({ return ( - + {renderTableHead()} {renderTableBody()} From c7b5a0d1d72ee57fbf1fbeacd1efc3ce078f6ce9 Mon Sep 17 00:00:00 2001 From: Mathieu Deharbe <148252167+Mathieu-Deharbe@users.noreply.github.com> Date: Fri, 28 Nov 2025 09:28:54 +0100 Subject: [PATCH 19/20] better css syntax Co-authored-by: Florent MILLOT <75525996+flomillot@users.noreply.github.com> --- src/components/dialogs/limits/limits-side-pane.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/dialogs/limits/limits-side-pane.tsx b/src/components/dialogs/limits/limits-side-pane.tsx index 880e7a08be..3f0fc89c41 100644 --- a/src/components/dialogs/limits/limits-side-pane.tsx +++ b/src/components/dialogs/limits/limits-side-pane.tsx @@ -236,7 +236,7 @@ export function LimitsSidePane({ justifyContent="flex-start" alignItems="stretch" spacing={2} - sx={{ paddingBottom: 1, paddingTop: 1 }} + sx={{ paddingY: 1 }} > )} - + Date: Fri, 28 Nov 2025 10:30:11 +0100 Subject: [PATCH 20/20] eslint Signed-off-by: Mathieu DEHARBE --- src/components/dialogs/limits/limits-side-pane.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/dialogs/limits/limits-side-pane.tsx b/src/components/dialogs/limits/limits-side-pane.tsx index 3f0fc89c41..bcbf441390 100644 --- a/src/components/dialogs/limits/limits-side-pane.tsx +++ b/src/components/dialogs/limits/limits-side-pane.tsx @@ -231,13 +231,7 @@ export function LimitsSidePane({ /> {name && ( - +