[3563] Add NavigationBar extension points

Bug: eclipse-sirius#3563 Signed-off-by: William Piers <[email protected]>
wpiers · Jun 6, 2024 · bd6836b · bd6836b
1 parent 23812fe
commit bd6836b
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 8 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -40,6 +40,7 @@
 - https://github.com/eclipse-sirius/sirius-web/issues/3447[#3447] [view] Add support for For construct in the operations DSL
 - https://github.com/eclipse-sirius/sirius-web/issues/3550[#3550] [core] Add ExtensionRegistry merge strategy
 - https://github.com/eclipse-sirius/sirius-web/issues/3557[#3550] [app] Add ProjectSettings tab extension point
+- https://github.com/eclipse-sirius/sirius-web/issues/3557[#3563] [app] Improve NavigationBar extensibility
 
 === Improvements
 

diff --git a/packages/sirius-web/frontend/sirius-web-application/src/index.ts b/packages/sirius-web/frontend/sirius-web-application/src/index.ts
@@ -27,10 +27,17 @@ export {
   httpOptionsConfigurersExtensionPoint,
   webSocketOptionsConfigurersExtensionPoint,
 } from './graphql/useCreateApolloClientExtensionPoints';
-export { type NavigationBarIconProps, type NavigationBarMenuProps } from './navigationBar/NavigationBar.types';
+export {
+  type NavigationBarIconProps,
+  type NavigationBarLeftContributionProps,
+  type NavigationBarMenuProps,
+  type NavigationBarRightContributionProps,
+} from './navigationBar/NavigationBar.types';
 export {
   navigationBarIconExtensionPoint,
+  navigationBarLeftContributionExtensionPoint,
   navigationBarMenuExtensionPoint,
+  navigationBarRightContributionExtensionPoint,
 } from './navigationBar/NavigationBarExtensionPoints';
 export { routerExtensionPoint } from './router/RouterExtensionPoints';
 export { projectActionButtonMenuItemExtensionPoint } from './views/project-browser/list-projects-area/ProjectActionButtonExtensionPoints';

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
@@ -10,7 +10,7 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { useComponent } from '@eclipse-sirius/sirius-components-core';
+import { useComponent, useComponents } from '@eclipse-sirius/sirius-components-core';
 import AppBar from '@material-ui/core/AppBar';
 import IconButton from '@material-ui/core/IconButton';
 import Link from '@material-ui/core/Link';
@@ -19,7 +19,12 @@ import Tooltip from '@material-ui/core/Tooltip';
 import { emphasize, makeStyles } from '@material-ui/core/styles';
 import { Link as RouterLink } from 'react-router-dom';
 import { NavigationBarProps } from './NavigationBar.types';
-import { navigationBarIconExtensionPoint, navigationBarMenuExtensionPoint } from './NavigationBarExtensionPoints';
+import {
+  navigationBarIconExtensionPoint,
+  navigationBarLeftContributionExtensionPoint,
+  navigationBarMenuExtensionPoint,
+  navigationBarRightContributionExtensionPoint,
+} from './NavigationBarExtensionPoints';
 
 const useNavigationBarStyles = makeStyles((theme) => ({
   navbar: {
@@ -31,9 +36,8 @@ const useNavigationBarStyles = makeStyles((theme) => ({
     backgroundColor: theme.palette.navigationBar.border,
   },
   toolbar: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
+    display: 'grid',
+    gridTemplateColumns: '1fr min-content 1fr',
     backgroundColor: theme.palette.navigationBar.background,
   },
   left: {
@@ -64,6 +68,8 @@ export const NavigationBar = ({ children }: NavigationBarProps) => {
 
   const { Component: Icon } = useComponent(navigationBarIconExtensionPoint);
   const { Component: Menu } = useComponent(navigationBarMenuExtensionPoint);
+  const leftContributions = useComponents(navigationBarLeftContributionExtensionPoint);
+  const rightContributions = useComponents(navigationBarRightContributionExtensionPoint);
 
   return (
     <div className={classes.navbar}>
@@ -78,9 +84,15 @@ export const NavigationBar = ({ children }: NavigationBarProps) => {
                 </IconButton>
               </Link>
             </Tooltip>
+            {leftContributions.map(({ Component: LeftContribution }, index) => (
+              <LeftContribution key={index} />
+            ))}
           </div>
-          {children}
+          <div>{children}</div>
           <div className={classes.right}>
+            {rightContributions.map(({ Component: RightContribution }, index) => (
+              <RightContribution key={index} />
+            ))}
             <Menu />
           </div>
         </Toolbar>

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
@@ -20,3 +20,7 @@ export interface NavigationBarProps {
 export interface NavigationBarIconProps {}
 
 export interface NavigationBarMenuProps {}
+
+export interface NavigationBarLeftContributionProps {}
+
+export interface NavigationBarRightContributionProps {}
diff --git a/...us-web/frontend/sirius-web-application/src/navigationBar/NavigationBarExtensionPoints.tsx b/...us-web/frontend/sirius-web-application/src/navigationBar/NavigationBarExtensionPoints.tsx
@@ -14,7 +14,12 @@
 import { ComponentExtensionPoint } from '@eclipse-sirius/sirius-components-core';
 import { SiriusIcon } from '../core/SiriusIcon';
 import { Help } from './Help';
-import { NavigationBarIconProps, NavigationBarMenuProps } from './NavigationBar.types';
+import {
+  NavigationBarIconProps,
+  NavigationBarLeftContributionProps,
+  NavigationBarMenuProps,
+  NavigationBarRightContributionProps,
+} from './NavigationBar.types';
 
 const NavigationBarIcon = ({}: NavigationBarIconProps) => <SiriusIcon fontSize="large" />;
 const NavigationBarMenu = ({}: NavigationBarMenuProps) => <Help />;
@@ -28,3 +33,15 @@ export const navigationBarMenuExtensionPoint: ComponentExtensionPoint<Navigation
   identifier: 'navigationBar#menu',
   FallbackComponent: NavigationBarMenu,
 };
+
+export const navigationBarLeftContributionExtensionPoint: ComponentExtensionPoint<NavigationBarLeftContributionProps> =
+  {
+    identifier: 'navigationBar#leftContributions',
+    FallbackComponent: () => null,
+  };
+
+export const navigationBarRightContributionExtensionPoint: ComponentExtensionPoint<NavigationBarRightContributionProps> =
+  {
+    identifier: 'navigationBar#rightContributions',
+    FallbackComponent: () => null,
+  };