[3684] Replace form & tree converters configurations with extensions

Bug: #3684
Signed-off-by: William Piers <william.piers@obeo.fr>

CHANGELOG.adoc

@@ -31,6 +31,7 @@ More existing APIs will be migrated to this new common pattern.
  - 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/3684[#3684] [form, tree] Remove the existing mechanisms used to contribute instances of `FormConverter` and `TreeConverter`
 
 === Dependency update
 
@@ -136,6 +137,7 @@ The error messages displayed in case of an error while uploading a file have bee
 We cannot rely on the error message recaived from the backend since Cross Origin Resource Sharing may prevent us from seeing both the message and the 413 status code.
 - https://github.com/eclipse-sirius/sirius-web/issues/3697[#3697] [diagram] Improve arrange-all performance by reducing overlap management complexity
 - https://github.com/eclipse-sirius/sirius-web/issues/3669[#3669] [diagram] Add migration participant to hide label borders by default
+- https://github.com/eclipse-sirius/sirius-web/issues/3684[#3684] [form, tree] Replace form & tree converters configurations with dedicated extension points
 
 == v2024.5.0
 

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

@@ -33,10 +33,8 @@ export * from './propertysections/getTextDecorationLineValue';
 export * from './propertysections/useClickHandler';
 export * from './representations/FormRepresentation';
 export * from './views/DetailsView';
-export * from './views/DetailsViewConfiguration';
-export * from './views/DetailsViewConfiguration.types';
 export * from './views/FormBasedView';
 export * from './views/FormBasedView.types';
-export * from './views/FormConverter.types';
+export * from './views/FormBasedViewExtensionPoints';
 export * from './views/RelatedElementsView';
 export * from './views/RepresentationsView';

packages/forms/frontend/sirius-components-forms/src/views/DetailsView.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
@@ -11,10 +11,8 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 import { WorkbenchViewComponentProps } from '@eclipse-sirius/sirius-components-core';
-import { useDetailsViewConfiguration } from './DetailsViewConfiguration';
 import { FormBasedView } from './FormBasedView';
 
 export const DetailsView = (props: WorkbenchViewComponentProps) => {
-  const { converter } = useDetailsViewConfiguration();
-  return <FormBasedView {...props} subscriptionName="propertiesEvent" converter={converter} />;
+  return <FormBasedView {...props} subscriptionName="propertiesEvent" />;
 };

packages/forms/frontend/sirius-components-forms/src/views/FormBasedView.tsx

@@ -11,7 +11,7 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 import { gql, useSubscription } from '@apollo/client';
-import { Toast, useSelection } from '@eclipse-sirius/sirius-components-core';
+import { DataExtension, Toast, useData, useSelection } from '@eclipse-sirius/sirius-components-core';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import { useMachine } from '@xstate/react';
@@ -22,11 +22,13 @@ import { PropertySectionContext } from '../form/FormContext';
 import { PropertySectionContextValue } from '../form/FormContext.types';
 import { formRefreshedEventPayloadFragment } from '../form/FormEventFragments';
 import {
+  GQLForm,
   GQLPropertiesEventInput,
   GQLPropertiesEventSubscription,
   GQLPropertiesEventVariables,
 } from '../form/FormEventFragments.types';
-import { FormBasedViewProps } from './FormBasedView.types';
+import { FormBasedViewProps, FormConverter } from './FormBasedView.types';
+import { formBasedViewFormConverterExtensionPoint } from './FormBasedViewExtensionPoints';
 import {
   FormBasedViewContext,
   FormBasedViewEvent,
@@ -38,7 +40,6 @@ import {
   SwitchSelectionEvent,
   formBasedViewMachine,
 } from './FormBasedViewMachine';
-import { FormConverter } from './FormConverter.types';
 
 export const getFormEventSubscription = (subscriptionName: string, contributions: Array<WidgetContribution>) => {
   return `
@@ -63,13 +64,7 @@ const useFormBasedViewStyles = makeStyles((theme) => ({
 /**
  * Used to define workbench views based on a form.
  */
-export const FormBasedView = ({
-  editingContextId,
-  readOnly,
-  subscriptionName,
-  converter,
-  postProcessor,
-}: FormBasedViewProps) => {
+export const FormBasedView = ({ editingContextId, readOnly, subscriptionName, postProcessor }: FormBasedViewProps) => {
   const classes = useFormBasedViewStyles();
   const [{ value, context }, dispatch] = useMachine<FormBasedViewContext, FormBasedViewEvent>(formBasedViewMachine);
   const { toast, formBasedView } = value as SchemaValue;
@@ -142,7 +137,7 @@ export const FormBasedView = ({
     }
   }, [error, dispatch]);
 
-  const formConverter: FormConverter = converter ? converter : { convert: (gqlForm) => gqlForm };
+  const { data: formConverters }: DataExtension<FormConverter[]> = useData(formBasedViewFormConverterExtensionPoint);
 
   let content: JSX.Element | null = null;
   if (formBasedView === 'empty' || formBasedView === 'unsupportedSelection' || formBasedView === 'complete') {
@@ -153,10 +148,15 @@ export const FormBasedView = ({
     );
   }
   if ((formBasedView === 'idle' && form) || formBasedView === 'ready') {
+    let convertedForm: GQLForm = form;
+    formConverters.forEach((formConverter) => {
+      convertedForm = formConverter.convert(editingContextId, convertedForm);
+    });
+
     if (postProcessor) {
-      content = postProcessor({ editingContextId, readOnly }, formConverter.convert(form));
+      content = postProcessor({ editingContextId, readOnly }, convertedForm);
     } else {
-      content = <Form editingContextId={editingContextId} form={formConverter.convert(form)} readOnly={readOnly} />;
+      content = <Form editingContextId={editingContextId} form={convertedForm} readOnly={readOnly} />;
     }
   }
   return (

packages/forms/frontend/sirius-components-forms/src/views/FormBasedView.types.tsx

@@ -12,12 +12,14 @@
  *******************************************************************************/
 import { WorkbenchViewComponentProps } from '@eclipse-sirius/sirius-components-core';
 import { GQLForm } from '../form/FormEventFragments.types';
-import { FormConverter } from './FormConverter.types';
 
 export interface FormBasedViewProps extends WorkbenchViewComponentProps {
   editingContextId: string;
   readOnly: boolean;
   subscriptionName: string;
-  converter?: FormConverter;
   postProcessor?: (props: WorkbenchViewComponentProps, form: GQLForm) => JSX.Element;
 }
+
+export interface FormConverter {
+  convert(editingContextId: string, form: GQLForm): GQLForm;
+}

packages/forms/frontend/sirius-components-forms/src/views/DetailsViewConfiguration.types.ts → packages/forms/frontend/sirius-components-forms/src/views/FormBasedViewExtensionPoints.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,14 +11,10 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
-import { ReactNode } from 'react';
-import { FormConverter } from './FormConverter.types';
+import { DataExtensionPoint } from '@eclipse-sirius/sirius-components-core';
+import { FormConverter } from './FormBasedView.types';
 
-export interface DetailsViewConfigurationProps {
-  converter: FormConverter;
-  children: ReactNode;
-}
-
-export interface UseDetailsViewConfigurationValue {
-  converter: FormConverter;
-}
+export const formBasedViewFormConverterExtensionPoint: DataExtensionPoint<FormConverter[]> = {
+  identifier: 'formBasedView#formConverter',
+  fallback: [],
+};

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

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2022, 2023 Obeo and others.
+ * Copyright (c) 2022, 2024 Obeo and others.
  * 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
@@ -20,8 +20,6 @@ export * from './treeitems/TreeItemContextMenuContribution';
 export * from './treeitems/TreeItemContextMenuContribution.types';
 export * from './treeitems/filterTreeItem';
 export * from './views/ExplorerView';
-export * from './views/ExplorerViewConfiguration';
-export * from './views/ExplorerViewConfiguration.types';
-export * from './views/TreeConverter.types';
 export * from './views/TreeView';
 export * from './views/TreeView.types';
+export * from './views/TreeViewExtensionPoints';

packages/trees/frontend/sirius-components-trees/src/views/ExplorerView.tsx

@@ -18,7 +18,6 @@ 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';
 import { TreeView } from './TreeView';
 import { useTreeFilters } from './useTreeFilters';
 
@@ -36,7 +35,6 @@ const useStyles = makeStyles((theme) => ({
 
 export const ExplorerView = ({ editingContextId, readOnly }: WorkbenchViewComponentProps) => {
   const styles = useStyles();
-  const { converter } = useExplorerViewConfiguration();
 
   const initialState: ExplorerViewState = {
     synchronizedWithSelection: true,
@@ -142,7 +140,6 @@ export const ExplorerView = ({ editingContextId, readOnly }: WorkbenchViewCompon
           activeFilterIds={activeTreeFilterIds}
           textToHighlight={state.filterBarText}
           textToFilter={state.filterBarTreeFiltering ? state.filterBarText : null}
-          converter={converter}
         />
       </div>
     </div>