[4404] Make navigation bar home button fully customizable (WIP)

* Replace extension point 'navigationBarIconExtensionPoint' with 'navigationBarHomeExtensionPoint'. * The former required an Icon to be provided, and defaulted to the Sirius icon. * The latter requires an arbitrary React component. The default implementation provides the same behavior as previously: the Sirius icon is used as a round button that links to the homepage of the application. * TODO: check tests * Document the extension point change 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]>
eclipse-sirius · Jan 15, 2025 · 5d46f3b · 5d46f3b
1 parent 5b0440c
commit 5d46f3b
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 26 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -11,19 +11,23 @@
 - 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
 
 
 === Breaking changes
 
+- https://github.com/eclipse-sirius/sirius-web/issues/4404[#4404] [sirius-web] The `navigationBarIconExtensionPoint` extension point has been removed.
+Use the new `navigationBarHomeExtensionPoint` instead which allows the contribution of an arbitrary React component instead of just an Icon.
+See `SiriusWebNavigationBarHome` in module `NavigationBar` for the default implementation, which can be used as an example implementation for your own application.
 
 === Dependency update
 

diff --git a/packages/sirius-web/frontend/sirius-web-application/src/index.ts b/packages/sirius-web/frontend/sirius-web-application/src/index.ts
@@ -40,13 +40,13 @@ 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 NavigationBarIconProps,
+  type NavigationBarHomeProps,
   type NavigationBarLeftContributionProps,
   type NavigationBarProps,
   type NavigationBarRightContributionProps,
 } from './navigationBar/NavigationBar.types';
 export {
-  navigationBarIconExtensionPoint,
+  navigationBarHomeExtensionPoint,
   navigationBarLeftContributionExtensionPoint,
   navigationBarRightContributionExtensionPoint,
 } from './navigationBar/NavigationBarExtensionPoints';

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
@@ -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
@@ -16,18 +16,19 @@ 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 { emphasize, Theme } from '@mui/material/styles';
 import { Link as RouterLink } from 'react-router-dom';
 import { makeStyles } from 'tss-react/mui';
-import { NavigationBarProps } from './NavigationBar.types';
+import { SiriusIcon } from '../core/SiriusIcon';
+import { NavigationBarHomeProps, NavigationBarProps } from './NavigationBar.types';
 import {
-  navigationBarIconExtensionPoint,
+  navigationBarHomeExtensionPoint,
   navigationBarLeftContributionExtensionPoint,
   navigationBarRightContributionExtensionPoint,
 } from './NavigationBarExtensionPoints';
 import { NavigationBarMenu } from './NavigationBarMenu';
 
-const useNavigationBarStyles = makeStyles()((theme) => ({
+const useNavigationBarStyles = makeStyles()((theme: Theme) => ({
   navbar: {
     display: 'flex',
     flexDirection: 'column',
@@ -66,10 +67,24 @@ const useNavigationBarStyles = makeStyles()((theme) => ({
   },
 }));
 
+export const SiriusWebNavigationBarHome: React.ComponentType<NavigationBarHomeProps> = ({}: NavigationBarHomeProps) => {
+  const { classes } = useNavigationBarStyles();
+
+  return (
+    <Tooltip title="Back to the homepage2">
+      <Link component={RouterLink} to="/" className={classes.link} color="inherit">
+        <IconButton className={classes.onDarkBackground} color="inherit">
+          <SiriusIcon fontSize="large" />
+        </IconButton>
+      </Link>
+    </Tooltip>
+  );
+};
+
 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 +95,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} />
             ))}

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
@@ -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,7 +17,7 @@ export interface NavigationBarProps {
   children?: ReactNode;
 }
 
-export interface NavigationBarIconProps {}
+export interface NavigationBarHomeProps {}
 
 export interface NavigationBarLeftContributionProps {}
 

diff --git a/...us-web/frontend/sirius-web-application/src/navigationBar/NavigationBarExtensionPoints.tsx b/...us-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,16 @@
  *******************************************************************************/
 
 import { ComponentExtensionPoint } from '@eclipse-sirius/sirius-components-core';
-import { SiriusIcon } from '../core/SiriusIcon';
+import { SiriusWebNavigationBarHome } from './NavigationBar';
 import {
-  NavigationBarIconProps,
   NavigationBarLeftContributionProps,
+  NavigationBarProps,
   NavigationBarRightContributionProps,
 } from './NavigationBar.types';
 
-const NavigationBarIcon = ({}: NavigationBarIconProps) => <SiriusIcon fontSize="large" />;
-
-export const navigationBarIconExtensionPoint: ComponentExtensionPoint<NavigationBarIconProps> = {
-  identifier: 'navigationBar#icon',
-  FallbackComponent: NavigationBarIcon,
+export const navigationBarHomeExtensionPoint: ComponentExtensionPoint<NavigationBarProps> = {
+  identifier: 'navigationBarHome',
+  FallbackComponent: SiriusWebNavigationBarHome,
 };
 
 export const navigationBarLeftContributionExtensionPoint: ComponentExtensionPoint<NavigationBarLeftContributionProps> =