[3675] Remove label from selection

Bug: #3675
Signed-off-by: Guillaume Coutable <[email protected]>

CHANGELOG.adoc

@@ -28,9 +28,11 @@ More existing APIs will be migrated to this new common pattern.
  * `Optional<IRepresentationEventProcessor> createRepresentationEventProcessor(IRepresentationConfiguration configuration, IEditingContext editingContext)`;
  * `public Optional<IRepresentationEventProcessor> acquireRepresentationEventProcessor(IRepresentationConfiguration configuration, IInput input)`;
  * `Flux<IPayload> getSubscription(String editingContextId, IRepresentationConfiguration representationConfiguration, IInput input);`
- - https://github.com/eclipse-sirius/sirius-web/issues/3623[#3623] [form] Remove `IWidgetSubscriptionManagerFactory`
- - https://github.com/eclipse-sirius/sirius-web/issues/3634[#3634] [sirius-web] Remove `GraphQLNodeStyleFragment` from `NodeTypeRegistry`, you can specify additional fields to be retreived by the subscription using the `DocumentTransform` GraphQL API and the `apolloClientOptionsConfigurersExtensionPoint` extension point
- - https://github.com/eclipse-sirius/sirius-web/issues/3641[#3641] [core] `IRepresentationMetadataProvider` now defined a single method `Optional<RepresentationMetadata> getMetadata(String representationId)` instead of separate `canHandle` and `handle` methods.
+- https://github.com/eclipse-sirius/sirius-web/issues/3623[#3623] [form] Remove `IWidgetSubscriptionManagerFactory`
+- https://github.com/eclipse-sirius/sirius-web/issues/3634[#3634] [sirius-web] Remove `GraphQLNodeStyleFragment` from `NodeTypeRegistry`, you can specify additional fields to be retreived by the subscription using the `DocumentTransform` GraphQL API and the `apolloClientOptionsConfigurersExtensionPoint` extension point
+- https://github.com/eclipse-sirius/sirius-web/issues/3641[#3641] [core] `IRepresentationMetadataProvider` now defined a single method `Optional<RepresentationMetadata> getMetadata(String representationId)` instead of separate `canHandle` and `handle` methods.
+- https://github.com/eclipse-sirius/sirius-web/issues/3675[#3675] [core] Since the label is removed from the selection, the label of a representation cannot be retrieve from the selection.
++ You can use the new hook instead.
 
 === Dependency update
 
@@ -120,6 +122,8 @@ image:doc/screenshots/insideLabelPositions.png[Inside label positions, 70%]
 - https://github.com/eclipse-sirius/sirius-web/issues/3645[#3645] [core] Revert earlier change made in #3595 which caused regressions
 - https://github.com/eclipse-sirius/sirius-web/issues/3651[#3651] [diagram] Improve performances when interacting with the diagram, especially when dragging a node
 - https://github.com/eclipse-sirius/sirius-web/issues/3641[#3641] [core] Do not fetch representation content when we only need the metadata
+- https://github.com/eclipse-sirius/sirius-web/issues/3675[#3675] [core] Remove the label from the selection entry.
++ It also introduces a new hook to retrieve representation metadata.
 
 
 == v2024.5.0

integration-tests/cypress/e2e/project/gantt/gantt-task.cy.ts

@@ -78,7 +78,7 @@ describe('Verify the Gantt Task actions', () => {
     ganttHelper.getTask('New Task').should('not.exist');
   });
 
-  it.only('can create a task dependency', () => {
+  it('can create a task dependency', () => {
     const ganttHelper = new GanttTestHelper();
     ganttHelper.getTask('Front').click();
     ganttHelper

packages/core/frontend/sirius-components-core/src/representationmetadata/useRepresentationMetadata.tsx

@@ -0,0 +1,74 @@
+/*******************************************************************************
+ * 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 { gql, useLazyQuery } from '@apollo/client';
+import { useMultiToast } from '../toast/MultiToast';
+import { RepresentationMetadata } from '../workbench/Workbench.types';
+import {
+  GQLRepresentationMetadata,
+  GQLRepresentationMetadataQueryData,
+  GQLRepresentationMetadataQueryVariables,
+  UseRepresentationMetadataValue,
+} from './useRepresentationMetadata.types';
+
+const getRepresentationMetadata = gql`
+  query getRepresentationMetadata($editingContextId: ID!, $representationId: ID!) {
+    viewer {
+      editingContext(editingContextId: $editingContextId) {
+        representation(representationId: $representationId) {
+          id
+          label
+          kind
+        }
+      }
+    }
+  }
+`;
+
+const notNullNorUndefined = (
+  metadata: GQLRepresentationMetadata | null | undefined
+): metadata is GQLRepresentationMetadata => !!metadata;
+
+export const useRepresentationMetadata = (): UseRepresentationMetadataValue => {
+  const { addErrorMessage } = useMultiToast();
+  const [fetch] = useLazyQuery<GQLRepresentationMetadataQueryData, GQLRepresentationMetadataQueryVariables>(
+    getRepresentationMetadata
+  );
+
+  const representationMetadata = (
+    editingContextId: string,
+    representationIds: string[],
+    onRetrieveRepresentationMetadataSuccess: (representationMetadata: RepresentationMetadata[]) => void
+  ): void => {
+    Promise.all(
+      representationIds.map((representationId) => {
+        const variables: GQLRepresentationMetadataQueryVariables = {
+          editingContextId,
+          representationId,
+        };
+        return fetch({ variables });
+      })
+    ).then(
+      (result) => {
+        const representationMetadata: RepresentationMetadata[] = result
+          .map((queryResult) => queryResult.data?.viewer.editingContext.representation)
+          .filter(notNullNorUndefined);
+        onRetrieveRepresentationMetadataSuccess(representationMetadata);
+      },
+      () => {
+        addErrorMessage('An error occurred while fetching representation metadata, please refresh.');
+      }
+    );
+  };
+
+  return { representationMetadata };
+};

packages/core/frontend/sirius-components-core/src/representationmetadata/useRepresentationMetadata.types.tsx

@@ -0,0 +1,43 @@
+/*******************************************************************************
+ * 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 { RepresentationMetadata } from '../workbench/Workbench.types';
+
+export interface UseRepresentationMetadataValue {
+  representationMetadata: (
+    editingContextId: string,
+    representationIds: string[],
+    onRetrieveRepresentationMetadataSuccess: (representationMetadata: RepresentationMetadata[]) => void
+  ) => void;
+}
+
+export interface GQLRepresentationMetadataQueryData {
+  viewer: GQLViewer;
+}
+
+export interface GQLViewer {
+  editingContext: GQLEditingContext;
+}
+export interface GQLEditingContext {
+  representation: GQLRepresentationMetadata | null;
+}
+
+export interface GQLRepresentationMetadata {
+  id: string;
+  label: string;
+  kind: string;
+}
+
+export interface GQLRepresentationMetadataQueryVariables {
+  editingContextId: string;
+  representationId: string;
+}

packages/core/frontend/sirius-components-core/src/selection/SelectionContext.types.ts

@@ -17,7 +17,6 @@ export interface Selection {
 
 export interface SelectionEntry {
   id: string;
-  label: string;
   kind: string;
 }
 

packages/core/frontend/sirius-components-core/src/workbench/Workbench.tsx

@@ -16,6 +16,7 @@ import { useMachine } from '@xstate/react';
 import { useEffect } from 'react';
 import { useComponent } from '../extension/useComponent';
 import { useData } from '../extension/useData';
+import { useRepresentationMetadata } from '../representationmetadata/useRepresentationMetadata';
 import { useSelection } from '../selection/useSelection';
 import { Toast } from '../toast/Toast';
 import { Panels } from './Panels';
@@ -87,6 +88,7 @@ export const Workbench = ({
   const { toast } = value as SchemaValue;
   const { id, representations, displayedRepresentation, message } = context;
   const { selection, setSelection } = useSelection();
+  const { representationMetadata } = useRepresentationMetadata();
   const { data: representationFactories } = useData(representationFactoryExtensionPoint);
 
   const { error } = useSubscription<GQLEditingContextEventSubscription>(editingContextEventSubscription, {
@@ -119,18 +121,18 @@ export const Workbench = ({
   }, [error, dispatch]);
 
   useEffect(() => {
-    const representations: RepresentationMetadata[] = selection.entries.filter((entry) =>
-      entry.kind.startsWith('siriusComponents://representation')
-    );
-    const updateSelectedRepresentation: UpdateSelectedRepresentationEvent = {
-      type: 'UPDATE_SELECTED_REPRESENTATION',
-      representations,
-    };
-    dispatch(updateSelectedRepresentation);
+    const selectionIds = selection.entries.map((selectionEntry) => selectionEntry.id);
+    representationMetadata(editingContextId, selectionIds, (representationsMetadata) => {
+      const updateSelectedRepresentation: UpdateSelectedRepresentationEvent = {
+        type: 'UPDATE_SELECTED_REPRESENTATION',
+        representations: representationsMetadata,
+      };
+      dispatch(updateSelectedRepresentation);
+    });
   }, [selection, dispatch]);
 
   const onRepresentationClick = (representation: RepresentationMetadata) => {
-    setSelection({ entries: [{ id: representation.id, label: representation.label, kind: representation.kind }] });
+    setSelection({ entries: [{ id: representation.id, kind: representation.kind }] });
   };
 
   const onClose = (representation: RepresentationMetadata) => {

packages/deck/frontend/sirius-components-deck/src/representation/DeckRepresentation.tsx

@@ -169,7 +169,6 @@ export const DeckRepresentation = ({ editingContextId, representationId }: Repre
             {
               id: lane.targetObjectId,
               kind: 'lane',
-              label: lane.label,
             },
           ],
         });

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/DiagramRenderer.tsx

@@ -218,15 +218,14 @@ export const DiagramRenderer = memo(({ diagramRefreshedEventPayload }: DiagramRe
       const {
         diagram: {
           id,
-          metadata: { kind, label },
+          metadata: { kind },
         },
       } = diagramRefreshedEventPayload;
       const selection: Selection = {
         entries: [
           {
             id,
             kind,
-            label,
           },
         ],
       };

packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/Group.tsx

@@ -298,7 +298,6 @@ export const Group = ({ page, group }: GroupProps) => {
       entries: [
         {
           id: group.id,
-          label: group.label,
           kind: `siriusComponents://semantic?domain=view&entity=GroupDescription`,
         },
       ],

packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/PageList.tsx

@@ -242,7 +242,6 @@ export const PageList = () => {
         entries: [
           {
             id: currentPage.id,
-            label: currentPage.label,
             kind: `siriusComponents://semantic?domain=view&entity=PageDescription`,
           },
         ],

packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ToolbarActionWidget.tsx

@@ -318,7 +318,6 @@ export const ToolbarActionWidget = ({ toolbarActions, containerId, toolbarAction
       entries: [
         {
           id: toolbarAction.id,
-          label: toolbarAction.label,
           kind: `siriusComponents://semantic?domain=view&entity=${toolbarAction.__typename}Description`,
         },
       ],

packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetEntry.tsx

@@ -213,7 +213,6 @@ export const WidgetEntry = ({ page, container, widget, flexDirection, flexGrow }
       entries: [
         {
           id: widget.id,
-          label: widget.label,
           kind: `siriusComponents://semantic?domain=view&entity=${widget.__typename}Description`,
         },
       ],

packages/forms/frontend/sirius-components-forms/src/propertysections/ListPropertySection.tsx

@@ -201,8 +201,8 @@ export const ListPropertySection: PropertySectionComponent<GQLList> = ({
     }
   }, [clickLoading, clickError, clickData]);
   const onSimpleClick = (item: GQLListItem) => {
-    const { id, label, kind } = item;
-    setSelection({ entries: [{ id, label, kind }] });
+    const { id, kind } = item;
+    setSelection({ entries: [{ id, kind }] });
     const variables: GQLClickListItemMutationVariables = {
       input: {
         id: crypto.randomUUID(),
@@ -217,8 +217,8 @@ export const ListPropertySection: PropertySectionComponent<GQLList> = ({
     clickListItem({ variables });
   };
   const onDoubleClick = (item: GQLListItem) => {
-    const { id, label, kind } = item;
-    setSelection({ entries: [{ id, label, kind }] });
+    const { id, kind } = item;
+    setSelection({ entries: [{ id, kind }] });
     const variables: GQLClickListItemMutationVariables = {
       input: {
         id: crypto.randomUUID(),

packages/forms/frontend/sirius-components-forms/src/propertysections/TreePropertySection.tsx

@@ -137,7 +137,6 @@ const TreeItem = ({ node, nodes, readOnly, editingContextId, formId, widgetId }:
     if (node.selectable) {
       const newSelection: SelectionEntry = {
         id: node.id,
-        label: node.label,
         kind: node.kind,
       };
       setSelection({ entries: [newSelection] });

packages/forms/frontend/sirius-components-widget-reference/src/ReferencePropertySection.tsx

@@ -224,12 +224,12 @@ const RawReferencePropertySection: PropertySectionComponent<GQLReferenceWidget>
   >(moveReferenceValueMutation);
 
   const onReferenceValueSimpleClick = (item: GQLReferenceValue) => {
-    const { id, label, kind } = item;
-    setSelection({ entries: [{ id, label, kind }] });
+    const { id, kind } = item;
+    setSelection({ entries: [{ id, kind }] });
   };
   const onReferenceValueDoubleClick = (item: GQLReferenceValue) => {
-    const { id, label, kind } = item;
-    setSelection({ entries: [{ id, label, kind }] });
+    const { id, kind } = item;
+    setSelection({ entries: [{ id, kind }] });
   };
 
   const clickHandler = useClickHandler<GQLReferenceValue>(onReferenceValueSimpleClick, onReferenceValueDoubleClick);

packages/forms/frontend/sirius-components-widget-reference/src/components/FilterableSortableList.types.ts

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023 Obeo.
+ * Copyright (c) 2023, 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
@@ -10,20 +10,25 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { SelectionEntry } from '@eclipse-sirius/sirius-components-core';
 import React from 'react';
 import { GQLReferenceValue } from '../ReferenceWidgetFragment.types';
 
 export interface FilterableSortableListProps {
-  items: SelectionEntry[];
+  items: FilterableSortableListItem[];
   options: GQLReferenceValue[];
-  setItems: (items: SelectionEntry[]) => void;
+  setItems: (items: FilterableSortableListItem[]) => void;
   handleDragItemStart: (id: string) => void;
   handleDragItemEnd: () => void;
   handleDropNewItem: (event: React.DragEvent) => void;
-  onClick: (event: React.MouseEvent<Element, MouseEvent>, item: SelectionEntry) => void;
+  onClick: (event: React.MouseEvent<Element, MouseEvent>, item: FilterableSortableListItem) => void;
   moveElement: (elementId: string, fromIndex: number, toIndex: number) => void;
-  selectedItems: SelectionEntry[];
+  selectedItems: FilterableSortableListItem[];
+}
+
+export interface FilterableSortableListItem {
+  id: string;
+  label: string;
+  kind: string;
 }
 
 export interface FilterableSortableListState {

packages/forms/frontend/sirius-components-widget-reference/src/modals/TransferModal.tsx

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023 Obeo.
+ * Copyright (c) 2023, 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
@@ -29,6 +29,7 @@ import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import React, { useEffect, useState } from 'react';
 import { FilterableSortableList } from '../components/FilterableSortableList';
+import { FilterableSortableListItem } from '../components/FilterableSortableList.types';
 import { ModelBrowserTreeView } from '../components/ModelBrowserTreeView';
 import {
   GQLFormDescription,
@@ -200,11 +201,11 @@ export const TransferModal = ({
     }
   };
 
-  const onClick = (event: React.MouseEvent<Element, MouseEvent>, item: SelectionEntry) => {
+  const onClick = (event: React.MouseEvent<Element, MouseEvent>, item: FilterableSortableListItem) => {
     if (event.ctrlKey || event.metaKey) {
       event.stopPropagation();
       const isItemInSelection = state.rightSelection.find((entry) => entry.id === item.id);
-      const newSelection: SelectionEntry[] = isItemInSelection
+      const newSelection: FilterableSortableListItem[] = isItemInSelection
         ? state.rightSelection.filter((entry) => entry.id !== item.id)
         : [...state.rightSelection, item];
       setState((prevState) => {
@@ -290,7 +291,7 @@ export const TransferModal = ({
                 <FilterableSortableList
                   items={state.right}
                   options={[...state.options, ...widget.referenceValues]}
-                  setItems={(items: SelectionEntry[]) =>
+                  setItems={(items: FilterableSortableListItem[]) =>
                     setState((prevState) => {
                       return {
                         ...prevState,