Refactor TreeTab code organization (#3199)

* refactor(GridLayoutPanel): rename 'diagrams' folder to 'grid-layout'
rename `DiagramGridLayout` component to `GridLayoutPanel` and css, translation etc associated
* chore(grid-layout): code organization in cards/ folder and diagrams/
refactor(DiagramGridHeader): renamed `GridLayoutToolbar`
* refactor(): move and rename `countOpenedNadDiagrams` to  diagram-utils.ts as `isThereTooManyOpenedNadDiagrams`
fix(): some types imports
* refactor(NetworkMapTab): renamed NetworkMapPanel
* refactor(MapViewer): renamed TreeTab
* fix(DiagramHeader): fix sonar issue : Optional chaining should be preferred typescript:S6582
* fix(): fix sonar issue : Imports from the same module should be merged typescript:S3863
* fix(): fix sonar issue : React props should be read-only typescript:S6759

Signed-off-by: sBouzols <[email protected]>

Author: sBouzols

src/components/diagrams/diagram-grid-layout-utils.ts

@@ -24,7 +24,7 @@ import {
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useIntl } from 'react-intl';
-import PositionDiagramPane from '../../diagrams/singleLineDiagram/position-diagram-pane';
+import PositionDiagramPane from '../../grid-layout/cards/diagrams/singleLineDiagram/positionDiagram/position-diagram-pane';
 import { isNodeBuilt } from '../../graph/util/model-functions';
 import { CONNECTION_DIRECTIONS, getConnectionDirectionLabel } from '../../network/constants';
 import {

src/components/diagrams/diagram-utils.ts

@@ -11,7 +11,7 @@ import GridItem from '../../../commons/grid-item';
 import { getObjectId } from '../../../../utils/utils';
 import { Box, Grid, TextField, Tooltip } from '@mui/material';
 import { InfoOutlined } from '@mui/icons-material';
-import PositionDiagramPane from '../../../../diagrams/singleLineDiagram/position-diagram-pane';
+import PositionDiagramPane from '../../../../grid-layout/cards/diagrams/singleLineDiagram/positionDiagram/position-diagram-pane';
 import { useCallback, useState } from 'react';
 import Button from '@mui/material/Button';
 import { FormattedMessage, useIntl } from 'react-intl';

src/components/dialogs/connectivity/connectivity-form.tsx

@@ -10,7 +10,7 @@ import { SECTION_COUNT } from 'components/utils/field-constants';
 import GridItem from '../../commons/grid-item';
 import { Box, Grid, TextField, Tooltip } from '@mui/material';
 import { InfoOutlined } from '@mui/icons-material';
-import PositionDiagramPane from '../../../diagrams/singleLineDiagram/position-diagram-pane';
+import PositionDiagramPane from '../../../grid-layout/cards/diagrams/singleLineDiagram/positionDiagram/position-diagram-pane';
 import { useCallback, useState } from 'react';
 import Button from '@mui/material/Button';
 import { FormattedMessage, useIntl } from 'react-intl';

src/components/dialogs/network-modifications/coupling-device/modification/create-coupling-device-form.tsx

@@ -23,7 +23,7 @@ import { AutocompleteInput, Option, SelectInput } from '@gridsuite/commons-ui';
 import GridSection from '../../../commons/grid-section';
 import { isNodeBuilt } from 'components/graph/util/model-functions';
 import { InfoOutlined } from '@mui/icons-material';
-import PositionDiagramPane from 'components/diagrams/singleLineDiagram/position-diagram-pane';
+import PositionDiagramPane from 'components/grid-layout/cards/diagrams/singleLineDiagram/positionDiagram/position-diagram-pane';
 import { UUID } from 'crypto';
 import { POSITION_NEW_SECTION_SIDE, SWITCH_TYPE } from '../../../../network/constants';
 import { useFormContext, useWatch } from 'react-hook-form';

src/components/dialogs/network-modifications/voltage-level-topology-creation/create-voltage-level-topology-form.tsx

@@ -25,7 +25,7 @@ export const cardStyles = {
             theme.palette.mode === 'light'
                 ? `1px solid ${theme.palette.grey[500]}`
                 : `1px solid ${theme.palette.grey[800]}`,
-        borderTop: 'none', // remove the top border to avoid double border with CardHeader
+        borderTop: 'none', // remove the top border to avoid double border with CustomCardHeader
         borderBottom: 'none',
     }),
     diagramContainer: (theme: Theme) => ({
@@ -38,6 +38,6 @@ export const cardStyles = {
             theme.palette.mode === 'light'
                 ? `1px solid ${theme.palette.grey[500]}`
                 : `1px solid ${theme.palette.grey[800]}`,
-        borderTop: 'none', // remove the top border to avoid double border with CardHeader
+        borderTop: 'none', // remove the top border to avoid double border with CustomCardHeader
     }),
 };

src/components/dialogs/network-modifications/voltage-level/section/create-voltage-level-section-form.tsx

@@ -40,13 +40,13 @@ const styles = {
     }),
 };
 
-interface CardHeaderProps {
+interface CustomCardHeaderProps {
     title?: React.ReactNode;
     onClose?: () => void;
     blinking?: boolean;
 }
 
-const CardHeader: React.FC<CardHeaderProps> = ({ title, onClose, blinking }) => {
+const CustomCardHeader: React.FC<CustomCardHeaderProps> = ({ title, onClose, blinking }) => {
     return (
         <Box sx={mergeSx(styles.header, blinking ? styles.blink : undefined)}>
             <OverflowableText
@@ -70,4 +70,4 @@ const CardHeader: React.FC<CardHeaderProps> = ({ title, onClose, blinking }) =>
     );
 };
 
-export default CardHeader;
+export default CustomCardHeader;

src/components/diagrams/card-styles.ts renamed to src/components/grid-layout/cards/card-styles.ts

@@ -7,17 +7,16 @@
 
 import { Box } from '@mui/material';
 import { forwardRef, MouseEventHandler, Ref, TouchEventHandler, useCallback, useMemo, useState } from 'react';
-import CardHeader from './card-header';
-import { Diagram, DiagramParams, DiagramType } from './diagram.type';
+import CustomCardHeader from '../custom-card-header';
+import { Diagram, DiagramAdditionalMetadata, DiagramParams, DiagramType } from './diagram.type';
 import { UUID } from 'crypto';
 import AlertCustomMessageNode from 'components/utils/alert-custom-message-node';
 import SingleLineDiagramContent from './singleLineDiagram/single-line-diagram-content';
 import NetworkAreaDiagramContent from './networkAreaDiagram/network-area-diagram-content';
 import { ElementType, EquipmentType, mergeSx } from '@gridsuite/commons-ui';
 import { DiagramMetadata, SLDMetadata } from '@powsybl/network-viewer';
-import { DiagramAdditionalMetadata } from './diagram-common';
 import { useIntl } from 'react-intl';
-import { cardStyles } from './card-styles';
+import { cardStyles } from '../card-styles';
 import { v4 } from 'uuid';
 
 interface ReactGridLayoutCustomChildComponentProps {
@@ -181,7 +180,7 @@ export const DiagramCard = forwardRef((props: DiagramCardProps, ref: Ref<HTMLDiv
 
     return (
         <Box sx={mergeSx(style, cardStyles.card)} ref={ref} {...otherProps}>
-            <CardHeader title={cardTitle} blinking={blinking} onClose={onClose} />
+            <CustomCardHeader title={cardTitle} blinking={blinking} onClose={onClose} />
             {errorMessage ? (
                 <>
                     <AlertCustomMessageNode message={errorMessage} noMargin style={cardStyles.alertMessage} />

src/components/diagrams/card-header.tsx renamed to src/components/grid-layout/cards/custom-card-header.tsx

@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2022, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Theme } from '@mui/material';
+import { INVALID_LOADFLOW_OPACITY } from 'utils/colors';
+
+export const styles = {
+    divDiagram: {
+        '& #nad-viewer, & #svg-container': {
+            /* This is a patch to alter the divs generated by NetworkAreaDiagramViewer(), which sizes management is broken.
+             * It seems to be linked to the code introduced in https://github.com/powsybl/powsybl-network-viewer/pull/161
+             */
+            height: '100%',
+            width: '100%',
+        },
+        '& svg': {
+            display: 'block',
+            width: '100%',
+            height: '100%',
+        },
+        overflow: 'hidden',
+    },
+    divNetworkAreaDiagram: (theme: Theme) => ({
+        height: '100%',
+        '& .nad-label-box': {
+            color: theme.palette.text.primary,
+            fontFamily: theme.typography.fontFamily,
+        },
+    }),
+    divSingleLineDiagram: (theme: Theme) => ({
+        '& polyline': {
+            pointerEvents: 'none',
+        },
+        '& .sld-label, .sld-graph-label, .sld-legend': {
+            fill: theme.palette.text.primary,
+            fontFamily: theme.typography.fontFamily,
+        },
+        '& .sld-disconnector:not(.sld-fictitious), :not(.sld-breaker):not(.sld-disconnector):not(.sld-load-break-switch):not(.sld-lock .sld-disconnected):not(.sld-flash .sld-disconnected).sld-disconnected, .sld-feeder-disconnected, .sld-feeder-disconnected-connected':
+            {
+                stroke: theme.palette.text.primary,
+            },
+        '& .sld-flash, .sld-lock': {
+            stroke: 'none',
+            fill: theme.palette.text.primary,
+        },
+        '& .arrow': {
+            fill: theme.palette.text.primary,
+        },
+    }),
+    divDiagramReadOnly: {
+        '& .sld-in .sld-label': {
+            display: 'none',
+        },
+        '& .sld-out .sld-label': {
+            display: 'none',
+        },
+        '& .sld-arrow-in': {
+            display: 'none',
+        },
+        '& .sld-arrow-out': {
+            display: 'none',
+        },
+        '& .arrow': {
+            pointerEvents: 'none',
+        },
+    },
+    divDiagramInvalid: {
+        '& .sld-active-power polygon, & .sld-reactive-power polygon, & .sld-voltage polygon, & .sld-angle polygon': {
+            opacity: INVALID_LOADFLOW_OPACITY,
+        },
+        '& .sld-active-power text, & .sld-reactive-power text, & .sld-voltage text, & .sld-angle text, & .sld-voltage.sld-bus-legend-info, & .sld-angle.sld-bus-legend-info':
+            {
+                fill: '#787F81',
+            },
+        '& .sld-overload, & .sld-vl-overvoltage, & .sld-vl-undervoltage': {
+            animation: 'none !important',
+        },
+        '& .nad-active': {
+            fill: '#787F81', // Text color of the values and arrows on lines (same color in light and dark mode)
+        },
+        '& .nad-bus-descr': {
+            color: '#787F81',
+        },
+        '& .nad-branch-edges .nad-overload .nad-edge-path, & .nad-vl-nodes .nad-overvoltage, & .nad-vl-nodes .nad-undervoltage':
+            {
+                animation: 'none !important',
+            },
+    },
+    paperBorders: (theme: Theme) => ({
+        borderLeft: '1px solid ' + theme.palette.action.disabled,
+        borderBottom: '1px solid ' + theme.palette.action.disabledBackground,
+        borderRight: '1px solid ' + theme.palette.action.hover,
+    }),
+};