[2568] Allow explorer to change its content

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

doc/adrs/115_allow_explorer_to_change_its_content.adoc

@@ -0,0 +1,97 @@
+= ADR-115 - Allow explorer to change its content
+
+== Context
+
+The Explorer view displays the same version of a tree to all users. There is now way for the frontend to change the tree for a specific user.
+
+== Decision
+
+* Addition of a TreeConverter API allowing to redefine the tree content (/packages/trees/frontend/sirius-components-trees/src/views/TreeConverter.types.ts)
+
+[source,typescript]
+----
+interface TreeConverter {
+  convert(tree: GQLTree): GQLTree;
+)
+----
+
+* Addition of an ExplorerViewContext providing a default TreeConverter (/packages/trees/frontend/sirius-components-trees/src/views/ExplorerViewContext.tsx)
+
+[source,typescript]
+----
+const converter: TreeConverter = {
+  convert: (tree) => tree;
+};
+const defaultContext: ExplorerViewContextValue = {
+  converter
+};
+export const ExplorerViewContext = React.createContext(defaultContext);
+----
+
+* Addition of an ExplorerViewConfiguration providing the context to children (/packages/trees/frontend/sirius-components-trees/src/views/ExplorerViewConfiguration.tsx)
+
+[source,typescript]
+----
+export const ExplorerViewConfiguration = ({ children, converter }: ExplorerViewConfigurationProps) => {
+  return (
+    <ExplorerViewContext.Provider value={{ converter }}>
+      {children}
+    </ExplorerViewContext.Provider>
+  );
+}
+----
+
+* Addition of an useExplorerViewConfiguration function to provide the configuration to interested components (/packages/trees/frontend/sirius-components-trees/src/views/useExplorerViewConfiguration.ts)
+
+[source,typescript]
+----
+export const useExplorerViewConfiguration = (): UseExplorerViewConfigurationValue => {
+  const { converter } = useContext(ExplorerViewContext);
+  return {
+    converter
+  };
+}
+----
+
+* Update of the ExplorerView to use the converter (/packages/trees/frontend/sirius-components-trees/src/views/ExplorerView.tsx)
+
+[source,typescript]
+----
+const { converter } = useExplorerViewConfiguration();
+
+<TreeView converter={converter} ... />
+----
+
+* Update of the TreeView to use the converter (/packages/trees/frontend/sirius-components-trees/src/views/TreeView.tsx)
+
+[source,typescript]
+----
+<Tree tree={converter.convert(tree)} ... />
+----
+
+* Export new APIs (/packages/trees/frontend/sirius-components-trees/src/index.ts):
+
+[source,typescript]
+----
+ExplorerViewConfiguration
+ExplorerViewConfigurationProps
+TreeConverter
+----
+
+* Usage:
+A sirius consumer may encapsulate its components in a ExplorerViewConfiguration which will provide the required filters.
+
+[source,typescript]
+----
+<ExplorerViewConfiguration converter={MyCustomTreeConverter}>
+    <Workbench ... />
+</ExplorerViewConfiguration>
+----
+
+== Status
+
+To be reviewed
+
+== Consequences
+
+None, by default the Explorer works as before.

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

@@ -10,7 +10,7 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { TreeView } from '@eclipse-sirius/sirius-components-trees';
+import { TreeView, useExplorerViewConfiguration } from '@eclipse-sirius/sirius-components-trees';
 import { makeStyles } from '@material-ui/core/styles';
 import { useState } from 'react';
 import { ModelBrowserFilterBar } from './ModelBrowserFilterBar';
@@ -41,6 +41,7 @@ export const ModelBrowserTreeView = ({
   ownerKind,
 }: ModelBrowserTreeViewProps) => {
   const classes = useTreeStyle();
+  const { converter } = useExplorerViewConfiguration();
 
   const [state, setState] = useState<ModelBrowserTreeViewState>({ filterBarText: '' });
 
@@ -68,6 +69,7 @@ export const ModelBrowserTreeView = ({
           textToFilter={state.filterBarText}
           textToHighlight={state.filterBarText}
           markedItemIds={markedItemIds}
+          converter={converter}
         />
       </div>
     </>

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

@@ -18,7 +18,10 @@ export * from './treeitems/TreeItemContextMenu';
 export * from './treeitems/TreeItemContextMenu.types';
 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 './treeitems/filterTreeItem';

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

@@ -18,6 +18,7 @@ import { TreeToolBarContext } from '../toolbar/TreeToolBarContext';
 import { TreeToolBarContextValue } from '../toolbar/TreeToolBarContext.types';
 import { FilterBar } from '../trees/FilterBar';
 import { ExplorerViewState } from './ExplorerView.types';
+import { useExplorerViewConfiguration } from './ExplorerViewConfiguration';
 import { TreeView } from './TreeView';
 
 const useStyles = makeStyles((theme) => ({
@@ -34,6 +35,7 @@ const useStyles = makeStyles((theme) => ({
 
 export const ExplorerView = (props: WorkbenchViewComponentProps) => {
   const styles = useStyles();
+  const { converter } = useExplorerViewConfiguration();
   const initialState: ExplorerViewState = {
     synchronizedWithSelection: true,
     filterBar: false,
@@ -112,6 +114,7 @@ export const ExplorerView = (props: WorkbenchViewComponentProps) => {
           synchronizedWithSelection={state.synchronizedWithSelection}
           textToHighlight={state.filterBarText}
           textToFilter={state.filterBarTreeFiltering ? state.filterBarText : null}
+          converter={converter}
         />
       </div>
     </div>

packages/trees/frontend/sirius-components-trees/src/views/ExplorerViewConfiguration.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 { useContext } from 'react';
+import { ExplorerViewContext } from './ExplorerViewContext';
+import { ExplorerViewConfigurationProps, UseExplorerViewConfigurationValue } from './ExplorerViewConfiguration.types';
+
+export const ExplorerViewConfiguration = ({ children, converter }: ExplorerViewConfigurationProps) => {
+  return <ExplorerViewContext.Provider value={{ converter }}>{children}</ExplorerViewContext.Provider>;
+};
+
+export const useExplorerViewConfiguration = (): UseExplorerViewConfigurationValue => {
+  const { converter } = useContext(ExplorerViewContext);
+  return {
+    converter,
+  };
+};

packages/trees/frontend/sirius-components-trees/src/views/ExplorerViewConfiguration.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 { TreeConverter } from './TreeConverter.types';
+
+export interface ExplorerViewConfigurationProps {
+  converter: TreeConverter;
+  children: ReactNode;
+}
+
+export interface UseExplorerViewConfigurationValue {
+  converter: TreeConverter;
+}

packages/trees/frontend/sirius-components-trees/src/views/ExplorerViewContext.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 { TreeConverter } from './TreeConverter.types';
+import { ExplorerViewContextValue } from './ExplorerViewContext.types';
+
+const converter: TreeConverter = {
+  convert: (tree) => tree,
+};
+
+const defaultContext: ExplorerViewContextValue = {
+  converter,
+};
+
+export const ExplorerViewContext = React.createContext(defaultContext);

packages/trees/frontend/sirius-components-trees/src/views/ExplorerViewContext.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 { TreeConverter } from './TreeConverter.types';
+export interface ExplorerViewContextValue {
+  converter: TreeConverter;
+}

packages/trees/frontend/sirius-components-trees/src/views/TreeConverter.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 { GQLTree } from './TreeView.types';
+
+export interface TreeConverter {
+  convert(tree: GQLTree): GQLTree;
+}

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

@@ -80,6 +80,7 @@ export const TreeView = ({
   textToHighlight,
   textToFilter,
   markedItemIds = [],
+  converter,
 }: TreeViewComponentProps) => {
   const [{ value, context }, dispatch] = useMachine<TreeViewContext, TreeViewEvent>(treeViewMachine, {
     context: {
@@ -217,7 +218,7 @@ export const TreeView = ({
         {tree ? (
           <Tree
             editingContextId={editingContextId}
-            tree={tree}
+            tree={converter.convert(tree)}
             onExpand={onExpand}
             onExpandAll={onExpandAll}
             selection={selection}

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

@@ -12,6 +12,7 @@
  *******************************************************************************/
 
 import { WorkbenchViewComponentProps } from '@eclipse-sirius/sirius-components-core';
+import { TreeConverter } from './TreeConverter.types';
 
 export interface TreeViewComponentProps extends WorkbenchViewComponentProps {
   treeId: string;
@@ -20,6 +21,7 @@ export interface TreeViewComponentProps extends WorkbenchViewComponentProps {
   textToHighlight: string | null;
   textToFilter: string | null;
   markedItemIds?: string[];
+  converter: TreeConverter;
 }
 
 export interface GQLTreeEventVariables {