[694] Provide a kind to ListItem

It makes possible to set the selection from the ListPropertySection Bug: #694 Signed-off-by: Guillaume Coutable <guillaume.coutable@obeo.fr>
eclipse-sirius · Sep 24, 2021 · 14da5ee · 14da5ee
1 parent c9a3fcc
commit 14da5ee
Show file tree

Hide file tree

Showing 14 changed files with 80 additions and 48 deletions.
diff --git a/backend/sirius-web-forms/src/main/java/org/eclipse/sirius/web/forms/ListItem.java b/backend/sirius-web-forms/src/main/java/org/eclipse/sirius/web/forms/ListItem.java
@@ -33,6 +33,8 @@ public final class ListItem {
 
     private String label;
 
+    private String kind;
+
     private String imageURL;
 
     private ListItemAction action;
@@ -54,6 +56,12 @@ public String getLabel() {
         return this.label;
     }
 
+    @GraphQLField
+    @GraphQLNonNull
+    public String getKind() {
+        return this.kind;
+    }
+
     @GraphQLField
     @GraphQLNonNull
     public String getImageURL() {
@@ -72,8 +80,8 @@ public static Builder newListItem(String id) {
 
     @Override
     public String toString() {
-        String pattern = "{0} '{'id: {1}, label: {2}, imageURL: {3}'}'"; //$NON-NLS-1$
-        return MessageFormat.format(pattern, this.getClass().getSimpleName(), this.id, this.label, this.imageURL);
+        String pattern = "{0} '{'id: {1}, label: {2}, kind: {3}, imageURL: {4}'}'"; //$NON-NLS-1$
+        return MessageFormat.format(pattern, this.getClass().getSimpleName(), this.id, this.label, this.kind, this.imageURL);
     }
 
     /**
@@ -87,6 +95,8 @@ public static final class Builder {
 
         private String label;
 
+        private String kind;
+
         private String imageURL;
 
         private ListItemAction action;
@@ -100,6 +110,11 @@ public Builder label(String label) {
             return this;
         }
 
+        public Builder kind(String kind) {
+            this.kind = Objects.requireNonNull(kind);
+            return this;
+        }
+
         public Builder imageURL(String imageURL) {
             this.imageURL = Objects.requireNonNull(imageURL);
             return this;
@@ -114,6 +129,7 @@ public ListItem build() {
             ListItem listItem = new ListItem();
             listItem.id = Objects.requireNonNull(this.id);
             listItem.label = Objects.requireNonNull(this.label);
+            listItem.kind = Objects.requireNonNull(this.kind);
             listItem.imageURL = Objects.requireNonNull(this.imageURL);
             listItem.action = Objects.requireNonNull(this.action);
             return listItem;

diff --git a/...sirius-web-forms/src/main/java/org/eclipse/sirius/web/forms/components/ListComponent.java b/...sirius-web-forms/src/main/java/org/eclipse/sirius/web/forms/components/ListComponent.java
@@ -61,6 +61,7 @@ public Element render() {
 
             String itemId = listDescription.getItemIdProvider().apply(itemVariableManager);
             String itemLabel = listDescription.getItemLabelProvider().apply(itemVariableManager);
+            String itemKind = listDescription.getItemKindProvider().apply(itemVariableManager);
             String itemImageURL = listDescription.getItemImageURLProvider().apply(itemVariableManager);
 
             Object listItemAction = listDescription.getItemActionProvider().apply(itemVariableManager);
@@ -77,6 +78,7 @@ public Element render() {
 
             ListItem item = ListItem.newListItem(itemId)
                     .label(itemLabel)
+                    .kind(itemKind)
                     .imageURL(itemImageURL)
                     .action(itemAction)
                     .build();

diff --git a/...ius-web-forms/src/main/java/org/eclipse/sirius/web/forms/description/ListDescription.java b/...ius-web-forms/src/main/java/org/eclipse/sirius/web/forms/description/ListDescription.java
@@ -38,6 +38,8 @@ public final class ListDescription extends AbstractWidgetDescription {
 
     private Function<VariableManager, String> itemLabelProvider;
 
+    private Function<VariableManager, String> itemKindProvider;
+
     private Function<VariableManager, String> itemImageURLProvider;
 
     private Function<VariableManager, Object> itemActionProvider;
@@ -70,6 +72,10 @@ public Function<VariableManager, String> getItemLabelProvider() {
         return this.itemLabelProvider;
     }
 
+    public Function<VariableManager, String> getItemKindProvider() {
+        return this.itemKindProvider;
+    }
+
     public Function<VariableManager, String> getItemImageURLProvider() {
         return this.itemImageURLProvider;
     }
@@ -115,6 +121,8 @@ public static final class Builder {
 
         private Function<VariableManager, String> itemLabelProvider;
 
+        private Function<VariableManager, String> itemKindProvider;
+
         private Function<VariableManager, String> itemImageURLProvider;
 
         private Function<VariableManager, Object> itemActionProvider;
@@ -158,6 +166,11 @@ public Builder itemLabelProvider(Function<VariableManager, String> itemLabelProv
             return this;
         }
 
+        public Builder itemKindProvider(Function<VariableManager, String> itemKindProvider) {
+            this.itemKindProvider = Objects.requireNonNull(itemKindProvider);
+            return this;
+        }
+
         public Builder itemImageURLProvider(Function<VariableManager, String> itemImageURLProvider) {
             this.itemImageURLProvider = Objects.requireNonNull(itemImageURLProvider);
             return this;
@@ -201,6 +214,7 @@ public ListDescription build() {
             listDescription.itemsProvider = Objects.requireNonNull(this.itemsProvider);
             listDescription.itemIdProvider = Objects.requireNonNull(this.itemIdProvider);
             listDescription.itemLabelProvider = Objects.requireNonNull(this.itemLabelProvider);
+            listDescription.itemKindProvider = Objects.requireNonNull(this.itemKindProvider);
             listDescription.itemImageURLProvider = Objects.requireNonNull(this.itemImageURLProvider);
             listDescription.itemActionProvider = Objects.requireNonNull(this.itemActionProvider);
             listDescription.itemActionTooltipProvider = Objects.requireNonNull(this.itemActionTooltipProvider);

diff --git a/backend/sirius-web-spring-collaborative-forms/src/main/resources/schema/form.graphqls b/backend/sirius-web-spring-collaborative-forms/src/main/resources/schema/form.graphqls
@@ -86,6 +86,7 @@ type List implements Widget {
 type ListItem {
   id: ID!
   label: String!
+  kind: String!
   imageURL: String!
   action: ListItemAction!
 }

diff --git a/frontend/src/form/Form.types.ts b/frontend/src/form/Form.types.ts
@@ -98,6 +98,7 @@ export interface List extends Widget {
 export interface ListItem {
   id: string;
   label: string;
+  kind: string;
   imageURL: string;
   action: ListItemAction;
 }

diff --git a/frontend/src/form/FormEventFragments.ts b/frontend/src/form/FormEventFragments.ts
@@ -94,6 +94,7 @@ export const formRefreshedEventPayloadFragment = gql`
               items {
                 id
                 label
+                kind
                 imageURL
                 action {
                   tooltip

diff --git a/frontend/src/properties/propertysections/ListPropertySection.tsx b/frontend/src/properties/propertysections/ListPropertySection.tsx
@@ -10,16 +10,13 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { IconButton, Tooltip } from '@material-ui/core';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import { makeStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
-import CheckIcon from '@material-ui/icons/Check';
-import DeleteIcon from '@material-ui/icons/Delete';
 import { httpOrigin } from 'common/URL';
 import { ListItem } from 'form/Form.types';
 import { ListPropertySectionProps } from 'properties/propertysections/ListPropertySection.types';
@@ -44,30 +41,37 @@ const useListPropertySectionStyles = makeStyles((theme) => ({
   },
 }));
 
-export const ListPropertySection = ({ widget, subscribers, readonly }: ListPropertySectionProps) => {
+export const ListPropertySection = ({ widget, subscribers, readonly, setSelection }: ListPropertySectionProps) => {
   const classes = useListPropertySectionStyles();
 
   let items = widget.items;
   if (items.length === 0) {
-    debugger;
     items.push({
       id: 'none',
       imageURL: '',
       label: 'None',
+      kind: 'Unknown',
       action: {
         tooltip: 'no Action',
         iconName: 'CheckIcon',
       },
     });
   }
 
+  const onRowClick = (item: ListItem) => {
+    if (setSelection) {
+      const { id, label, kind } = item;
+      setSelection({ id, label, kind });
+    }
+  };
+
   return (
     <FormControl error={widget.diagnostics.length > 0}>
       <PropertySectionLabel label={widget.label} subscribers={subscribers} />
-      <Table className={classes.table}>
+      <Table className={classes.table} size="small">
         <TableBody>
           {widget.items.map((item) => (
-            <TableRow key={item.id}>
+            <TableRow key={item.id} hover={!!setSelection} onClick={() => onRowClick(item)}>
               <TableCell>
                 {item.imageURL ? (
                   <img
@@ -80,7 +84,6 @@ export const ListPropertySection = ({ widget, subscribers, readonly }: ListPrope
                 ) : null}
                 {item.label}
               </TableCell>
-              <TableCell align="right">{getAction(item, readonly)}</TableCell>
             </TableRow>
           ))}
         </TableBody>
@@ -89,23 +92,3 @@ export const ListPropertySection = ({ widget, subscribers, readonly }: ListPrope
     </FormControl>
   );
 };
-
-const getAction = (item: ListItem, disabled: boolean) => {
-  const { iconName, tooltip } = item.action;
-  if (iconName === 'DeleteIcon') {
-    return (
-      <Tooltip title={tooltip}>
-        <IconButton aria-label="delete" size="small" disabled={disabled}>
-          <DeleteIcon />
-        </IconButton>
-      </Tooltip>
-    );
-  }
-  return (
-    <Tooltip title="Check">
-      <IconButton aria-label="check" size="small" disabled={disabled}>
-        <CheckIcon />
-      </IconButton>
-    </Tooltip>
-  );
-};
diff --git a/frontend/src/properties/propertysections/ListPropertySection.types.ts b/frontend/src/properties/propertysections/ListPropertySection.types.ts
@@ -11,9 +11,11 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 import { List, Subscriber } from 'form/Form.types';
+import { Selection } from 'workbench/Workbench.types';
 
 export interface ListPropertySectionProps {
   widget: List;
   subscribers: Subscriber[];
   readonly: boolean;
+  setSelection?: (selection: Selection) => void;
 }
diff --git a/frontend/src/representations/RepresentationsWebSocketContainer.tsx b/frontend/src/representations/RepresentationsWebSocketContainer.tsx
@@ -22,7 +22,7 @@ import {
   widgetSubscriptionsUpdatedEventPayloadFragment,
 } from 'form/FormEventFragments';
 import gql from 'graphql-tag';
-import { Properties } from 'properties/Properties';
+import { ListPropertySection } from 'properties/propertysections/ListPropertySection';
 import React, { useContext, useEffect } from 'react';
 import { RepresentationContext } from 'workbench/RepresentationContext';
 import { RepresentationsWebSocketContainerProps } from './RepresentationsWebSocketContainer.types';
@@ -67,6 +67,7 @@ const useRepresentationsWebSocketContainerStyles = makeStyles((theme) => ({
 export const RepresentationsWebSocketContainer = ({
   editingContextId,
   selection,
+  setSelection,
   readOnly,
 }: RepresentationsWebSocketContainerProps) => {
   const classes = useRepresentationsWebSocketContainerStyles();
@@ -77,7 +78,7 @@ export const RepresentationsWebSocketContainer = ({
   >(representationsWebSocketContainerMachine);
 
   const { toast, representationsWebSocketContainer } = value as SchemaValue;
-  const { id, currentSelection, form, subscribers, widgetSubscriptions, message } = context;
+  const { id, currentSelection, widget, subscribers, message } = context;
   const { registry } = useContext(RepresentationContext);
 
   useEffect(() => {
@@ -99,7 +100,6 @@ export const RepresentationsWebSocketContainer = ({
     fetchPolicy: 'no-cache',
     skip: representationsWebSocketContainer === 'empty' || representationsWebSocketContainer === 'unsupportedSelection',
     onSubscriptionData: ({ subscriptionData }) => {
-      debugger;
       const handleDataEvent: HandleSubscriptionResultEvent = {
         type: 'HANDLE_SUBSCRIPTION_RESULT',
         result: subscriptionData,
@@ -130,15 +130,9 @@ export const RepresentationsWebSocketContainer = ({
       </div>
     );
   }
-  if ((representationsWebSocketContainer === 'idle' && form) || representationsWebSocketContainer === 'ready') {
+  if ((representationsWebSocketContainer === 'idle' && widget) || representationsWebSocketContainer === 'ready') {
     content = (
-      <Properties
-        editingContextId={editingContextId}
-        subscribers={subscribers}
-        widgetSubscriptions={widgetSubscriptions}
-        form={form}
-        readOnly={readOnly}
-      />
+      <ListPropertySection readonly={readOnly} widget={widget} subscribers={subscribers} setSelection={setSelection} />
     );
   }
 

diff --git a/frontend/src/representations/RepresentationsWebSocketContainer.types.ts b/frontend/src/representations/RepresentationsWebSocketContainer.types.ts
@@ -16,5 +16,6 @@ import { Selection } from 'workbench/Workbench.types';
 export interface RepresentationsWebSocketContainerProps {
   editingContextId: string;
   selection: Selection;
+  setSelection: (selection: Selection) => void;
   readOnly: boolean;
 }
diff --git a/frontend/src/representations/RepresentationsWebSocketContainerMachine.ts b/frontend/src/representations/RepresentationsWebSocketContainerMachine.ts
@@ -12,7 +12,7 @@
  *******************************************************************************/
 
 import { SubscriptionResult } from '@apollo/client';
-import { Form, Subscriber, WidgetSubscription } from 'form/Form.types';
+import { List, Subscriber, WidgetSubscription } from 'form/Form.types';
 import {
   GQLFormRefreshedEventPayload,
   GQLPropertiesEventPayload,
@@ -52,7 +52,7 @@ export type SchemaValue = {
 export interface RepresentationsWebSocketContainerContext {
   id: string;
   currentSelection: Selection | null;
-  form: Form | null;
+  widget: List | null;
   subscribers: Subscriber[];
   widgetSubscriptions: WidgetSubscription[];
   message: string | null;
@@ -93,7 +93,7 @@ export const representationsWebSocketContainerMachine = Machine<
     context: {
       id: uuid(),
       currentSelection: null,
-      form: null,
+      widget: null,
       subscribers: [],
       widgetSubscriptions: [],
       message: null,
@@ -238,14 +238,22 @@ export const representationsWebSocketContainerMachine = Machine<
         return { id: uuid(), currentSelection: selection };
       }),
       clearForm: assign((_, event) => {
-        return { form: null };
+        return { widget: null };
       }),
       handleSubscriptionResult: assign((_, event) => {
         const { result } = event as HandleSubscriptionResultEvent;
         const { data } = result;
         if (isFormRefreshedEventPayload(data.representationsEvent)) {
           const { form } = data.representationsEvent;
-          return { form };
+          let widget = null;
+          const firstPage = [...form.pages].shift();
+          if (firstPage) {
+            const firstGroup = [...firstPage.groups].shift();
+            if (firstGroup) {
+              widget = [...firstGroup.widgets].shift();
+            }
+          }
+          return { widget };
         } else if (isSubscribersUpdatedEventPayload(data.representationsEvent)) {
           const { subscribers } = data.representationsEvent;
           return { subscribers };

diff --git a/frontend/src/workbench/RightSite.tsx b/frontend/src/workbench/RightSite.tsx
@@ -74,7 +74,7 @@ const CustomCollapse = withStyles({
   },
 })(MuiCollapse);
 
-export const RightSite = ({ editingContextId, selection, readOnly }: RightSiteProps) => {
+export const RightSite = ({ editingContextId, selection, setSelection, readOnly }: RightSiteProps) => {
   const classes = useSiteStyles();
 
   return (
@@ -91,6 +91,7 @@ export const RightSite = ({ editingContextId, selection, readOnly }: RightSitePr
           <RepresentationsWebSocketContainer
             editingContextId={editingContextId}
             selection={selection}
+            setSelection={setSelection}
             readOnly={readOnly}
           />
         </AccordionDetails>

diff --git a/frontend/src/workbench/RightSite.types.ts b/frontend/src/workbench/RightSite.types.ts
@@ -15,5 +15,6 @@ import { Selection } from 'workbench/Workbench.types';
 export interface RightSiteProps {
   editingContextId: string;
   selection?: Selection;
+  setSelection?: (selection: Selection) => void;
   readOnly: boolean;
 }