From 5c695d9b3dd4d12f57f744ca18e851578f82af7c Mon Sep 17 00:00:00 2001
From: Pierre-Charles David <pierre-charles.david@obeo.fr>
Date: Wed, 29 Nov 2023 17:31:13 +0100
Subject: [PATCH] [2679] Align the input element like the corresponding label
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug: https://github.com/eclipse-sirius/sirius-web/issues/2679
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com>
---
 CHANGELOG.adoc                                     |  1 +
 .../src/renderer/Label.tsx                         | 14 ++++++++------
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index 57a8cdbb10..e88144eacd 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -80,6 +80,7 @@ info: {
 - https://github.com/eclipse-sirius/sirius-web/issues/2720[#2720] [releng] Improve our build process to be faster in development mode
 - https://github.com/eclipse-sirius/sirius-web/issues/2780[#2780] [releng] Upgrade github/aws actions versions in workflows
 - https://github.com/eclipse-sirius/sirius-web/issues/2644[#2644] [diagram] Highlight nodes on hover in React Flow diagrams
+- https://github.com/eclipse-sirius/sirius-web/issues/2679[#2679] [diagram] When editing a label, place input element closer to the label's location (centered).
 
 
 == v2023.12.0
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/Label.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/Label.tsx
index b2cfdf6e24..6930f9f0c7 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/Label.tsx
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/Label.tsx
@@ -57,20 +57,22 @@ export const Label = memo(({ diagramElementId, label, faded, transform }: LabelP
     }
   };
 
-  if (label.id === currentlyEditedLabelId) {
-    return (
+  const content: JSX.Element =
+    label.id === currentlyEditedLabelId ? (
       <DiagramDirectEditInput editingKey={editingKey} onClose={handleClose} labelId={label.id} transform={transform} />
+    ) : (
+      <>
+        <IconOverlay iconURL={label.iconURL} alt={label.text} />
+        {label.text}
+      </>
     );
-  }
-
   return (
     <div
       data-id={label.id}
       data-testid={`Label - ${label.text}`}
       style={labelStyle(theme, label.style, faded, transform, !!label.iconURL)}
       className="nopan">
-      <IconOverlay iconURL={label.iconURL} alt={label.text} />
-      {label.text}
+      {content}
     </div>
   );
 });