[3480] Fix an error that prevents border color to be properly applied

Bug: eclipse-sirius#3480
Signed-off-by: Florian ROUËNÉ <[email protected]>

CHANGELOG.adoc

@@ -33,6 +33,7 @@
 - https://github.com/eclipse-sirius/sirius-web/issues/3517[#3517] [diagram] Prevent edge path for rotatable border node to be inconsistent
 - https://github.com/eclipse-sirius/sirius-web/issues/2908[#2908] [diagram] Homogenize delete icon
 - https://github.com/eclipse-sirius/sirius-web/issues/3485[#3485] [diagram] Add a validation error message when background value is missing
+- https://github.com/eclipse-sirius/sirius-web/issues/3480[#3480] [diagram] Fix an error that prevents border color to be properly applied
 
 === New Features
 

integration-tests/cypress/e2e/project/diagrams/node-style.cy.ts

@@ -0,0 +1,82 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+import { Project } from '../../../pages/Project';
+import { Studio } from '../../../usecases/Studio';
+import { Explorer } from '../../../workbench/Explorer';
+import { Details } from '../../../workbench/Details';
+
+describe('Diagram - node style', () => {
+  context('Given a studio template', () => {
+    let studioProjectId: string = '';
+    let domainName: string = '';
+
+    before(() =>
+      new Studio().createStudioProject().then((createdProjectData) => {
+        studioProjectId = createdProjectData.projectId;
+        const project = new Project();
+        project.visit(createdProjectData.projectId);
+        project.disableDeletionConfirmationDialog();
+        const explorer = new Explorer();
+        explorer.expand('DomainNewModel');
+        cy.get('[title="domain::Domain"]').then(($div) => {
+          domainName = $div.data().testid;
+          const details = new Details();
+          explorer.expand('ViewNewModel');
+          explorer.expand('View');
+          explorer.expand(`${domainName} Diagram Description`);
+          explorer.expand('Entity1 Node');
+          explorer.select('RectangularNodeStyleDescription');
+          details.openReferenceWidgetOptions('Border Color');
+          details.selectReferenceWidgetOption('orange 500');
+          explorer.collapse('Entity1 Node');
+          explorer.expand('Entity2 Node');
+          explorer.delete('RectangularNodeStyleDescription');
+          explorer.createObject('Entity2 Node', 'Style Image');
+          explorer.select('ImageNodeStyleDescription');
+          details.selectValue('Shape', 'fan');
+          details.openReferenceWidgetOptions('Border Color');
+          details.selectReferenceWidgetOption('cyan 500');
+        });
+      })
+    );
+
+    after(() => cy.deleteProject(studioProjectId));
+    context('When we create a new instance project', () => {
+      let instanceProjectId: string = '';
+
+      beforeEach(() => {
+        const studio = new Studio();
+        studio.createProjectFromDomain('Cypress - Studio Instance', domainName, 'Root').then((res) => {
+          instanceProjectId = res.projectId;
+          new Explorer().createRepresentation('Root', `${domainName} Diagram Description`, 'diagram');
+        });
+      });
+
+      afterEach(() => cy.deleteProject(instanceProjectId));
+
+      it('Then check color border is properly applied', () => {
+        const explorer = new Explorer();
+        const details = new Details();
+
+        explorer.createObject('Root', 'Entity1s Entity1');
+        details.getTextField('Name').type('Entity1{Enter}');
+        explorer.createObject('Root', 'Entity2s Entity2');
+        details.getTextField('Name').should('have.value', '');
+        details.getTextField('Name').type('Entity2{Enter}');
+        explorer.select('diagram');
+        cy.getByTestId('FreeForm - Entity1').invoke('css', 'border-color').should('eq', 'rgb(255, 152, 0)');
+        cy.getByTestId('FreeForm - Entity2').invoke('css', 'border-color').should('eq', 'rgb(0, 188, 212)');
+      });
+    });
+  });
+});

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/node/FreeFormNode.tsx

@@ -40,14 +40,15 @@ const freeFormNodeStyle = (
     height: '100%',
     opacity: faded ? '0.4' : '',
     ...style,
+    borderColor: getCSSColor(String(style.borderColor), theme),
   };
   if (selected || hovered) {
     freeFormNodeStyle.outline = `${theme.palette.selected} solid 1px`;
   }
   return freeFormNodeStyle;
 };
 
-const imageNodeStyle = (
+const backgroundNodeStyle = (
   theme: Theme,
   style: React.CSSProperties,
   rotation: string | undefined,
@@ -105,7 +106,7 @@ export const FreeFormNode = memo(({ data, id, selected, dragging }: NodeProps<Fr
     [data.style, selected, data.isHovered, data.faded]
   );
   const backgroundStyle = useMemo(
-    () => imageNodeStyle(theme, data.style, rotation, imageURL),
+    () => backgroundNodeStyle(theme, data.style, rotation, imageURL),
     [data.style, rotation, imageURL]
   );