add shortcut to build node (#3196)

Signed-off-by: Franck LECUYER <[email protected]>

Author: FranckLecuyer

src/components/graph/nodes/build-button.tsx

@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2025, 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 { BUILD_STATUS } from 'components/network/constants';
+import React, { useCallback, useState } from 'react';
+import { PlayCircleFilled, StopCircleOutlined } from '@mui/icons-material';
+import { Button, CircularProgress, Theme } from '@mui/material';
+import { buildNode, unbuildNode } from '../../../services/study';
+import { UUID } from 'crypto';
+import { useSnackMessage } from '@gridsuite/commons-ui';
+import { HTTP_MAX_NODE_BUILDS_EXCEEDED_MESSAGE } from 'components/network-modification-tree-pane';
+
+type BuildButtonProps = {
+    buildStatus?: BUILD_STATUS;
+    studyUuid: UUID | null;
+    currentRootNetworkUuid: UUID | null;
+    nodeUuid: UUID;
+};
+
+const styles = {
+    button: {
+        minWidth: '40px',
+    },
+    playColor: (theme: Theme) => ({
+        color: theme.palette.mode === 'light' ? 'grey' : 'white',
+    }),
+};
+
+export const BuildButton = ({ buildStatus, studyUuid, currentRootNetworkUuid, nodeUuid }: BuildButtonProps) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const { snackError } = useSnackMessage();
+
+    const handleClick = useCallback(
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+            event.stopPropagation();
+            if (!studyUuid || !currentRootNetworkUuid || isLoading) {
+                return;
+            }
+
+            setIsLoading(true);
+
+            if (buildStatus === BUILD_STATUS.NOT_BUILT) {
+                buildNode(studyUuid, nodeUuid, currentRootNetworkUuid)
+                    .catch((error) => {
+                        if (error.status === 403 && error.message.includes(HTTP_MAX_NODE_BUILDS_EXCEEDED_MESSAGE)) {
+                            // retrieve last word of the message (ex: "MAX_NODE_BUILDS_EXCEEDED max allowed built nodes : 2" -> 2)
+                            let limit = error.message.split(/[: ]+/).pop();
+                            snackError({
+                                messageId: 'maxBuiltNodeExceededError',
+                                messageValues: { limit: limit },
+                            });
+                        } else {
+                            snackError({
+                                messageTxt: error.message,
+                                headerId: 'NodeBuildingError',
+                            });
+                        }
+                    })
+                    .finally(() => {
+                        setIsLoading(false);
+                    });
+            } else {
+                unbuildNode(studyUuid, nodeUuid, currentRootNetworkUuid)
+                    .catch((error) => {
+                        snackError({
+                            messageTxt: error.message,
+                            headerId: 'NodeUnbuildingError',
+                        });
+                    })
+                    .finally(() => {
+                        setIsLoading(false);
+                    });
+            }
+        },
+        [studyUuid, currentRootNetworkUuid, nodeUuid, buildStatus, isLoading, snackError]
+    );
+
+    const getIcon = () => {
+        if (isLoading) {
+            return <CircularProgress size={24} color="primary" />;
+        }
+        return buildStatus === BUILD_STATUS.NOT_BUILT ? (
+            <PlayCircleFilled sx={styles.playColor} />
+        ) : (
+            <StopCircleOutlined color="primary" />
+        );
+    };
+
+    const isButtonDisabled = isLoading || !studyUuid || !currentRootNetworkUuid;
+
+    return (
+        <Button size="small" onClick={handleClick} sx={styles.button} disabled={isButtonDisabled}>
+            {getIcon()}
+        </Button>
+    );
+};

src/components/graph/nodes/network-modification-node.tsx

@@ -20,6 +20,8 @@ import NodeHandle from './node-handle';
 import { baseNodeStyles, interactiveNodeStyles, selectedBaseNodeStyles } from './styles';
 import NodeOverlaySpinner from './node-overlay-spinner';
 import BuildStatusChip from './build-status-chip';
+import React from 'react';
+import { BuildButton } from './build-button';
 
 const styles = {
     networkModificationSelected: (theme: Theme) => ({
@@ -54,6 +56,13 @@ const styles = {
         marginLeft: theme.spacing(1),
         height: '35%',
     }),
+    buildBox: (theme: Theme) => ({
+        display: 'flex',
+        justifyContent: 'flex-end',
+        marginTop: theme.spacing(-5),
+        marginRight: theme.spacing(0),
+        height: '35%',
+    }),
     chipFloating: (theme: Theme) => ({
         position: 'absolute',
         top: theme.spacing(-4),
@@ -68,6 +77,8 @@ const styles = {
 const NetworkModificationNode = (props: NodeProps<ModificationNode>) => {
     const currentNode = useSelector((state: AppState) => state.currentTreeNode);
     const selectionForCopy = useSelector((state: AppState) => state.nodeSelectionForCopy);
+    const studyUuid = useSelector((state: AppState) => state.studyUuid);
+    const currentRootNetworkUuid = useSelector((state: AppState) => state.currentRootNetworkUuid);
 
     const isSelectedNode = () => {
         return props.id === currentNode?.id;
@@ -121,6 +132,17 @@ const NetworkModificationNode = (props: NodeProps<ModificationNode>) => {
                     )}
                 </Box>
 
+                <Box sx={styles.buildBox}>
+                    {props.data.localBuildStatus !== BUILD_STATUS.BUILDING && (
+                        <BuildButton
+                            buildStatus={props.data.localBuildStatus}
+                            studyUuid={studyUuid}
+                            currentRootNetworkUuid={currentRootNetworkUuid}
+                            nodeUuid={props.id}
+                        />
+                    )}
+                </Box>
+
                 {props.data.localBuildStatus === BUILD_STATUS.BUILDING && <NodeOverlaySpinner />}
             </Box>
         </>

src/components/network-modification-tree-pane.jsx

@@ -51,7 +51,7 @@ const noNodeSelectionForCopy = {
     allChildrenIds: null,
 };
 
-const HTTP_MAX_NODE_BUILDS_EXCEEDED_MESSAGE = 'MAX_NODE_BUILDS_EXCEEDED';
+export const HTTP_MAX_NODE_BUILDS_EXCEEDED_MESSAGE = 'MAX_NODE_BUILDS_EXCEEDED';
 
 export const NetworkModificationTreePane = ({
     studyUuid,