[4404] Make navigation bar home button fully customizable

* Add 'navigationBarHomeExtensionPoint' which relies on
'navigationBarIconExtensionPoint'. This extension point allows
contributing an arbitrary React component for the top left part of the
navigation bar. It defaults to the same behavior a previously: the
Sirius logo is used as a round button that links to the homepage of the
application.
* Fix corresponding shape and ADR to remove the notion that
'navigationBarIconExtensionPoint' would get deleted.
* Document the new extension point in the changelog. Also add
reference to the shape and ADR that were made for this change.
* Add a few missing type annotations.

Bug: #4404
Signed-off-by: Florent Latombe <[email protected]>

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

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
 

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.

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,

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) => {
       <AppBar position="static">
         <Toolbar className={classes.toolbar} variant="dense">
           <div className={classes.left}>
-            <Tooltip title="Back to the homepage">
-              <Link component={RouterLink} to="/" className={classes.link} color="inherit">
-                <IconButton className={classes.onDarkBackground} color="inherit">
-                  <Icon />
-                </IconButton>
-              </Link>
-            </Tooltip>
+            <NavigationBarHome />
             {leftContributions.map(({ Component: LeftContribution }, index) => (
               <LeftContribution key={index} />
             ))}

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 {}

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) => <SiriusIcon fontSize="large" />;
+export const navigationBarHomeExtensionPoint: ComponentExtensionPoint<NavigationBarProps> = {
+  identifier: 'navigationBar#home',
+  FallbackComponent: SiriusWebNavigationBarHome,
+};
 
 export const navigationBarIconExtensionPoint: ComponentExtensionPoint<NavigationBarIconProps> = {
   identifier: 'navigationBar#icon',
-  FallbackComponent: NavigationBarIcon,
+  FallbackComponent: SiriusWebNavigationBarIcon,
 };
 
 export const navigationBarLeftContributionExtensionPoint: ComponentExtensionPoint<NavigationBarLeftContributionProps> =

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> = ({}: NavigationBarHomeProps) => {
+  const { classes } = useNavigationBarStyles();
+  const { Component: Icon } = useComponent(navigationBarIconExtensionPoint);
+
+  return (
+    <Tooltip title="Back to the homepage">
+      <Link component={RouterLink} to="/" className={classes.link} color="inherit">
+        <IconButton className={classes.onDarkBackground} color="inherit">
+          <Icon />
+        </IconButton>
+      </Link>
+    </Tooltip>
+  );
+};

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 <SiriusIcon fontSize="large" />;
+};