diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index e91b67e366..a24caf6d2c 100644 --- 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 index c089d59c8c..2327a04be7 100644 --- 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 index 1ed4cca5b9..4359908a6f 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 @@ -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 (
@@ -78,9 +84,15 @@ export const NavigationBar = ({ children }: NavigationBarProps) => { + {leftContributions.map(({ Component: LeftContribution }, index) => ( + + ))}
- {children} +
{children}
+ {rightContributions.map(({ Component: RightContribution }, 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 3ba20539e1..7ae30c4797 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 @@ -20,3 +20,7 @@ export interface NavigationBarProps { export interface NavigationBarIconProps {} export interface NavigationBarMenuProps {} + +export interface NavigationBarLeftContributionProps {} + +export interface NavigationBarRightContributionProps {} 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 7a0e53f415..7a088e6832 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 @@ -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) => ; const NavigationBarMenu = ({}: NavigationBarMenuProps) => ; @@ -28,3 +33,15 @@ export const navigationBarMenuExtensionPoint: ComponentExtensionPoint = + { + identifier: 'navigationBar#leftContributions', + FallbackComponent: () => null, + }; + +export const navigationBarRightContributionExtensionPoint: ComponentExtensionPoint = + { + identifier: 'navigationBar#rightContributions', + FallbackComponent: () => null, + };