Skip to content

Commit

Permalink
[2568] Allow explorer to change its content
Browse files Browse the repository at this point in the history
  • Loading branch information
wpiers committed Nov 14, 2023
1 parent 26337b2 commit e1c43f3
Show file tree
Hide file tree
Showing 12 changed files with 248 additions and 2 deletions.
11 changes: 11 additions & 0 deletions .project
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>sirius-components</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
</buildSpec>
<natures>
</natures>
</projectDescription>
97 changes: 97 additions & 0 deletions doc/adrs/115_allow_explorer_to_change_its_content.adoc
Original file line number Diff line number Diff line change
@@ -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.
17 changes: 17 additions & 0 deletions packages/.project
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>packages</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>org.eclipse.m2e.core.maven2Builder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>org.eclipse.m2e.core.maven2Nature</nature>
</natures>
</projectDescription>
5 changes: 4 additions & 1 deletion packages/trees/frontend/sirius-components-trees/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Original file line number Diff line number Diff line change
Expand Up @@ -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) => ({
Expand All @@ -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,
Expand Down Expand Up @@ -107,6 +109,7 @@ export const ExplorerView = (props: WorkbenchViewComponentProps) => {
{filterBar}
<TreeView
{...props}
converter={converter}
treeId="explorer://"
enableMultiSelection={true}
synchronizedWithSelection={state.synchronizedWithSelection}
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
};
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { TreeConverter } from "./TreeConverter.types";

/*******************************************************************************
* 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';

export interface ExplorerViewConfigurationProps {
converter: TreeConverter;
children: ReactNode;
}

export interface UseExplorerViewConfigurationValue {
converter: TreeConverter;
}
Original file line number Diff line number Diff line change
@@ -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);
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ export const TreeView = ({
textToHighlight,
textToFilter,
markedItemIds = [],
converter,
}: TreeViewComponentProps) => {
const [{ value, context }, dispatch] = useMachine<TreeViewContext, TreeViewEvent>(treeViewMachine, {
context: {
Expand Down Expand Up @@ -217,7 +218,7 @@ export const TreeView = ({
{tree ? (
<Tree
editingContextId={editingContextId}
tree={tree}
tree={converter.convert(tree)}
onExpand={onExpand}
onExpandAll={onExpandAll}
selection={selection}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
*******************************************************************************/

import { WorkbenchViewComponentProps } from '@eclipse-sirius/sirius-components-core';
import { TreeConverter } from './TreeConverter.types';

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

export interface GQLTreeEventVariables {
Expand Down

0 comments on commit e1c43f3

Please sign in to comment.