[3083] Add treeItemEndIconsExpression to TreeDescription

Bug: #3083 Signed-off-by: Michaël Charfadi <michael.charfadi@obeosoft.com>
eclipse-sirius · Feb 21, 2024 · 310daf3 · 310daf3
1 parent b43ac34
commit 310daf3
Show file tree

Hide file tree

Showing 25 changed files with 404 additions and 97 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -100,6 +100,7 @@ In read-only mode, the palette can not be displayed, some of the panel action ar
 image:doc/screenshots/showDeletionConfirmation.png[Deletion Confirmation Dialog,70%]
 - https://github.com/eclipse-sirius/sirius-web/issues/3087[#3087] [deck] Add the Zoom, Full Screen and Fit to screen actions.
 - https://github.com/eclipse-sirius/sirius-web/issues/3081[#3081] [forms] TreeWidget has been added in forms model.
+- https://github.com/eclipse-sirius/sirius-web/issues/3083[#3083] [forms] Add support for icons at the end of a tree item label.
 
 === Improvements
 

diff --git a/...omponents/formdescriptioneditors/components/ViewFormDescriptionEditorConverterSwitch.java b/...omponents/formdescriptioneditors/components/ViewFormDescriptionEditorConverterSwitch.java
@@ -111,6 +111,7 @@ public AbstractWidgetDescription caseTreeDescription(org.eclipse.sirius.componen
                 .targetObjectIdProvider(vm -> "")
                 .childrenProvider(vm -> List.of())
                 .nodeIdProvider(vm -> "")
+                .nodeIconEndURLProvider(vm -> List.of())
                 .nodeSelectableProvider(vm -> false)
                 .helpTextProvider(vm -> "")
                 .nodeIconURLProvider(vm -> List.of())

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
@@ -17,9 +17,17 @@ input PropertiesEventInput {
   objectIds: [ID!]!
 }
 
-union FormEventPayload = ErrorPayload | FormRefreshedEventPayload | SubscribersUpdatedEventPayload | WidgetSubscriptionsUpdatedEventPayload
-
-union PropertiesEventPayload = ErrorPayload | FormRefreshedEventPayload | SubscribersUpdatedEventPayload | WidgetSubscriptionsUpdatedEventPayload
+union FormEventPayload =
+    ErrorPayload
+  | FormRefreshedEventPayload
+  | SubscribersUpdatedEventPayload
+  | WidgetSubscriptionsUpdatedEventPayload
+
+union PropertiesEventPayload =
+    ErrorPayload
+  | FormRefreshedEventPayload
+  | SubscribersUpdatedEventPayload
+  | WidgetSubscriptionsUpdatedEventPayload
 
 type WidgetSubscriptionsUpdatedEventPayload {
   id: ID!
@@ -367,6 +375,7 @@ type TreeNode {
   label: String!
   kind: String!
   iconURL: [String!]!
+  iconEndURL: [[String!]!]!
   selectable: Boolean!
 }
 
@@ -394,7 +403,11 @@ type RichText implements Widget {
 type FormDescription implements RepresentationDescription {
   id: ID!
   label: String!
-  completionProposals(widgetId: ID!, currentText: String!, cursorPosition: Int!): [CompletionProposal!]!
+  completionProposals(
+    widgetId: ID!
+    currentText: String!
+    cursorPosition: Int!
+  ): [CompletionProposal!]!
   helpText(widgetId: ID!): String
 }
 

diff --git a/...ipse/sirius/components/forms/graphql/datafetchers/form/TreeNodeEndIconURLDataFetcher.java b/...ipse/sirius/components/forms/graphql/datafetchers/form/TreeNodeEndIconURLDataFetcher.java
@@ -0,0 +1,42 @@
+/*******************************************************************************
+ * 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
+ *******************************************************************************/
+package org.eclipse.sirius.components.forms.graphql.datafetchers.form;
+
+import graphql.schema.DataFetchingEnvironment;
+
+import org.eclipse.sirius.components.annotations.spring.graphql.QueryDataFetcher;
+import org.eclipse.sirius.components.forms.TreeNode;
+import org.eclipse.sirius.components.graphql.api.IDataFetcherWithFieldCoordinates;
+import org.eclipse.sirius.components.graphql.api.URLConstants;
+
+import java.util.List;
+
+/**
+ * Data fetcher for TreeNode.iconEndURL, to rewrite the relative path of the image into an absolute path on the server.
+ * <p>
+ * If the <code>TreeNode.iconEndURL</code> is of the form <code>path/to/image.svg</code>, the rewritten value which will
+ * be seen by the frontend will be <code>/api/images/path/to/image.svg</code>.
+ *
+ * @author mcharfadi
+ */
+@QueryDataFetcher(type = "TreeNode", field = "iconEndURL")
+public class TreeNodeEndIconURLDataFetcher implements IDataFetcherWithFieldCoordinates<List<List<String>>> {
+
+    @Override
+    public List<List<String>> get(DataFetchingEnvironment environment) throws Exception {
+        TreeNode node = environment.getSource();
+        return node.getIconEndURL().stream()
+                .map(list -> list.stream().map(url -> URLConstants.IMAGE_BASE_PATH + url).toList())
+                .toList();
+    }
+}
diff --git a/...d/sirius-components-forms/src/main/java/org/eclipse/sirius/components/forms/TreeNode.java b/...d/sirius-components-forms/src/main/java/org/eclipse/sirius/components/forms/TreeNode.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2022, 2023 Obeo.
+ * Copyright (c) 2022, 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
@@ -36,6 +36,8 @@ public final class TreeNode {
 
     private List<String> iconURL;
 
+    private List<List<String>> iconEndURL;
+
     private boolean selectable;
 
     private TreeNode() {
@@ -66,6 +68,10 @@ public List<String> getIconURL() {
         return this.iconURL;
     }
 
+    public List<List<String>> getIconEndURL() {
+        return this.iconEndURL;
+    }
+
     public boolean isSelectable() {
         return this.selectable;
     }
@@ -94,6 +100,8 @@ public static final class Builder {
 
         private List<String> iconURL;
 
+        private List<List<String>> iconEndURL;
+
         private boolean selectable;
 
         private Builder(String id) {
@@ -120,6 +128,11 @@ public Builder iconURL(List<String> iconURL) {
             return this;
         }
 
+        public Builder iconEndURL(List<List<String>> iconEndURL) {
+            this.iconEndURL = Objects.requireNonNull(iconEndURL);
+            return this;
+        }
+
         public Builder selectable(boolean selectable) {
             this.selectable = Objects.requireNonNull(selectable);
             return this;
@@ -133,6 +146,7 @@ public TreeNode build() {
             treeNode.kind = Objects.requireNonNull(this.kind);
             treeNode.selectable = Objects.requireNonNull(this.selectable);
             treeNode.iconURL = Objects.requireNonNull(this.iconURL);
+            treeNode.iconEndURL = Objects.requireNonNull(this.iconEndURL);
             return treeNode;
         }
     }

diff --git a/...nts-forms/src/main/java/org/eclipse/sirius/components/forms/components/TreeComponent.java b/...nts-forms/src/main/java/org/eclipse/sirius/components/forms/components/TreeComponent.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2022, 2023 Obeo.
+ * Copyright (c) 2022, 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
@@ -118,12 +118,14 @@ private TreeNode renderNode(VariableManager variableManager, TreeDescription tre
         String nodeLabel = treeDescription.getNodeLabelProvider().apply(variableManager);
         String nodeKind = treeDescription.getNodeKindProvider().apply(variableManager);
         List<String> nodeIconURL = treeDescription.getNodeIconURLProvider().apply(variableManager);
+        List<List<String>> iconEndURL = treeDescription.getNodeIconEndURLProvider().apply(variableManager);
         boolean nodeSelectable = treeDescription.getNodeSelectableProvider().apply(variableManager);
         return TreeNode.newTreeNode(nodeId)
                 .parentId(parentId)
                 .label(nodeLabel)
                 .kind(nodeKind)
                 .iconURL(nodeIconURL)
+                .iconEndURL(iconEndURL)
                 .selectable(nodeSelectable)
                 .build();
     }

diff --git a/...-forms/src/main/java/org/eclipse/sirius/components/forms/description/TreeDescription.java b/...-forms/src/main/java/org/eclipse/sirius/components/forms/description/TreeDescription.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2022, 2023 Obeo.
+ * Copyright (c) 2022, 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
@@ -42,6 +42,8 @@ public final class TreeDescription extends AbstractWidgetDescription {
 
     private Function<VariableManager, List<String>> nodeIconURLProvider;
 
+    private Function<VariableManager, List<List<String>>> nodeIconEndURLProvider;
+
     private Function<VariableManager, Boolean> nodeSelectableProvider;
 
     private Function<VariableManager, List<?>> childrenProvider;
@@ -88,6 +90,10 @@ public Function<VariableManager, List<String>> getNodeIconURLProvider() {
         return this.nodeIconURLProvider;
     }
 
+    public Function<VariableManager, List<List<String>>> getNodeIconEndURLProvider() {
+        return this.nodeIconEndURLProvider;
+    }
+
     public Function<VariableManager, Boolean> getNodeSelectableProvider() {
         return this.nodeSelectableProvider;
     }
@@ -111,17 +117,25 @@ public String toString() {
     public static final class Builder {
 
         private final Function<VariableManager, Boolean> isReadOnlyProvider = variableManager -> true;
+
         private final String id;
+
         private Function<VariableManager, String> idProvider;
+
         private Function<VariableManager, String> targetObjectIdProvider;
+
         private Function<VariableManager, String> labelProvider;
+
         private Function<VariableManager, List<String>> iconURLProvider = variableManager -> List.of();
+
         private Function<VariableManager, List<?>> childrenProvider;
 
         private Function<VariableManager, String> nodeIdProvider;
 
         private Function<VariableManager, String> nodeLabelProvider;
 
+        private Function<VariableManager, List<List<String>>> nodeIconEndURLProvider;
+
         private Function<VariableManager, String> nodeKindProvider;
 
         private Function<VariableManager, List<String>> nodeIconURLProvider;
@@ -135,7 +149,7 @@ public static final class Builder {
         private Function<Object, String> kindProvider;
 
         private Function<Object, String> messageProvider;
-
+        
         private Function<VariableManager, String> helpTextProvider;
 
         private Builder(String id) {
@@ -187,6 +201,11 @@ public Builder nodeIconURLProvider(Function<VariableManager, List<String>> nodeI
             return this;
         }
 
+        public Builder nodeIconEndURLProvider(Function<VariableManager, List<List<String>>> nodeIconEndURLProvider) {
+            this.nodeIconEndURLProvider = Objects.requireNonNull(nodeIconEndURLProvider);
+            return this;
+        }
+
         public Builder nodeSelectableProvider(Function<VariableManager, Boolean> nodeSelectableProvider) {
             this.nodeSelectableProvider = Objects.requireNonNull(nodeSelectableProvider);
             return this;
@@ -228,6 +247,7 @@ public TreeDescription build() {
             treeDescription.childrenProvider = Objects.requireNonNull(this.childrenProvider);
             treeDescription.nodeIdProvider = Objects.requireNonNull(this.nodeIdProvider);
             treeDescription.nodeLabelProvider = Objects.requireNonNull(this.nodeLabelProvider);
+            treeDescription.nodeIconEndURLProvider = Objects.requireNonNull(this.nodeIconEndURLProvider);
             treeDescription.nodeKindProvider = Objects.requireNonNull(this.nodeKindProvider);
             treeDescription.nodeIconURLProvider = Objects.requireNonNull(this.nodeIconURLProvider);
             treeDescription.nodeSelectableProvider = Objects.requireNonNull(this.nodeSelectableProvider);

diff --git a/packages/forms/frontend/sirius-components-forms/src/form/FormEventFragments.ts b/packages/forms/frontend/sirius-components-forms/src/form/FormEventFragments.ts
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2021, 2023 Obeo.
+ * Copyright (c) 2021, 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
@@ -286,6 +286,7 @@ export const widgetFields = (contributions: Array<WidgetContribution>) => `
       label
       kind
       iconURL
+      iconEndURL
       selectable
     }
   }

diff --git a/packages/forms/frontend/sirius-components-forms/src/form/FormEventFragments.types.ts b/packages/forms/frontend/sirius-components-forms/src/form/FormEventFragments.types.ts
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2021, 2023 Obeo.
+ * Copyright (c) 2021, 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
@@ -392,6 +392,7 @@ export interface GQLTreeNode {
   label: string;
   kind: string;
   iconURL: string[];
+  iconEndURL: string[][];
   selectable: Boolean;
 }
 

diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/TreePropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/TreePropertySection.tsx
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2022, 2023 Obeo.
+ * Copyright (c) 2022, 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
@@ -45,18 +45,22 @@ const TreeItem = ({ node, nodes }: TreeItemProps) => {
       setSelection({ entries: [newSelection] });
     }
   };
+
   const label = (
     <div className={styles.label} onClick={handleClick}>
       <IconOverlay iconURL={node.iconURL} alt={node.label} />
       <Typography>{node.label}</Typography>
+      {node.iconEndURL.map((iconURL, index) => (
+        <IconOverlay iconURL={iconURL} alt={node.label} key={index} />
+      ))}
     </div>
   );
 
   const childNodes = nodes.filter((childNode) => childNode.parentId === node.id);
   return (
     <MuiTreeItem nodeId={node.id} label={label}>
       {childNodes.map((childNode) => (
-        <TreeItem node={childNode} nodes={nodes} key={childNode.id} />
+        <TreeItem node={childNode} nodes={nodes} key={childNode.id} aria-role="treeitem" />
       ))}
     </MuiTreeItem>
   );
@@ -74,12 +78,13 @@ export const TreePropertySection = ({ editingContextId, formId, widget, subscrib
         label: 'None',
         kind: 'siriusComponents://unknown',
         iconURL: [],
+        iconEndURL: [],
         selectable: false,
       },
     ];
   }
 
-  const rootNodes = nodes.filter((node) => node.parentId === null);
+  const rootNodes = nodes.filter((node) => !node.parentId);
   return (
     <div>
       <PropertySectionLabel