Add NavigationBar contributions extension points

wpiers · Jun 5, 2024 · 3abf6bd · 3abf6bd
1 parent 23812fe
commit 3abf6bd
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 3 deletions.
diff --git a/packages/sirius-web/frontend/sirius-web-application/src/index.ts b/packages/sirius-web/frontend/sirius-web-application/src/index.ts
@@ -30,7 +30,9 @@ export {
 export { type NavigationBarIconProps, type NavigationBarMenuProps } 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: {
@@ -64,6 +69,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 +85,15 @@ export const NavigationBar = ({ children }: NavigationBarProps) => {
                 </IconButton>
               </Link>
             </Tooltip>
+            {leftContributions.map(({ Component: LeftContribution }, index) => (
+              <LeftContribution key={index} />
+            ))}
           </div>
           {children}
           <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,
+  };