From 78bf5b4be5185a790b094333f4d228b5b0a96aec Mon Sep 17 00:00:00 2001 From: William Piers Date: Tue, 14 Nov 2023 11:41:15 +0100 Subject: [PATCH] [2568] Allow developers to change the content of the explorer on the frontend Bug: https://github.com/eclipse-sirius/sirius-web/issues/2568 Signed-off-by: William Piers --- CHANGELOG.adoc | 2 + ..._changing_the_content_of_the_explorer.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 | 18 ++++ .../src/views/TreeConverter.types.ts | 18 ++++ .../src/views/TreeView.tsx | 3 +- .../src/views/TreeView.types.ts | 2 + 12 files changed, 226 insertions(+), 2 deletions(-) create mode 100644 doc/adrs/116_add_support_for_changing_the_content_of_the_explorer.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/CHANGELOG.adoc b/CHANGELOG.adoc index 5e77d65c7f..f0be5cc9b4 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -16,6 +16,7 @@ - [ADR-113] Add support for multiple IObjectService - [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 === Breaking changes @@ -115,6 +116,7 @@ That includes the support during the direct edit. 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 === Improvements diff --git a/doc/adrs/116_add_support_for_changing_the_content_of_the_explorer.adoc b/doc/adrs/116_add_support_for_changing_the_content_of_the_explorer.adoc new file mode 100644 index 0000000000..3da665a707 --- /dev/null +++ b/doc/adrs/116_add_support_for_changing_the_content_of_the_explorer.adoc @@ -0,0 +1,97 @@ += ADR-115 - Add support for changing the content of the explorer + +== Context + +The Explorer view displays the same version of a tree to all subscribers. +There is no way for the frontend to change the tree for a specific subscriber. + +== 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 +---- + +A sirius consumer may encapsulate its components in a ExplorerViewConfiguration which will provide the required filters. + +[source,typescript] +---- + + + +---- + +== Status + +Accepted + +== 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..9ae4bb7ba4 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 @@ -43,6 +43,9 @@ export const ModelBrowserTreeView = ({ const classes = useTreeStyle(); const [state, setState] = useState({ filterBarText: '' }); + const converter = { + convert: (tree) => tree, + }; return ( <> @@ -68,6 +71,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..32e6f755da --- /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 { ExplorerViewConfigurationProps, UseExplorerViewConfigurationValue } from './ExplorerViewConfiguration.types'; +import { ExplorerViewContext } from './ExplorerViewContext'; + +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..141a17b61e --- /dev/null +++ b/packages/trees/frontend/sirius-components-trees/src/views/ExplorerViewContext.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 { 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 ? (