[2077] Add borderStyle to container

Bug: eclipse-sirius#2077 Signed-off-by: Florian Rouëné <florian.rouene@obeosoft.com>
frouene · Jun 30, 2023 · a645319 · a645319
1 parent a45640b
commit a645319
Show file tree

Hide file tree

Showing 65 changed files with 3,768 additions and 108 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -43,6 +43,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/2056[#2056] [form] Add the possibility to control read-only mode for widgets with an expression.
+- 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
 

diff --git a/integration-tests/cypress/e2e/project/edit/formdescriptioneditor.cy.js b/integration-tests/cypress/e2e/project/edit/formdescriptioneditor.cy.js
@@ -233,4 +233,50 @@ describe('/projects/:projectId/edit - FormDescriptionEditor', () => {
     checkWidgetIsEnabledExpression('Toolbar Actions Button', 'exist');
     checkWidgetIsEnabledExpression('Widgets Slider', 'exist');
   });
+
+  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');
+
+  });
 });
diff --git a/...pse/sirius/components/formdescriptioneditors/components/ContainerBorderStyleProvider.java b/...pse/sirius/components/formdescriptioneditors/components/ContainerBorderStyleProvider.java
@@ -0,0 +1,51 @@
+/*******************************************************************************
+ * 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.formdescriptioneditors.components;
+
+import java.util.Objects;
+
+import org.eclipse.sirius.components.forms.ContainerBorderLineStyle;
+import org.eclipse.sirius.components.forms.ContainerBorderStyle;
+import org.eclipse.sirius.components.view.FixedColor;
+
+/**
+ * The style provider for the Border Style of the View DSL. This only handles "static" or "preview" styles.
+ *
+ * @author frouene
+ */
+public class ContainerBorderStyleProvider {
+
+    private final org.eclipse.sirius.components.view.form.ContainerBorderStyle viewStyle;
+
+    public ContainerBorderStyleProvider(org.eclipse.sirius.components.view.form.ContainerBorderStyle viewStyle) {
+        this.viewStyle = Objects.requireNonNull(viewStyle);
+    }
+
+    public ContainerBorderStyle build() {
+        ContainerBorderStyle.Builder containerBorderStyle = ContainerBorderStyle
+                .newContainerBorderStyle()
+                .size(this.viewStyle.getBorderSize())
+                .radius(this.viewStyle.getBorderRadius())
+                .lineStyle(ContainerBorderLineStyle.valueOf(this.viewStyle.getBorderLineStyle().getLiteral()));
+
+        if (this.viewStyle.getBorderColor() instanceof FixedColor fixedColor) {
+            String color = fixedColor.getValue();
+            if (color != null && !color.isBlank()) {
+                containerBorderStyle.color(color);
+            }
+        }
+
+
+        return containerBorderStyle.build();
+    }
+}
diff --git a/...ius/components/formdescriptioneditors/components/FormDescriptionEditorGroupComponent.java b/...ius/components/formdescriptioneditors/components/FormDescriptionEditorGroupComponent.java
@@ -81,13 +81,15 @@ public Element render() {
             childrenWidgets.add(new Element(WidgetComponent.class, widgetComponentProps));
         });
 
-        GroupElementProps groupElementProps = GroupElementProps.newGroupElementProps(id)
+        GroupElementProps.Builder groupElementPropsBuilder = GroupElementProps.newGroupElementProps(id)
                 .label(label)
                 .displayMode(this.getGroupDisplayMode(groupDescription))
-                .children(childrenWidgets)
-                .build();
+                .children(childrenWidgets);
+        if (groupDescription.getBorderStyle() != null) {
+            groupElementPropsBuilder.borderStyle(new ContainerBorderStyleProvider(groupDescription.getBorderStyle()).build());
+        }
 
-        return new Element(GroupElementProps.TYPE, groupElementProps);
+        return new Element(GroupElementProps.TYPE, groupElementPropsBuilder.build());
     }
 
     public String getGroupLabel(org.eclipse.sirius.components.view.form.GroupDescription groupDescription, String defaultLabel) {
@@ -106,4 +108,5 @@ private GroupDisplayMode getGroupDisplayMode(GroupDescription viewGroupDescripti
         org.eclipse.sirius.components.view.form.GroupDisplayMode viewDisplayMode = viewGroupDescription.getDisplayMode();
         return GroupDisplayMode.valueOf(viewDisplayMode.getLiteral());
     }
+
 }
diff --git a/...omponents/formdescriptioneditors/components/ViewFormDescriptionEditorConverterSwitch.java b/...omponents/formdescriptioneditors/components/ViewFormDescriptionEditorConverterSwitch.java
@@ -27,6 +27,7 @@
 import org.eclipse.sirius.components.formdescriptioneditors.description.FormDescriptionEditorDescription;
 import org.eclipse.sirius.components.forms.ButtonStyle;
 import org.eclipse.sirius.components.forms.CheckboxStyle;
+import org.eclipse.sirius.components.forms.ContainerBorderStyle;
 import org.eclipse.sirius.components.forms.FlexDirection;
 import org.eclipse.sirius.components.forms.LabelWidgetStyle;
 import org.eclipse.sirius.components.forms.LinkStyle;
@@ -287,6 +288,13 @@ public AbstractWidgetDescription caseFlexboxContainerDescription(org.eclipse.sir
             children.add(ViewFormDescriptionEditorConverterSwitch.this.doSwitch(viewWidgetDescription));
 
         });
+        Function<VariableManager, ContainerBorderStyle> borderStyleProvider = vm -> {
+            org.eclipse.sirius.components.view.form.ContainerBorderStyle style = viewFlexboxContainerDescription.getBorderStyle();
+            if (style == null) {
+                return null;
+            }
+            return new ContainerBorderStyleProvider(style).build();
+        };
 
         FlexboxContainerDescription.Builder builder = FlexboxContainerDescription.newFlexboxContainerDescription(UUID.randomUUID().toString())
                 .idProvider(vm -> id)
@@ -295,7 +303,8 @@ public AbstractWidgetDescription caseFlexboxContainerDescription(org.eclipse.sir
                 .children(children)
                 .diagnosticsProvider(vm -> List.of())
                 .kindProvider(object -> "")
-                .messageProvider(object -> "");
+                .messageProvider(object -> "")
+                .borderStyleProvider(borderStyleProvider);
         if (viewFlexboxContainerDescription.getHelpExpression() != null && !viewFlexboxContainerDescription.getHelpExpression().isBlank()) {
             builder.helpTextProvider(vm -> this.getWidgetHelpText(viewFlexboxContainerDescription));
         }

diff --git a/...neditors/frontend/sirius-components-formdescriptioneditors/src/FlexboxContainerWidget.tsx b/...neditors/frontend/sirius-components-formdescriptioneditors/src/FlexboxContainerWidget.tsx
@@ -13,8 +13,8 @@
 import { useMutation } from '@apollo/client';
 import { Toast } from '@eclipse-sirius/sirius-components-core';
 import { GQLWidget, PropertySectionContext } from '@eclipse-sirius/sirius-components-forms';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import { Theme, makeStyles } from '@material-ui/core/styles';
 import HelpOutlineOutlined from '@material-ui/icons/HelpOutlineOutlined';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { FlexboxContainerWidgetState, FlexboxContainerWidgetStyleProps } from './FlexboxContainerWidget.types';
@@ -41,8 +41,13 @@ const useStyles = makeStyles<Theme, FlexboxContainerWidgetStyleProps>((theme) =>
   selected: {
     color: theme.palette.primary.main,
   },
-  widget: {
-    width: '100%',
+  containerAndLabel: {
+    margin: ({ borderStyle }) => (borderStyle ? theme.spacing(0.5) : 0),
+    padding: ({ borderStyle }) => (borderStyle ? theme.spacing(0.5) : 0),
+    borderWidth: ({ borderStyle }) => borderStyle?.size || 1,
+    borderColor: ({ borderStyle }) => borderStyle?.color || 'gray',
+    borderStyle: ({ borderStyle }) => borderStyle?.lineStyle || 'solid',
+    borderRadius: ({ borderStyle }) => borderStyle?.radius || 0,
   },
   container: {
     display: 'flex',
@@ -88,6 +93,7 @@ export const FlexboxContainerWidget = ({
   const classes = useStyles({
     flexDirection: widget.flexDirection,
     flexWrap: widget.flexWrap,
+    borderStyle: widget.borderStyle,
   });
 
   const initialState: FlexboxContainerWidgetState = { message: null, selected: false };
@@ -226,7 +232,7 @@ export const FlexboxContainerWidget = ({
   });
 
   return (
-    <div className={classes.widget} tabIndex={0} ref={ref}>
+    <div className={classes.containerAndLabel} tabIndex={0} ref={ref}>
       <div className={classes.propertySectionLabel}>
         <Typography
           variant="subtitle2"

diff --git a/...rs/frontend/sirius-components-formdescriptioneditors/src/FlexboxContainerWidget.types.tsx b/...rs/frontend/sirius-components-formdescriptioneditors/src/FlexboxContainerWidget.types.tsx
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2022 Obeo.
+ * Copyright (c) 2022, 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
@@ -12,6 +12,7 @@
  *******************************************************************************/
 
 import { GQLFlexDirection, GQLFlexWrap } from '@eclipse-sirius/sirius-components-forms';
+import { GQLContainerBorderStyle } from '@eclipse-sirius/sirius-components-forms/src';
 
 export interface FlexboxContainerWidgetState {
   message: string | null;
@@ -21,4 +22,5 @@ export interface FlexboxContainerWidgetState {
 export interface FlexboxContainerWidgetStyleProps {
   flexDirection: GQLFlexDirection;
   flexWrap: GQLFlexWrap;
+  borderStyle: GQLContainerBorderStyle | null;
 }
diff --git a/...ontend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorEventFragment.ts b/...ontend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorEventFragment.ts
@@ -11,7 +11,7 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 import { gql } from '@apollo/client';
-import { WidgetContribution, flexboxContainerFields, widgetFields } from '@eclipse-sirius/sirius-components-forms';
+import { flexboxContainerFields, WidgetContribution, widgetFields } from '@eclipse-sirius/sirius-components-forms';
 
 export const formDescriptionEditorEventSubscription = (contributions: Array<WidgetContribution>) => `
   ${widgetFields(contributions)}
@@ -54,6 +54,12 @@ export const formDescriptionEditorEventSubscription = (contributions: Array<Widg
                   ...flexboxContainerFields
                 }
               }
+              borderStyle {
+                color
+                lineStyle
+                size
+                radius
+              }
             }
           }
         }

diff --git a/...es/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/Group.tsx b/...es/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/Group.tsx
@@ -13,6 +13,7 @@
 import { useMutation } from '@apollo/client';
 import { Selection, Toast } from '@eclipse-sirius/sirius-components-core';
 import { GQLWidget, PropertySectionContext } from '@eclipse-sirius/sirius-components-forms';
+import { GroupStyleProps } from '@eclipse-sirius/sirius-components-forms/src/groups/Group.types';
 import { makeStyles, Theme, withStyles } from '@material-ui/core/styles';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
@@ -53,13 +54,15 @@ import { ToolbarActions } from './ToolbarActions';
 import { WidgetEntry } from './WidgetEntry';
 import { isKind } from './WidgetOperations';
 
-const useGroupEntryStyles = makeStyles<Theme>((theme) => ({
+const useGroupEntryStyles = makeStyles<Theme, GroupStyleProps>((theme) => ({
   group: {
     display: 'flex',
     flexDirection: 'column',
     flexGrow: 1,
-    border: '1px solid gray',
-    borderRadius: '10px',
+    borderWidth: ({ borderStyle }) => (borderStyle ? borderStyle.size : 1),
+    borderColor: ({ borderStyle }) => (borderStyle ? borderStyle?.color || 'transparent' : 'gray'),
+    borderStyle: ({ borderStyle }) => borderStyle?.lineStyle || 'solid',
+    borderRadius: ({ borderStyle }) => (borderStyle ? borderStyle.radius : 10),
     paddingTop: '1px',
     '&:hover': {
       borderColor: theme.palette.primary.main,
@@ -145,7 +148,9 @@ export const Group = ({
   selection,
   setSelection,
 }: GroupProps) => {
-  const classes = useGroupEntryStyles();
+  const classes = useGroupEntryStyles({
+    borderStyle: group.borderStyle,
+  });
 
   const initialState: GroupState = { message: null, selected: false };
   const [state, setState] = useState<GroupState>(initialState);

diff --git a/...mdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetEntry.tsx b/...mdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetEntry.tsx
@@ -31,8 +31,8 @@ import {
   GQLWidget,
   PropertySectionContext,
 } from '@eclipse-sirius/sirius-components-forms';
+import { makeStyles, Theme, withStyles } from '@material-ui/core/styles';
 import Tooltip from '@material-ui/core/Tooltip';
-import { Theme, makeStyles, withStyles } from '@material-ui/core/styles';
 import React, { useContext, useEffect, useState } from 'react';
 import { BarChartWidget } from './BarChartWidget';
 import { ButtonWidget } from './ButtonWidget';
@@ -77,7 +77,7 @@ const useWidgetEntryStyles = makeStyles<Theme, WidgetEntryStyleProps>((theme) =>
   },
   widgetElement: {
     flexGrow: ({ flexGrow }) => flexGrow,
-    border: ({ kind }) => (kind === 'FlexboxContainer' ? '1px solid gray' : '1px solid transparent'),
+    border: '1px solid transparent',
     '&:hover': {
       borderColor: theme.palette.primary.main,
     },

diff --git a/...rms/backend/sirius-components-collaborative-forms/src/main/resources/schema/form.graphqls b/...rms/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!
@@ -341,6 +355,7 @@ type FlexboxContainer implements Widget {
   flexWrap: String!
   flexGrow: Int!
   children: [Widget!]!
+  borderStyle: ContainerBorderStyle
 }
 
 type TreeWidget implements Widget {

diff --git a/...nts-forms/src/main/java/org/eclipse/sirius/components/forms/ContainerBorderLineStyle.java b/...nts-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
+}