[2570] Allow details view to change its content

Bug: eclipse-sirius#2570
Signed-off-by: William Piers <[email protected]>

CHANGELOG.adoc

@@ -17,6 +17,7 @@
 - [ADR-114] Add support for multiple IEditService
 - [ADR-115] Split the Sirius Web frontend
 - [ADR-116] Add support for changing the content of the explorer
+- [ADR-117] Add support for changing the content of the details view
 
 === Breaking changes
 
@@ -117,6 +118,7 @@ The user can use 'shift+enter' to insert a line break.
 - https://github.com/eclipse-sirius/sirius-web/issues/2522[#2522] [diagram] Add the support for rotatable border node.
 - https://github.com/eclipse-sirius/sirius-web/issues/2255[#2255] [diagram] Add the possibility to specify a ratio on node to guarantee its aspect.
 - https://github.com/eclipse-sirius/sirius-web/issues/2568[#2568] [trees] Allow developers to modify the content of the explorer view
+- https://github.com/eclipse-sirius/sirius-web/issues/2570[#2570] [forms] Allow developers to modify the content of the details view
 
 === Improvements
 

doc/adrs/117_add_support_for_changing_the_content_of_the_details_view.adoc

@@ -0,0 +1,97 @@
+= ADR-117 - Add support for changing the content of the details view
+
+== Context
+
+The Details view displays the same version of a form to all users. There is now way for the frontend to change the form for a specific user.
+
+== Decision
+
+* Addition of a FormConverter API allowing to redefine the form content (/packages/forms/frontend/sirius-components-forms/src/views/FormConverter.types.ts)
+
+[source,typescript]
+----
+interface FormConverter {
+  convert(form: GQLForm): GQLForm;
+)
+----
+
+* Addition of an DetailsViewContext providing a default FormConverter (/packages/forms/frontend/sirius-components-forms/src/views/DetailsViewContext.tsx)
+
+[source,typescript]
+----
+const converter: FormConverter = {
+  convert: (form) => form;
+};
+const defaultContext: DetailsViewContextValue = {
+  converter
+};
+export const DetailsViewContext = React.createContext(defaultContext);
+----
+
+* Addition of an DetailsViewConfiguration providing the context to children (/packages/forms/frontend/sirius-components-forms/src/views/DetailsViewConfiguration.tsx)
+
+[source,typescript]
+----
+export const DetailsViewConfiguration = ({ children, converter }: DetailsViewConfigurationProps) => {
+  return (
+    <DetailsViewContext.Provider value={{ converter }}>
+      {children}
+    </DetailsViewContext.Provider>
+  );
+}
+----
+
+* Addition of an useDetailsViewConfiguration function to provide the configuration to interested components (/packages/forms/frontend/sirius-components-forms/src/views/useDetailsViewConfiguration.ts)
+
+[source,typescript]
+----
+export const useDetailsViewConfiguration = (): UseDetailsViewConfigurationValue => {
+  const { converter } = useContext(DetailsViewContext);
+  return {
+    converter
+  };
+}
+----
+
+* Update of the DetailsView to use the converter (/packages/forms/frontend/sirius-components-forms/src/views/DetailsView.tsx)
+
+[source,typescript]
+----
+const { converter } = useDetailsViewConfiguration();
+
+<FormView converter={converter} ... />
+----
+
+* Update of the FormView to use the converter (/packages/forms/frontend/sirius-components-forms/src/views/FormView.tsx)
+
+[source,typescript]
+----
+<Form form={converter.convert(form)} ... />
+----
+
+* Export new APIs (/packages/forms/frontend/sirius-components-forms/src/index.ts):
+
+[source,typescript]
+----
+DetailsViewConfiguration
+DetailsViewConfigurationProps
+FormConverter
+----
+
+* Usage:
+A sirius consumer may encapsulate its components in a DetailsViewConfiguration which will provide the required filters.
+
+[source,typescript]
+----
+<DetailsViewConfiguration converter={MyCustomFormConverter}>
+    <Workbench ... />
+</DetailsViewConfiguration>
+----
+
+== Status
+
+Accepted
+
+== Consequences
+
+None, by default the Details view works as before.

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

@@ -30,5 +30,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/FormConverter.types';
 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 Obeo.
+ * Copyright (c) 2022, 2023 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,8 +11,10 @@
  *     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) => (
-  <FormBasedView {...props} subscriptionName="propertiesEvent" />
-);
+export const DetailsView = (props: WorkbenchViewComponentProps) => {
+  const { converter } = useDetailsViewConfiguration();
+  return <FormBasedView {...props} subscriptionName="propertiesEvent" converter={converter} />;
+};

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

@@ -0,0 +1,27 @@
+/*******************************************************************************
+ * Copyright (c) 2023 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 React from 'react';
+import { DetailsViewConfigurationProps, UseDetailsViewConfigurationValue } from './DetailsViewConfiguration.types';
+import { DetailsViewContext } from './DetailsViewContext';
+
+export const DetailsViewConfiguration = ({ children, converter }: DetailsViewConfigurationProps) => {
+  return <DetailsViewContext.Provider value={{ converter }}>{children}</DetailsViewContext.Provider>;
+};
+
+export const useDetailsViewConfiguration = (): UseDetailsViewConfigurationValue => {
+  const { converter } = React.useContext<UseDetailsViewConfigurationValue>(DetailsViewContext);
+  return {
+    converter,
+  };
+};

packages/forms/frontend/sirius-components-forms/src/views/DetailsViewConfiguration.types.ts

@@ -0,0 +1,24 @@
+/*******************************************************************************
+ * Copyright (c) 2023 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 { ReactNode } from 'react';
+import { FormConverter } from './FormConverter.types';
+
+export interface DetailsViewConfigurationProps {
+  converter: FormConverter;
+  children: ReactNode;
+}
+
+export interface UseDetailsViewConfigurationValue {
+  converter: FormConverter;
+}

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

@@ -0,0 +1,25 @@
+/*******************************************************************************
+ * Copyright (c) 2023 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 React from 'react';
+import { DetailsViewContextValue } from './DetailsViewContext.types';
+import { FormConverter } from './FormConverter.types';
+
+const converter: FormConverter = {
+  convert: (form) => form,
+};
+
+const defaultContext: DetailsViewContextValue = {
+  converter,
+};
+
+export const DetailsViewContext = React.createContext(defaultContext);

packages/forms/frontend/sirius-components-forms/src/views/DetailsViewContext.types.ts

@@ -0,0 +1,17 @@
+/*******************************************************************************
+ * Copyright (c) 2023 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 { FormConverter } from './FormConverter.types';
+export interface DetailsViewContextValue {
+  converter: FormConverter;
+}

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

@@ -42,6 +42,7 @@ import {
   SwitchSelectionEvent,
   formBasedViewMachine,
 } from './FormBasedViewMachine';
+import { FormConverter } from './FormConverter.types';
 
 export const getFormEventSubscription = (subscriptionName: string, contributions: Array<WidgetContribution>) => {
   return `
@@ -80,6 +81,7 @@ export const FormBasedView = ({
   setSelection,
   readOnly,
   subscriptionName,
+  converter,
 }: FormBasedViewProps) => {
   const classes = useFormBasedViewStyles();
   const [{ value, context }, dispatch] = useMachine<FormBasedViewContext, FormBasedViewEvent>(formBasedViewMachine);
@@ -144,6 +146,8 @@ export const FormBasedView = ({
     }
   }, [error, dispatch]);
 
+  const formConverter: FormConverter = converter ? converter : { convert: (gqlForm) => gqlForm };
+
   let content: JSX.Element | null = null;
   if (formBasedView === 'empty' || formBasedView === 'unsupportedSelection' || formBasedView === 'complete') {
     content = (
@@ -156,7 +160,7 @@ export const FormBasedView = ({
     content = (
       <Form
         editingContextId={editingContextId}
-        form={form}
+        form={formConverter.convert(form)}
         widgetSubscriptions={widgetSubscriptions}
         setSelection={setSelection}
         readOnly={readOnly}

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

@@ -11,11 +11,13 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 import { Selection, WorkbenchViewComponentProps } from '@eclipse-sirius/sirius-components-core';
+import { FormConverter } from './FormConverter.types';
 
 export interface FormBasedViewProps extends WorkbenchViewComponentProps {
   editingContextId: string;
   selection: Selection;
   setSelection: (selection: Selection) => void;
   readOnly: boolean;
   subscriptionName: string;
+  converter?: FormConverter;
 }

packages/forms/frontend/sirius-components-forms/src/views/FormConverter.types.ts

@@ -0,0 +1,18 @@
+/*******************************************************************************
+ * Copyright (c) 2023 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 { GQLForm } from '../form/FormEventFragments.types';
+
+export interface FormConverter {
+  convert(form: GQLForm): GQLForm;
+}

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

@@ -43,9 +43,6 @@ export const ModelBrowserTreeView = ({
   const classes = useTreeStyle();
 
   const [state, setState] = useState<ModelBrowserTreeViewState>({ filterBarText: '' });
-  const converter = {
-    convert: (tree) => tree,
-  };
 
   return (
     <>
@@ -71,7 +68,6 @@ export const ModelBrowserTreeView = ({
           textToFilter={state.filterBarText}
           textToHighlight={state.filterBarText}
           markedItemIds={markedItemIds}
-          converter={converter}
         />
       </div>
     </>

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

@@ -15,6 +15,7 @@ import { Toast } from '@eclipse-sirius/sirius-components-core';
 import { useMachine } from '@xstate/react';
 import { useEffect } from 'react';
 import { Tree } from '../trees/Tree';
+import { TreeConverter } from './TreeConverter.types';
 import {
   GQLGetExpandAllTreePathData,
   GQLGetExpandAllTreePathVariables,
@@ -212,13 +213,15 @@ export const TreeView = ({
     dispatch(handleOnExpandAllEvent);
   };
 
+  const treeConverter: TreeConverter = converter ? converter : { convert: (gqlTree) => gqlTree };
+
   return (
     <>
       <div data-testid={treeId}>
         {tree ? (
           <Tree
             editingContextId={editingContextId}
-            tree={converter.convert(tree)}
+            tree={treeConverter.convert(tree)}
             onExpand={onExpand}
             onExpandAll={onExpandAll}
             selection={selection}

packages/trees/frontend/sirius-components-trees/src/views/TreeView.types.ts

@@ -21,7 +21,7 @@ export interface TreeViewComponentProps extends WorkbenchViewComponentProps {
   textToHighlight: string | null;
   textToFilter: string | null;
   markedItemIds?: string[];
-  converter: TreeConverter;
+  converter?: TreeConverter;
 }
 
 export interface GQLTreeEventVariables {