diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index faff5982d9..061a806881 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -11,13 +11,14 @@ - Add loading indicators for long actions - Add impact analysis before tool execution - Add support for artifact publication from a project - +- Support custom navigation bar === Architectural decision records - [ADR-178] Add support of actions in table row menu - [ADR-179] Add support for artifact publication from a project - [ADR-180] Add support for widget diagnostics provider in View-based Forms +- [ADR-181] Make Navigation Bar extension point more flexible === Deprecation warning @@ -64,6 +65,9 @@ Some log messages have been updated in order to provide more information and mak The configuration property `sirius.web.graphql.tracing` has also been added to active the tracing mode of the GraphQL API. It can be activated using `sirius.web.graphql.tracing=true` since it is not enabled by default to not have any impact on the performance of the application. Some additional log has also been contributed on the frontend in order to view more easily the order and time of the GraphQL requests and responses. +- https://github.com/eclipse-sirius/sirius-web/issues/4404[#4404] [sirius-web] Add extension point `navigationBarHomeExtensionPoint`. +It allows the customizing the top left corner part of the navigation bar using an arbitrary React component. +See `SiriusWebNavigationBarHome` in module `NavigationBarHome` for the default implementation, which can be used as an example implementation. === Improvements diff --git a/doc/adrs/181_support_custom_navigation_bar.adoc b/doc/adrs/181_support_custom_navigation_bar.adoc index 48acf9a21c..54839466df 100644 --- a/doc/adrs/181_support_custom_navigation_bar.adoc +++ b/doc/adrs/181_support_custom_navigation_bar.adoc @@ -11,14 +11,16 @@ Downstream applications (e.g. SysON-based applications) may require a more flexi == Decision -We will remove current extension point `navigationBarIconExtensionPoint`. -We will add a new extension point `navigationBarIconExtensionPoint` through which downstream applications may provide an arbitrary React component to use as their navigation bar left-most component. +We will leave current extension point `navigationBarIconExtensionPoint` as is. + +We will add a new extension point `navigationBarHomeExtensionPoint` through which downstream applications may provide an arbitrary React component to use as their navigation bar left-most component. +Its default implementation will include the usage of the icon provided through `navigationBarIconExtensionPoint`. Other parts of the navigation bar ('left' and 'right' contributions) will not be impacted. == Status -Proposed. +Accepted. == Consequences diff --git a/doc/iterations/2025.2/support_custom_navigation_bar.adoc b/doc/iterations/2025.2/support_custom_navigation_bar.adoc index 5268a13506..86cfeebc4f 100644 --- a/doc/iterations/2025.2/support_custom_navigation_bar.adoc +++ b/doc/iterations/2025.2/support_custom_navigation_bar.adoc @@ -16,5 +16,4 @@ Downstream applications need a more flexible way of customizing that part of the == Solution -* Extension point `navigationBarIconExtensionPoint` is removed. * A new extension point allows extenders to provide their own component in place of the current one in the navigation bar. \ No newline at end of file diff --git a/packages/sirius-web/frontend/sirius-web-application/src/index.ts b/packages/sirius-web/frontend/sirius-web-application/src/index.ts index 54d9973449..5ed2d7eab8 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/index.ts +++ b/packages/sirius-web/frontend/sirius-web-application/src/index.ts @@ -40,12 +40,14 @@ export { NewRootObjectModal } from './modals/new-root-object/NewRootObjectModal' export { type NewRootObjectModalProps } from './modals/new-root-object/NewRootObjectModal.types'; export { NavigationBar } from './navigationBar/NavigationBar'; export { + type NavigationBarHomeProps, type NavigationBarIconProps, type NavigationBarLeftContributionProps, type NavigationBarProps, type NavigationBarRightContributionProps, } from './navigationBar/NavigationBar.types'; export { + navigationBarHomeExtensionPoint, navigationBarIconExtensionPoint, navigationBarLeftContributionExtensionPoint, navigationBarRightContributionExtensionPoint, diff --git a/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBar.tsx b/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBar.tsx index 0ef2627c5f..4fceebde17 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBar.tsx +++ b/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBar.tsx @@ -1,5 +1,5 @@ /******************************************************************************* - * Copyright (c) 2021, 2024 Obeo. + * Copyright (c) 2021, 2025 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 @@ -12,22 +12,18 @@ *******************************************************************************/ import { useComponent, useComponents } from '@eclipse-sirius/sirius-components-core'; import AppBar from '@mui/material/AppBar'; -import IconButton from '@mui/material/IconButton'; -import Link from '@mui/material/Link'; import Toolbar from '@mui/material/Toolbar'; -import Tooltip from '@mui/material/Tooltip'; -import { emphasize } from '@mui/material/styles'; -import { Link as RouterLink } from 'react-router-dom'; +import { emphasize, Theme } from '@mui/material/styles'; import { makeStyles } from 'tss-react/mui'; import { NavigationBarProps } from './NavigationBar.types'; import { - navigationBarIconExtensionPoint, + navigationBarHomeExtensionPoint, navigationBarLeftContributionExtensionPoint, navigationBarRightContributionExtensionPoint, } from './NavigationBarExtensionPoints'; import { NavigationBarMenu } from './NavigationBarMenu'; -const useNavigationBarStyles = makeStyles()((theme) => ({ +export const useNavigationBarStyles = makeStyles()((theme: Theme) => ({ navbar: { display: 'flex', flexDirection: 'column', @@ -69,8 +65,7 @@ const useNavigationBarStyles = makeStyles()((theme) => ({ export const NavigationBar = ({ children }: NavigationBarProps) => { const { classes } = useNavigationBarStyles(); - const { Component: Icon } = useComponent(navigationBarIconExtensionPoint); - + const { Component: NavigationBarHome } = useComponent(navigationBarHomeExtensionPoint); const leftContributions = useComponents(navigationBarLeftContributionExtensionPoint); const rightContributions = useComponents(navigationBarRightContributionExtensionPoint); @@ -80,13 +75,7 @@ export const NavigationBar = ({ children }: NavigationBarProps) => {
- - - - - - - + {leftContributions.map(({ Component: LeftContribution }, index) => ( ))} diff --git a/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBar.types.ts b/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBar.types.ts index 98fff00b94..eff9a9f782 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBar.types.ts +++ b/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBar.types.ts @@ -1,5 +1,5 @@ /******************************************************************************* - * Copyright (c) 2021, 2024 Obeo. + * Copyright (c) 2021, 2025 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 @@ -17,6 +17,8 @@ export interface NavigationBarProps { children?: ReactNode; } +export interface NavigationBarHomeProps {} + export interface NavigationBarIconProps {} export interface NavigationBarLeftContributionProps {} diff --git a/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBarExtensionPoints.tsx b/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBarExtensionPoints.tsx index 840e6c5727..b63a7c32a1 100644 --- a/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBarExtensionPoints.tsx +++ b/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBarExtensionPoints.tsx @@ -1,5 +1,5 @@ /******************************************************************************* - * Copyright (c) 2021, 2024 Obeo. + * Copyright (c) 2021, 2025 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 @@ -12,18 +12,23 @@ *******************************************************************************/ import { ComponentExtensionPoint } from '@eclipse-sirius/sirius-components-core'; -import { SiriusIcon } from '../core/SiriusIcon'; import { NavigationBarIconProps, NavigationBarLeftContributionProps, + NavigationBarProps, NavigationBarRightContributionProps, } from './NavigationBar.types'; +import { SiriusWebNavigationBarHome } from './NavigationBarHome'; +import { SiriusWebNavigationBarIcon } from './NavigationBarIcon'; -const NavigationBarIcon = ({}: NavigationBarIconProps) => ; +export const navigationBarHomeExtensionPoint: ComponentExtensionPoint = { + identifier: 'navigationBar#home', + FallbackComponent: SiriusWebNavigationBarHome, +}; export const navigationBarIconExtensionPoint: ComponentExtensionPoint = { identifier: 'navigationBar#icon', - FallbackComponent: NavigationBarIcon, + FallbackComponent: SiriusWebNavigationBarIcon, }; export const navigationBarLeftContributionExtensionPoint: ComponentExtensionPoint = diff --git a/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBarHome.tsx b/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBarHome.tsx new file mode 100644 index 0000000000..cacfa99cbd --- /dev/null +++ b/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBarHome.tsx @@ -0,0 +1,36 @@ +/******************************************************************************* + * Copyright (c) 2025 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 { useComponent } from '@eclipse-sirius/sirius-components-core'; +import IconButton from '@mui/material/IconButton'; +import Link from '@mui/material/Link'; +import Tooltip from '@mui/material/Tooltip'; +import { Link as RouterLink } from 'react-router-dom'; +import { useNavigationBarStyles } from './NavigationBar'; +import { NavigationBarHomeProps } from './NavigationBar.types'; +import { navigationBarIconExtensionPoint } from './NavigationBarExtensionPoints'; + +export const SiriusWebNavigationBarHome: React.ComponentType = ({}: NavigationBarHomeProps) => { + const { classes } = useNavigationBarStyles(); + const { Component: Icon } = useComponent(navigationBarIconExtensionPoint); + + return ( + + + + + + + + ); +}; diff --git a/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBarIcon.tsx b/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBarIcon.tsx new file mode 100644 index 0000000000..6ea730a8e1 --- /dev/null +++ b/packages/sirius-web/frontend/sirius-web-application/src/navigationBar/NavigationBarIcon.tsx @@ -0,0 +1,19 @@ +/******************************************************************************* + * Copyright (c) 2025 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 { SiriusIcon } from '../core/SiriusIcon'; +import { NavigationBarIconProps } from './NavigationBar.types'; + +export const SiriusWebNavigationBarIcon = ({}: NavigationBarIconProps) => { + return ; +};