Convert TreeToolbar contributions to extensions

wpiers · Jun 7, 2024 · 2bc5fd4 · 2bc5fd4
1 parent 69e9697
commit 2bc5fd4
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 76 deletions.
diff --git a/packages/sirius-web/frontend/sirius-web-application/src/application/SiriusWebApplication.tsx b/packages/sirius-web/frontend/sirius-web-application/src/application/SiriusWebApplication.tsx
@@ -41,7 +41,7 @@ import {
 } 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, treeToolbarContributionExtensionPoint } from '@eclipse-sirius/sirius-components-trees';
 import { ValidationView } from '@eclipse-sirius/sirius-components-validation';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { Theme, ThemeProvider } from '@material-ui/core/styles';
@@ -63,6 +63,8 @@ import { ApolloGraphQLProvider } from '../graphql/ApolloGraphQLProvider';
 import { OnboardArea } from '../onboarding/OnboardArea';
 import { Router } from '../router/Router';
 import { siriusWebTheme as defaultTheme } from '../theme/siriusWebTheme';
+import { NewDocumentModalContribution } from '../views/edit-project/TreeToolBarContributions/NewDocumentModalContribution';
+import { UploadDocumentModalContribution } from '../views/edit-project/TreeToolBarContributions/UploadDocumentModalContribution';
 import { createProjectAreaCardExtensionPoint } from '../views/project-browser/create-projects-area/CreateProjectAreaExtensionPoints';
 import {
   NewProjectCard,
@@ -225,6 +227,15 @@ export const SiriusWebApplication = ({
     data: [(representation) => (getType(representation) === 'Portal' ? PortalRepresentation : null)],
   });
 
+  internalExtensionRegistry.addComponent(treeToolbarContributionExtensionPoint, {
+    identifier: 'sw_treeToolbar_newdoc',
+    Component: NewDocumentModalContribution,
+  });
+  internalExtensionRegistry.addComponent(treeToolbarContributionExtensionPoint, {
+    identifier: 'sw_treeToolbar_uploaddoc',
+    Component: UploadDocumentModalContribution,
+  });
+
   if (extensionRegistry) {
     internalExtensionRegistry.addAll(
       extensionRegistry,

diff --git a/...ges/sirius-web/frontend/sirius-web-application/src/views/edit-project/EditProjectView.tsx b/...ges/sirius-web/frontend/sirius-web-application/src/views/edit-project/EditProjectView.tsx
@@ -29,9 +29,6 @@ import {
   TreeItemContextMenuContext,
   TreeItemContextMenuContextValue,
   TreeItemContextMenuContribution,
-  TreeToolBarContext,
-  TreeToolBarContextValue,
-  TreeToolBarContribution,
 } from '@eclipse-sirius/sirius-components-trees';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
@@ -57,8 +54,6 @@ import {
 } from './EditProjectViewMachine';
 import { ObjectTreeItemContextMenuContribution } from './ObjectTreeItemContextMenuContribution';
 import { PapayaOperationActivityLabelDetailToolContribution } from './ToolContributions/PapayaOperationActivityLabelDetailToolContribution';
-import { NewDocumentModalContribution } from './TreeToolBarContributions/NewDocumentModalContribution';
-import { UploadDocumentModalContribution } from './TreeToolBarContributions/UploadDocumentModalContribution';
 
 const getProjectQuery = gql`
   query getRepresentation($projectId: ID!, $representationId: ID!, $includeRepresentation: Boolean!) {
@@ -177,10 +172,6 @@ export const EditProjectView = () => {
       />,
     ];
 
-    const treeToolBarContributions: TreeToolBarContextValue = [
-      <TreeToolBarContribution component={NewDocumentModalContribution} />,
-      <TreeToolBarContribution component={UploadDocumentModalContribution} />,
-    ];
     const diagramPaletteToolContributions: DiagramPaletteToolContextValue = [
       <DiagramPaletteToolContribution
         canHandle={(_diagramId, diagramElementId) => {
@@ -200,16 +191,14 @@ export const EditProjectView = () => {
 
     main = (
       <TreeItemContextMenuContext.Provider value={treeItemContextMenuContributions}>
-        <TreeToolBarContext.Provider value={treeToolBarContributions}>
-          <DiagramPaletteToolContext.Provider value={diagramPaletteToolContributions}>
-            <Workbench
-              editingContextId={project.currentEditingContext.id}
-              initialRepresentationSelected={representation}
-              onRepresentationSelected={onRepresentationSelected}
-              readOnly={false}
-            />
-          </DiagramPaletteToolContext.Provider>
-        </TreeToolBarContext.Provider>
+        <DiagramPaletteToolContext.Provider value={diagramPaletteToolContributions}>
+          <Workbench
+            editingContextId={project.currentEditingContext.id}
+            initialRepresentationSelected={representation}
+            onRepresentationSelected={onRepresentationSelected}
+            readOnly={false}
+          />
+        </DiagramPaletteToolContext.Provider>
       </TreeItemContextMenuContext.Provider>
     );
   } else if (editProjectView === 'missing') {

diff --git a/...lication/src/views/edit-project/TreeToolBarContributions/NewDocumentModalContribution.tsx b/...lication/src/views/edit-project/TreeToolBarContributions/NewDocumentModalContribution.tsx
@@ -10,15 +10,15 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { TreeToolBarContributionComponentProps } from '@eclipse-sirius/sirius-components-trees';
+import { TreeToolBarContributionProps } from '@eclipse-sirius/sirius-components-trees';
 import IconButton from '@material-ui/core/IconButton';
 import { Add as AddIcon } from '@material-ui/icons';
 import { Fragment, useState } from 'react';
 import { NewDocumentModal } from '../../../modals/new-document/NewDocumentModal';
 
 type Modal = 'NewDocument';
 
-export const NewDocumentModalContribution = ({ disabled, editingContextId }: TreeToolBarContributionComponentProps) => {
+export const NewDocumentModalContribution = ({ disabled, editingContextId }: TreeToolBarContributionProps) => {
   const [modal, setModal] = useState<Modal | null>(null);
 
   let modalElement: JSX.Element | null = null;

diff --git a/...ation/src/views/edit-project/TreeToolBarContributions/UploadDocumentModalContribution.tsx b/...ation/src/views/edit-project/TreeToolBarContributions/UploadDocumentModalContribution.tsx
@@ -11,7 +11,7 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
-import { TreeToolBarContributionComponentProps } from '@eclipse-sirius/sirius-components-trees';
+import { TreeToolBarContributionProps } from '@eclipse-sirius/sirius-components-trees';
 import IconButton from '@material-ui/core/IconButton';
 import { Publish as PublishIcon } from '@material-ui/icons';
 
@@ -20,10 +20,7 @@ import { UploadDocumentModal } from '../../../modals/upload-document/UploadDocum
 
 type Modal = 'UploadDocument';
 
-export const UploadDocumentModalContribution = ({
-  disabled,
-  editingContextId,
-}: TreeToolBarContributionComponentProps) => {
+export const UploadDocumentModalContribution = ({ disabled, editingContextId }: TreeToolBarContributionProps) => {
   const [modal, setModal] = useState<Modal | null>(null);
 
   const onFinished = () => {

diff --git a/packages/trees/frontend/sirius-components-trees/src/index.ts b/packages/trees/frontend/sirius-components-trees/src/index.ts
@@ -10,10 +10,9 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-export * from './toolbar/TreeToolBarContext';
-export * from './toolbar/TreeToolBarContext.types';
 export * from './toolbar/TreeToolBarContribution';
 export * from './toolbar/TreeToolBarContribution.types';
+export * from './toolbar/TreeToolbarExtensionPoints';
 export * from './treeitems/TreeItemContextMenu';
 export * from './treeitems/TreeItemContextMenu.types';
 export * from './treeitems/TreeItemContextMenuContribution';

diff --git a/packages/trees/frontend/sirius-components-trees/src/toolbar/TreeToolBar.tsx b/packages/trees/frontend/sirius-components-trees/src/toolbar/TreeToolBar.tsx
@@ -11,13 +11,13 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
+import { useComponents } from '@eclipse-sirius/sirius-components-core';
 import IconButton from '@material-ui/core/IconButton';
 import { makeStyles } from '@material-ui/core/styles';
 import { SwapHoriz as SwapHorizIcon } from '@material-ui/icons';
-import React from 'react';
 import { TreeFiltersMenu } from '../views/TreeFiltersMenu';
 import { TreeToolBarProps } from './TreeToolBar.types';
-import { TreeToolBarContributionComponentProps } from './TreeToolBarContribution.types';
+import { treeToolbarContributionExtensionPoint } from './TreeToolbarExtensionPoints';
 
 const useTreeToolbarStyles = makeStyles((theme) => ({
   toolbar: {
@@ -36,11 +36,11 @@ const useTreeToolbarStyles = makeStyles((theme) => ({
 
 export const TreeToolBar = ({
   editingContextId,
+  treeId,
   onSynchronizedClick,
   synchronized,
   treeFilters,
   onTreeFilterMenuItemClick,
-  treeToolBarContributionComponents,
   readOnly,
 }: TreeToolBarProps) => {
   const classes = useTreeToolbarStyles();
@@ -53,18 +53,14 @@ export const TreeToolBar = ({
   const preferenceButtonSynchronizeTitle = synchronized
     ? 'Disable synchronization with representation'
     : 'Enable synchronization with representation';
+
+  const treeToolBarContributionComponents = useComponents(treeToolbarContributionExtensionPoint);
   return (
     <>
       <div className={classes.toolbar}>
-        {treeToolBarContributionComponents.map((component, index) => {
-          const props: TreeToolBarContributionComponentProps = {
-            editingContextId: editingContextId,
-            disabled: readOnly,
-            key: index.toString(),
-          };
-          const element = React.createElement(component, props);
-          return element;
-        })}
+        {treeToolBarContributionComponents.map(({ Component: Contribution }, index) => (
+          <Contribution key={index} treeId={treeId} editingContextId={editingContextId} disabled={readOnly} />
+        ))}
         {treeFiltersMenu}
         <IconButton
           color="inherit"

diff --git a/packages/trees/frontend/sirius-components-trees/src/toolbar/TreeToolBar.types.ts b/packages/trees/frontend/sirius-components-trees/src/toolbar/TreeToolBar.types.ts
@@ -11,15 +11,14 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 import { TreeFilter } from '../views/ExplorerView.types';
-import { TreeToolBarContributionComponentProps } from './TreeToolBarContribution.types';
 
 export interface TreeToolBarProps {
   editingContextId: string;
+  treeId: string;
   synchronized: boolean;
   onSynchronizedClick: () => void;
   treeFilters: TreeFilter[];
   onTreeFilterMenuItemClick: (filters: TreeFilter[]) => void;
-  treeToolBarContributionComponents: ((props: TreeToolBarContributionComponentProps) => JSX.Element)[];
   readOnly: boolean;
 }
 

diff --git a/packages/trees/frontend/sirius-components-trees/src/toolbar/TreeToolBarContext.tsx b/packages/trees/frontend/sirius-components-trees/src/toolbar/TreeToolBarContext.tsx
diff --git a/packages/trees/frontend/sirius-components-trees/src/toolbar/TreeToolBarContribution.types.ts b/packages/trees/frontend/sirius-components-trees/src/toolbar/TreeToolBarContribution.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
@@ -12,11 +12,7 @@
  *******************************************************************************/
 
 export interface TreeToolBarContributionProps {
-  component: (props: TreeToolBarContributionComponentProps) => JSX.Element | null;
-}
-
-export interface TreeToolBarContributionComponentProps {
   editingContextId: string;
+  treeId: string;
   disabled: boolean;
-  key: string;
 }
diff --git a/...s/src/toolbar/TreeToolBarContext.types.ts → ...rc/toolbar/TreeToolbarExtensionPoints.tsx b/...s/src/toolbar/TreeToolBarContext.types.ts → ...rc/toolbar/TreeToolbarExtensionPoints.tsx
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023 Obeo.
+ * 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
@@ -11,6 +11,10 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
+import { ComponentExtensionPoint } from '@eclipse-sirius/sirius-components-core';
 import { TreeToolBarContributionProps } from './TreeToolBarContribution.types';
 
-export type TreeToolBarContextValue = React.ReactElement<TreeToolBarContributionProps>[];
+export const treeToolbarContributionExtensionPoint: ComponentExtensionPoint<TreeToolBarContributionProps> = {
+  identifier: 'treeToolbar#contribution',
+  FallbackComponent: () => null,
+};
diff --git a/packages/trees/frontend/sirius-components-trees/src/views/ExplorerView.tsx b/packages/trees/frontend/sirius-components-trees/src/views/ExplorerView.tsx
@@ -12,10 +12,8 @@
  *******************************************************************************/
 import { WorkbenchViewComponentProps } from '@eclipse-sirius/sirius-components-core';
 import { makeStyles } from '@material-ui/core/styles';
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { TreeToolBar } from '../toolbar/TreeToolBar';
-import { TreeToolBarContext } from '../toolbar/TreeToolBarContext';
-import { TreeToolBarContextValue } from '../toolbar/TreeToolBarContext.types';
 import { FilterBar } from '../trees/FilterBar';
 import { ExplorerViewState, TreeFilter } from './ExplorerView.types';
 import { useExplorerViewConfiguration } from './ExplorerViewConfiguration';
@@ -34,6 +32,8 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+const explorerTreeId = 'explorer://';
+
 export const ExplorerView = ({ editingContextId, readOnly }: WorkbenchViewComponentProps) => {
   const styles = useStyles();
   const { converter } = useExplorerViewConfiguration();
@@ -46,9 +46,6 @@ export const ExplorerView = ({ editingContextId, readOnly }: WorkbenchViewCompon
     treeFilters: [],
   };
   const [state, setState] = useState<ExplorerViewState>(initialState);
-  const treeToolBarContributionComponents = useContext<TreeToolBarContextValue>(TreeToolBarContext).map(
-    (contribution) => contribution.props.component
-  );
 
   const { loading, treeFilters } = useTreeFilters(editingContextId, 'explorer://');
 
@@ -116,6 +113,7 @@ export const ExplorerView = ({ editingContextId, readOnly }: WorkbenchViewCompon
     <div className={styles.treeView} ref={treeElement}>
       <TreeToolBar
         editingContextId={editingContextId}
+        treeId={explorerTreeId}
         readOnly={readOnly}
         onSynchronizedClick={() =>
           setState((prevState) => {
@@ -129,14 +127,13 @@ export const ExplorerView = ({ editingContextId, readOnly }: WorkbenchViewCompon
             return { ...prevState, treeFilters };
           })
         }
-        treeToolBarContributionComponents={treeToolBarContributionComponents}
       />
       <div className={styles.treeContent}>
         {filterBar}
         <TreeView
           editingContextId={editingContextId}
           readOnly={readOnly}
-          treeId={'explorer://'}
+          treeId={explorerTreeId}
           enableMultiSelection={true}
           synchronizedWithSelection={state.synchronizedWithSelection}
           activeFilterIds={activeTreeFilterIds}