[2077] Add borderStyle to container

Bug: eclipse-sirius#2077
Signed-off-by: Florian Rouëné <florian.rouene@obeosoft.com>

CHANGELOG.adoc

@@ -42,6 +42,7 @@ An absent/empty candidates expression now simply means the widget is empty.
 +
 image:doc/screenshots/ShowIconOptionSelectWidget.jpg[Icons on select widget option,70%,30%]
 - https://github.com/eclipse-sirius/sirius-components/issues/2055[#2055] [form] Added initial version of a custom widget to view & edit EMF references (both single and multi-valued).
+- https://github.com/eclipse-sirius/sirius-components/issues/2077[#2077] [form] Add the ability to define a border style for groups and flexbox containers.
 
 === Improvements
 

integration-tests/cypress/e2e/project/edit/formdescriptioneditor.cy.js

@@ -209,4 +209,50 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => {
     cy.get('[data-testid^="FlexboxContainer-Widgets-DropArea-"]').trigger('drop', { dataTransfer });
     cy.get('[title="ReferenceWidget"]').should('be.visible');
   });
+
+  function createBorderStyleAndCheckProperties(styleName) {
+    cy.getByTestId("treeitem-contextmenu").findByTestId("new-object").click();
+    cy.getByTestId("childCreationDescription").children("[role=\"button\"]").invoke("text").should("have.length.gt", 1);
+    cy.getByTestId("childCreationDescription")
+      .click()
+      .get("[data-value=\"" + styleName + "\"]")
+      .should("exist")
+      .click();
+    cy.getByTestId("create-object").click();
+    cy.getByTestId("Border Color").should("exist");
+    cy.getByTestId("Border Radius").should("exist");
+    cy.getByTestId("Border Size").should("exist");
+    cy.getByTestId("Solid").should("exist");
+    cy.getByTestId("Dashed").should("exist");
+    cy.getByTestId("Dotted").should("exist");
+  }
+
+  it('can create border style in a Group', () => {
+    cy.getByTestId('PageDescription').dblclick();
+    cy.getByTestId('GroupDescription-more').click();
+    createBorderStyleAndCheckProperties('Border Style Container Border Style');
+
+    cy.getByTestId('GroupDescription-more').click();
+    createBorderStyleAndCheckProperties('Conditional Border Styles Conditional Container Border Style');
+    cy.getByTestId('Condition').should('exist');
+  });
+
+  it('can create border style in a Flexbox Container', () => {
+    cy.getByTestId('PageDescription').dblclick();
+
+    // Create a Flexbox inside the Group
+    var dataTransfer = new DataTransfer();
+    cy.getByTestId('FormDescriptionEditor-FlexboxContainer').trigger('dragstart', { dataTransfer });
+    cy.get('[data-testid^="Group-Widgets-DropArea-"]').trigger('drop', { dataTransfer });
+    cy.get('[title="FlexboxContainer"]').should('be.visible');
+
+    cy.getByTestId('GroupDescription').dblclick();
+    cy.getByTestId('FlexboxContainerDescription-more').click();
+    createBorderStyleAndCheckProperties('Border Style Container Border Style');
+
+    cy.getByTestId('FlexboxContainerDescription-more').click();
+    createBorderStyleAndCheckProperties('Conditional Border Styles Conditional Container Border Style');
+    cy.getByTestId('Condition').should('exist');
+
+  });
 });

packages/compatibility/backend/sirius-components-compatibility-emf/src/main/java/org/eclipse/sirius/components/compatibility/emf/properties/NumberIfDescriptionProvider.java

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2019, 2022 Obeo.
+ * Copyright (c) 2019, 2023 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

packages/forms/backend/sirius-components-collaborative-forms/src/main/resources/schema/form.graphqls

@@ -64,13 +64,27 @@ type Group {
   displayMode: GroupDisplayMode!
   toolbarActions: [ToolbarAction!]!
   widgets: [Widget!]!
+  borderStyle: ContainerBorderStyle
 }
 
 enum GroupDisplayMode {
   LIST
   TOGGLEABLE_AREAS
 }
 
+type ContainerBorderStyle {
+  color: String
+  radius: Int!
+  size: Int!
+  lineStyle: ContainerBorderLineStyle!
+}
+
+enum ContainerBorderLineStyle {
+  Dashed
+  Dotted
+  Solid
+}
+
 interface Widget {
   id: ID!
   label: String!
@@ -326,6 +340,7 @@ type FlexboxContainer implements Widget {
   flexWrap: String!
   flexGrow: Int!
   children: [Widget!]!
+  borderStyle: ContainerBorderStyle
 }
 
 type TreeWidget implements Widget {

packages/forms/backend/sirius-components-forms/src/main/java/org/eclipse/sirius/components/forms/ContainerBorderLineStyle.java

@@ -0,0 +1,22 @@
+/*******************************************************************************
+ * Copyright (c) 2023 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
+ *******************************************************************************/
+package org.eclipse.sirius.components.forms;
+
+/**
+ * Line style possibility for the border of a container.
+ *
+ * @author frouene
+ */
+public enum ContainerBorderLineStyle {
+    Solid, Dashed, Dotted
+}

packages/forms/backend/sirius-components-forms/src/main/java/org/eclipse/sirius/components/forms/ContainerBorderStyle.java

@@ -0,0 +1,112 @@
+/*******************************************************************************
+ * Copyright (c) 2023 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
+ *******************************************************************************/
+package org.eclipse.sirius.components.forms;
+
+import java.util.Objects;
+
+import org.eclipse.sirius.components.annotations.Immutable;
+
+/**
+ * The style of the borders for a container.
+ *
+ * @author frouene
+ */
+@Immutable
+public final class ContainerBorderStyle {
+
+    private String color;
+
+    private int radius;
+
+    private int size;
+
+    private ContainerBorderLineStyle lineStyle;
+
+    private ContainerBorderStyle() {
+        // Prevent instantiation
+    }
+
+    public static Builder newCheckboxStyle() {
+        return new Builder();
+    }
+
+    public String getColor() {
+        return this.color;
+    }
+
+    public int getRadius() {
+        return this.radius;
+    }
+
+    public int getSize() {
+        return this.size;
+    }
+
+    public ContainerBorderLineStyle getLineStyle() {
+        return this.lineStyle;
+    }
+
+    public static Builder newContainerBorderStyle() {
+        return new Builder();
+    }
+
+    /**
+     * Builder used to create the Container border style.
+     *
+     * @author frouene
+     */
+    @SuppressWarnings("checkstyle:HiddenField")
+    public static final class Builder {
+
+        private String color;
+
+        private int radius;
+
+        private int size;
+
+        private ContainerBorderLineStyle lineStyle;
+
+        private Builder() {
+        }
+
+        public Builder color(String color) {
+            this.color = Objects.requireNonNull(color);
+            return this;
+        }
+
+        public Builder radius(int radius) {
+            this.radius = radius;
+            return this;
+        }
+
+        public Builder size(int size) {
+            this.size = size;
+            return this;
+        }
+
+        public Builder lineStyle(ContainerBorderLineStyle lineStyle) {
+            this.lineStyle = Objects.requireNonNull(lineStyle);
+            return this;
+        }
+
+        public ContainerBorderStyle build() {
+            ContainerBorderStyle borderStyle = new ContainerBorderStyle();
+            borderStyle.color = this.color; // Optional on purpose
+            borderStyle.radius = Objects.requireNonNull(this.radius);
+            borderStyle.size = Objects.requireNonNull(this.size);
+            borderStyle.lineStyle = Objects.requireNonNull(this.lineStyle);
+            return borderStyle;
+        }
+
+    }
+}

packages/forms/backend/sirius-components-forms/src/main/java/org/eclipse/sirius/components/forms/FlexboxContainer.java

@@ -27,6 +27,7 @@
  */
 @Immutable
 public final class FlexboxContainer extends AbstractWidget {
+
     private String flexDirection;
 
     private String flexWrap;
@@ -35,6 +36,8 @@ public final class FlexboxContainer extends AbstractWidget {
 
     private List<AbstractWidget> children;
 
+    private ContainerBorderStyle borderStyle;
+
     private FlexboxContainer() {
         // Prevent instantiation
     }
@@ -55,6 +58,10 @@ public List<AbstractWidget> getChildren() {
         return this.children;
     }
 
+    public ContainerBorderStyle getBorderStyle() {
+        return this.borderStyle;
+    }
+
     public static Builder newFlexboxContainer(String id) {
         return new Builder(id);
     }
@@ -90,6 +97,8 @@ public static final class Builder {
 
         private Supplier<String> helpTextProvider;
 
+        private ContainerBorderStyle borderStyle;
+
         private Builder(String id) {
             this.id = Objects.requireNonNull(id);
         }
@@ -134,6 +143,11 @@ public Builder helpTextProvider(Supplier<String> helpTextProvider) {
             return this;
         }
 
+        public Builder borderStyle(ContainerBorderStyle borderStyle) {
+            this.borderStyle = Objects.requireNonNull(borderStyle);
+            return this;
+        }
+
         public FlexboxContainer build() {
             FlexboxContainer flexboxContainer = new FlexboxContainer();
             flexboxContainer.id = Objects.requireNonNull(this.id);
@@ -145,6 +159,7 @@ public FlexboxContainer build() {
             flexboxContainer.children = Objects.requireNonNull(this.children);
             flexboxContainer.diagnostics = Objects.requireNonNull(this.diagnostics);
             flexboxContainer.helpTextProvider = this.helpTextProvider; // Optional on purpose
+            flexboxContainer.borderStyle = this.borderStyle; // Optional on purpose
             return flexboxContainer;
         }
     }

packages/forms/backend/sirius-components-forms/src/main/java/org/eclipse/sirius/components/forms/Group.java

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2019, 2022 Obeo.
+ * Copyright (c) 2019, 2023 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
@@ -25,6 +25,7 @@
  */
 @Immutable
 public final class Group {
+
     private String id;
 
     private String label;
@@ -35,6 +36,8 @@ public final class Group {
 
     private List<AbstractWidget> widgets;
 
+    private ContainerBorderStyle borderStyle;
+
     private Group() {
         // Prevent instantiation
     }
@@ -59,6 +62,10 @@ public GroupDisplayMode getDisplayMode() {
         return this.displayMode;
     }
 
+    public ContainerBorderStyle getBorderStyle() {
+        return this.borderStyle;
+    }
+
     public static Builder newGroup(String id) {
         return new Builder(id);
     }
@@ -76,6 +83,7 @@ public String toString() {
      */
     @SuppressWarnings("checkstyle:HiddenField")
     public static final class Builder {
+
         private String id;
 
         private String label;
@@ -86,6 +94,8 @@ public static final class Builder {
 
         private List<AbstractWidget> widgets;
 
+        private ContainerBorderStyle borderStyle;
+
         private Builder(String id) {
             this.id = Objects.requireNonNull(id);
         }
@@ -110,13 +120,19 @@ public Builder widgets(List<AbstractWidget> widgets) {
             return this;
         }
 
+        public Builder borderStyle(ContainerBorderStyle borderStyle) {
+            this.borderStyle = Objects.requireNonNull(borderStyle);
+            return this;
+        }
+
         public Group build() {
             Group group = new Group();
             group.id = Objects.requireNonNull(this.id);
             group.label = Objects.requireNonNull(this.label);
             group.displayMode = Objects.requireNonNull(this.displayMode);
             group.widgets = Objects.requireNonNull(this.widgets);
             group.toolbarActions = Objects.requireNonNull(this.toolbarActions);
+            group.borderStyle = this.borderStyle; // Optional on purpose
             return group;
         }
     }

packages/forms/backend/sirius-components-forms/src/main/java/org/eclipse/sirius/components/forms/components/FlexboxContainerComponent.java

@@ -48,6 +48,7 @@ public Element render() {
         String id = flexboxContainerDescription.getIdProvider().apply(variableManager);
         String label = flexboxContainerDescription.getLabelProvider().apply(variableManager);
         FlexDirection flexdirection = flexboxContainerDescription.getFlexDirection();
+        var borderStyle = flexboxContainerDescription.getBorderStyleProvider().apply(variableManager);
 
         List<Element> children = new ArrayList<>();
 
@@ -63,12 +64,14 @@ public Element render() {
             }
         });
 
-        // @formatter:off
-        var flexboxContainerElementPropsBuilder = FlexboxContainerElementProps.newFlexboxContainerElementProps(id)
+        FlexboxContainerElementProps.Builder flexboxContainerElementPropsBuilder = FlexboxContainerElementProps.newFlexboxContainerElementProps(id)
                 .label(label)
                 .flexDirection(flexdirection)
                 .children(childrenWidgets);
-        // @formatter:on
+
+        if (borderStyle != null) {
+            flexboxContainerElementPropsBuilder.borderStyle(borderStyle);
+        }
 
         if (flexboxContainerDescription.getHelpTextProvider() != null) {
             flexboxContainerElementPropsBuilder.helpTextProvider(() -> flexboxContainerDescription.getHelpTextProvider().apply(variableManager));