[3785] Add an extension point to contribute custom tree item menu entry

Bug: eclipse-sirius#3785
Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com>

CHANGELOG.adoc

@@ -28,9 +28,7 @@
 As a result, the following maven modules have been deleted: `sirius-web-sample-application`, `sirius-web-spring`, `sirius-web-graphql`, `sirius-web-services-api`, `sirius-web-services`, `sirius-web-persistence`.
 - https://github.com/eclipse-sirius/sirius-web/issues/3676[#3676] [representation] Remove the label from representation subscriptions and from graphql types.
 + Also remove the label from representation metadata (and sometimes the whole metadata) when the label or metadata were not needed.
-- https://github.com/eclipse-sirius/sirius-web/issues/1470[#1470] [view] Since the computation of converted description ID has changed, the identifier of existing representations is not valid anymore, and these representations cannot be opened. 
-- https://github.com/eclipse-sirius/sirius-web/issues/2759[#2759] [diagram] Update some API relative to the diagram:
-- https://github.com/eclipse-sirius/sirius-web/issues/1470[#1470] [view] Since the computation of converted description ID has changed, the identifier of existing representations is not valid anymore, and these representations cannot be opened.
+- https://github.com/eclipse-sirius/sirius-web/issues/1470[#1470] [view] Since the computation of converted description ID has changed, the identifier of existing representations is not valid anymore, and these representations cannot be opened.- https://github.com/eclipse-sirius/sirius-web/issues/2759[#2759] [diagram] Update some API relative to the diagram:- https://github.com/eclipse-sirius/sirius-web/issues/1470[#1470] [view] Since the computation of converted description ID has changed, the identifier of existing representations is not valid anymore, and these representations cannot be opened.
 
  * The `NodeTool#selectionDescription` attribute of type `SelectionDescription` has been renamed into `dialogDescription` and is now of type `DialogDescription`.
  * The `SelectionDescription` type has been renamed into `SelectionDialogDescription` and inherit from `DialogDescription`.
@@ -83,6 +81,7 @@ Thanks to this change, the various form based representations (details, related
 - https://github.com/eclipse-sirius/sirius-web/issues/3794[#3794] [view] In diagram view DSL, _NodeLabelStyle#showIcon_ has been change to _NodeLabelStyle#showIconExpression_, allowing to dynamically change this style option depending on a condition evaluated at runtime.
 A migration participant has been added to automatically keep compatible all diagram descriptions created before 2024.9.0.
 - https://github.com/eclipse-sirius/sirius-web/issues/3774[#3774] [sirius-web] Add an extension point to contribute custom tools to the diagram palette
+- https://github.com/eclipse-sirius/sirius-web/issues/3785[#3785] [sirius-web] Add an extension point to contribute custom tree item menu entry
 
 == v2024.7.0
 

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

@@ -10,8 +10,11 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { TreeView } from '@eclipse-sirius/sirius-components-trees';
+
+import { TreeView, TreeItemActionProps } from '@eclipse-sirius/sirius-components-trees';
+import IconButton from '@material-ui/core/IconButton';
 import { makeStyles } from '@material-ui/core/styles';
+import UnfoldMoreIcon from '@material-ui/icons/UnfoldMore';
 import { useState } from 'react';
 import { ModelBrowserFilterBar } from './ModelBrowserFilterBar';
 import { ModelBrowserTreeViewProps, ModelBrowserTreeViewState } from './ModelBrowserTreeView.types';
@@ -65,8 +68,26 @@ export const ModelBrowserTreeView = ({
           textToFilter={state.filterBarText}
           textToHighlight={state.filterBarText}
           markedItemIds={markedItemIds}
+          treeItemActionRender={(props) => <WidgetReferenceTreeItemAction {...props} />}
         />
       </div>
     </>
   );
 };
+
+const WidgetReferenceTreeItemAction = ({ onExpandAll, item, isHovered }: TreeItemActionProps) => {
+  if (!onExpandAll || !item || !item.hasChildren || !isHovered) {
+    return null;
+  }
+  return (
+    <IconButton
+      size="small"
+      data-testid="expand-all"
+      title="expand all"
+      onClick={() => {
+        onExpandAll(item);
+      }}>
+      <UnfoldMoreIcon style={{ fontSize: 12 }} />
+    </IconButton>
+  );
+};

packages/sirius-web/frontend/sirius-web-application/src/extension/DefaultExtensionRegistry.tsx

@@ -30,7 +30,7 @@ import { FormDescriptionEditorRepresentation } from '@eclipse-sirius/sirius-comp
 import { FormRepresentation } from '@eclipse-sirius/sirius-components-forms';
 import { GanttRepresentation } from '@eclipse-sirius/sirius-components-gantt';
 import { PortalRepresentation } from '@eclipse-sirius/sirius-components-portals';
-import { ExplorerView } from '@eclipse-sirius/sirius-components-trees';
+import { ExplorerView, treeItemContextMenuEntryExtensionPoint } from '@eclipse-sirius/sirius-components-trees';
 import { ValidationView } from '@eclipse-sirius/sirius-components-validation';
 import AccountTreeIcon from '@material-ui/icons/AccountTree';
 import Filter from '@material-ui/icons/Filter';
@@ -46,6 +46,9 @@ import { createProjectAreaCardExtensionPoint } from '../views/project-browser/cr
 import { NewProjectCard } from '../views/project-browser/create-projects-area/NewProjectCard';
 import { ShowAllProjectTemplatesCard } from '../views/project-browser/create-projects-area/ShowAllProjectTemplatesCard';
 import { UploadProjectCard } from '../views/project-browser/create-projects-area/UploadProjectCard';
+import { DocumentTreeItemContextMenuContribution } from '../views/edit-project/DocumentTreeItemContextMenuContribution';
+import { ObjectTreeItemContextMenuContribution } from '../views/edit-project/ObjectTreeItemContextMenuContribution';
+import { DiagramTreeItemContextMenuContribution } from '../views/edit-project/DiagramTreeItemContextMenuContribution';
 
 import { SelectionDialog } from '@eclipse-sirius/sirius-components-selection';
 const getType = (representation: RepresentationMetadata): string | null => {
@@ -191,4 +194,24 @@ defaultExtensionRegistry.putData<DiagramDialogContribution[]>(diagramDialogContr
   data: diagramDialogContributions,
 });
 
+/*******************************************************************************
+ *
+ * Tree item context menu
+ *
+ * Used to register new components in the tree item context menu
+ *
+ *******************************************************************************/
+defaultExtensionRegistry.addComponent(treeItemContextMenuEntryExtensionPoint, {
+  identifier: `siriusweb_${treeItemContextMenuEntryExtensionPoint.identifier}_document`,
+  Component: DocumentTreeItemContextMenuContribution,
+});
+defaultExtensionRegistry.addComponent(treeItemContextMenuEntryExtensionPoint, {
+  identifier: `siriusweb_${treeItemContextMenuEntryExtensionPoint.identifier}_object`,
+  Component: ObjectTreeItemContextMenuContribution,
+});
+defaultExtensionRegistry.addComponent(treeItemContextMenuEntryExtensionPoint, {
+  identifier: `siriusweb_${treeItemContextMenuEntryExtensionPoint.identifier}_diagram`,
+  Component: DiagramTreeItemContextMenuContribution,
+});
+
 export { defaultExtensionRegistry };

packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/DiagramTreeItemContextMenuContribution.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
@@ -14,7 +14,10 @@ import { TreeItemContextMenuComponentProps } from '@eclipse-sirius/sirius-compon
 import { Fragment, forwardRef } from 'react';
 
 export const DiagramTreeItemContextMenuContribution = forwardRef(
-  ({}: TreeItemContextMenuComponentProps, _: React.ForwardedRef<HTMLLIElement>) => {
+  ({ treeId, item }: TreeItemContextMenuComponentProps, _: React.ForwardedRef<HTMLLIElement>) => {
+    if (!treeId.startsWith('explorer://') || item.kind !== 'siriusComponents://representation?type=Diagram') {
+      return null;
+    }
     return <Fragment key="diagram-tree-item-context-menu-contribution"></Fragment>;
   }
 );

packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/DocumentTreeItemContextMenuContribution.tsx

@@ -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
@@ -24,13 +24,17 @@ type Modal = 'CreateNewRootObject';
 
 export const DocumentTreeItemContextMenuContribution = forwardRef(
   (
-    { editingContextId, item, readOnly, expandItem, onClose }: TreeItemContextMenuComponentProps,
+    { editingContextId, treeId, item, readOnly, expandItem, onClose }: TreeItemContextMenuComponentProps,
     ref: React.ForwardedRef<HTMLLIElement>
   ) => {
     const { httpOrigin } = useContext<ServerContextValue>(ServerContext);
     const [modal, setModal] = useState<Modal | null>(null);
     const { setSelection } = useSelection();
 
+    if (!treeId.startsWith('explorer://') || !item.kind.startsWith('siriusWeb://document')) {
+      return null;
+    }
+
     const onObjectCreated = (selection: Selection) => {
       setSelection(selection);
       expandItem();
@@ -82,11 +86,3 @@ export const DocumentTreeItemContextMenuContribution = forwardRef(
     );
   }
 );
-
-/*
-if (!item.expanded && item.hasChildren) {
-      onExpand(item.id, depth);
-    }
-    const { id, label, kind } = object;
-    setSelection({ id, label, kind });
-*/

packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/EditProjectView.tsx

@@ -18,10 +18,6 @@ import {
 } from '@eclipse-sirius/sirius-components-core';
 import { useMachine } from '@xstate/react';
 import {
-  GQLTreeItem,
-  TreeItemContextMenuContext,
-  TreeItemContextMenuContextValue,
-  TreeItemContextMenuContribution,
   TreeToolBarContext,
   TreeToolBarContextValue,
   TreeToolBarContribution,
@@ -32,22 +28,15 @@ import { makeStyles } from '@material-ui/core/styles';
 import { useEffect } from 'react';
 import { generatePath, useHistory, useParams, useRouteMatch } from 'react-router-dom';
 import { NavigationBar } from '../../navigationBar/NavigationBar';
-import { DiagramTreeItemContextMenuContribution } from './DiagramTreeItemContextMenuContribution';
-import { DocumentTreeItemContextMenuContribution } from './DocumentTreeItemContextMenuContribution';
 import { EditProjectNavbar } from './EditProjectNavbar/EditProjectNavbar';
-import {
-  EditProjectViewParams,
-  TreeItemContextMenuProviderProps,
-  TreeToolBarProviderProps,
-} from './EditProjectView.types';
+import { EditProjectViewParams, TreeToolBarProviderProps } from './EditProjectView.types';
 import {
   EditProjectViewContext,
   EditProjectViewEvent,
   HandleFetchedProjectEvent,
   SelectRepresentationEvent,
   editProjectViewMachine,
 } from './EditProjectViewMachine';
-import { ObjectTreeItemContextMenuContribution } from './ObjectTreeItemContextMenuContribution';
 import { ProjectContext } from './ProjectContext';
 import { NewDocumentModalContribution } from './TreeToolBarContributions/NewDocumentModalContribution';
 import { UploadDocumentModalContribution } from './TreeToolBarContributions/UploadDocumentModalContribution';
@@ -133,16 +122,14 @@ export const EditProjectView = () => {
       <ProjectContext.Provider value={{ project: context.project }}>
         <SelectionContextProvider initialSelection={initialSelection}>
           <EditProjectNavbar />
-          <TreeItemContextMenuProvider>
-            <TreeToolBarProvider>
-              <Workbench
-                editingContextId={context.project.currentEditingContext.id}
-                initialRepresentationSelected={context.representation}
-                onRepresentationSelected={onRepresentationSelected}
-                readOnly={false}
-              />
-            </TreeToolBarProvider>
-          </TreeItemContextMenuProvider>
+          <TreeToolBarProvider>
+            <Workbench
+              editingContextId={context.project.currentEditingContext.id}
+              initialRepresentationSelected={context.representation}
+              onRepresentationSelected={onRepresentationSelected}
+              readOnly={false}
+            />
+          </TreeToolBarProvider>
         </SelectionContextProvider>
       </ProjectContext.Provider>
     );
@@ -151,35 +138,6 @@ export const EditProjectView = () => {
   return <div className={classes.editProjectView}>{content}</div>;
 };
 
-const TreeItemContextMenuProvider = ({ children }: TreeItemContextMenuProviderProps) => {
-  const treeItemContextMenuContributions: TreeItemContextMenuContextValue = [
-    <TreeItemContextMenuContribution
-      canHandle={(treeId: string, item: GQLTreeItem) =>
-        treeId.startsWith('explorer://') && item.kind.startsWith('siriusWeb://document')
-      }
-      component={DocumentTreeItemContextMenuContribution}
-    />,
-    <TreeItemContextMenuContribution
-      canHandle={(treeId: string, item: GQLTreeItem) =>
-        treeId.startsWith('explorer://') && item.kind.startsWith('siriusComponents://semantic')
-      }
-      component={ObjectTreeItemContextMenuContribution}
-    />,
-    <TreeItemContextMenuContribution
-      canHandle={(treeId: string, item: GQLTreeItem) =>
-        treeId.startsWith('explorer://') && item.kind === 'siriusComponents://representation?type=Diagram'
-      }
-      component={DiagramTreeItemContextMenuContribution}
-    />,
-  ];
-
-  return (
-    <TreeItemContextMenuContext.Provider value={treeItemContextMenuContributions}>
-      {children}
-    </TreeItemContextMenuContext.Provider>
-  );
-};
-
 const TreeToolBarProvider = ({ children }: TreeToolBarProviderProps) => {
   const treeToolBarContributions: TreeToolBarContextValue = [
     <TreeToolBarContribution component={NewDocumentModalContribution} />,

packages/sirius-web/frontend/sirius-web-application/src/views/edit-project/ObjectTreeItemContextMenuContribution.tsx

@@ -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
@@ -24,12 +24,16 @@ type Modal = 'CreateNewObject' | 'CreateNewRepresentation';
 
 export const ObjectTreeItemContextMenuContribution = forwardRef(
   (
-    { editingContextId, item, readOnly, expandItem, onClose }: TreeItemContextMenuComponentProps,
+    { editingContextId, treeId, item, readOnly, expandItem, onClose }: TreeItemContextMenuComponentProps,
     ref: React.ForwardedRef<HTMLLIElement>
   ) => {
     const [modal, setModal] = useState<Modal>(null);
     const { setSelection } = useSelection();
 
+    if (!treeId.startsWith('explorer://') || !item.kind.startsWith('siriusComponents://semantic')) {
+      return null;
+    }
+
     const onObjectCreated = (selection: Selection) => {
       setSelection(selection);
       expandItem();

packages/trees/frontend/sirius-components-trees/src/index.ts

@@ -14,10 +14,11 @@ export * from './toolbar/TreeToolBarContext';
 export * from './toolbar/TreeToolBarContext.types';
 export * from './toolbar/TreeToolBarContribution';
 export * from './toolbar/TreeToolBarContribution.types';
+export * from './treeitems/TreeItemAction.types';
 export * from './treeitems/TreeItemContextMenu';
 export * from './treeitems/TreeItemContextMenu.types';
-export * from './treeitems/TreeItemContextMenuContribution';
-export * from './treeitems/TreeItemContextMenuContribution.types';
+export * from './treeitems/TreeItemContextMenuEntry.types';
+export * from './treeitems/TreeItemContextMenuEntryExtensionPoints';
 export * from './treeitems/filterTreeItem';
 export * from './views/ExplorerView';
 export * from './views/TreeView';