From 7e7dd9bd1fe9c849293ccccc41d40f07c8cd335c Mon Sep 17 00:00:00 2001 From: William Piers Date: Mon, 13 Nov 2023 14:19:36 +0100 Subject: [PATCH] [2568] Allow explorer to change its content Bug: https://github.com/eclipse-sirius/sirius-web/issues/2568 Signed-off-by: William Piers --- ..._allow_explorer_to_change_its_content.adoc | 97 +++++++++++++++++++ .../src/components/ModelBrowserTreeView.tsx | 4 +- .../sirius-components-trees/src/index.ts | 5 +- .../src/views/ExplorerView.tsx | 3 + .../src/views/ExplorerViewConfiguration.tsx | 27 ++++++ .../views/ExplorerViewConfiguration.types.ts | 24 +++++ .../src/views/ExplorerViewContext.tsx | 25 +++++ .../src/views/ExplorerViewContext.types.ts | 17 ++++ .../src/views/TreeConverter.types.ts | 18 ++++ .../src/views/TreeView.tsx | 3 +- .../src/views/TreeView.types.ts | 2 + 11 files changed, 222 insertions(+), 3 deletions(-) create mode 100644 doc/adrs/115_allow_explorer_to_change_its_content.adoc create mode 100644 packages/trees/frontend/sirius-components-trees/src/views/ExplorerViewConfiguration.tsx create mode 100644 packages/trees/frontend/sirius-components-trees/src/views/ExplorerViewConfiguration.types.ts create mode 100644 packages/trees/frontend/sirius-components-trees/src/views/ExplorerViewContext.tsx create mode 100644 packages/trees/frontend/sirius-components-trees/src/views/ExplorerViewContext.types.ts create mode 100644 packages/trees/frontend/sirius-components-trees/src/views/TreeConverter.types.ts diff --git a/doc/adrs/115_allow_explorer_to_change_its_content.adoc b/doc/adrs/115_allow_explorer_to_change_its_content.adoc new file mode 100644 index 0000000000..c5f20e5565 --- /dev/null +++ b/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 ( + + {children} + + ); +} +---- + +* 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(); + + +---- + +* Update of the TreeView to use the converter (/packages/trees/frontend/sirius-components-trees/src/views/TreeView.tsx) + +[source,typescript] +---- + +---- + +* 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] +---- + + + +---- + +== Status + +To be reviewed + +== Consequences + +None, by default the Explorer works as before. diff --git a/packages/forms/frontend/sirius-components-widget-reference/src/components/ModelBrowserTreeView.tsx b/packages/forms/frontend/sirius-components-widget-reference/src/components/ModelBrowserTreeView.tsx index 182c698956..633a03dd6e 100644 --- a/packages/forms/frontend/sirius-components-widget-reference/src/components/ModelBrowserTreeView.tsx +++ b/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({ filterBarText: '' }); @@ -68,6 +69,7 @@ export const ModelBrowserTreeView = ({ textToFilter={state.filterBarText} textToHighlight={state.filterBarText} markedItemIds={markedItemIds} + converter={converter} /> diff --git a/packages/trees/frontend/sirius-components-trees/src/index.ts b/packages/trees/frontend/sirius-components-trees/src/index.ts index e1f4a09e02..49a0973786 100644 --- a/packages/trees/frontend/sirius-components-trees/src/index.ts +++ b/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'; diff --git a/packages/trees/frontend/sirius-components-trees/src/views/ExplorerView.tsx b/packages/trees/frontend/sirius-components-trees/src/views/ExplorerView.tsx index 9a02e588bd..ebb7ae3e96 100644 --- a/packages/trees/frontend/sirius-components-trees/src/views/ExplorerView.tsx +++ b/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} /> diff --git a/packages/trees/frontend/sirius-components-trees/src/views/ExplorerViewConfiguration.tsx b/packages/trees/frontend/sirius-components-trees/src/views/ExplorerViewConfiguration.tsx new file mode 100644 index 0000000000..3f455b3d11 --- /dev/null +++ b/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 {children}; +}; + +export const useExplorerViewConfiguration = (): UseExplorerViewConfigurationValue => { + const { converter } = useContext(ExplorerViewContext); + return { + converter, + }; +}; diff --git a/packages/trees/frontend/sirius-components-trees/src/views/ExplorerViewConfiguration.types.ts b/packages/trees/frontend/sirius-components-trees/src/views/ExplorerViewConfiguration.types.ts new file mode 100644 index 0000000000..a87a99defb --- /dev/null +++ b/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; +} diff --git a/packages/trees/frontend/sirius-components-trees/src/views/ExplorerViewContext.tsx b/packages/trees/frontend/sirius-components-trees/src/views/ExplorerViewContext.tsx new file mode 100644 index 0000000000..82aa9d2fd8 --- /dev/null +++ b/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); diff --git a/packages/trees/frontend/sirius-components-trees/src/views/ExplorerViewContext.types.ts b/packages/trees/frontend/sirius-components-trees/src/views/ExplorerViewContext.types.ts new file mode 100644 index 0000000000..346925f4ee --- /dev/null +++ b/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; +} diff --git a/packages/trees/frontend/sirius-components-trees/src/views/TreeConverter.types.ts b/packages/trees/frontend/sirius-components-trees/src/views/TreeConverter.types.ts new file mode 100644 index 0000000000..8b63fcee13 --- /dev/null +++ b/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; +} diff --git a/packages/trees/frontend/sirius-components-trees/src/views/TreeView.tsx b/packages/trees/frontend/sirius-components-trees/src/views/TreeView.tsx index 3676595d59..194b482a15 100644 --- a/packages/trees/frontend/sirius-components-trees/src/views/TreeView.tsx +++ b/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(treeViewMachine, { context: { @@ -217,7 +218,7 @@ export const TreeView = ({ {tree ? (